/* ============================================================
   litlink boost! — Shared Components
   P3-B: Google Fonts / tokens.css の @import はこのファイル自体の
   ダウンロード・パースが終わるまで発見されず直列に読み込まれるため、各HTMLの
   <head>で<link>による並列読み込みに変更した（tokens.cssはこのファイルより前に
   読み込む順序を維持）。読み込み側: creator/client/ops/index.html の<head>を参照。
   ============================================================ */

/* トークン追加。
   tokens.css（編集範囲外）とは別に、このファイルへ追加する。
   z-indexの直書き（ops/index.html）はこのベーストークン+加算(calc)で置換し、
   加算値は変換前の絶対値と一致させることで重なり順の現状動作を変えない。 */
:root {
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  /* ops/index.html のモーダル系border-radius(12/14/16/22px混在)の統一先 */
  --radius-modal: 24px;

  /* トークン追加。
     ops/index.html <style>ブロック内のハードコード値をこれらの変数へ置換する第一弾。
     tokens.css（同じく編集範囲外）とは独立して定義する。既存の --sp- 系 / --r- 系 / --violet系
     （tokens.css）は変更しない＝この変更だけでは既存の見た目は変わらない（変数追加のみ）。
     ※コメント内に「アスタリスク+スラッシュ」の並びを書くとコメントが早期終了しパース破壊するため表記注意 */
  /* ── Type scale（DESIGN_RULES TYP-002。ops/index.html側で個別に参照する） ── */
  --fs-page-title: 32px;
  --lh-page-title: 40px;
  --fs-section-title: 24px;
  --lh-section-title: 32px;
  --fs-card-title: 18px;
  --lh-card-title: 26px;

  /* ── Semantic colors（DESIGN_RULES CLR-002。tokens.cssの--success/--warning/--danger/--info
     とは別名で追加し、DESIGN_RULES規範値ちょうどを持たせる。既存--success等は変更しない
     （client/creator/opsの他箇所が参照しており置換対象外のため）。 ── */
  --color-info: #005FCC;
  --color-info-bg: #EEF5FF;
  --color-success: #067647;
  --color-success-bg: #ECFDF3;
  --color-warning: #9A6700;
  --color-warning-bg: #FFF8E1;
  --color-danger: #B42318;
  --color-danger-bg: #FEF3F2;

  /* ── Radius。--radius-modal=24px。 ── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-panel: 18px;
  --radius-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-full); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 12px var(--sp-6);
  border-radius: var(--r-full);
  font-size: 15px; font-weight: 700;
  letter-spacing: -.01em;
  transition: transform var(--dur-fast) var(--ease-bounce),
              box-shadow var(--dur-base) var(--ease-spring);
  user-select: none;
}
.btn:active { transform: scale(.96); }

/* primaryは「セクション内主アクション」の黒塗り階層であり、
   hero（グラデ・1画面1個）やアクティブ状態の表現と混同できてはならない。従来のviolet塗り＋グロー影は
   hero専用の見た目とops内の.topbar-btn.primary/.filter-tab.activeの3者で使い回されており、
   同じ見た目が別の意味に流用されるCOGL-005違反の主因だった。黒塗り仕様（#111827）へ統一する。
   影響範囲: このクラスはclient/index.htmlでも承認/保存/送信等で使われ同じ配色変更が波及するが、
   client側のコード内コメント（例: 「primary(黒)へ降格」）は既に黒primaryを前提として書かれており、
   本変更はその既定路線に追従するもの（client/ops/creator共通の規範のため）。
   creator/index.htmlはcreator-feminine.css側の.btn-primary上書きがこのファイルより後に読み込まれ
   常に勝つため無影響（要目視確認済み）。 */
.btn-primary {
  background: #111827;
  color: #fff;
  box-shadow: none;
}
.btn-primary:hover { opacity: .85; }
/* disabledは「押せない」と一目で分かる見た目に統一（塗り色のままopacityを下げるだけは禁止） */
.btn-primary:disabled, .btn-primary.is-disabled {
  background: #E5E7EB; color: #9CA3AF; box-shadow: none; cursor: not-allowed;
}
.btn-primary:disabled:hover, .btn-primary.is-disabled:hover { background: #E5E7EB; box-shadow: none; opacity: 1; }

.btn-ghost {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--violet); }

.btn-danger { background: var(--danger); color: #fff; }

.btn-lg { padding: 16px 32px; font-size: 17px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-full { width: 100%; }
.btn-icon { padding: 10px; border-radius: var(--r-md); aspect-ratio: 1; }

/* .action-btn は client/creator/ops 共通で使われるがCSS定義が
   どのスタイルシートにも存在しなかった（クリック可能なテキストにしか見えない不具合）。
   サブアクション用の枠線ボタンとして定義する。 */
.action-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
  background: var(--bg-surface, var(--bg-elevated));
  color: var(--text-primary);
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.action-btn:hover { background: var(--bg-elevated); border-color: var(--violet); }
.action-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.action-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ボタンは3階層のみ
   primary（塗り）/secondary（枠線）/ghost（テキスト）とする正式な secondary 階層名。
   .action-btn（上記）と同一の視覚（枠線・中立背景）を持たせ、置換しても見た目が変わらないように
   している。.action-btn は当面の移行元として併存し、画面単位で .btn-secondary へ順次置換する
   （40箇所超あるため一括置換はしない）。新規実装は必ず .btn-secondary を使うこと。 */
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
  background: var(--bg-surface, var(--bg-elevated));
  color: var(--text-primary);
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.btn-secondary:hover { background: var(--bg-elevated); border-color: var(--violet); }
.btn-secondary:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.btn-secondary:disabled { opacity: .5; cursor: not-allowed; }
/* ': .action-btn.danger と同じ危険操作の見た目を.btn-secondary側にも
   用意し、停止/返金など「危険操作だが階層はsecondary」のボタンを見た目を変えずに移行できるようにする。 */
.btn-secondary.danger:hover { border-color: var(--danger); color: var(--danger); }

/* ============================================================
   R4: PC対応（ops案件一覧/opsクリエイター一覧に段階適用）
   右ドロワー詳細・行高切替・テーブル→カード変換・数値列右揃え。
   creator（<table>不使用）には影響しない。
   ============================================================ */

/* ── 数値列: 右揃え+tabular-nums（既存 class="num" が実は未定義だった欠落分を実装） ── */
table td.num, table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── 行高切替（comfortable 52px / compact 40px）。属性なし＝従来のtd/th paddingのまま ── */
.data-table-wrap[data-density="compact"] table td,
.data-table-wrap[data-density="compact"] table th { padding-top: 10px; padding-bottom: 10px; }
.data-table-wrap[data-density="comfortable"] table td,
.data-table-wrap[data-density="comfortable"] table th { padding-top: 16px; padding-bottom: 16px; }
.row-density-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.row-density-btn {
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--bg-elevated); color: var(--text-secondary); border: none;
  border-right: 1px solid var(--border);
}
.row-density-btn:last-child { border-right: none; }
.row-density-btn.active { background: var(--violet); color: #fff; }

/* ── 選択行ハイライト（現在地。右ドロワー表示中の左リスト選択を維持。選択状態＝キーカラー許可箇所） ── */
.camp-row-link.row-selected td, .cr-row-link.row-selected td, .payout-row-link.row-selected td { background: var(--violet-trace); }
.camp-row-link.row-selected td:first-child, .cr-row-link.row-selected td:first-child, .payout-row-link.row-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--violet);
}
/* 支払い待ちテーブルの行クリック→右ドロワー（≥1280pxのみ、payoutRowClick）。
   <1280pxは行内ボタンのみで従来通り＝ポインタ演出も同じ幅で切る（hover専用機能禁止に合わせ、
   クリックできない幅でカーソルだけ変えるのを避ける）。 */
.payout-row-link { cursor: default; }
@media (min-width: 1280px) {
  .payout-row-link { cursor: pointer; }
  .payout-row-link:hover td { background: var(--bg-elevated); }
}
/* PC対応 : <table>行でないカード型の一覧（ops提出審査/応募審査・client提出
   プレビュー）向けの汎用フォールバック。上のtd背景方式は<table>専用のため、カードには枠線で同じ
   意味（選択状態=キーカラー許可箇所）を表す。 */
.approval-card.row-selected, .cq-card.row-selected,
.data-table-wrap.row-selected, .cl-review-card.row-selected {
  outline: 2px solid var(--violet); outline-offset: 2px;
}

/* ── ≥1280px 右ドロワー詳細（一覧行クリック→プレビュー。フル詳細は既存の遷移先へ） ── */
.row-drawer-overlay {
  /* 900 → var(--z-modal)+500（400+500=900・数値は変更しない） */
  position: fixed; inset: 0; z-index: calc(var(--z-modal) + 500); background: rgba(17,24,39,.28);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast);
}
.row-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.row-drawer {
  position: fixed; top: 0; right: 0; height: 100%; z-index: calc(var(--z-modal) + 501); /* 901のまま */
  width: 560px; max-width: 92vw;
  background: var(--bg-elevated); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--dur-base) var(--ease-snap);
}
.row-drawer.open { transform: translateX(0); }
/* #or-drawer（成果レポート案件別詳細）統合で必要になった幅修飾。
   通常の.row-drawerは560pxだが、案件別クリエイター・投稿別詳細テーブル（10列）は920px相当が要る。
   openRowDrawerの呼び出し側だけがこのクラスを付け外しする（他のドロワー呼び出しは無指定=560pxのまま）。 */
.row-drawer--wide { width: min(920px, 94vw); }
.row-drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-5); border-bottom: 1px solid var(--border);
}
.row-drawer-title { font-size: 16px; font-weight: 700; line-height: 1.4; }
.row-drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-5); }
.row-drawer-foot {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border);
}
.row-drawer-close {
  border: none; background: transparent; cursor: pointer; font-size: 18px; line-height: 1;
  color: var(--text-muted); padding: 4px 6px; border-radius: var(--r-sm);
}
.row-drawer-close:hover { color: var(--text-primary); background: var(--bg-surface); }
@media (max-width: 1279px) {
  /* 1280px未満はドロワーを使わない（行クリックは既存のフル遷移のまま）。リサイズ時の残留防止。 */
  .row-drawer, .row-drawer-overlay { display: none !important; }
}

/* ============================================================
   ops応募審査UI刷新: <1280px向け詳細ボトムシート（#p-app-screening専用）。
   ≥1280pxは上の#row-drawerを使うため、この要素はそちらと排他的に開く
   （casOpenDetailDrawer側がwindow幅で分岐。両方が同時に開くことはない）。
   head/body/footの3ゾーン構成は.row-drawer-*と揃え、フッター（承認/見送り）固定・
   本文スクロールをflexで実現する。 ============================================================ */
.cas-sheet-overlay {
  position: fixed; inset: 0; z-index: 950; background: rgba(17,24,39,.36);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast);
  display: flex; align-items: flex-end; justify-content: center;
}
.cas-sheet-overlay.open { opacity: 1; pointer-events: auto; }
.cas-sheet {
  width: 100%; max-width: 640px; height: 70vh; max-height: 88vh;
  background: var(--bg-elevated); border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform var(--dur-base) var(--ease-snap);
}
.cas-sheet-overlay.open .cas-sheet { transform: translateY(0); }
.cas-sheet-handle {
  width: 40px; height: 4px; border-radius: var(--r-full); background: var(--border);
  margin: var(--sp-3) auto 0; flex-shrink: 0;
}
.cas-sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.cas-sheet-title { font-size: 16px; font-weight: 700; line-height: 1.4; }
.cas-sheet-body { flex: 1; overflow-y: auto; padding: var(--sp-5); }
.cas-sheet-foot {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); flex-shrink: 0;
}
@media (min-width: 1280px) {
  /* ≥1280pxはドロワーを使うため、リサイズ時の残留防止でこちらを隠す */
  .cas-sheet-overlay { display: none !important; }
}
/* ドロワー/シート本文（_casDrawerBodyHtml）の共通パーツ。インラインstyle新規追加を避けるため定義。 */
.cas-drawer-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.cas-drawer-text { font-size: 13px; color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; }

/* ── ops案件ドロワー充実化: campRowClickの#row-drawer bodyを
   作業起点ダッシュボード化（現在地バー・お金・進捗・期限・直近の動き）。
   モノクロ基調＋キーカラーは現在地バーの「現在地」のみ。 ── */
.camp-drawer-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.camp-drawer-header-meta { flex: 1; min-width: 0; }
.camp-drawer-header-client {
  font-size: 12px; color: var(--text-muted); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.camp-drawer-header-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.camp-drawer-section { margin-bottom: var(--sp-5); }
.camp-drawer-section-title { font-size: var(--tu-font-size-min, 12px); font-weight: 700; color: var(--text-muted); margin-bottom: var(--sp-2); }
.camp-drawer-phase-note { font-size: 12px; color: var(--text-muted); }
.camp-drawer-phase-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-size: var(--tu-font-size-min, 12px); }
.camp-drawer-phase-step { color: var(--text-muted); padding: 3px 8px; border-radius: var(--r-full); white-space: nowrap; }
/* 現在地=キーカラー許可箇所。既存.nc-step.currentと同じ配色で統一。 */
.camp-drawer-phase-step.current { color: var(--violet); background: var(--violet-trace); font-weight: 700; }
.camp-drawer-phase-arrow { color: var(--text-muted); font-size: var(--tu-font-size-min, 12px); padding: 0 1px; }
.camp-drawer-phase-dwell { margin-top: 6px; font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); }
.camp-drawer-phase-warn { color: var(--warning, #D97706); font-weight: 700; }
.camp-drawer-kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: 13px; padding: 3px 0; }
.camp-drawer-kv-label { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }
.camp-drawer-kv-value { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.camp-drawer-danger { color: var(--danger); }
.camp-drawer-bar-block { margin-top: var(--sp-2); }
.camp-drawer-bar-label {
  display: flex; justify-content: space-between; font-size: var(--tu-font-size-min, 12px); color: var(--text-muted);
  margin-bottom: 4px; font-variant-numeric: tabular-nums;
}
.camp-drawer-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.camp-drawer-stat { border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-3); }
.camp-drawer-stat-clickable { cursor: pointer; }
.camp-drawer-stat-clickable:hover { border-color: var(--text-muted); }
.camp-drawer-stat-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.camp-drawer-stat-unit { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.camp-drawer-stat-label { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); margin-top: 2px; }
.camp-drawer-timeline-item { padding: 8px 0; border-bottom: 1px solid var(--border); }
.camp-drawer-timeline-item:last-child { border-bottom: none; }
.camp-drawer-timeline-title { font-size: 12.5px; }
.camp-drawer-timeline-meta { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); margin-top: 2px; }
.camp-drawer-timeline-empty { font-size: 12px; color: var(--text-muted); }
.camp-drawer-assignee { font-size: 12px; color: var(--text-muted); }

/* ── opsクリエイター一覧＋入金管理3テーブル＋売上・マージン分析のクリエイター別マージン表:
   <768pxでテーブル→カード変換（ラベル+値の縦積み）。
   #creator-table-wrap限定だったカード変換を、入金管理の3テーブル
   （入金待ちキュー/差異・トラブルケース/請求書）のwrap、#fin-creator-margin-wrap
   （売上・マージン分析タブ）、案件一覧（#camp-table-wrap）へ一般化した（ops/index.htmlの
   initCampaignTable()側で各<td>にdata-label属性を付与済み）。チェックボックス列（先頭固定）・sticky-col/sticky-col2は
   PC専用の横スクロール固定用スタイルのため、カード表示ではposition:staticへ戻す。
   行生成側（ops/index.html）で各<td>にdata-label属性を付与している。min-width:0はテーブルセル内の
   長い文字列がflexアイテムとして縮まずwrapを突き破る（横スクロール発生）のを防ぐ。 ── */
@media (max-width: 767px) {
  #creator-table-wrap table, #cash-in-queue-wrap table, #payment-incident-wrap table, #invoice-wrap table,
  #fin-creator-margin-wrap table, #camp-table-wrap table {
    display: block; width: 100%; min-width: 0;
  }
  #creator-table-wrap thead, #cash-in-queue-wrap thead, #payment-incident-wrap thead, #invoice-wrap thead,
  #fin-creator-margin-wrap thead, #camp-table-wrap thead { display: none; }
  #creator-table-wrap tbody, #cash-in-queue-wrap tbody, #payment-incident-wrap tbody, #invoice-wrap tbody,
  #fin-creator-margin-wrap tbody, #camp-table-wrap tbody { display: block; }
  #creator-table-wrap tbody tr, #cash-in-queue-wrap tbody tr, #payment-incident-wrap tbody tr, #invoice-wrap tbody tr,
  #fin-creator-margin-wrap tbody tr, #camp-table-wrap tbody tr {
    display: block; border: 1px solid var(--border); border-radius: var(--r-md);
    padding: var(--sp-3); margin-bottom: var(--sp-3);
  }
  #creator-table-wrap tbody td, #cash-in-queue-wrap tbody td, #payment-incident-wrap tbody td, #invoice-wrap tbody td,
  #fin-creator-margin-wrap tbody td, #camp-table-wrap tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-width: 0;
    border-bottom: 1px dashed var(--border); padding: 8px 2px; text-align: right;
  }
  #creator-table-wrap tbody td:last-child, #cash-in-queue-wrap tbody td:last-child,
  #payment-incident-wrap tbody td:last-child, #invoice-wrap tbody td:last-child,
  #fin-creator-margin-wrap tbody td:last-child, #camp-table-wrap tbody td:last-child { border-bottom: none; }
  #creator-table-wrap tbody td::before, #cash-in-queue-wrap tbody td::before,
  #payment-incident-wrap tbody td::before, #invoice-wrap tbody td::before,
  #fin-creator-margin-wrap tbody td::before, #camp-table-wrap tbody td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: 12px; font-weight: 700; color: var(--text-muted);
  }
  /* 案件一覧固有: sticky-col/sticky-col2はPCの横スクロール固定列用（left:0/280pxで位置指定）。
     カード表示では横スクロールが無いため、position:staticに戻して幅制限も解除する。 */
  #camp-table-wrap tbody td.sticky-col, #camp-table-wrap tbody td.sticky-col2 {
    position: static; width: auto; min-width: 0; max-width: none; white-space: normal;
  }
}

/* ── Boost Glow Button（CTA: バイオレットグラデ #6464FD→#B455FD） ── */
.btn-boost {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: 0 4px 24px var(--violet-glow), 0 0 0 0 var(--violet);
  animation: pulse-glow 2s ease-in-out infinite;
  font-size: 18px; font-weight: 900;
  padding: 18px 40px;
  letter-spacing: -.02em;
}
.btn-boost:active { transform: scale(.94); }

/* ============================================================
   BOOST GAUGE COMPONENT
   ============================================================ */
.boost-gauge-wrap {
  width: 100%;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}

/* Full (2-2 ライブブースト) */
.boost-gauge-full {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.gauge-ring {
  position: absolute; inset: 0;
}
.gauge-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-ring-track { fill: none; stroke: var(--bg-elevated); stroke-width: 12; }
.gauge-ring-fill {
  fill: none; stroke-width: 12;
  stroke: var(--gauge-low);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-gauge) var(--ease-spring),
              stroke var(--dur-slow) var(--ease-spring);
}
.gauge-ring-fill.near { stroke: var(--gauge-near); filter: drop-shadow(0 0 8px var(--gauge-near)); }
.gauge-ring-fill.full { stroke: var(--gauge-full); filter: drop-shadow(0 0 12px var(--gauge-full)); }

.gauge-center {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.gauge-pct {
  font-size: clamp(48px, 14vw, 80px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--text-primary);
  transition: color var(--dur-slow);
}
.gauge-pct.near { color: var(--gauge-near); text-shadow: 0 0 24px var(--gauge-near); }
.gauge-pct.full { color: var(--gauge-full); text-shadow: 0 0 40px var(--gauge-full); }
.gauge-label { font-size: 13px; color: var(--text-secondary); font-weight: 500; letter-spacing: .04em; }
.gauge-participants {
  font-size: 12px; color: var(--text-muted);
  display: flex; align-items: center; gap: 4px;
}

/* Mini (ホーム等) */
.boost-gauge-mini {
  width: 100%; height: 8px;
  background: var(--bg-elevated);
  border-radius: var(--r-full);
  overflow: hidden;
}
.boost-gauge-mini-fill {
  height: 100%;
  background: var(--grad-cta);
  border-radius: var(--r-full);
  transition: width var(--dur-gauge) var(--ease-spring);
}
.boost-gauge-mini-fill.near { background: var(--grad-gauge); }
.boost-gauge-mini-fill.full { background: linear-gradient(90deg, var(--gauge-full), #fbbf24); }

/* Tiny (マーケット棚) */
.boost-gauge-tiny {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-secondary);
}
.boost-gauge-tiny-bar {
  flex: 1; height: 4px;
  background: var(--bg-elevated);
  border-radius: var(--r-full); overflow: hidden;
}
.boost-gauge-tiny-fill {
  height: 100%; border-radius: var(--r-full);
  background: var(--violet);
  transition: width var(--dur-gauge) var(--ease-spring);
}

/* ============================================================
   STATUS BADGE (CampaignStatusBadge)
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* 12 states: badge-approved/badge-in-progressはブランドviolet流用でsemantic 5色から逸脱していたため
   正規化。承認済み系=success（緑）、
   進行中系=info（青）へ統一。クラス名は不変のため呼び出し側（boost.js等）は無改修で追従。
   グレースケール検証: success系(recruiting/approved/achieved)は同色系だがopacity差(.15/.18/.2)＋
   ラベル文言で判別可能（1 status=1 labelが前提のため色重複は許容範囲）。info系(review/in-progress/frozen)
   もopacity差(.15/.2/.1)で判別可能。 */
.badge-draft         { background: rgba(85,85,106,.25); color: var(--text-muted); }
.badge-review        { background: rgba(56,189,248,.15); color: var(--info); }
.badge-approved      { background: rgba(34,197,94,.18); color: var(--success); }
.badge-recruiting    { background: rgba(34,197,94,.15); color: var(--success); }
.badge-in-progress   { background: rgba(56,189,248,.2); color: var(--info);
                       animation: badge-inprogress-pulse 2s ease-in-out infinite; }
.badge-submit-wait   { background: rgba(245,158,11,.15); color: var(--warning); }
.badge-review-wait   { background: rgba(245,158,11,.18); color: var(--warning); }
.badge-revision      { background: rgba(239,68,68,.15); color: var(--danger); }
.badge-achieved      { background: rgba(34,197,94,.2); color: var(--success); }
.badge-closed        { background: rgba(85,85,106,.2); color: var(--text-muted); }
.badge-canceled      { background: rgba(239,68,68,.12); color: var(--danger); opacity:.7; }
.badge-frozen        { background: rgba(56,189,248,.1); color: var(--info); opacity:.7; }
/* badge-in-progress専用の明滅グロー。旧来のpulse-glow(tokens.css)はvar(--violet-glow)固定のため
   info色化後は色が食い違う。info系の淡いグローに差し替え。 */
@keyframes badge-inprogress-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(56,189,248,.35); }
  50%      { box-shadow: 0 0 40px rgba(56,189,248,.35); }
}

/* ============================================================
   CAMPAIGN CARD
   ============================================================ */
.campaign-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-bounce),
              border-color var(--dur-base), box-shadow var(--dur-base);
  cursor: pointer;
}
.campaign-card:active { transform: scale(.97); }
.campaign-card:hover { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet-trace); }

.campaign-card__img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  background: var(--bg-elevated);
}
.campaign-card__body { padding: var(--sp-4); }
.campaign-card__brand { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
.campaign-card__title { font-size: 15px; font-weight: 700; line-height: 1.3; margin-top: var(--sp-1); }
.campaign-card__meta {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-3); font-size: 12px; color: var(--text-secondary);
  flex-wrap: wrap;
}
.campaign-card__reward { font-size: 16px; font-weight: 900; color: var(--text-primary); }
.campaign-card__gauge { margin-top: var(--sp-3); }

/* Shelf variant (3-1) */
.campaign-card-shelf { aspect-ratio: 3/4; width: 160px; flex-shrink: 0; }
.campaign-card-shelf .campaign-card__img { aspect-ratio: 1; }

/* ============================================================
   CREATOR CARD
   ============================================================ */
.creator-card {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.creator-card__avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  background: var(--bg-elevated); flex-shrink: 0;
  border: 2px solid var(--border);
}
.creator-card__info { flex: 1; min-width: 0; }
.creator-card__name { font-size: 14px; font-weight: 700; }
.creator-card__sns { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   INPUTS
   ============================================================ */
.input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  padding: 13px var(--sp-4);
  outline: none;
  transition: border-color var(--dur-fast);
}
.input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-trace); }
.input::placeholder { color: var(--text-muted); }

.input-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: var(--sp-2); display: block; letter-spacing: .02em; }
.input-group { display: flex; flex-direction: column; gap: 2px; }

/* ============================================================
   NOTIFICATION ITEM
   ============================================================ */
.notif-item {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast);
  cursor: pointer;
}
.notif-item:hover { background: var(--bg-surface); }
.notif-item.unread { background: var(--violet-trace); }
.notif-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 18px;
}
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.notif-text { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.notif-time { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); margin-top: 4px; }

/* ============================================================
   SCORE / RANK
   ============================================================ */
.rank-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 900;
  letter-spacing: -.01em;
}
.rank-bronze   { background: linear-gradient(135deg, #a16207, #78350f); color: #fde68a; }
.rank-silver   { background: linear-gradient(135deg, #6b7280, #374151); color: #e5e7eb; }
.rank-gold     { background: linear-gradient(135deg, #d97706, #b45309); color: #fef3c7; }
.rank-platinum { background: linear-gradient(135deg, #7c3aed, #4c1d95); color: #e9d5ff; }
.rank-diamond  { background: linear-gradient(135deg, #6464FD, #a855f7); color: #fff; box-shadow: 0 0 16px var(--violet-glow); }

.xp-bar {
  width: 100%; height: 6px;
  background: var(--bg-elevated); border-radius: var(--r-full); overflow: hidden;
}
.xp-bar-fill {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--violet), #a855f7);
  transition: width 800ms var(--ease-spring);
}

/* ============================================================
   TOAST
   ============================================================ */
#toast-container {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4);
  z-index: calc(var(--z-modal) + 9599); /* 9999のまま（400+9599） */ pointer-events: none;
  width: min(420px, 100%);
}
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: 14px; font-weight: 600;
  animation: slideUp var(--dur-base) var(--ease-snap) both;
  pointer-events: auto;
}
.toast-success { border-color: rgba(34,197,94,.4); }
.toast-error   { border-color: rgba(239,68,68,.4); }
/* 請求先情報の完全化: 発行時の漏れ警告Toast用。semantic warningトークン */
.toast-warning { border-color: rgba(217,119,6,.4); }
/* 承認の取り消し導線用アクションボタン（Toast.show opts.action）。
   primaryを使わずcurrentColorで枠線のみ＝トースト自体の色（success/error等）に追従する。 */
.toast-action-btn {
  margin-left: auto; flex-shrink: 0;
  background: transparent; border: 1px solid currentColor; color: inherit;
  border-radius: var(--r-sm); padding: 4px 10px; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.toast-action-btn:hover { background: rgba(0,0,0,.06); }
/* 保持ルール: エラー・重要トースト（opts.persist）は自動消去せず手動閉じのみにする
   （CCMP-004）。この×ボタンはpersistentなトーストにだけ付く。 */
.toast-close-btn {
  margin-left: auto; flex-shrink: 0;
  background: transparent; border: none; color: inherit; opacity: .6;
  border-radius: var(--r-sm); width: 44px; height: 44px; margin-right: calc(var(--sp-2) * -1);
  display: flex; align-items: center; justify-content: center;
  /* var(--fs-body)は14pxを想定していたが、実値は環境により15px/16pxのトークンへ
     置き換わっており×の見た目が肥大化していた。固定14pxへ戻す（他要素のfont-sizeには
     影響しない、この×グリフだけの寸法）。 */
  font-size: 14px; line-height: 1; cursor: pointer;
}
.toast-close-btn:hover { opacity: 1; background: rgba(0,0,0,.06); }

/* ============================================================
   PAYMENT STATUS ROW
   ============================================================ */
.payment-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.payment-amount { font-size: 17px; font-weight: 900; }
.payment-status { font-size: 12px; }
.payment-pending  { color: var(--warning); }
.payment-confirmed { color: var(--success); }
.payment-paid     { color: var(--text-muted); }

/* ============================================================
   MEDIA UPLOADER
   ============================================================ */
.media-uploader {
  border: 2px dashed var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  text-align: center;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  cursor: pointer;
}
.media-uploader:hover, .media-uploader.drag-over {
  border-color: var(--violet); background: var(--violet-trace);
}
.upload-icon { font-size: 32px; margin-bottom: var(--sp-3); }
.upload-label { font-size: 14px; color: var(--text-secondary); }
.upload-sub { font-size: 12px; color: var(--text-muted); margin-top: var(--sp-1); }
.progress-bar {
  width: 100%; height: 4px;
  background: var(--bg-elevated); border-radius: var(--r-full); overflow: hidden;
  margin-top: var(--sp-3);
}
.progress-fill {
  height: 100%; background: var(--violet); border-radius: var(--r-full);
  transition: width var(--dur-base);
}

/* ============================================================
   BOOST DROPZONE
   input[type=file]を直接置き換える汎用ドラッグ&ドロップUI（shared/boost.js BoostDropzone）。
   既存の .media-uploader（上のMEDIA UPLOADER）とは .drag-over クラス名を共有し、
   どちらの土台でもホバー/ドラッグ中の見た目が揃う。
   ============================================================ */
.boost-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.boost-dropzone:hover, .boost-dropzone.drag-over { border-color: var(--violet); background: var(--violet-trace); }
.boost-dropzone:focus-visible, .media-uploader:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.boost-dropzone .bdz-icon { font-size: 22px; margin-bottom: var(--sp-2); }
.boost-dropzone .bdz-text { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
.boost-dropzone .bdz-sub { display: block; font-size: var(--tu-font-size-min, 12px); font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.boost-dropzone .bdz-hint { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); margin-top: var(--sp-2); }
.boost-dropzone .bdz-filename { font-size: 12px; color: var(--violet); font-weight: 700; margin-top: var(--sp-2); }
.boost-dropzone.has-file { border-style: solid; background: var(--bg-elevated); }
@media (max-width: 480px) {
  .boost-dropzone { padding: var(--sp-3); }
  .boost-dropzone .bdz-icon { font-size: 18px; }
}

/* BoostDropzone.mountComposer: チャットコンポーザー全体をドロップターゲット化する
   軽量オーバーレイ。常時は非表示（pointer-events:noneでドラッグ判定を奪わない）、ドラッグ中のみ表示。
   containerElに.drag-overが付いた時だけ子のオーバーレイを出す。 */
.boost-composer-drop-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: none; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--violet);
  background: var(--violet-trace);
  border: 2px dashed var(--violet);
  border-radius: var(--r-lg);
  pointer-events: none;
}
.drag-over > .boost-composer-drop-overlay { display: flex; }
/* 対応: boost-memo.jsのフィードバック添付はzone再利用（.bm-attach-row）で
   mountされるが、drag-overの視覚フィードバックが未定義でドラッグ中も無反応に見えていた */
.bm-attach-row.drag-over { outline: 2px dashed var(--violet); outline-offset: 2px; border-radius: 8px; background: var(--violet-trace); }

/* Ignite v2の演出CSS一式を削除。
   #ignite-overlay等の全ルールはcreator/index.htmlのtriggerIgnite・shared/boost.jsの
   Igniteモジュールとセットで削除済み（client/ops配下からの参照はgrep確認済みでゼロ）。 */

/* RemainCounter: 目標達成までの残り（近づくとピンク） */
.remain-counter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-full);
  background: var(--violet-trace); border: 1px solid rgba(100,100,253,.3);
  font-size: 13px; font-weight: 900; color: var(--violet);
}
.remain-counter.near { background: var(--pink-soft); border-color: rgba(245,48,138,.4); color: var(--pink); }

/* CheerComment: 推しポイント（公開応援コメント） */
.cheer-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.cheer-item {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.cheer-item .cheer-av { font-size: 22px; flex-shrink: 0; }
.cheer-item .cheer-handle { font-size: 12px; font-weight: 700; color: var(--violet); }
.cheer-item .cheer-text { font-size: 13px; line-height: 1.5; margin-top: 2px; }
.cheer-input-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.cheer-input-row .input { flex: 1; }
.cheer-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }

/* CreditList(.credit-list/.credit-chip)はIgnite演出専用の
   クレジット表示だったため、Ignite削除に伴い孤立CSSとなり合わせて削除。 */

/* StickerBadge: 集める称号ステッカー（デコ・キラキラ） */
.sticker-badge {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2); padding: var(--sp-4) var(--sp-2);
  background: radial-gradient(circle at 30% 20%, rgba(148,148,249,.18), var(--bg-surface) 70%);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  text-align: center;
}
.sticker-badge .sticker-emoji { font-size: 34px; filter: drop-shadow(0 0 10px var(--violet-glow)); }
.sticker-badge .sticker-name { font-size: var(--tu-font-size-min, 12px); font-weight: 700; line-height: 1.3; }
.sticker-badge .sticker-sub { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); }
.sticker-badge.earned { border-color: rgba(148,148,249,.5); animation: sticker-pop .5s var(--ease-bounce) both; }
.sticker-badge.earned::after {
  content: '✦'; position: absolute; top: 6px; right: 8px;
  color: var(--energy); font-size: 12px; animation: sparkle 1.8s ease-in-out infinite;
}
.sticker-badge.locked { opacity: .38; filter: grayscale(.8); }

/* 公式案件バッジ（PR表記を誇るデザイン） */
.official-boost-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-full);
  background: linear-gradient(135deg, rgba(100,100,253,.14), rgba(180,85,253,.12));
  border: 1px solid rgba(100,100,253,.4);
  font-size: var(--tu-font-size-min, 12px); font-weight: 900; letter-spacing: .04em; color: var(--violet);
}

/* ============================================================
   UTILITIES
   ============================================================ */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.flex-1 { flex: 1; }
.text-muted   { color: var(--text-secondary); }
.text-tiny    { font-size: 12px; }
.text-sm      { font-size: 13px; }
.text-bold    { font-weight: 700; }
.text-black   { font-weight: 900; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.divider      { height: 1px; background: var(--border); margin: var(--sp-4) 0; }
.sr-only      { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-surface) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.4s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton-wave { from { background-position: 200% 0 } to { background-position: -200% 0 } }

/* ── ローディング統一: 共通スケルトン部品（BoostSkeleton・boost.js） ──
   --skel-base/--skel-hl は tokens.css（creator）/boost-b2b-light.css（ops/client）で定義。
   .skel-wrap の遅延フェードでちらつきを防ぐ（150ms未満で消えれば一度も見えない）。 */
.skel-wrap { animation: skelFadeIn 0s .15s both; }
@keyframes skelFadeIn { from { opacity: 0; } to { opacity: 1; } }
.skel-line {
  height: 14px; border-radius: var(--r-sm); width: 100%;
  background: linear-gradient(90deg, var(--skel-base) 25%, var(--skel-hl) 50%, var(--skel-base) 75%);
  background-size: 200% 100%; animation: skeleton-wave 1.4s linear infinite;
}
.skel-line + .skel-line { margin-top: 8px; }
.skel-line.tiny { height: 10px; }
.skel-circle {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--skel-base); position: relative; overflow: hidden;
}
.skel-circle::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 25%, var(--skel-hl) 50%, transparent 75%);
  background-size: 200% 100%; animation: skeleton-wave 1.4s linear infinite;
}
.skel-block { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; }
@media (prefers-reduced-motion: reduce) {
  .skel-line, .skel-circle::after { animation: none; background: var(--skel-base); }
}

/* section switching */
.screen { display: none; flex-direction: column; flex: 1; overflow-y: auto; }
/* B: 画面切替フェードを250ms→120msへ短縮（体感の切替速度改善）。
   --dur-base はボーダー/box-shadow/幅遷移等でも共有される汎用トークンのため、
   ここを変えると無関係な遷移まで速くなってしまう。フェード専用に値を直書きする。 */
.screen.active { display: flex; animation: fadeIn 120ms var(--ease-spring); }

/* ── Filter chips (shared across all surfaces) ── */
.filter-chip {
  padding: 8px 16px; border-radius: var(--r-full);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  background: var(--bg-elevated); border: 1px solid var(--border);
  cursor: pointer; transition: all var(--dur-fast); flex-shrink: 0;
  color: var(--text-secondary);
}
.filter-chip.active { background: var(--violet); border-color: var(--violet); color: #fff; }
.filter-chip:hover:not(.active) { border-color: var(--violet); color: var(--text-primary); }

/* ============================================================
   CAMPAIGN FILTER STRIP
   ops提出審査(#p-approvals)/ops応募審査(#p-app-screening)/client提出物の審査(#cl-review)/
   client応募者の選定(#cl-applicants)の「案件で絞り込む」<select>をサムネカード列に置換。
   優先度順（審査待ち件数desc→締切asc）で並べ、対象0件の案件は表示しない。
   サムネイル本体は各画面の既存ヘルパー（ops=_campaignThumbHtml/client=_clCampThumbHtml）を
   そのまま呼び出しカード内に埋め込む（サイズは各ヘルパーの既定に委ねる）。
   モノクロ基調＋キーカラー集中: 未選択はグレー枠、選択中のみキーカラー枠。
   件数バッジはsemantic色を使わずグレー（数値情報のため）。
   ============================================================ */
.camp-filter-strip {
  display: flex; gap: var(--sp-3); overflow-x: auto; padding: 2px 2px 10px;
  scrollbar-width: thin; margin-bottom: var(--sp-3);
}
.camp-filter-card {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto; min-width: 168px; max-width: 220px;
  padding: 8px 12px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.camp-filter-card:hover { border-color: var(--violet); }
.camp-filter-card.active { border-color: var(--violet); background: var(--violet-trace); }
.camp-filter-card-all { min-width: 96px; justify-content: center; text-align: center; }
.camp-filter-body { flex: 1; min-width: 0; }
.camp-filter-title {
  font-size: 12.5px; font-weight: 700; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.camp-filter-count {
  font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.camp-filter-card.active .camp-filter-count { color: var(--violet); }
@media (max-width: 480px) {
  .camp-filter-card { min-width: 128px; max-width: 160px; padding: 6px 10px; }
}

/* ── Select element inherits input style ── */
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238888a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
textarea.input { resize: vertical; min-height: 80px; }

/* ============================================================
   G-1: PIISecureInput
   ============================================================ */
.pii-field { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); }
.pii-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); letter-spacing: .02em; display: flex; align-items: center; gap: var(--sp-2); }
.pii-input-wrap { position: relative; display: flex; align-items: center; }
.pii-input {
  width: 100%; padding: 14px var(--sp-10) 14px var(--sp-4);
  background: var(--bg-elevated); border: 1.5px solid var(--border);
  border-radius: var(--r-md); font-size: 15px; color: var(--text-primary);
  font-family: var(--font-mono); letter-spacing: .08em;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast); outline: none;
}
.pii-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--violet-trace); }
.pii-input.confirmed { border-color: var(--success); background: rgba(34,197,94,.05); }
.pii-input.error { border-color: var(--danger); background: rgba(239,68,68,.05); }
.pii-toggle { position: absolute; right: var(--sp-4); background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 18px; padding: 0; transition: color var(--dur-fast); line-height: 1; }
.pii-toggle:hover { color: var(--text-primary); }
.pii-hint { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.pii-hint.success { color: var(--success); }
.pii-hint.error   { color: var(--danger); }
.pii-confirm-step { overflow: hidden; max-height: 0; transition: max-height var(--dur-base) var(--ease-snap), opacity var(--dur-base); opacity: 0; }
.pii-confirm-step.open { max-height: 100px; opacity: 1; }
.pii-vault-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--tu-font-size-min, 12px); font-weight: 700; color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border); padding: 4px 10px; border-radius: var(--r-full); margin-top: var(--sp-2); }

/* ============================================================
   G-1: VideoEmbedPlayer
   ============================================================ */
.video-embed { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--dur-fast); }
.video-embed:hover { border-color: var(--violet); }
.video-url-bar { display: flex; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--border); }
.video-url-input { flex: 1; padding: 10px var(--sp-4); background: var(--bg-surface); border: 1.5px solid var(--border); border-radius: var(--r-md); font-size: 14px; color: var(--text-primary); outline: none; transition: border-color var(--dur-fast); }
.video-url-input:focus { border-color: var(--border-focus); }
.video-load-btn { padding: 10px 16px; border-radius: var(--r-md); background: var(--violet); color: #fff; border: none; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: opacity var(--dur-fast); }
.video-load-btn:hover { opacity: .85; }
.video-preview-area {
  position: relative; width: 100%; aspect-ratio: 9/16; max-height: 480px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-surface); cursor: pointer; overflow: hidden;
}
.video-preview-area.wide { aspect-ratio: 16/9; }
.video-thumb-icon { font-size: 48px; }
.video-thumb-label { font-size: 14px; color: var(--text-secondary); margin-top: var(--sp-2); }
.video-play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8,8,16,.6); opacity: 0; transition: opacity var(--dur-fast); }
.video-preview-area:hover .video-play-overlay { opacity: 1; }
.video-play-btn { width: 64px; height: 64px; border-radius: 50%; background: var(--violet); display: flex; align-items: center; justify-content: center; font-size: 28px; transition: transform var(--dur-fast) var(--ease-bounce); }
.video-preview-area:hover .video-play-btn { transform: scale(1.1); }
.video-iframe { width: 100%; height: 100%; border: none; }
.video-meta { padding: var(--sp-3) var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); background: var(--bg-surface); }
.video-platform-badge { display: flex; align-items: center; gap: 5px; font-size: var(--tu-font-size-min, 12px); font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); }
.video-platform-badge.tiktok { background: rgba(0,0,0,.6); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.video-platform-badge.instagram { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af); color: #fff; }
.video-platform-badge.youtube { background: #ff0000; color: #fff; }
.video-meta-url { font-size: 12px; color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   G-1: AIVerdictDisplay
   ============================================================ */
.ai-verdict { background: var(--bg-surface); border: 1.5px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.ai-verdict.ok     { border-color: rgba(34,197,94,.4);   background: rgba(34,197,94,.04); }
.ai-verdict.improve{ border-color: rgba(245,158,11,.4);  background: rgba(245,158,11,.04); }
.ai-verdict.ng     { border-color: rgba(239,68,68,.4);   background: rgba(239,68,68,.04); }
.ai-verdict-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.ai-verdict-icon { font-size: 22px; }
.ai-verdict-title { font-size: 15px; font-weight: 900; flex: 1; }
.ai-verdict-score { font-size: 24px; font-weight: 900; }
.ai-verdict-score.ok     { color: var(--success); }
.ai-verdict-score.improve{ color: var(--warning); }
.ai-verdict-score.ng     { color: var(--danger); }
.ai-verdict-label { font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: var(--r-full); margin-left: var(--sp-2); }
.ai-verdict-label.ok     { background: rgba(34,197,94,.2);  color: var(--success); }
.ai-verdict-label.improve{ background: rgba(245,158,11,.2); color: var(--warning); }
.ai-verdict-label.ng     { background: rgba(239,68,68,.2);  color: var(--danger); }
.ai-verdict-body { padding: var(--sp-5); }
.ai-dim-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.ai-dim { display: flex; align-items: center; gap: var(--sp-3); }
.ai-dim-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); width: 100px; flex-shrink: 0; }
.ai-dim-bar { flex: 1; height: 8px; background: var(--bg-elevated); border-radius: var(--r-full); overflow: hidden; }
.ai-dim-fill { height: 100%; border-radius: var(--r-full); transition: width var(--dur-slow) var(--ease-snap) .3s; background: var(--success); }
.ai-dim-fill.warn { background: var(--warning); }
.ai-dim-fill.fail { background: var(--danger); }
.ai-dim-val { font-size: 12px; font-weight: 900; width: 32px; text-align: right; flex-shrink: 0; }
.ai-reasons { display: flex; flex-direction: column; gap: var(--sp-2); }
.ai-reason { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.ai-reason-icon { flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   G-1: CreatorCard 詳細版
   ============================================================ */
.creator-card-detail { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.creator-card-detail:hover { border-color: var(--violet); box-shadow: 0 8px 32px rgba(100,100,253,.15); }
.cc-header { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5); }
.cc-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-elevated); font-size: 26px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--violet); flex-shrink: 0; box-shadow: 0 0 12px var(--violet-glow); }
.cc-info { flex: 1; }
.cc-name { font-size: 17px; font-weight: 900; }
.cc-handle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.cc-rank-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.cc-stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cc-stat { padding: var(--sp-4); text-align: center; }
.cc-stat + .cc-stat { border-left: 1px solid var(--border); }
.cc-stat-val { font-size: 18px; font-weight: 900; }
.cc-stat-label { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); margin-top: 2px; letter-spacing: .02em; }
.cc-sns { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); }
.cc-sns-chip { display: flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--r-full); font-size: 12px; font-weight: 700; background: var(--bg-elevated); border: 1px solid var(--border); }
.cc-sns-chip .followers { color: var(--text-secondary); margin-left: 4px; }
.cc-history { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.cc-history-title { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.cc-history-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.cc-history-item:last-child { border-bottom: none; }
.cc-history-brand { font-weight: 700; flex: 1; }
.cc-history-reward { color: var(--success); font-weight: 700; }

/* ============================================================
   G-1: Rich Campaign Card
   ============================================================ */
.campaign-card-rich { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; cursor: pointer; transition: border-color var(--dur-base) var(--ease-snap), box-shadow var(--dur-base), transform var(--dur-fast) var(--ease-bounce); }
.campaign-card-rich:hover { border-color: var(--violet); box-shadow: 0 8px 40px rgba(100,100,253,.15); transform: translateY(-2px); }
.campaign-card-rich:active { transform: scale(.99); }
.ccr-hero { position: relative; width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--bg-elevated) 0%, #1a1a38 100%); display: flex; align-items: center; justify-content: center; font-size: 48px; overflow: hidden; }
.ccr-live-tag { position: absolute; top: var(--sp-3); left: var(--sp-3); display: flex; align-items: center; gap: 5px; background: rgba(8,8,16,.8); backdrop-filter: blur(8px); border: 1px solid rgba(239,68,68,.4); padding: 4px 10px; border-radius: var(--r-full); font-size: var(--tu-font-size-min, 12px); font-weight: 700; color: var(--danger); }
.ccr-gauge-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--bg-elevated); }
.ccr-gauge-bar { height: 100%; background: linear-gradient(90deg, var(--violet) 0%, var(--energy) 100%); transition: width var(--dur-slow) var(--ease-snap); position: relative; }
.ccr-gauge-bar::after { content: ''; position: absolute; right: 0; top: -2px; bottom: -2px; width: 3px; background: #fff; border-radius: var(--r-full); box-shadow: 0 0 8px var(--violet-glow); }
.ccr-body { padding: var(--sp-4); }
.ccr-brand { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.ccr-title { font-size: 15px; font-weight: 900; margin: var(--sp-1) 0 var(--sp-3); line-height: 1.3; }
.ccr-footer { display: flex; align-items: center; justify-content: space-between; }
.ccr-reward { font-size: 15px; font-weight: 900; color: var(--success); }
.ccr-people { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.ccr-people b { color: var(--text-primary); font-size: 15px; }
.ccr-pct { font-size: 13px; font-weight: 900; color: var(--violet); }

/* ============================================================
   Confirm モーダル（危険/課金操作の確認・理由入力）
   ============================================================ */
.bc-overlay { position: fixed; inset: 0; background: var(--bg-overlay); z-index: calc(var(--z-modal) + 10600); /* 11000のまま */
  display: none; align-items: center; justify-content: center; padding: var(--sp-4); }
.bc-overlay.open { display: flex; animation: fadeIn .15s ease-out; }
/* モーダル(Phase A): ヘッダー(.bc-title)/本文(.bc-scroll)/フッター(.bc-actions)の3ゾーン化。
   パネル自体はスクロールさせず、.bc-scrollのみoverflow-y:autoにして常にボタンが画面内に残るようにする。 */
body.bc-modal-lock { overflow: hidden; }
.bc-panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md);
  /* 390px幅モバイルで本文・ボタンが右にはみ出し横スクロールが発生していた
     不具合の修正。box-sizing:border-boxでpaddingを幅に含め、100vw-32pxを超えないようにする */
  max-width: min(460px, calc(100vw - 32px)); width: 100%; box-sizing: border-box; padding: var(--sp-5); box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 64px); display: flex; flex-direction: column; overflow: hidden;
  animation: slideUp .2s var(--ease-snap); }
.bc-panel:focus { outline: none; }
/* 最終確認モーダル等、長文の確認内容を横幅を広げて縦長・多重スクロールを避けたい場合に付与 */
.bc-panel.wide { max-width: min(760px, calc(100vw - 32px)); }
.bc-title { font-size: 17px; font-weight: 800; margin-bottom: var(--sp-2); flex-shrink: 0; }
.bc-scroll { overflow-y: auto; flex: 1; min-height: 0; }
.bc-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.bc-summary { margin: var(--sp-3) 0; padding: var(--sp-3); background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13px; }
.bc-summary b { color: var(--text-primary); }
.bc-reason { width: 100%; margin-top: var(--sp-3); min-height: 64px; resize: vertical;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-primary); padding: var(--sp-3); font: inherit; font-size: 13px; }
.bc-reason:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-trace); }
.bc-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-5); flex-shrink: 0; }
.bc-btn { padding: 10px 18px; border-radius: var(--r-sm); font-weight: 700; font-size: 14px;
  cursor: pointer; border: 1px solid var(--border); }
.bc-btn-cancel { background: transparent; color: var(--text-secondary); }
.bc-btn-confirm { background: var(--violet); color: #fff; border-color: var(--violet); }
.bc-btn-confirm.danger { background: var(--danger); border-color: var(--danger); }
.bc-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Empty State（データなし時のブランクデザイン・3サーフェス共通） ── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 48px 24px; text-align: center; color: var(--text-muted);
}
.empty-state svg { width: 40px; height: 40px; opacity: .45; }
.empty-state-title { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.empty-state-desc { font-size: 12px; line-height: 1.7; max-width: 360px; }
/* 画面ごとに専用設計するempty state用の追加パーツ（emptyStateV2が使用）。
   既存 .empty-state 系は据え置きで、CTA/代替提案がある場合だけ足す。 */
.empty-state-cta { margin-top: 4px; }
.empty-state-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.empty-state-alt { font-size: 12px; color: var(--text-muted); }
.empty-state-alt a { color: var(--violet); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ============================================================
   FILTER BAR
   一覧の絞り込み（ステータスタブ＋検索）を最上部でひとつの帯として
   目立たせる汎用コンポーネント。列ソート/列フィルタのロジックは変えず、
   「見せ方」だけを底上げする。
   ============================================================ */
.filter-bar {
  display: flex; flex-direction: column; gap: var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.filter-bar-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.filter-bar-label { font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.filter-bar-hint {
  font-size: var(--tu-font-size-min, 12px); color: var(--text-muted);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding-top: var(--sp-2); border-top: 1px dashed var(--border);
}
/* このバー内のステータスタブだけ一段強調し、他画面（審査キュー・承認キュー等）の
   共通 .filter-tab はそのまま維持する（スコープを絞ったセレクタ） */
.filter-bar .filter-tabs { margin-bottom: 0; }
.filter-bar .filter-tab { font-weight: 600; }

/* ============================================================
   BoostPhonePreview
   画面内をドラッグ移動できるスマホ型追従ボックス（ops/clientがcreator画面をiframeで見る）。
   z-indexは通常のページUI（大半は0〜100台。cl-signup-gateのみ1000）より高く、
   ops/clientのモーダル・ドロワー・確認ダイアログ（1999〜13000台に多数存在:
   fb-modal 3000・fb-lightbox 4000・ops-login-gate 5000・.modal-overlay 9000・
   bc-overlay 11000・確認モーダル12000〜13000）はすべてこれより高くする＝プレビュー中でも
   既存のモーダル操作を遮らない。 */
.bpp-frame {
  position: fixed;
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 20px 48px rgba(20,10,40,.28), 0 2px 8px rgba(20,10,40,.12);
  overflow: hidden;
  z-index: calc(var(--z-modal) + 800); /* 1200のまま */
  min-width: 260px; min-height: 320px;
}
.bpp-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 8px 10px 14px;
  background: var(--violet, #6464FD);
  color: #fff;
  cursor: grab;
  touch-action: none;
  user-select: none;
  flex-shrink: 0;
}
.bpp-header:active { cursor: grabbing; }
.bpp-title { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bpp-close {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.bpp-close:hover { background: rgba(255,255,255,.3); }
.bpp-tabs {
  display: flex; gap: 4px; padding: 6px 8px;
  background: var(--bg-elevated, #F5F3FB);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bpp-tab {
  flex: 1; padding: 6px 4px; font-size: var(--tu-font-size-min, 12px); font-weight: 700;
  color: var(--text-secondary); border-radius: var(--r-full, 999px);
  background: transparent; text-align: center;
}
.bpp-tab.active { background: var(--violet, #6464FD); color: #fff; }
.bpp-body { flex: 1; min-height: 0; background: #fff; }
.bpp-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.bpp-bubble {
  /* 修正: 要望ピル（.bm-pill既定位置 bottom:80px・z-index 9999〜10000）の
     下敷きでほぼ押せなかったため、その真上へ逃がす。 */
  position: fixed; right: 24px; bottom: 156px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--violet, #6464FD); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer;
  box-shadow: 0 10px 24px rgba(100,100,253,.35);
  z-index: calc(var(--z-modal) + 800); /* 1200のまま */
  transition: transform var(--dur-fast, .15s) ease;
}
.bpp-bubble:hover { transform: scale(1.08); }
@media (max-width: 480px) {
  .bpp-frame { border-radius: 16px; }
}

/* ============================================================
   cl-preview: クリエイター画面プレビュー専用ページ
   スマホフレーム風の静的（in-flow）iframeコンテナ。BoostPhonePreview（.bpp-*・ドラッグ追従の
   フロートボックス、position:fixed）とは別部品として持つ。モノクロ基調＋キーカラー集中:
   フロート側のvioletヘッダーは流用せず控えめなグレー枠で構成する。
   ============================================================ */
.cl-preview-phone {
  display: flex; flex-direction: column;
  width: 390px; max-width: 100%;
  height: min(760px, calc(100vh - 220px));
  min-height: 420px;
  margin: 0 auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 12px 32px rgba(20,10,40,.10);
  overflow: hidden;
}
.cl-preview-phone-header {
  flex-shrink: 0; padding: 10px 14px;
  background: var(--bg-elevated); color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px; font-weight: 700;
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-preview-phone-body { flex: 1; min-height: 0; background: #fff; }
.cl-preview-phone-body iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   R3+R6+R7 共通部品
   モノクロ基調＋キーカラー集中。ops/creatorでも使えるよう
   汎用名で定義するが、現時点の呼び出し元は boost/client/index.html のみ。
   ============================================================ */

/* ──  Step2 付随作業: サマリーバンド先頭のバッジ行（案件タイプ/決済状況を格下げ） ── */
.clcp-summary-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }

/* ── R3: 詳細ページサマリーバンド（金額|期限|相手|進捗n/N 横並び） ── */
.cl-summary-band {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.cl-summary-item {
  flex: 1 1 120px; min-width: min(110px, 100%); max-width: 100%;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px 14px;
}
.cl-summary-label { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); font-weight: 600; }
.cl-summary-val { margin-top: 2px; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ── 待機状態3点セット（単独バッジ禁止） ── */
.cl-wait-triplet {
  margin-top: 10px; padding: 12px 14px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 6px;
}
.cl-wait-row { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.6; }
.cl-wait-k { flex: 0 0 96px; color: var(--text-muted); font-weight: 700; }
.cl-wait-v { flex: 1; color: var(--text-secondary); }
.cl-wait-overdue {
  margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--border);
  font-size: 12px; color: var(--text-secondary);
}
.cl-wait-overdue a { color: var(--violet); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ── アバタースタック（実写3-5＋「+N」。少数時は非表示） ── */
.avatar-stack { display: flex; align-items: center; }
.avatar-stack .as-item {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-elevated); border: 2px solid var(--bg-surface);
  margin-left: -8px; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--tu-font-size-min, 12px); font-weight: 700; color: var(--text-secondary);
  flex-shrink: 0;
}
.avatar-stack .as-item:first-child { margin-left: 0; }
.avatar-stack .as-more {
  background: var(--bg-elevated); color: var(--text-muted); font-weight: 800; font-size: var(--tu-font-size-min, 12px);
}

/* ============================================================
   R7: アップロードWYSIWYG共通部品
   ドロップゾーン=プレビューの器。既存 .boost-dropzone/.media-uploader と共存する。
   ============================================================ */
.bdz-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bdz-thumb {
  position: relative; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--bg-elevated); flex-shrink: 0;
  animation: fadeIn var(--dur-fast) var(--ease-spring);
}
.bdz-aspect-hero { width: 100%; height: 240px; }
.bdz-aspect-card { width: 108px; height: 108px; }
.bdz-aspect-ref   { width: 108px; aspect-ratio: 3 / 4; }
/* 会話タイムライン内の動画添付カード用サイズ
   事前クリエイティブチェック: 縦動画（9:16）が主流の投稿前チェック用途で
   横長固定(200x140)だと画角を大きく切り取ってしまい審査に使えなかったため、縦基準
   （aspect-ratio 9:16）に変更する。CSS transformでの回転は入れない（二重回転防止）。 */
.bdz-aspect-chat  { width: 140px; max-width: 100%; aspect-ratio: 9 / 16; }
.bdz-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bdz-thumb-file {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; font-size: 22px; padding: 6px; text-align: center;
}
.bdz-thumb-name {
  font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); max-width: 96%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* hoverオーバーレイ（差し替え/削除）。タッチは常時表示 */
.bdz-thumb-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 8px; background: rgba(8,8,16,.5); opacity: 0; transition: opacity var(--dur-fast);
}
.bdz-thumb:hover .bdz-thumb-overlay,
.bdz-thumb:focus-within .bdz-thumb-overlay { opacity: 1; }
@media (hover: none) {
  .bdz-thumb-overlay { opacity: 1; background: rgba(8,8,16,.32); }
}
.bdz-thumb-btn {
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: #fff; color: var(--text-inverse, #111); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.bdz-thumb-btn.danger { color: var(--danger); }
/* 4状態: resting(既定)/dragging(.drag-over 既存)/error/disabled */
.boost-dropzone.error { border-color: var(--danger); background: rgba(239,68,68,.05); }
.boost-dropzone.disabled { opacity: .5; pointer-events: none; }

/* .boost-dropzone.has-file時の
   強化表示。ファイル名だけの小さい文字列から、チェックマーク＋ラベルの2行構成にし、
   ゾーン全体の見た目が変わったと分かるようにする。 ── */
.boost-dropzone .bdz-filename { display: flex; flex-direction: column; gap: 2px; }
.boost-dropzone .bdz-filename-check {
  font-size: 12.5px; font-weight: 800; color: var(--success, #16a34a);
}
.boost-dropzone .bdz-filename-name {
  font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 動画サムネイル＋
   ファイル種フォールバックカード（PDF/その他/動画デコード不可）。既存の.bdz-thumb-fileを
   アイコン・名前・サイズ・バッジの4パーツへ拡張する（BoostUpload.fileThumbHtml/thumbHtml共通）。 ── */
.bdz-thumb-video-wrap, .bdz-thumb-video { width: 100%; height: 100%; display: block; }
.bdz-thumb-video-wrap { position: relative; overflow: hidden; }
/* 事前クリエイティブチェック: object-fit:coverは画角を切り取るため、
   審査対象の動画をそのまま見せる contain へ変更（レターボックス背景は黒のまま維持）。 */
.bdz-thumb-video { object-fit: contain; background: #000; }
/* 動画サムネイル黒画面: posterが無い（未生成/デコード不能）間は
   <video>要素が背景色（#000＝真っ黒）をそのまま露出してしまう。実posterが用意できるまで、
   または恒久的に用意できない場合の代替として、グラデ＋▶＋拡張子ラベルのプレースホルダーを
   videoの上に重ねる（poster生成完了時はJS側でこの要素を除去しvideoのposter属性を差し替える）。
   .bdz-thumb-video-wrap以外（ops側の生HTML）からも同じクラスを共有利用する。 */
.bdz-video-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; color: #fff; pointer-events: none;
  background: linear-gradient(135deg, #2A2440, #5B3FA0);
}
.bdz-video-ph-play { font-size: 18px; line-height: 1; }
.bdz-video-ph-ext { font-size: var(--tu-font-size-min, 12px); font-weight: 800; letter-spacing: .06em; opacity: .85; }
.bdz-thumb-file {
  gap: 4px;
}
.bdz-thumb-file-icon { font-size: 22px; line-height: 1; }
.bdz-thumb-file-size { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); }
.bdz-thumb-file-badge {
  font-size: var(--tu-font-size-min, 12px); font-weight: 800; color: var(--success, #16a34a);
  background: rgba(22,163,74,.1); border-radius: 999px; padding: 1px 8px; margin-top: 2px;
}
/* V4: boost-flow.js attachment()の動画カード（bdz-aspect-chat）＋「大きく見る」導線 */
.bf-att-video { display: inline-flex; flex-direction: column; gap: 4px; }
.bf-att-video-open {
  font-size: var(--tu-font-size-min, 12px); color: var(--violet, #7C3AED); background: none; border: none;
  cursor: pointer; padding: 0; text-align: left; font-family: inherit;
}

/* ============================================================
   BoostMediaViewer
   デスクトップ(≥1024px)=右サイドハーフモーダル。.row-drawer（147行目〜）と幅/角丸/影の
   視覚値を揃えるが、<1280pxで強制非表示になる.row-drawerとはクラスを共有しない別実装
   （このビューアは<1024pxでもフルオーバーレイとして生き続ける必要があるため）。
   ============================================================ */
.bmv-root { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.bmv-root.open { pointer-events: auto; }
.bmv-overlay {
  position: absolute; inset: 0; background: rgba(17,24,39,.4);
  opacity: 0; transition: opacity var(--dur-fast);
}
.bmv-root.open .bmv-overlay { opacity: 1; }
.bmv-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(920px, 94vw);
  background: var(--bg-elevated); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--dur-base) var(--ease-snap);
}
.bmv-root.open .bmv-panel { transform: translateX(0); }
.bmv-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.bmv-title { font-size: 14px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmv-close {
  border: none; background: transparent; cursor: pointer; font-size: 18px; line-height: 1;
  color: var(--text-muted); padding: 4px 6px; border-radius: var(--r-sm); flex-shrink: 0;
}
.bmv-close:hover { color: var(--text-primary); background: var(--bg-surface); }
.bmv-body { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.bmv-stage { background: #000; border-radius: var(--r-md); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bmv-video, .bmv-image { width: 100%; max-height: 60vh; display: block; }
.bmv-image { object-fit: contain; background: #000; }
.bmv-fallback {
  width: 100%; padding: var(--sp-7) var(--sp-4); text-align: center; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
}
.bmv-fallback-icon { font-size: 32px; }
.bmv-fallback-text { font-size: 13px; }
.bmv-fallback-name { font-size: var(--tu-font-size-min, 12px); color: rgba(255,255,255,.7); }
.bmv-strip { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.bmv-strip-item {
  width: 64px; height: 64px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm);
  overflow: hidden; cursor: pointer; background: none; flex-shrink: 0;
}
.bmv-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bmv-meta { font-size: 12px; color: var(--text-muted); white-space: pre-wrap; }
.bmv-foot {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); flex-shrink: 0;
}
/* 19: 審査ビューアの承認/差戻しは指で確実に押せる44px以上を確保する
   （複製元カードのボタンが基底.btnを持たない場合の保険。DS既定値は上書きしない）。 */
.bmv-foot .btn, .bmv-foot button { min-height: 44px; }
/* R2-19: 閉じたビューアは操作・読み上げの対象から外す（inert非対応ブラウザの保険）。 */
.bmv-root[hidden] { display: none !important; }
/* 一覧から開いたときの前後移動。押せる領域は44px以上。 */
.bmv-stage-wrap { position: relative; }
.bmv-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-primary); font-size: 24px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}
.bmv-nav[hidden] { display: none; }
.bmv-nav:focus-visible { outline: 2px solid var(--tu-color-border-focus, var(--text-primary)); outline-offset: 2px; }
.bmv-nav-prev { left: var(--sp-3); }
.bmv-nav-next { right: var(--sp-3); }
.bmv-count { font-size: 12px; color: var(--text-muted); text-align: center; font-variant-numeric: tabular-nums; }
.bmv-count[hidden] { display: none; }

/* BoostAssetBand: 案件に入稿された画像の一覧（運営・広告主の概要の最上部）。 */
.bab-band { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-1); }
.bab-band.bab-empty { font-size: 14px; color: var(--text-muted); overflow: visible; }
.bab-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  width: 88px; padding: 0; border: none; background: transparent; cursor: zoom-in; color: inherit;
}
.bab-item:focus-visible { outline: 2px solid var(--tu-color-border-focus, var(--text-primary)); outline-offset: 2px; border-radius: var(--r-md); }
.bab-frame {
  position: relative; display: block; width: 88px; height: 88px; border-radius: var(--r-md);
  overflow: hidden; border: 1px solid var(--border); background: var(--bg-surface);
}
.bab-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bab-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--text-primary);
}
.bab-play::before {
  content: ""; position: absolute; width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-elevated); opacity: .9; z-index: -1;
}
.bab-play { z-index: 1; }
.bab-label {
  max-width: 88px; font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* <1024px: サイドモーダルでなくフルオーバーレイ（スマホでハーフモーダルは操作域が狭すぎるため） */
@media (max-width: 1023px) {
  .bmv-panel { width: 100%; max-width: none; border-left: none; }
}

/* ============================================================
   S3: mu-*（media-uploader＝
   「アップロード欄=プレビュー欄」パターン）を creator-feminine.css から移設し全ロールへ開放。
   元はcreator専用だったが、boost.css変更禁止の制約が
   解けたため唯一の基盤としてここへ集約する（ops/clientからも同じクラス名で使えるようにする）。
   ============================================================ */
.media-uploader { position: relative; overflow: hidden; }
/* .has-preview のときは既定のアイコン/ラベル/サブ文言を消し、プレビューだけを見せる */
.media-uploader.has-preview .upload-icon,
.media-uploader.has-preview .upload-label,
.media-uploader.has-preview .upload-sub { display: none; }
.media-uploader.mu-disabled { cursor: default; pointer-events: none; }
.mu-preview-wrap {
  position: relative; margin: calc(var(--sp-8) * -1); border-radius: var(--r-lg); overflow: hidden;
  opacity: 0; transform: scale(.96); transition: opacity .1s ease, transform .1s ease;
}
.media-uploader.has-preview .mu-preview-wrap { opacity: 1; transform: scale(1); }
.mu-thumb { display: block; width: 100%; max-height: 260px; object-fit: contain; background: #F6F2FD; }
/* 提出物アップボックスのファイル名表示＋サムネ生成失敗時のプレースホルダー。
   iPhone(HEVC等)でWebKitが<video>に1フレームも描画できないケースをJS側(crForceVideoThumb)が
   検知して.mu-thumb-failedを付与→ここでサムネを隠しプレースホルダーに切り替える（提出はブロックしない）。 */
.mu-filename {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding: 6px 12px;
  background: linear-gradient(180deg, rgba(26,22,37,.6) 0%, transparent 100%);
  color: #fff; font-size: var(--tu-font-size-min, 12px); font-weight: 800; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; pointer-events: none;
}
.mu-thumb-fallback {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 140px; background: #F6F2FD; color: var(--text-muted);
  font-size: 12px; line-height: 1.5; text-align: center; padding: var(--sp-4);
}
.mu-thumb-fallback-icon { font-size: 32px; }
.media-uploader.mu-thumb-failed .mu-thumb { display: none; }
.media-uploader.mu-thumb-failed .mu-thumb-fallback { display: flex; }
.mu-skel {
  position: absolute; inset: 0; display: none;
  background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.4) 50%, rgba(255,255,255,.05) 70%);
  background-size: 200% 100%; animation: muSkelShine 1.3s ease-in-out infinite;
}
.media-uploader.mu-uploading .mu-skel { display: block; }
@media (prefers-reduced-motion: reduce) { .mu-skel { animation: none; background: rgba(255,255,255,.22); } }
.mu-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 8px;
  padding-bottom: 12px; background: linear-gradient(180deg, transparent 55%, rgba(26,22,37,.5) 100%);
  opacity: 0; transition: opacity .15s ease;
}
.media-uploader.has-preview:hover .mu-overlay, .media-uploader.has-preview:focus-within .mu-overlay { opacity: 1; }
@media (hover: none) { .media-uploader.has-preview .mu-overlay { opacity: 1; } }
.media-uploader.mu-uploading .mu-overlay { opacity: 0; }
.mu-ov-btn {
  height: 32px; padding: 0 12px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: #1A1625; font-family: inherit; font-size: 12px; font-weight: 800;
}
.mu-ov-btn.mu-ov-danger { color: var(--danger); }
.mu-ov-btn.mu-ov-retry { color: var(--violet-bright); }
.media-uploader.mu-error { border-color: var(--danger); }
.media-uploader.mu-error .mu-overlay { opacity: 1; background: rgba(26,22,37,.55); }
/* 移設元(creator-feminine.css)は同名pfSkelShineを別要素(.pf-*ポートフォリオstrip)用に維持しているため、
   衝突を避けてmu-*専用にmuSkelShineとして定義する（移設に伴う名称変更のみ・見た目は同じ）。 */
@keyframes muSkelShine { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

/* ============================================================
   R5: オンボーディング複合チェーン（onb-）— ops/client共通
   welcome→チェックリストの2段。
   モノクロ基調＋キーカラーは既存 .btn-primary/.btn-secondary をそのまま流用し、
   カード・行ごとの色付き装飾は追加しない（マーカー装飾禁止）。
   ============================================================ */
.onb-overlay {
  display: none; position: fixed; inset: 0; z-index: calc(var(--z-modal) + 8600); /* 9000のまま */
  background: var(--bg-overlay); align-items: center; justify-content: center; padding: var(--sp-4);
}
.onb-overlay.open { display: flex; }
.onb-card {
  width: 100%; max-width: 440px; max-height: 86vh; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg, 16px);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(16,24,40,.12));
  padding: var(--sp-6, 24px);
}
.onb-eyebrow { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.onb-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 6px 0 14px; line-height: 1.4; }
.onb-points { margin: 0 0 18px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.onb-points li { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.onb-question { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.onb-question-actions { display: flex; flex-direction: column; gap: 8px; }
.onb-question-actions .btn-primary, .onb-question-actions .btn-secondary {
  width: 100%; height: 44px; font-size: 14px;
}
.onb-skip {
  display: block; width: 100%; margin-top: 14px; padding: 8px; text-align: center;
  background: none; border: none; font-size: 12px; color: var(--text-muted); cursor: pointer;
}
.onb-skip:hover { color: var(--text-secondary); text-decoration: underline; }
.onb-checklist { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.onb-check-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px; border-radius: var(--r-md, 8px);
  cursor: pointer;
}
.onb-check-item:hover { background: var(--bg-surface); }
.onb-check-mark {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  color: var(--text-inverse, #fff); margin-top: 1px;
}
.onb-check-item.done .onb-check-mark { background: var(--violet); border-color: var(--violet); }
.onb-check-body { display: flex; flex-direction: column; gap: 2px; }
.onb-check-label { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.onb-check-item.done .onb-check-label { color: var(--text-muted); text-decoration: line-through; }
.onb-check-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* ============================================================
   MESSAGE PREVIEW
   ホーム（ops概況/client ホーム）の未読メッセージプレビューカード。
   モノクロ基調＋未読ドットのみ意味色（--danger）。
   ============================================================ */
.msg-preview-list { display: flex; flex-direction: column; gap: 4px; }
.msg-preview-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--r-md, 8px); cursor: pointer;
}
.msg-preview-row:hover { background: var(--bg-elevated); }
.msg-preview-avatar {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--bg-elevated);
}
.msg-preview-avatar-fallback {
  width: 32px; height: 32px; border-radius: 50%; background: var(--bg-elevated);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0;
}
.msg-preview-body { flex: 1; min-width: 0; }
.msg-preview-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.msg-preview-text {
  margin-top: 1px; font-size: 12px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-preview-time { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }
.msg-preview-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--danger);
  flex-shrink: 0;
}

/* ============================================================
   マニュアルセンター
   boost-manual.js が BoostManual.mount() で組み立てるDOMに対応。
   モノクロ基調: 装飾色はバッジ（semantic）以外に使わない。
   本文（.manual-overview / .manual-item-body）は markdown→HTML の素のタグ
  （h1-h3/p/ul/ol/li/table/code/pre/blockquote/a/strong）に直接スタイルを当てる。
   ============================================================ */
.manual-overview { line-height: 1.7; }
.manual-overview h1 { font-size: var(--fs-2xl, 24px); font-weight: 700; margin: 0 0 var(--sp-3); letter-spacing: -.01em; }
.manual-overview h2 { font-size: var(--fs-lg, 18px); font-weight: 700; margin: var(--sp-6) 0 var(--sp-2); }
.manual-overview h3 { font-size: var(--fs-md, 15px); font-weight: 700; margin: var(--sp-4) 0 var(--sp-1); }
.manual-overview p { margin: var(--sp-2) 0; color: var(--text-secondary); }
.manual-overview pre {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--sp-3); overflow-x: auto; font-size: 12.5px; line-height: 1.6;
}
.manual-overview code { font-size: 12.5px; }
.manual-overview ul, .manual-overview ol { margin: var(--sp-2) 0; padding-left: 1.4em; color: var(--text-secondary); }
.manual-overview li { margin: 2px 0; }
.manual-overview a { color: var(--violet-bright); text-decoration: underline; text-decoration-color: rgba(100,100,253,.35); }
.manual-overview table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; font-size: 13px; }
.manual-overview th, .manual-overview td {
  border: 1px solid var(--border); padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: top;
}
.manual-overview th { background: var(--bg-elevated); font-weight: 700; color: var(--text-secondary); }
.manual-overview blockquote {
  margin: var(--sp-3) 0; padding: var(--sp-2) var(--sp-4); border-left: 3px solid var(--border);
  color: var(--text-secondary); background: var(--bg-elevated);
}
.manual-loading, .manual-error { padding: var(--sp-4) 0; font-size: 13px; color: var(--text-muted); }

.manual-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin: var(--sp-7, 40px) 0 var(--sp-3);
}
.manual-toolbar-title { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.manual-markall-btn { padding: 6px 14px; font-size: 12.5px; }

.manual-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.manual-item {
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-surface);
}
.manual-item-head {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: none; border: none; cursor: pointer;
  font: inherit; text-align: left; color: var(--text-primary);
}
.manual-item-title { flex: 1; font-size: 13.5px; font-weight: 700; }
.manual-item-chevron {
  font-size: 16px; color: var(--text-muted); transition: transform .15s ease; flex-shrink: 0;
}
.manual-item.is-open .manual-item-chevron { transform: rotate(90deg); }
.manual-item-body {
  padding: 0 var(--sp-4) var(--sp-4); border-top: 1px solid var(--border);
  padding-top: var(--sp-3); line-height: 1.7; font-size: 13px; color: var(--text-secondary);
}
.manual-item-body h1 { font-size: var(--fs-lg, 18px); font-weight: 700; margin: 0 0 var(--sp-2); }
.manual-item-body h2 { font-size: var(--fs-md, 15px); font-weight: 700; margin: var(--sp-4) 0 var(--sp-1); }
.manual-item-body p { margin: var(--sp-2) 0; }
.manual-item-body ul, .manual-item-body ol { margin: var(--sp-2) 0; padding-left: 1.4em; }
.manual-item-body li { margin: 2px 0; }
.manual-item-body a { color: var(--violet-bright); text-decoration: underline; text-decoration-color: rgba(100,100,253,.35); }
.manual-item-body table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; font-size: 12.5px; }
.manual-item-body th, .manual-item-body td {
  border: 1px solid var(--border); padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: top;
}
.manual-item-body th { background: var(--bg-elevated); font-weight: 700; }
.manual-item-body blockquote {
  margin: var(--sp-3) 0; padding: var(--sp-2) var(--sp-4); border-left: 3px solid var(--border);
  background: var(--bg-elevated);
}
.manual-item-body pre {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--sp-3); overflow-x: auto; font-size: 12px;
}

/* バッジ: semantic色のみ（未読=info・更新あり=warning）。既存.badge-*とは別枠（12種の対象外＝
   ステータス語彙ではないため）だが、色の使い方はsemantic 5色に揃える。 */
.manual-badge {
  flex-shrink: 0; font-size: var(--tu-font-size-min, 12px); font-weight: 700; padding: 2px 8px; border-radius: 999px;
}
.manual-badge-unread { background: rgba(56,189,248,.15); color: var(--info); }
.manual-badge-updated { background: rgba(245,158,11,.15); color: var(--warning); }

/* マニュアルセンターの導線を既存画面へ追加する箇所（cl-howto/s-manual等）のレイアウト用。
   新規inline style追加禁止のためクラス化して共通CSSに置く。 */
.manual-section-intro { margin-top: var(--sp-12, 48px); padding-top: var(--sp-8, 32px); border-top: 1px solid var(--border); }
.manual-section-intro-title { font-size: var(--fs-lg, 18px); font-weight: 700; margin: 0 0 4px; }
.manual-section-intro-desc { margin: 0 0 var(--sp-3); font-size: 13px; color: var(--text-secondary); }
.manual-page-pad { padding: var(--sp-5); }

/* ============================================================
   マニュアル図解パーツ
   目的: マニュアルの「文字だらけ」解消。.manual-overview / .manual-item-body
   （markdown→HTML）内に直接 raw HTML として埋め込む前提の静的パーツ群。
   モノクロ基調＋キーカラー集中: 装飾色はcallout(💡=info/⚠️=warning)
   の2semantic色と、mfig-status「現在地」のキーカラー1箇所のみ。それ以外はグレー階調
   （番号・矢印・枠線の形状差）で区別する＝グレースケール検証に耐える設計。
   ============================================================ */

/* --- mfig-flow: 横並びステップフロー（番号円+ラベル+矢印） --- */
.mfig-flow {
  display: flex; align-items: flex-start; gap: var(--sp-2); flex-wrap: wrap;
  margin: var(--sp-3) 0 var(--sp-5); padding: var(--sp-4);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md);
}
.mfig-step {
  flex: 1 1 120px; min-width: 108px; display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center; padding: 0 var(--sp-1);
}
.mfig-num {
  width: 26px; height: 26px; border-radius: 50%; background: var(--bg-surface);
  border: 1.5px solid var(--text-primary); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; flex-shrink: 0;
}
.mfig-step b { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.mfig-step small { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); line-height: 1.4; }
.mfig-arrow {
  align-self: center; margin-top: 12px; font-size: 15px; color: var(--text-muted);
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .mfig-flow { flex-direction: column; align-items: stretch; }
  .mfig-step { flex: 0 0 auto; flex-direction: row; text-align: left; align-items: center; min-width: 0; }
  .mfig-step small { display: block; }
  .mfig-arrow { align-self: center; margin: -2px 0; transform: rotate(90deg); }
}

/* --- mfig-actors: 3者関係図（カード+双方向矢印ラベル） --- */
.mfig-actors {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin: var(--sp-3) 0 var(--sp-5); padding: var(--sp-4);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md);
}
.mfig-actor {
  flex: 1 1 100px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; padding: var(--sp-2); background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.mfig-actor-icon { font-size: 20px; line-height: 1; }
.mfig-actor b { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.mfig-actor small { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); }
.mfig-actor-link {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 15px; color: var(--text-muted); min-width: 44px;
}
.mfig-actor-link small { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); white-space: nowrap; }
@media (max-width: 560px) {
  .mfig-actors { flex-direction: column; }
  .mfig-actor { flex: 0 0 auto; flex-direction: row; text-align: left; width: 100%; }
  .mfig-actor-link { flex-direction: row; gap: 6px; margin: 0; }
}

/* --- mfig-callout: ポイント/注意の吹き出し（semantic 2色のみ） --- */
.mfig-callout {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--bg-elevated); font-size: 13px; line-height: 1.6; color: var(--text-secondary);
}
.mfig-callout-icon { flex-shrink: 0; font-size: 15px; line-height: 1.5; }
/* 色付きサイドマーカー禁止→背景色トーンで区別（アイコンはHTML側で維持） */
.mfig-callout-tip { background: #EFF6FF; }
.mfig-callout-warn { background: #FFFBEB; }
.mfig-callout b, .mfig-callout strong { color: var(--text-primary); }
.mfig-callout p:first-child { margin-top: 0; }
.mfig-callout p:last-child { margin-bottom: 0; }

/* --- mfig-status: ステータス遷移の横バー（バッジ+→、現在地のみキーカラー） --- */
.mfig-status {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md);
}
.mfig-status-badge {
  font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: var(--r-full);
  background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary);
  white-space: nowrap;
}
.mfig-status-badge.is-current {
  background: var(--violet-trace); border-color: var(--violet-bright); color: var(--text-primary);
}
.mfig-status-sep { font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
@media (max-width: 560px) {
  .mfig-status { flex-direction: column; align-items: stretch; }
  .mfig-status-sep { align-self: center; transform: rotate(90deg); margin: -2px 0; }
}

/* --- #app（creatorの固定430px幅コンテナ）専用: mfig系の矢印回転を単一ソース化。
   #appはPC含め常時430px固定（creator/index.html参照）のため、上のビューポート幅@media(max-width:560px)
   だけでは実ビューポートが560px超のPC検証時に横並びのまま崩れる。従来はmfig-flow分のみ
   creator/index.html内にローカル複製（#app .mfig-arrow { transform: rotate(90deg) } 等）で対応していたため、
   同一要素に対し「@media版」と「#appローカル版」の2つのtransform: rotate(90deg)定義が並存し
   （実害は特定性で#app版が勝つため90degのままだが、二重定義で保守時に食い違うリスクがあった＝
   矢印二重回転バグの実体）、かつmfig-actors/mfig-statusの矢印は#app版が存在せずPC検証時に
   崩れたまま放置されていた。ここに一本化し、creator/index.html側のローカル複製は削除。 */
#app .mfig-flow { flex-direction: column; align-items: stretch; }
#app .mfig-step { flex: 0 0 auto; flex-direction: row; text-align: left; align-items: center; min-width: 0; }
#app .mfig-step small { display: block; }
#app .mfig-arrow { align-self: center; margin: -2px 0; transform: rotate(90deg); }
#app .mfig-actors { flex-direction: column; }
#app .mfig-actor { flex: 0 0 auto; flex-direction: row; text-align: left; width: 100%; }
#app .mfig-actor-link { flex-direction: row; gap: 6px; margin: 0; }
#app .mfig-status { flex-direction: column; align-items: stretch; }
#app .mfig-status-sep { align-self: center; transform: rotate(90deg); margin: -2px 0; }

/* --- mfig-table-visual: アイコン+短文の2〜3カラムカード群（「できること」一覧） --- */
.mfig-table-visual {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-5);
}
.mfig-vcard {
  display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.mfig-vcard-icon { font-size: 17px; line-height: 1; margin-bottom: 2px; }
.mfig-vcard b { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.mfig-vcard small { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); line-height: 1.4; }
@media (max-width: 560px) {
  .mfig-table-visual { grid-template-columns: 1fr; }
}

/* --- mfig-shot: 実画面キャプチャ・図解イラスト（画像＋番号の凡例） ---
   画像自体に番号付きの枠を焼き込み、figcaption に同じ番号の凡例を置く。
   スマホ画面（is-phone）は縦長になるため幅を抑え、PC画面・図解は本文幅いっぱいまで。 */
.mfig-shot { margin: var(--sp-3, 12px) 0 var(--sp-5, 20px); }
.mfig-shot img {
  display: block; width: 100%; height: auto; max-width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-md, 12px); background: #fff;
}
.mfig-shot.is-phone img { max-width: 300px; margin: 0 auto; }
.mfig-shot.is-art img { border: none; max-width: 560px; margin: 0 auto; }
.mfig-shot figcaption {
  margin-top: var(--sp-2, 8px); font-size: 12.5px; line-height: 1.7; color: var(--text-secondary);
  text-align: center;
}
.mfig-shot figcaption b { color: var(--text-primary); margin-right: 6px; }
.mfig-shot figcaption span { display: inline-block; margin: 0 6px; white-space: nowrap; }

.onb-progress { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }

/* ============================================================
   応募審査マトリクステーブル＋一括操作
   ops #p-app-screening / client #cl-applicants 共通。ops/index.htmlのグローバル
   table{}/th{}/td{}はclientには存在しないため、両画面で同一の見た目にするにはここで
   .scr-matrix-*スコープ内に閉じて完結させる（裸のtable/th/tdセレクタは増やさない）。
   ============================================================ */
.scr-matrix-scroll { overflow-x: auto; }
.scr-matrix-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.scr-matrix-table th {
  padding: var(--sp-2) var(--sp-3); text-align: left; font-size: var(--tu-font-size-min, 12px); font-weight: 700;
  color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--border); white-space: nowrap;
  position: sticky; top: 0; background: var(--bg-surface); z-index: 2;
}
.scr-matrix-table td {
  padding: 8px var(--sp-3); font-size: 13px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.scr-matrix-table tbody tr:last-child td { border-bottom: none; }
.scr-matrix-table tbody tr:hover td { background: var(--bg-elevated); }
.scr-matrix-table tbody tr[onclick] { cursor: pointer; }
/* client用行（data-clap-row）は全幅で詳細を開ける（≥1280pxはドロワー、それ未満はボトムシート）。 */
.scr-matrix-table tbody tr[data-clap-row] { cursor: pointer; }
.scr-matrix-table th:first-child, .scr-matrix-table td:first-child { width: 36px; text-align: center; }
.scr-matrix-table td.num, .scr-matrix-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.scr-matrix-table tbody tr.scr-matrix-row-checked td { background: var(--violet-trace); }
.scr-matrix-cb { width: 16px; height: 16px; }
.scr-matrix-cell-creator { display: flex; align-items: center; gap: 8px; min-width: 0; }
.scr-matrix-avatar, .scr-matrix-avatar-fallback {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
}
.scr-matrix-avatar-fallback {
  background: var(--bg-elevated); display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.scr-matrix-name {
  font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 140px;
}
.scr-matrix-sub { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); white-space: nowrap; }
.scr-matrix-msg {
  font-size: 12px; color: var(--text-secondary); max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.scr-matrix-actions { display: flex; gap: 6px; flex-wrap: nowrap; }
.scr-matrix-actions .btn, .scr-matrix-actions .btn-secondary, .scr-matrix-actions .action-btn {
  height: 30px; padding: 0 10px; font-size: 12px; white-space: nowrap;
}
/* 「案件」列（新設・専用列）。クリエイター列の副行だった
   案件名をここへ格上げする。12px/700・200px省略はops #p-app-screening固有の要件のため、
   .scr-matrix-msg（既存・client側と共用の汎用省略クラス）とは別に用意する。 */
.scr-matrix-campaign-cell {
  font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 200px; display: inline-block;
}
/* 承認直後のコールド表現（承認/見送りボタン領域の置換先）。押せない見た目＝グレー地。 */
.scr-approved-cold {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  background: var(--bg-elevated); padding: 6px 10px; border-radius: var(--r-sm);
}
/* .scr-matrix-sticky（ops #p-app-screening専用の修飾クラス）: 案件列追加＋列拡充で横スクロール
   前提になったため、☑列を左固定・操作列を右固定にする。.scr-matrix-tableは
   client #cl-applicantsと共用のためベース定義は変更せず、この修飾クラスだけをopsのテーブル
   生成側（_casRenderTable）で付与し、client側には影響させない。 */
.scr-matrix-table.scr-matrix-sticky { min-width: 900px; }
.scr-matrix-table.scr-matrix-sticky th:first-child, .scr-matrix-table.scr-matrix-sticky td:first-child {
  position: sticky; left: 0; z-index: 3;
}
.scr-matrix-table.scr-matrix-sticky th:last-child, .scr-matrix-table.scr-matrix-sticky td:last-child {
  position: sticky; right: 0; z-index: 2;
}
.scr-matrix-table.scr-matrix-sticky td:first-child, .scr-matrix-table.scr-matrix-sticky td:last-child {
  background: var(--bg-surface);
}

/* 表示切替（カード｜テーブル）。<768pxは強制カード表示のためトグル自体を隠す。 */
.scr-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.scr-view-toggle button {
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--bg-elevated); color: var(--text-secondary); border: none;
  border-right: 1px solid var(--border);
}
.scr-view-toggle button:last-child { border-right: none; }
.scr-view-toggle button.active { background: var(--violet); color: #fff; }
@media (max-width: 767px) { .scr-view-toggle { display: none; } }

/* 選択件数バー（画面下部固定）。camp-bulk-bar（上部・タブ内埋め込み）とは表示位置が異なるだけで
   役割は同じチェックボックス一括操作バー。 */
.scr-bulkbar {
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-full);
  padding: 10px 18px; box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 32px);
}
.scr-bulkbar-count { font-size: 13px; font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) {
  /* AIサポートバブル（boost-support-ai.js・56px＋右24px固定・z-index 9997）と重ならないよう、
     zを上げる（通知ポップアップ9998と競合するため）のではなく右側にバブル幅+16pxの
     マージンを確保して配置をずらす。 */
  .scr-bulkbar { border-radius: var(--r-lg); left: 16px; right: 72px; bottom: 12px; transform: none; max-width: none; }
}

/* ============================================================
   W4: 共有ウィジェットのタッチ対応バッチ
   ============================================================ */

/* .btn-secondary/.action-btn は height:38px固定（タッチ44px下限に不足）。
   モバイル幅ではタップ領域を44pxまで拡げる（見た目はheight:autoでpaddingにより縦方向が伸びる）。 */
@media (max-width: 768px) {
  .btn-secondary, .action-btn { min-height: 44px; height: auto; }
}

/* hover:none（タッチ環境）の44px化・拡大対応を1ブロックに集約する。
   .boost-np-close/.cl-consult-pill-closeは他ファイル（boost-notify-popup.js/client:index.html）
   側の基本ルールを上書きするため!importantで確実に効かせる（読み込み順に依存させない）。 */
@media (hover: none) {
  .scr-matrix-cb { width: 22px; height: 22px; }
  .scr-matrix-actions .btn,
  .scr-matrix-actions .btn-secondary,
  .scr-matrix-actions .action-btn { height: 40px; }

  .boost-np-close { width: 32px !important; height: 32px !important; position: relative !important; }
  .boost-np-close::after { content: ''; position: absolute; inset: -6px; }

  .cl-consult-pill-close { width: 32px !important; height: 32px !important; position: relative !important; }
  .cl-consult-pill-close::after { content: ''; position: absolute; inset: -6px; }
}

/* ============================================================
   R2: 案件レポート共通レンダラー（shared/boost-report.js・BoostReport.render）
   client cl-reports・後続タスクのopsレポートタブ（opts.isOps=true）で共用する。
   モノクロ基調＋キーカラー集中。数値はtabular-nums。
   ============================================================ */
.rpt-empty { color: var(--text-muted); font-size: 12px; padding: 16px 4px; }
.rpt-footnote { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--r-sm); padding: 10px; margin-top: var(--sp-3); }

/* ── ① エグゼクティブサマリー帯 ── */
.rpt-summary {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); margin-bottom: var(--sp-5);
}
.rpt-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.rpt-summary-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.rpt-summary-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.rpt-summary-hero { margin-top: var(--sp-4); }
.rpt-summary-hero-val { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.rpt-summary-hero-label { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-top: 4px; }
.rpt-insights { margin-top: var(--sp-4); padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }
.rpt-insights li { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* ── ② KPI行 ── */
.rpt-kpi-row { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--sp-4); margin-bottom: var(--sp-2); }
@media (max-width: 1024px) { .rpt-kpi-row { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px) { .rpt-kpi-row { grid-template-columns: repeat(2,1fr); } }
/* ops限定（粗利カード込みで6枚）。data-rpt-idを問わずopts.isOps時のみ付与される
   修飾クラスのため、client出力（isOps=false・このクラス無し）には一切影響しない。 */
.rpt-kpi-row-ops { grid-template-columns: repeat(6,1fr); }
@media (max-width: 1024px) { .rpt-kpi-row-ops { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px) { .rpt-kpi-row-ops { grid-template-columns: repeat(2,1fr); } }
.rpt-kpi-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); }
.rpt-kpi-label { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.rpt-kpi-val { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.rpt-kpi-sub { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-kpi-footnote { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); margin-bottom: var(--sp-5); }

/* ── セクション共通枠 ── */
.rpt-section { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-5); }
.rpt-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.rpt-section-title { font-size: 14px; font-weight: 700; }
.rpt-section-extra { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); }

/* ── ③ モメンタムチャート ── */
.rpt-mom-toggle { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.rpt-mom-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); color: var(--text-muted);
}
.rpt-mom-chip.active { color: var(--text-primary); background: var(--bg-elevated); }
.rpt-mom-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.rpt-mom-plot { position: relative; height: 180px; margin-top: 4px; }
.rpt-mom-bars { display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.rpt-mom-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 2px; }
.rpt-mom-marker { height: 12px; font-size: var(--tu-font-size-min, 12px); line-height: 1; color: var(--violet); }
.rpt-mom-bar { width: 100%; background: var(--violet-trace); border: 1px solid var(--violet); border-bottom: none; border-radius: 2px 2px 0 0; min-height: 1px; }
.rpt-mom-line { position: absolute; inset: 0 0 12px 0; width: 100%; height: calc(100% - 12px); pointer-events: none; }
.rpt-mom-xaxis { display: flex; margin-top: 4px; font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); }
.rpt-mom-xlabel { flex: 1; text-align: center; }
.rpt-mom-legend { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); margin-top: 6px; }

/* ── ④ クリエイター別カードグリッド ── */
.rpt-cr-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: var(--sp-3); }
.rpt-cr-card {
  position: relative; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3); cursor: pointer; transition: border-color var(--dur-fast);
}
.rpt-cr-card:hover { border-color: var(--violet); }
.rpt-cr-medal { position: absolute; top: 6px; right: 8px; font-size: 15px; }
.rpt-cr-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; }
.rpt-cr-avatar-fallback {
  width: 40px; height: 40px; border-radius: 50%; background: var(--bg-surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px;
}
.rpt-cr-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-cr-rank { margin-top: 3px; }
.rpt-cr-platforms { font-size: 12px; margin-top: 3px; }
.rpt-cr-stats { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.rpt-cr-stats b { color: var(--text-primary); }
.rpt-cr-cost { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ── ⑤ ベスト投稿ハイライト ── */
.rpt-hl-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: var(--sp-3); }
.rpt-hl-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); text-align: center; }
.rpt-hl-rank { font-size: 18px; }
.rpt-hl-avatar { width: 40px; height: 40px; border-radius: 50%; margin: 4px auto; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); font-size: 18px; }
.rpt-hl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rpt-hl-name { font-size: 12.5px; font-weight: 700; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-hl-stats { font-size: var(--tu-font-size-min, 12px); color: var(--text-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.rpt-hl-stats b { color: var(--text-primary); }
.rpt-hl-link { display: inline-block; margin-top: 6px; font-size: var(--tu-font-size-min, 12px); color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }

/* ── 参加者属性（BoostAnalytics.distHTML流用） ── */
.rpt-audience-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: var(--sp-4); }

/* ── クリエイター提出物モーダル（.bc-overlay/.bc-panel=既存Confirmモーダルの3ゾーン流儀を流用） ── */
.rpt-modal-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); font-size: 12.5px; flex-wrap: wrap; }
.rpt-modal-row:last-child { border-bottom: none; }
.rpt-modal-row-platform { font-weight: 700; flex: 1 1 120px; }
.rpt-modal-row-views { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.rpt-modal-row-eng { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rpt-modal-row-link { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }

/* ── ステップ詳細ハーフモーダル（boost-flow.js BoostFlow.openStepSheet）
   creator/index.html .ws-step-sheet-ov/.ws-step-sheetと同じ見た目を、
   boost-flow.jsは3画面（creator/client/ops）共有のためここへ複製する（既存のws-step-sheet-ov
   はcreator側の別用途（案件の条件シート）でも使われているため、そちらは変更しない）。 ── */
.bf-stage-chip {
  all: unset; cursor: pointer; display: block; width: 100%; text-align: left;
}
.bf-step-sheet-ov {
  position: fixed; inset: 0; z-index: calc(var(--z-modal) + 1650); /* 2050のまま */ background: rgba(26,22,37,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.bf-step-sheet {
  width: 100%; max-width: 430px; background: #fff;
  border-radius: 22px 22px 0 0; padding: 10px 22px calc(env(safe-area-inset-bottom, 0px) + 22px);
  box-shadow: 0 -12px 40px rgba(30,20,80,.25);
  animation: bfssUp .28s cubic-bezier(.2,.9,.3,1);
  max-height: 80vh; overflow-y: auto;
}
@keyframes bfssUp { 0% { transform: translateY(60%); opacity: .4; } 100% { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bf-step-sheet { animation: none; } }
.bfss-grip { width: 40px; height: 4px; border-radius: 999px; background: #E3DEF0; margin: 0 auto 14px; }
.bfss-head { display: flex; align-items: center; justify-content: space-between; }
.bfss-step-num { font-size: var(--tu-font-size-min, 12px); font-weight: 800; color: #9B95A6; letter-spacing: .04em; }
.bfss-state { font-size: var(--tu-font-size-min, 12px); font-weight: 900; color: #9B95A6; background: #F3F1F8; border-radius: 999px; padding: 3px 10px; }
.bfss-state.done { color: #15803D; background: rgba(34,197,94,.12); }
.bfss-state.cur { color: #fff; background: #7C3AED; }
.bfss-title { font-size: 17px; font-weight: 900; margin-top: 8px; color: #1A1625; }
.bfss-owner { font-size: var(--tu-font-size-min, 12px); font-weight: 800; color: #7C3AED; margin-top: 6px; }
.bfss-task { font-size: 13px; color: #6B6577; line-height: 1.8; margin-top: 8px; }
.bfss-list { margin-top: 16px; border-top: 1px solid #EFEAFB; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.bfss-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #9B95A6; }
.bfss-row.done { color: #15803D; }
.bfss-row.cur { color: #5B21B6; font-weight: 800; }
.bfss-row-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #F0EDF7;
  display: flex; align-items: center; justify-content: center; font-size: var(--tu-font-size-min, 12px); font-weight: 900;
}
.bfss-row.done .bfss-row-num { background: rgba(34,197,94,.15); color: #15803D; }
.bfss-row.cur .bfss-row-num { background: #7C3AED; color: #fff; }
.bfss-row-owner { flex: 0 0 auto; font-size: 12px; }
.bfss-row-label { flex: 1; min-width: 0; }

/* ── 通知バッジ設計統一（shared基盤・DESIGN_RULES.md BDG-001/NAV-001準拠）:
   「画面内は二重バッジをやめ、未対応=通常表示・対応済み=薄く（LINE風）」の共通クラス。
   件数バッジ自体の描画はboost-badge.js（BoostBadge.set/fail）に一本化する。 ── */
.is-done { opacity: var(--state-done-opacity); filter: saturate(var(--state-done-saturate)); }
.is-done:hover { opacity: .85; filter: none; }
.is-unread { font-weight: var(--state-unread-weight); }

/* ============================================================
   入稿フォーマット整合（「入稿キット通りに入稿しても見切れる」への対応）
   入稿キット v20260901 のメインビジュアルは 16:9（2048×1152）固定で、被写体セーフエリアは
   中央 56.25%×41%（x 448〜1600 / y 340〜812）。cover の枠アスペクト比 R に対し
   ・R < 1.0   … 左右が 56.25% を割って被写体が切れる
   ・R > 4.336 … 上下が 41% を割って被写体が切れる
   9:16 の縦型カード（R=0.5625）は左右 68% が落ちるため cover では成立しない。比率を
   変えられないこれらの枠だけ「contain で全部見せる＋同じ画像のぼかしを背景に敷く」へ切り替える
   （letterboxの黒帯を出さずに全体を見せる手法。実素材をトリミングせずそのまま見せる）。
   マークアップは BoostImgFit.html()（boost.js）で生成する。
   ============================================================ */
.bimg-fit {
  position: relative; display: block; width: 100%; height: 100%;
  overflow: hidden; background: var(--bg-elevated);
}
.bimg-fit-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(18px) brightness(.72) saturate(1.05);
  /* blurは端がにじんで下地が透けるためscaleで外へ逃がす */
  transform: scale(1.2); pointer-events: none;
}
.bimg-fit-img {
  position: relative; display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}

/* ============================================================
   F16: 固定ドック/サポートの安全域
   監査再現: 320×740・390×844 の報酬（支払明細）画面で、固定サポートアイコンが金額付近に重なった。
   「ドラッグで避けられる」は回避策にしない、が指示。

   ページ側の使い方（3つだけ）:
     ① 金額・期限・主操作など「隠れてはいけない」ブロックに data-dock-avoid を付ける
        → boost-dock.js が畳んだドックと交差したときだけ（≤480px）自動で逃がす
     ② 固定フッター/固定CTAがある画面は BoostDock.setBottomOffset(その高さpx) を呼ぶ
     ③ 本文の最後に .boost-dock-safe-pad を置く（または padding-bottom に
        var(--boost-dock-height) を足す）→ 最終行がドックの下に潜らない

   --boost-dock-height / --boost-dock-bottom は boost-dock.js がマウント時に
   documentElement へ設定する（非表示時は 0px）。未読込のページでも 0px として成立するよう
   :root に既定値を置く。
   ============================================================ */
:root { --boost-dock-height: 0px; --boost-dock-bottom: 0px; }

/* 本文末尾の逃げ。safe-area-inset-bottom も足して、ホームバーのある端末でも金額行を隠さない。 */
.boost-dock-safe-pad {
  padding-bottom: calc(var(--boost-dock-height, 0px) + var(--boost-dock-bottom, 0px)
                       + env(safe-area-inset-bottom, 0px));
}
/* 既存ブロックの下余白として足したい場合（明細カード等）。高さを持たない指定なので安全。 */
.boost-dock-safe-gap { margin-bottom: calc(var(--boost-dock-height, 0px) + var(--boost-dock-bottom, 0px)); }

/* 回避対象であること自体は見た目に影響させない（属性は座標計算にだけ使う）。
   320px 等の狭幅では、回避対象の下に最低限の余白を確保して重なりを起きにくくする。 */
@media (max-width: 480px) {
  [data-dock-avoid] { scroll-margin-bottom: calc(var(--boost-dock-height, 0px) + 8px); }
}

/* ============================================================
   応募者一覧の共通部品（運営 #p-app-screening・広告主 #cl-applicants で共用）
   SNS の略号・リンクのバッジ、見出しの並べ替えボタン、見送り・終了のまとまりの開閉ボタン。
   SNS のブランド色はここの変数だけで持つ。黒と白は DS の原色トークンを使い、HEX はトークンに無い
   Instagram と YouTube の2色だけにする（他の色はすべて意味トークン）。
   ============================================================ */
:root {
  --cas-sns-tiktok: var(--tu-primitive-neutral-950); --cas-sns-tiktok-fg: var(--tu-primitive-neutral-0);
  --cas-sns-instagram: #E1306C; --cas-sns-instagram-fg: var(--tu-primitive-neutral-0);
  --cas-sns-youtube: #FF0000; --cas-sns-youtube-fg: var(--tu-primitive-neutral-0);
  --cas-sns-x: var(--tu-primitive-neutral-950); --cas-sns-x-fg: var(--tu-primitive-neutral-0);
}
.cas-empty { color: var(--text-muted); font-size: 14px; }
.cas-sns-ico {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 26px; height: 22px; padding: 0 5px; border-radius: 8px;
  font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0;
  background: var(--bg-elevated); color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--border);
}
.cas-sns-ico--tiktok { background: var(--cas-sns-tiktok); color: var(--cas-sns-tiktok-fg); }
.cas-sns-ico--instagram { background: var(--cas-sns-instagram); color: var(--cas-sns-instagram-fg); box-shadow: none; }
.cas-sns-ico--youtube { background: var(--cas-sns-youtube); color: var(--cas-sns-youtube-fg); box-shadow: none; }
.cas-sns-ico--x { background: var(--cas-sns-x); color: var(--cas-sns-x-fg); }
.cas-sns-ico--litlink { background: var(--tu-color-bg-selected); color: var(--tu-color-text-link); box-shadow: inset 0 0 0 1px var(--violet); }
.cas-link-badges { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
a.cas-link-badge { display: inline-flex; border-radius: 8px; text-decoration: none; }
a.cas-link-badge:hover .cas-sns-ico { filter: brightness(1.15); }
a.cas-link-badge:focus-visible { outline: 2px solid var(--tu-color-border-focus); outline-offset: 2px; }
.cas-link-badge--litlink .cas-sns-ico { padding: 0 6px; }
.cas-sort-btn {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap;
}
.cas-sort-btn:hover { color: var(--text-primary); }
.cas-sort-btn:focus-visible { outline: 2px solid var(--tu-color-border-focus); outline-offset: 2px; border-radius: 4px; }
.cas-sort-ind { font-size: 12px; opacity: .45; }
th[aria-sort="ascending"] .cas-sort-btn, th[aria-sort="descending"] .cas-sort-btn { color: var(--text-primary); }
th[aria-sort="ascending"] .cas-sort-ind, th[aria-sort="descending"] .cas-sort-ind { opacity: 1; color: var(--tu-color-text-link); }
.cas-closed-cards { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--tu-space-24, 24px); }
.cas-closed-cards.is-collapsed .cas-closed-cards-list { display: none; }
.cas-closed-cards > .cas-closed-toggle { align-self: flex-start; }
.cas-closed-cards-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.cas-closed-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--tu-color-border-subtle); border-radius: var(--tu-radius-control, 12px);
  background: var(--tu-color-bg-surface); color: var(--tu-color-text-secondary);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.cas-closed-toggle:hover { color: var(--tu-color-text-primary); background: var(--tu-color-bg-hover); }
.cas-closed-toggle:focus-visible { outline: 2px solid var(--tu-color-border-focus); outline-offset: 2px; }
.cas-closed-chev { transition: transform var(--tu-motion-fast, 120ms); }
.cas-closed-toggle[aria-expanded="false"] .cas-closed-chev { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .cas-closed-chev { transition: none; } }