/* ============================================================
   litlink boost! — Ops / Client 用 B2B ライトテーマ + 脱ゲーミフィ
   DESIGN_INTENT_OPS / DESIGN_INTENT_CLIENT 準拠:
     白基調・抑制された装飾・ゲーミフィケーション完全ゼロ・数値は等幅整列。
   ※ creator（ダーク＋ゲーミフィが正）には読み込まない。
   ※ boost.css の「後」に読み込むこと（変数とクラスを上書き）。
   ============================================================ */
:root {
  /* 背景・テキスト・境界（ライトトークン） */
  --bg-base:      var(--tu-color-bg-canvas);
  --bg-surface:   var(--tu-color-bg-subtle);
  --bg-elevated:  var(--tu-color-bg-surface);
  --bg-overlay:   rgba(17,24,39,.45);
  --text-primary:   var(--tu-color-text-primary);
  --text-secondary: var(--tu-color-text-secondary);
  --text-muted:     var(--tu-color-text-tertiary);   /* 白地で約 4.8:1（AA） */
  --text-inverse:   var(--tu-color-text-on-action);
  --border:       var(--tu-color-border-subtle);
  --border-focus: var(--tu-color-border-focus);

  /* グロー/トレースを抑制（ネオン廃止） */
  --violet-bright: var(--tu-color-action-primary);
  --violet-glow:   color-mix(in srgb, var(--tu-color-action-primary) 14%, transparent);
  --violet-trace:  color-mix(in srgb, var(--tu-color-action-primary) 7%, transparent);
  --gauge-low:     var(--tu-color-text-disabled);
  --gauge-mid:     var(--tu-color-text-disabled);     /* モノクロスイープ: 単系列ゲージは無演出グレーへ統一 */

  /* 影を中立化（紫グロー影を消す） */
  --shadow-sm:     0 1px 2px rgba(16,24,40,.06);
  --shadow-md:     0 4px 12px rgba(16,24,40,.08);
  --shadow-lg:     0 12px 32px rgba(16,24,40,.12);
  --shadow-violet: none;

  /* B2B クリーン書体（webフォント非依存・日本語は Noto/ヒラギノ） */
  --font: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;

  /* client が参照していたが未定義だった変数（描画崩れの修正） */
  --cl-bg:       var(--tu-color-bg-canvas);
  --cl-surface:  var(--tu-color-bg-subtle);
  --cl-elevated: var(--tu-color-bg-surface);
  --cl-border:   var(--tu-color-border-subtle);
  --cl-accent:   var(--tu-color-text-link);

  /* ローディング統一: --bg-elevated（白）と--bg-surface（ごく薄い灰）の差は
     約2%で白基調では視認できない。skeleton専用に4-6%差の視認できるグレーを定義する。 */
  --skel-base: var(--tu-color-bg-pressed);
  --skel-hl:   var(--tu-color-bg-muted);
}

body { background: var(--bg-base); color: var(--text-primary); }

/* ── 脱ゲーミフィ: グロー・点滅・ネオン・発射演出を無効化 ── */
.btn-primary, .btn-primary:hover { box-shadow: none !important; }
.badge-in-progress { animation: none !important;
             background: var(--bg-elevated); color: var(--text-secondary); }
.kpi-card.highlight { background: var(--bg-surface) !important; }
.gauge-ring-fill.near, .gauge-ring-fill.full { filter: none !important; }
/* GaugeFamily: ブーストゲージ＝シアン単色（無演出）。予算・粗利系は無演出グレーで別物と示す */
.boost-gauge-mini-fill, .boost-gauge-mini-fill.near, .boost-gauge-mini-fill.full,
.boost-gauge-tiny-fill, .boost-gauge-tiny-fill.near, .boost-gauge-tiny-fill.full {
  background: var(--tu-color-text-disabled) !important; animation: none !important; }
.gauge-ring-fill { stroke: var(--tu-color-text-tertiary) !important; }
.cc-avatar, .ccr-gauge-bar::after { box-shadow: none !important; }
.ignite-overlay { display: none !important; }

/* ── 数値の等幅整列（金額・件数・ID の縦揃え） ── */
table td, table th, .kpi-value, .tnum, .mono, .td-primary { font-variant-numeric: tabular-nums; }

/* ── ライト基調のテーブル可読性 + フォーカス可視化（a11y） ── */
table thead th { background: var(--bg-surface); position: sticky; top: 0; z-index: 1; }
table tbody tr:hover { background: var(--tu-color-bg-subtle); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* カードの純黒影を中立グレー影へ */
.card, .data-table-wrap, .kpi-card, .panel { box-shadow: var(--shadow-sm); }

/* ── Client BoostStatusMirror（read-only・無演出・シアン細バー） ── */
.cl-mirror { display: flex; align-items: center; gap: 10px; }
.cl-mirror-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--tu-color-bg-muted); overflow: hidden; }
.cl-mirror-fill { height: 100%; border-radius: 999px; background: var(--tu-color-text-disabled); transition: none; }
.cl-mirror-pct { font-size: 14px; font-weight: 700; color: var(--text-primary); min-width: 40px; text-align: right;
  font-variant-numeric: tabular-nums; }
.cl-mirror-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; display: flex; justify-content: space-between; }

/* ── 残予算警告 dot（80%=warn / 100%=crit・無演出） ── */
.budget-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
/* 信号機の3色にしない: 余裕あり=灰色の輪、80%=濃いインク、100%=エラー色。注記の文言と併せて伝える */
.budget-dot.ok   { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tu-color-border-control); }
.budget-dot.warn { background: var(--tu-color-text-primary); }
.budget-dot.crit { background: var(--tu-color-feedback-error-text); }
.budget-note.warn { color: var(--tu-color-text-primary); font-weight: 700; }
.budget-note.crit { color: var(--tu-color-feedback-error-text); font-weight: 700; }

/* ── 分析ダッシュボード サジェストカード（無演出） ── */
.an-suggest { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.an-suggest-icon { font-size: 18px; flex-shrink: 0; line-height: 1.4; }
.an-suggest-title { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.an-suggest-body { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
#p-analytics th.an-sort:hover { color: var(--violet); cursor: pointer; }

/* 残り枠が少ないときの緊急テキスト（Client mirror・無演出） */
.cl-mirror-urgent { color: var(--tu-color-feedback-error-text); font-weight: 700; }

/* 審査キュー キーボード操作（j/k/a/r）のフォーカス可視化 */
.approval-card.kbd-focus { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: var(--r-md); }
.kbd-hint { display: inline-flex; gap: 10px; font-size: 12px; color: var(--text-muted); margin-left: var(--sp-3); }
.kbd-hint kbd { font-family: var(--font-mono); background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px; font-size: 12px; color: var(--text-secondary); }

/* ============================================================
   B2B ミニマルアイコン規定
   - ナビ・タイトルの絵文字は廃止。stroke SVG（currentColor）に統一
   - 動的コンテンツに残存する絵文字はモノクロ化で情緒を抑制
   ============================================================ */
.nav-item-icon svg, .cl-nav-icon svg { width: 16px; height: 16px; display: block; }
.nav-item-icon, .cl-nav-icon { display: flex; align-items: center; justify-content: center; color: currentColor; }
/* 残存絵文字のモノクロ化（テーブルセル・トースト等の動的出力向けフォールバック） */
.nav-item-icon:not(:has(svg)), .cl-nav-icon:not(:has(svg)),
.sidebar-user-avatar, .cl-user-avatar, .an-suggest-icon { filter: grayscale(1); opacity: .85; }
/* 数値は等幅整列（KPI・金額・テーブル） */
.kpi-val, .cl-kpi-val, td, .amount { font-variant-numeric: tabular-nums; }
/* 見出しの語頭アイコン枠（絵文字撤去後の余白リズム統一） */
.panel-title, .cl-panel-title, .modal-title { letter-spacing: .01em; }

/* ── R8 ops案件詳細 情報階層整理──
   summaryタブのアコーディオン（cdRenderSummaryのsection()・承認条件/見積り補足・案件を終了する）は
   審査タブ固有の.crv-info-accと同じ「ネイティブdetails+.panel」パターンだが、命名を分けるため
   最小限のマーカー非表示のみ.cd-accとして追加する。 */
.cd-acc > summary { list-style: none; cursor: pointer; }
.cd-acc > summary::-webkit-details-marker, .cd-acc > summary::marker { display: none; content: ''; }
/* ヘッダー右の低頻度操作（クリエイター画面プレビュー・成果報告CSV）を格納するkebabメニュー。
   .notif-icon-btn/.notif-panelと同じ無演出トーンを踏襲する。 */
.cd-kebab-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-elevated);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; cursor: pointer; color: var(--text-secondary); }
.cd-kebab-btn:hover { background: var(--bg-surface); }
.cd-kebab-menu { position: absolute; top: 38px; right: 0; min-width: 200px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); z-index: 40;
  overflow: hidden; }
.cd-kebab-item { display: block; width: 100%; text-align: left; padding: 10px 14px; font-size: 14px;
  color: var(--text-primary); background: none; border: none; cursor: pointer; }
.cd-kebab-item:hover { background: var(--bg-elevated); }

/* ── B2B 太字上限（W9禁止・最大700） ──
   日本語ゴシックの weight:900 はディスプレイ調に描画され信頼感を損なうため、
   ops/client では boost.css 由来の 900 をすべて 700 に丸める。 */
h1, h2, h3, .section-title, .cl-section-title,
.campaign-card__reward, .payment-amount, .ignite-title, .text-black,
.ai-verdict-title, .ai-verdict-score, .ai-dim-val,
.cc-name, .cc-stat-val, .ccr-title, .ccr-reward, .ccr-pct,
.kpi-val, .cl-kpi-val, .roi-val, .cl-brand-company,
.sidebar-brand-text, .cl-brand-logo,
[style*="font-weight:900"], [style*="font-weight: 900"] {
  font-weight: 700 !important;
}

/* ── ops/client モノクロスイープ: boost.css 側のvioletベタ塗りを上書き ── */
.onb-check-item.done .onb-check-mark { background: var(--tu-color-text-tertiary) !important; border-color: var(--tu-color-text-tertiary) !important; }
/* 承認済みは緑にしない（DS 2.3: 信号機配色を使わない）。値は下の Violet 層の .tu-badge--approved と同じ */
.badge-approved { background: var(--tu-color-bg-selected); color: var(--tu-color-text-link); }
/* --info・--success・--warning・--danger の参照先は b2b-tokens-compat.css（DS 2.3 の状態の色） */
/* 「停止中」は情報でなく不活性状態 → グレー */
.badge-frozen { background: rgba(107,114,128,.15); color: var(--tu-color-text-tertiary); }

/* ============================================================
   DS 2.3 Violet（data-palette="violet"）— client / ops の配色
   - 主操作: キーカラーの面（action-primary）＋白抜きの文字（text-on-action）。
     CEO 決定による DS 2.3 の例外。主操作の面は白文字 4.62:1 の #5F5FFD。主ボタンは 14px 以上・太さ 700 にする
   - 選択中のタブ・チップ・ナビ: キーカラーの面＋白抜き。選択行・薄いハイライトは soft 面（--tu-primitive-boost-key-soft）
   - リンク・フォーカス: text-link / border-focus（b2b-tokens-compat.css で --violet を寄せている）
   - エラー・破壊操作だけフューシャ。緑・黄・赤の信号機配色にしない
   html[data-palette="violet"] を付けるのは、各面の <style> と JS が後から差し込む同じ詳細度の
   規則（boost-flow.js の吹き出し等）より確実に優先させるため。このファイルは creator に読ませない。
   ============================================================ */
html[data-palette="violet"] {
  /* キーカラーの値（theme トークンへの割り当ては b2b-tokens-compat.css）。DS 正本の ds-tokens.css には置かない */
  /* 値は theme_from_color.py "#6464FD" --name boost の検算結果。#6464FD の面に白文字は 4.39:1 で基準（4.5）に
     届かないため、主操作の面は #5F5FFD（白文字 4.62:1）にする。#6464FD そのものは表現の面にだけ使う */
  --tu-primitive-boost-key: #5F5FFD;
  --tu-primitive-boost-key-hover: #4646FD;
  --tu-primitive-boost-key-pressed: #3232FC;
  --tu-primitive-boost-key-soft: #F3F3FF;
  --tu-primitive-boost-key-deep: #12123F;
  --tu-primitive-boost-key-link: #5555FD;
  --tu-primitive-boost-key-link-dark: #7373FD;
  /* 押せない主ボタンの面と文字（DESIGN.md 1.1 の disabled の値） */
  --tu-primitive-boost-key-disabled-surface: #E5E7EB;
  --tu-primitive-boost-key-disabled-text: #9CA3AF;
  /* 旧ブランドグラデの名前は残し、面はキーカラーの単色にする（hero と primary の差は配置と数で付ける） */
  --v2-grad: var(--tu-color-action-primary);
}
/* Dark の地ではリンク・フォーカスを明るい同系色にする（暗い地で 5.31:1） */
html[data-palette="violet"][data-theme="dark"] {
  --tu-color-text-link: var(--tu-primitive-boost-key-link-dark);
  --tu-color-border-focus: var(--tu-primitive-boost-key-link-dark);
}
html[data-palette="violet"] .btn-primary,
html[data-palette="violet"] .btn-approve,
html[data-palette="violet"] .topbar-btn.primary,
html[data-palette="violet"] .ord-primary-btn {
  background: var(--tu-color-action-primary); color: var(--tu-color-text-on-action);
  border-color: var(--tu-color-action-primary);
  font-weight: 700; font-size: 14px !important;
}
html[data-palette="violet"] .btn-primary:hover,
html[data-palette="violet"] .btn-approve:hover,
html[data-palette="violet"] .topbar-btn.primary:hover,
html[data-palette="violet"] .ord-primary-btn:hover {
  background: var(--tu-color-action-hover); border-color: var(--tu-color-action-hover); opacity: 1;
}
html[data-palette="violet"] .btn-primary:active,
html[data-palette="violet"] .btn-approve:active,
html[data-palette="violet"] .topbar-btn.primary:active,
html[data-palette="violet"] .ord-primary-btn:active { background: var(--tu-color-action-pressed); }
/* 広告主の画面だけにある主ボタン（新規相談のフッター CTA・相談の送信・一覧カードの「最終確認する」）も
   同じキーカラーの面・白抜き・太さ 700 にする（文字の大きさは各ボタンの指定のまま。14px 以上）。 */
html[data-palette="violet"] .v2-grad-btn,
html[data-palette="violet"] .v2-gcal-btn,
html[data-palette="violet"] .cl-topbar-btn.primary {
  background: var(--tu-color-action-primary); color: var(--tu-color-text-on-action);
  border-color: var(--tu-color-action-primary); font-weight: 700;
}
html[data-palette="violet"] .v2-gcal-btn:hover:not(:disabled),
html[data-palette="violet"] .cl-topbar-btn.primary:hover:not(:disabled) {
  background: var(--tu-color-action-hover); border-color: var(--tu-color-action-hover);
}
/* 押せない主ボタンは面と文字の色で示す（透明度を下げるだけにしない）。 */
html[data-palette="violet"] .btn-primary:disabled, html[data-palette="violet"] .btn-primary.is-disabled,
html[data-palette="violet"] .btn-primary:disabled:hover, html[data-palette="violet"] .btn-primary.is-disabled:hover,
html[data-palette="violet"] .btn-approve:disabled,
html[data-palette="violet"] .topbar-btn.primary:disabled, html[data-palette="violet"] .topbar-btn.primary:disabled:hover,
html[data-palette="violet"] .ord-primary-btn:disabled,
html[data-palette="violet"] .v2-grad-btn:disabled,
html[data-palette="violet"] .v2-gcal-btn:disabled,
html[data-palette="violet"] .cl-topbar-btn.primary:disabled,
html[data-palette="violet"] .bc-btn-confirm:disabled {
  background: var(--tu-color-action-disabled); border-color: var(--tu-color-action-disabled);
  color: var(--tu-color-text-on-action-disabled); cursor: not-allowed; opacity: 1; box-shadow: none;
}

/* 選択中のタブ・チップ・表示切替はキーカラーの面＋白抜き */
html[data-palette="violet"] .filter-chip.active,
html[data-palette="violet"] .filter-tab.active,
html[data-palette="violet"] .cl-camp-chip.active,
html[data-palette="violet"] .scr-view-toggle button.active,
html[data-palette="violet"] .row-density-btn.active {
  background: var(--tu-color-action-primary); border-color: var(--tu-color-action-primary);
  color: var(--tu-color-text-on-action); font-weight: 700;
}
html[data-palette="violet"] .filter-chip.active button,
html[data-palette="violet"] .filter-tab.active span { color: inherit; }
/* アクティブなナビ（サイドバー）もキーカラーの面＋白抜き。件数バッジは白地に反転して面と同化させない */
html[data-palette="violet"] .nav-item.active,
html[data-palette="violet"] .cl-nav-item.active,
html[data-palette="violet"] .cl-nav-subitem.active,
html[data-palette="violet"] .nav-subitem.active {
  background: var(--tu-color-action-primary); color: var(--tu-color-text-on-action); font-weight: 700;
}
html[data-palette="violet"] .nav-item.active .nav-item-badge,
html[data-palette="violet"] .cl-nav-item.active .v2-nav-badge,
html[data-palette="violet"] .cl-nav-item.active .nav-item-badge {
  background: var(--tu-color-bg-surface); color: var(--tu-color-text-link); border-color: var(--tu-color-bg-surface);
}
/* チャットドックの開閉ボタン（boost-dock.js はクリエイターと共有のため ops / client 側で上書き） */
html[data-palette="violet"] .bdk-bubble { background: var(--tu-color-action-primary); color: var(--tu-color-text-on-action); }
/* 進行管理の「今ここ」バー（boost-progress.js はクリエイターと共有のため ops / client 側で上書き） */
html[data-palette="violet"] .bp-now::before { background: var(--tu-color-action-primary); }
html[data-palette="violet"] .filter-chip:hover:not(.active) { border-color: var(--tu-color-border-control); }

/* 未読数はキーカラーの面＋白抜き（エラーではないためフューシャ・赤にしない） */
html[data-palette="violet"] .nav-item-badge,
html[data-palette="violet"] .v2-nav-badge,
html[data-palette="violet"] .cl-msg-unread-count {
  background: var(--tu-color-action-primary); color: var(--tu-color-text-on-action);
  border-color: var(--tu-color-action-primary);
}
html[data-palette="violet"] .cl-msg-unread-dot { background: var(--tu-color-action-primary); }
html[data-palette="violet"] .cl-msg-unread-divider { color: var(--tu-color-text-link); }
html[data-palette="violet"] .cl-msg-unread-divider::before,
html[data-palette="violet"] .cl-msg-unread-divider::after { background: var(--tu-color-text-link); }

/* 会話の吹き出し: 自分（運営・広告主）はキーカラーの面＋白抜き、相手は灰色の面 */
html[data-palette="violet"] .bf-si-row.me .bf-si-bubble {
  background: var(--tu-color-action-primary); color: var(--tu-color-text-on-action);
}
html[data-palette="violet"] .bf-si-row.other .bf-si-bubble {
  background: var(--tu-color-bg-muted); color: var(--tu-color-text-primary);
}

/* キーカラーの面（旧 --v2-grad の面）に載る文字は白抜き */
html[data-palette="violet"] .v2-grad-btn,
html[data-palette="violet"] .cl-fx-grad-banner,
html[data-palette="violet"] .cl-fx-achieved-banner,
html[data-palette="violet"] .cl-consult-pill,
html[data-palette="violet"] .ord-hero-banner { color: var(--tu-color-text-on-action); }
html[data-palette="violet"] .cl-consult-pill { box-shadow: none; }
html[data-palette="violet"] .cl-consult-pill-close {
  background: var(--tu-color-bg-surface); color: var(--tu-color-text-primary);
}
/* グラデ文字は白地で読める深い側の2色にする（64px の大きな数字なので 3:1 以上が基準） */
html[data-palette="violet"] #sim-views-hero {
  background: linear-gradient(120deg, var(--tu-theme-link), var(--tu-color-accent-electric));
  -webkit-background-clip: text; background-clip: text;
}

/* 状態バッジ（.tu-badge--*）の client/ops 向け Variant。旧クラス（.badge-in-progress 等・このファイルの
   上の実効値）と同じ見た目にする。creator と共有する boost-ds-components.css の基本形（このファイルより
   後に読まれる）に詳細度で勝たせるため、html[data-palette="violet"] を付ける。
   注: rgb() 関数表記はHEX直書き禁止方針の対象外だが同じ色を指す。 */
html[data-palette="violet"] .tu-badge--in-progress {
  background: var(--bg-elevated); color: var(--text-secondary);
  animation: none;
}
/* 承認・達成は soft 面＋深い同系色、募集中・公開などの進行中は灰色の面＋濃い文字。
   緑（承認）・青（募集中）の信号機配色にしない。状態は文言で伝え、色だけに意味を持たせない。 */
html[data-palette="violet"] .tu-badge--approved,
html[data-palette="violet"] .tu-badge--achieved,
html[data-palette="violet"] .badge-achieved {
  background: var(--tu-color-bg-selected); color: var(--tu-color-text-link);
}
html[data-palette="violet"] .tu-badge--recruiting,
html[data-palette="violet"] .tu-badge--review,
html[data-palette="violet"] .badge-recruiting,
html[data-palette="violet"] .badge-review {
  background: var(--tu-color-bg-muted); color: var(--tu-color-text-primary);
}
html[data-palette="violet"] .tu-badge--frozen {
  background: rgba(107,114,128,.15); color: rgb(107,114,128);
}

/* 未読・通知の数はキーカラーの面＋白抜き（エラーではないので赤にしない）。
   チャットドック（boost-dock.js）はクリエイター画面と共有のため、ops / client 側だけここで上書きする。 */
html[data-palette="violet"] .bdk-badge,
html[data-palette="violet"] .bdk-row-badge {
  background: var(--tu-color-action-primary); color: var(--tu-color-text-on-action);
}
html[data-palette="violet"] .bdk-badge { border-color: var(--tu-color-bg-surface); }
html[data-palette="violet"] .bdk-badge,
html[data-palette="violet"] .bdk-row-badge { font-size: 12px; min-width: 20px; height: 20px; line-height: 20px; }
html[data-palette="violet"] .bdk-row-consult {
  color: var(--tu-color-text-link); background: var(--tu-color-bg-selected); border-color: var(--tu-color-text-link);
}
html[data-palette="violet"] .notif-dot { background: var(--tu-color-action-primary); }

/* ============================================================
   余白（ops / client 共通）
   トークンは b2b-tokens-compat.css の --b2b-*（DS 2.3 の --tu-space-* 参照・幅で切替）。
   各面の <style> は同じクラスをこのファイルより後に定義しているため、html[data-palette="violet"] を
   付けて詳細度で上書きする（読み込み順に依存しない）。インライン style には効かない。
   - 近接: 関連 4〜12 ／ 部品内部 12〜24 ／ 内容群 24 ／ 節 48（モバイルは 16 ／ 32）
   - 余白を増やす代わりに枠線・灰色の面は増やさない
   ============================================================ */

/* ページ外枠: 左右余白・上下余白・最大幅。チャット系ページは会話の可視高を優先して上下だけ詰める */
html[data-palette="violet"] .page,
html[data-palette="violet"] .cl-page {
  padding: var(--b2b-page-top) var(--b2b-page-x) var(--b2b-page-bottom);
}
html[data-palette="violet"] .page.active,
html[data-palette="violet"] .cl-page.active { max-width: var(--b2b-page-max); margin-left: auto; margin-right: auto; }
html[data-palette="violet"] .ops-chat-page.active,
html[data-palette="violet"] .cl-chat-page.active { padding: var(--b2b-stack-md) var(--b2b-page-x); }
/* 上部バー・サブタブの左右をページ本文の左端にそろえる（サイドバーがある幅のみ） */
@media (min-width: 769px) {
  html[data-palette="violet"] #topbar,
  html[data-palette="violet"] #subtabs { padding-left: var(--b2b-page-x); padding-right: var(--b2b-page-x); }
}
@media (min-width: 821px) {
  html[data-palette="violet"] #cl-topbar { padding-left: var(--b2b-page-x); padding-right: var(--b2b-page-x); }
}

/* 見出し: ページ見出し→本文 24、節見出しの上は節間（48）、行間 1.3 */
html[data-palette="violet"] .section-title,
html[data-palette="violet"] .cl-section-title { line-height: var(--b2b-lh-heading); margin-bottom: var(--b2b-stack-lg); }
html[data-palette="violet"] .ops-section-title {
  line-height: var(--b2b-lh-heading); margin: var(--b2b-section-gap) 0 var(--b2b-stack-md);
}
html[data-palette="violet"] .ops-section-title:first-child { margin-top: 0; }
html[data-palette="violet"] .panel-title,
html[data-palette="violet"] .cl-panel-title,
html[data-palette="violet"] .ops-card-title { line-height: var(--b2b-lh-heading); margin-bottom: var(--b2b-stack-md); }
html[data-palette="violet"] .modal-title,
html[data-palette="violet"] .cl-modal-title { line-height: var(--b2b-lh-heading); margin-bottom: var(--b2b-stack-lg); }

/* カード・パネル: 内側 24（モバイル 16）、並びの間 24（モバイル 16） */
html[data-palette="violet"] .panel,
html[data-palette="violet"] .cl-panel,
html[data-palette="violet"] .kpi-card,
html[data-palette="violet"] .cl-kpi-card,
html[data-palette="violet"] .ops-stat-tile,
html[data-palette="violet"] .approval-card,
html[data-palette="violet"] .v2-flow-card { padding: var(--b2b-card-pad); }
html[data-palette="violet"] .kpi-row,
html[data-palette="violet"] .cl-kpi-row,
html[data-palette="violet"] .panel-3col,
html[data-palette="violet"] .cl-panel-2col,
html[data-palette="violet"] .ops-stat-grid,
html[data-palette="violet"] .ops-trend-grid,
html[data-palette="violet"] .pa-kpi-grid { gap: var(--b2b-group-gap); }
html[data-palette="violet"] .ops-pipeline-bar { gap: var(--b2b-control-gap); }
html[data-palette="violet"] .ops-alert-row { gap: var(--b2b-control-gap); padding: var(--tu-space-12) var(--tu-space-16); }
html[data-palette="violet"] details.ops-acc > summary { padding: var(--tu-space-16) var(--tu-space-20); }
html[data-palette="violet"] details.ops-acc > .ops-acc-body { padding: var(--tu-space-16) var(--tu-space-20) var(--tu-space-20); }
html[data-palette="violet"] details.ops-acc { margin-bottom: var(--b2b-control-gap); }

/* 表: セル左右 16（モバイル 12）。行の上下は密度切替（data-density）に任せ、ここでは触らない */
html[data-palette="violet"] .data-table-wrap th,
html[data-palette="violet"] .data-table-wrap td { padding-left: var(--b2b-cell-x); padding-right: var(--b2b-cell-x); }
html[data-palette="violet"] .camp-table-scroll th, html[data-palette="violet"] .camp-table-scroll td,
html[data-palette="violet"] .payout-table-scroll th, html[data-palette="violet"] .payout-table-scroll td,
html[data-palette="violet"] .mp-table-scroll th, html[data-palette="violet"] .mp-table-scroll td {
  padding-left: var(--tu-space-12); padding-right: var(--tu-space-12);
}
html[data-palette="violet"] .data-table-header { padding: var(--tu-space-16) var(--tu-space-20); gap: var(--b2b-stack-sm); }
html[data-palette="violet"] .data-table-actions,
html[data-palette="violet"] .approval-actions { gap: var(--b2b-control-gap); }
/* 表の見出し行: 幅が足りないときはボタンの文字を折り返さず、操作群ごと次の行へ送る */
html[data-palette="violet"] .data-table-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--b2b-stack-sm); }
html[data-palette="violet"] .data-table-title,
html[data-palette="violet"] .data-table-actions .btn,
html[data-palette="violet"] .data-table-actions .action-btn { white-space: nowrap; }
/* 表の中の操作ボタン: 折り返さず、ボタンどうしは 8 空ける（主ボタンの太字 14px でも窮屈にしない） */
html[data-palette="violet"] .td-actions { gap: var(--b2b-stack-sm); row-gap: var(--b2b-stack-sm); }
html[data-palette="violet"] td .btn,
html[data-palette="violet"] td .btn-primary,
html[data-palette="violet"] td .action-btn { white-space: nowrap; }

/* 絞り込み: タブ・チップの間 8、ツールバー内の要素の間 12、高さは操作の最低高さ */
html[data-palette="violet"] .filter-tabs { gap: var(--b2b-chip-gap); row-gap: var(--b2b-chip-gap); }
html[data-palette="violet"] .filter-tab,
html[data-palette="violet"] .filter-chip,
html[data-palette="violet"] .cl-camp-chip { min-height: var(--b2b-control-h); padding: var(--tu-space-8) var(--tu-space-16); }
html[data-palette="violet"] .cl-camp-chip-row { gap: var(--b2b-chip-gap); }
html[data-palette="violet"] .filter-bar {
  gap: var(--b2b-control-gap); padding: var(--tu-space-16) var(--tu-space-20); margin-bottom: var(--b2b-group-gap);
}
html[data-palette="violet"] .filter-bar-row { gap: var(--b2b-control-gap); }
html[data-palette="violet"] .cl-camp-toolbar { gap: var(--b2b-control-gap); padding: var(--tu-space-12) var(--tu-space-16); margin-bottom: var(--b2b-group-gap); }
html[data-palette="violet"] .camp-filter-card { padding: var(--tu-space-12) var(--tu-space-16); }
html[data-palette="violet"] .subtab,
html[data-palette="violet"] .cd-tab { padding: var(--tu-space-12) var(--tu-space-16); }

/* ボタン: 最低高さ 36（モバイル 44）。並びの間 12 */
html[data-palette="violet"] .btn,
html[data-palette="violet"] .btn-approve,
html[data-palette="violet"] .btn-reject,
html[data-palette="violet"] .topbar-btn,
html[data-palette="violet"] .cl-topbar-btn { min-height: var(--b2b-control-h); }
html[data-palette="violet"] .scr-view-toggle button { min-height: var(--b2b-control-h); }
html[data-palette="violet"] .btn-approve,
html[data-palette="violet"] .btn-reject { padding: var(--tu-space-8) var(--tu-space-20); }
html[data-palette="violet"] .modal-footer,
html[data-palette="violet"] .cl-modal-footer { gap: var(--b2b-control-gap); margin-top: var(--b2b-stack-lg); }

/* フォーム: 項目の間 20、列の間 16、ラベル→入力 8 */
html[data-palette="violet"] .form-grid,
html[data-palette="violet"] .cl-form-grid { gap: var(--tu-space-20) var(--tu-space-16); }
html[data-palette="violet"] .input-label { line-height: 1.4; margin-bottom: var(--b2b-stack-sm); }

/* モーダル・ドロワー: 内側 32（モバイル 20。480px 以下は各面の既存規則の 16px を優先） */
html[data-palette="violet"] .modal-box,
html[data-palette="violet"] .cl-modal-box { padding: var(--b2b-modal-pad); }
html[data-palette="violet"] .row-drawer-head { padding: var(--tu-space-20) var(--b2b-card-pad); }
html[data-palette="violet"] .row-drawer-body { padding: var(--b2b-card-pad); }
html[data-palette="violet"] .row-drawer-foot { gap: var(--b2b-control-gap); padding: var(--tu-space-16) var(--b2b-card-pad); }
html[data-palette="violet"] .row-drawer-close { min-width: var(--b2b-control-h); min-height: var(--b2b-control-h); }

/* 会話: 吹き出しの間 12、吹き出しの内側 12 / 16 */
html[data-palette="violet"] .bf-si-row { margin: var(--tu-space-12) 0; }
html[data-palette="violet"] .bf-si-bubble { padding: var(--tu-space-12) var(--tu-space-16); line-height: var(--b2b-lh-body); }
html[data-palette="violet"] .cl-msg-conv { padding: var(--tu-space-16); }

/* サイドバー: 項目の間 4（塗りの項目どうしが接しないようにする） */
html[data-palette="violet"] .nav-item + .nav-item,
html[data-palette="violet"] .nav-item + .nav-submenu,
html[data-palette="violet"] .nav-submenu + .nav-item { margin-top: var(--b2b-stack-xs); }
html[data-palette="violet"] .nav-submenu { gap: var(--b2b-stack-xs); padding: var(--b2b-stack-xs) 0; }
@media (min-width: 821px) {
  html[data-palette="violet"] .cl-nav-item + .cl-nav-item,
  html[data-palette="violet"] .cl-nav-item + .cl-nav-submenu,
  html[data-palette="violet"] .cl-nav-submenu + .cl-nav-item { margin-top: var(--b2b-stack-xs); }
  html[data-palette="violet"] .cl-nav-submenu { gap: var(--b2b-stack-xs); padding: var(--b2b-stack-xs) 0; }
}

/* client 案件ページ: 概要帯・ステップカード・やることカード */
html[data-palette="violet"] .cl-summary-band { gap: var(--b2b-stack-sm); margin-bottom: var(--b2b-group-gap); }
html[data-palette="violet"] .cl-summary-item { padding: var(--tu-space-12) var(--tu-space-16); }
html[data-palette="violet"] .cl-scard { margin-bottom: var(--b2b-control-gap); }
html[data-palette="violet"] .cl-scard-head { gap: var(--tu-space-12); padding: var(--tu-space-16) var(--tu-space-20); }
/* 本文の左端を見出しの文字にそろえる（左余白 20 ＋ 番号 26 ＋ 間 12） */
html[data-palette="violet"] .cl-scard-body {
  padding: 0 var(--tu-space-20) var(--tu-space-20) calc(var(--tu-space-20) + 26px + var(--tu-space-12));
}
html[data-palette="violet"] .cl-task-card { margin-top: var(--b2b-control-gap); padding: var(--tu-space-16) var(--tu-space-20); }
html[data-palette="violet"] .cl-campaign-card { padding: var(--tu-space-20) var(--tu-space-24); margin-bottom: var(--b2b-stack-md); }

/* 狭い幅でカード化される表（boost.css の 767px 以下の規則）: カード内側 16、カードの間 12 */
@media (max-width: 767px) {
  html[data-palette="violet"] #creator-table-wrap tbody tr, html[data-palette="violet"] #cash-in-queue-wrap tbody tr,
  html[data-palette="violet"] #payment-incident-wrap tbody tr, html[data-palette="violet"] #invoice-wrap tbody tr,
  html[data-palette="violet"] #fin-creator-margin-wrap tbody tr, html[data-palette="violet"] #camp-table-wrap tbody tr {
    padding: var(--tu-space-8) var(--tu-space-16); margin-bottom: var(--tu-space-12);
  }
  html[data-palette="violet"] #creator-table-wrap tbody td, html[data-palette="violet"] #cash-in-queue-wrap tbody td,
  html[data-palette="violet"] #payment-incident-wrap tbody td, html[data-palette="violet"] #invoice-wrap tbody td,
  html[data-palette="violet"] #fin-creator-margin-wrap tbody td, html[data-palette="violet"] #camp-table-wrap tbody td {
    padding: var(--tu-space-8) 0;
  }
}
/* 絞り込みバーの共通形（boost-filterbar.js・ops/client のみ）: 検索＋主要2項目＋「絞り込み ▾」＋適用中チップ＋すべて解除。
   「絞り込み ▾」はその他の項目を下のパネルに開く。適用中の項目は下のチップ列に1つずつ出す。 */
.fb-more-btn { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; flex-shrink: 0; }
.fb-more-btn[aria-expanded="true"] { background: var(--bg-muted, var(--bg-surface)); }
.fb-more-n { font-weight: 700; }
.fb-more-panel { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.fb-more-panel[hidden], .fb-chips[hidden] { display: none; }
.fb-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fb-chip { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.fb-chip-x { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; min-width: 20px; min-height: 20px; }
.fb-clear-all { font-size: 12px; }

/* サイドバーの階層: 塗りは「いま開いているページ」1か所だけ。
   小メニューで現在地を示している大メニュー（章）は塗らず、濃いインクの太字＋キーカラーのアイコンにする。
   小メニューは左のガイド線と字下げで大メニューに属することを示す（文字の大きさは DS の 14px にそろえる）。 */
html[data-palette="violet"] .nav-item.active:has(+ .nav-submenu .nav-subitem.active),
html[data-palette="violet"] .cl-nav-item.active:has(+ .cl-nav-submenu .cl-nav-subitem.active) {
  background: transparent; color: var(--tu-color-text-primary); font-weight: 700;
}
html[data-palette="violet"] .nav-item.active:has(+ .nav-submenu .nav-subitem.active) .nav-item-icon,
html[data-palette="violet"] .cl-nav-item.active:has(+ .cl-nav-submenu .cl-nav-subitem.active) .cl-nav-icon { color: var(--tu-color-text-link); }
html[data-palette="violet"] .nav-item.active:has(+ .nav-submenu .nav-subitem.active) .nav-item-badge,
html[data-palette="violet"] .cl-nav-item.active:has(+ .cl-nav-submenu .cl-nav-subitem.active) .v2-nav-badge,
html[data-palette="violet"] .cl-nav-item.active:has(+ .cl-nav-submenu .cl-nav-subitem.active) .nav-item-badge {
  background: var(--tu-color-action-primary); color: var(--tu-color-text-on-action); border-color: var(--tu-color-action-primary);
}
html[data-palette="violet"] .nav-submenu {
  margin-left: var(--tu-space-20); padding-left: var(--tu-space-8);
  border-left: 1px solid var(--tu-color-border-subtle);
}
html[data-palette="violet"] .nav-subitem { padding-left: var(--tu-space-12); font-size: 14px; }
html[data-palette="violet"] .nav-subitem:hover:not(.active) { background: var(--tu-color-bg-hover); color: var(--tu-color-text-primary); }
@media (min-width: 821px) {
  html[data-palette="violet"] .cl-nav-submenu {
    margin-left: var(--tu-space-20); padding-left: var(--tu-space-8);
    border-left: 1px solid var(--tu-color-border-subtle);
  }
  html[data-palette="violet"] .cl-nav-subitem { padding-left: var(--tu-space-12); font-size: 14px; }
  html[data-palette="violet"] .cl-nav-subitem:hover:not(.active) { background: var(--tu-color-bg-hover); color: var(--tu-color-text-primary); }
}

/* ページ見出しの下の1行（説明1行＋主操作）。運営画面の「お金」の各ページと広告主画面の
   「請求・支払い」で同じ形にそろえる（見出し → 説明・主操作 → タブ → 絞り込み → 本文）。 */
html[data-palette="violet"] .b2b-page-lead {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--b2b-control-gap); margin-bottom: var(--b2b-group-gap);
}
html[data-palette="violet"] .b2b-page-lead > .page-subtitle,
html[data-palette="violet"] .b2b-page-lead > .cl-page-subtitle { flex: 1 1 320px; margin: 0; }
html[data-palette="violet"] .b2b-page-lead-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--b2b-control-gap); }
html[data-palette="violet"] .cl-page-subtitle { font-size: 14px; line-height: var(--b2b-lh-body); color: var(--text-secondary); }
/* 広告主画面の設定: タブごとの保存ボタンの行（会社情報・担当者・請求先で同じ保存処理を呼ぶ） */
html[data-palette="violet"] .cl-set-save-row { display: flex; justify-content: flex-end; margin-top: var(--b2b-stack-md); }
html[data-palette="violet"] .cl-set-save-row > .btn-full { flex: 1 1 auto; }
/* 広告主画面「請求・支払い」の絞り込み（状態のタブ列＋検索）。パネル内に置くため影と外側の余白は付けない */
html[data-palette="violet"] .cl-billing-filter { box-shadow: none; padding-left: 0; padding-right: 0; }
html[data-palette="violet"] .cl-billing-filter .input[type="search"] { max-width: 280px; }

/* ============================================================
   状態バッジ・トースト・AI 判定の面（boost.css / boost-ds-components.css は creator と共有のため
   ops / client 側だけ上書きする）。待ち・注意は灰色の面＋濃いインク、差戻し・失敗・取消は
   エラー色。緑・黄の面は使わない。状態は文言（とアイコン）で伝える。
   ============================================================ */
html[data-palette="violet"] .badge-submit-wait, html[data-palette="violet"] .badge-review-wait,
html[data-palette="violet"] .tu-badge--submit-wait, html[data-palette="violet"] .tu-badge--review-wait,
html[data-palette="violet"] .manual-badge-updated {
  background: var(--tu-color-bg-muted); color: var(--tu-color-text-primary);
}
html[data-palette="violet"] .badge-revision, html[data-palette="violet"] .badge-canceled,
html[data-palette="violet"] .tu-badge--revision, html[data-palette="violet"] .tu-badge--canceled {
  background: var(--tu-color-feedback-error-bg); color: var(--tu-color-feedback-error-text);
}
html[data-palette="violet"] .tu-badge--draft, html[data-palette="violet"] .tu-badge--closed {
  background: var(--tu-color-bg-muted); color: var(--tu-color-text-secondary);
}
html[data-palette="violet"] .toast-success, html[data-palette="violet"] .toast-warning,
html[data-palette="violet"] .tu-toast--success, html[data-palette="violet"] .tu-toast--warning {
  border-color: var(--tu-color-border-subtle);
}
html[data-palette="violet"] .toast-error,
html[data-palette="violet"] .tu-toast--error { border-color: var(--tu-color-feedback-error-border); }
html[data-palette="violet"] .ai-verdict.ok, html[data-palette="violet"] .ai-verdict.improve {
  border-color: var(--tu-color-border-subtle); background: var(--tu-color-bg-subtle);
}
html[data-palette="violet"] .ai-verdict.ng {
  border-color: var(--tu-color-feedback-error-border); background: var(--tu-color-feedback-error-bg);
}
html[data-palette="violet"] .ai-verdict-label.ok, html[data-palette="violet"] .ai-verdict-label.improve {
  background: var(--tu-color-bg-muted); color: var(--tu-color-text-primary);
}
html[data-palette="violet"] .ai-verdict-label.ng {
  background: var(--tu-color-feedback-error-bg); color: var(--tu-color-feedback-error-text);
}
html[data-palette="violet"] .pii-input.confirmed { background: var(--tu-color-bg-subtle); }
html[data-palette="violet"] .pii-input.error,
html[data-palette="violet"] .boost-dropzone.error { background: var(--tu-color-feedback-error-bg); }
html[data-palette="violet"] .bfss-state.done { color: var(--tu-color-text-primary); background: var(--tu-color-bg-muted); }
html[data-palette="violet"] .bfss-row.done { color: var(--tu-color-text-primary); }
html[data-palette="violet"] .bfss-row.done .bfss-row-num { background: var(--tu-color-bg-muted); color: var(--tu-color-text-primary); }

/* ============================================================
   DS 2.3 部品の ops / client 向け Variant
   boost-ds-components.css の .tu-* は creator の実値から作った基本形のため、ops / client では
   ここで B2B の形に上書きし、既存のクラス（.subtab・.filter-chip・.kpi-card・.btn-secondary 等）も
   同じ規則に入れて見た目を DS の部品にそろえる（互換方式。クラス名の置き換えは段階的に行う）。
   :where() で詳細度を (0,1,1) に抑え、既存の2クラス以上の Variant（.fb-more-btn[aria-expanded] 等）を優先させる。
   - Tabs（同じ文脈の表示切替）: 選択中は濃いインクの太字＋キーカラーの下線
   - Tag（絞り込み）: 丸い輪郭のチップ。選択中はキーカラーの面＋白抜き
   - SegmentedControl（2〜4個の表示切替）: 1本の枠の中で区切り、選択中はキーカラーの面＋白抜き
   - MetricCard（指標）: 白い面＋控えめな枠。指標名 12px・数値 24px 太字（等幅数字）
   - EmptyState: 中央そろえの見出し 16px＋説明 14px
   - Button: Secondary は白い面＋控えめな枠＋濃いインク（太さ 500）、Destructive はエラー色の文字と枠
   ============================================================ */
html[data-palette="violet"] :where(.tu-tab, .subtab, .cd-tab) {
  background: transparent; color: var(--tu-color-text-secondary); font-weight: 500;
  border-bottom: 2px solid transparent;
}
html[data-palette="violet"] .tu-tab {
  flex: 0 0 auto; -webkit-appearance: none; appearance: none;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  min-height: var(--b2b-control-h); font-size: 14px;
}
html[data-palette="violet"] :where(.tu-tab, .subtab, .cd-tab):hover { color: var(--tu-color-text-primary); }
/* 選択中のタブは面を塗らない（基本形の .tu-tab[aria-selected] の塗りを消す）。下線だけキーカラー */
html[data-palette="violet"] :where(.tu-tab, .subtab, .cd-tab):is(.active, [aria-selected="true"]) {
  background: transparent; border-color: transparent;
}
html[data-palette="violet"] :where(.tu-tab, .subtab, .cd-tab):is(.active, [aria-selected="true"]) {
  color: var(--tu-color-text-primary); font-weight: 700; border-bottom-color: var(--tu-color-action-primary);
}
html[data-palette="violet"] :where(.tu-tab, .subtab, .cd-tab):focus-visible {
  outline: 2px solid var(--tu-color-border-focus); outline-offset: -2px;
}

html[data-palette="violet"] :where(.tu-tag, .filter-chip, .filter-tab, .cl-camp-chip) {
  display: inline-flex; align-items: center; gap: var(--tu-space-4);
  border-radius: var(--tu-radius-full); background: var(--tu-color-bg-surface);
  border: 1px solid var(--tu-color-border-subtle); color: var(--tu-color-text-secondary);
  font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none;
}
/* 絞り込みのチップ（.filter-chip / .filter-tab / .cl-camp-chip）にも .tu-tag を付けている。基本形の .tu-tag が持つ
   creator 向けの指定（タップ領域を広げる ::after・position・折り返し禁止）は、ops / client では
   操作の最低高さ（--b2b-control-h）で足りているため外し、従来の並び・折り返しを保つ。 */
html[data-palette="violet"] .tu-tag { position: static; }
html[data-palette="violet"] .tu-tag::after { content: none; }
html[data-palette="violet"] .filter-tab.tu-tag { white-space: normal; }
html[data-palette="violet"] :is(.filter-tab, .cl-camp-chip).tu-tag { flex-shrink: 1; }
html[data-palette="violet"] :where(.tu-tag, .filter-chip, .filter-tab, .cl-camp-chip):hover:not(.active):not(.tu-tag--active) {
  border-color: var(--tu-color-border-control); color: var(--tu-color-text-primary);
}
html[data-palette="violet"] :where(.tu-tag, .filter-chip, .filter-tab, .cl-camp-chip):is(.active, .tu-tag--active, [aria-pressed="true"]) {
  background: var(--tu-color-action-primary); border-color: var(--tu-color-action-primary);
  color: var(--tu-color-text-on-action); font-weight: 700; text-decoration: none;
}

html[data-palette="violet"] .tu-segmented-control {
  display: inline-flex; gap: 0; overflow: hidden;
  border: 1px solid var(--tu-color-border-subtle); border-radius: var(--tu-radius-control);
  background: var(--tu-color-bg-surface);
}
html[data-palette="violet"] .tu-segmented-control > :is(button, .tu-tab) {
  flex: 0 0 auto; border: 0; border-right: 1px solid var(--tu-color-border-subtle); border-radius: 0;
  background: transparent; color: var(--tu-color-text-secondary);
  font-size: 14px; font-weight: 500; padding: var(--tu-space-8) var(--tu-space-12);
}
html[data-palette="violet"] .tu-segmented-control > :is(button, .tu-tab):last-child { border-right: 0; }
html[data-palette="violet"] .tu-segmented-control > :is(button, .tu-tab):is(.active, [aria-pressed="true"], [aria-selected="true"]) {
  background: var(--tu-color-action-primary); color: var(--tu-color-text-on-action); font-weight: 700;
}

html[data-palette="violet"] :where(.tu-metric-card, .kpi-card, .cl-kpi-card, .ops-stat-tile) {
  background: var(--tu-color-bg-surface); border: 1px solid var(--tu-color-border-subtle);
  border-radius: var(--tu-radius-card); box-shadow: none;
}
/* 基本形の flex: 1 は creator の横並び用。ops / client の指標はグリッドと各行の flex 指定に任せる */
html[data-palette="violet"] .tu-metric-card { flex: 0 1 auto; min-width: auto; }
html[data-palette="violet"] :where(.tu-metric-card, .kpi-card, .cl-kpi-card, .ops-stat-tile):hover { border-color: var(--tu-color-border-control); }
html[data-palette="violet"] .kpi-card.kpi-card-danger {
  border-color: var(--tu-color-feedback-error-border); background: var(--tu-color-feedback-error-bg);
}
html[data-palette="violet"] :where(.tu-metric-card-label, .kpi-label, .cl-kpi-label, .ops-stat-tile-label) {
  font-size: 12px; font-weight: 500; color: var(--tu-color-text-secondary); letter-spacing: 0; text-transform: none;
}
html[data-palette="violet"] :where(.tu-metric-card-value, .kpi-val, .cl-kpi-val) {
  font-size: 24px; font-weight: 700; color: var(--tu-color-text-primary);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}

html[data-palette="violet"] .tu-empty-state { margin: 0; text-align: center; }
html[data-palette="violet"] .tu-empty-state-title { font-size: 16px; font-weight: 700; color: var(--tu-color-text-primary); line-height: var(--b2b-lh-heading); }
html[data-palette="violet"] .tu-empty-state-body { margin: 0; font-size: 14px; color: var(--tu-color-text-secondary); line-height: var(--b2b-lh-body); }
html[data-palette="violet"] .tu-empty-state svg { color: var(--tu-color-icon-secondary); }

html[data-palette="violet"] :where(.tu-btn-secondary, .btn-secondary, .action-btn, .topbar-btn:not(.primary), .cl-topbar-btn:not(.primary):not(.ghost)) {
  background: var(--tu-color-bg-surface); color: var(--tu-color-text-primary);
  border: 1px solid var(--tu-color-border-subtle); border-radius: var(--tu-radius-control);
  font-weight: 500; box-shadow: none;
}
html[data-palette="violet"] :where(.tu-btn-secondary, .btn-secondary, .action-btn, .topbar-btn:not(.primary), .cl-topbar-btn:not(.primary):not(.ghost)):hover:not(:disabled) {
  background: var(--tu-color-bg-hover); border-color: var(--tu-color-border-control); color: var(--tu-color-text-primary);
}
html[data-palette="violet"] :where(.tu-btn-destructive, .btn-secondary.danger, .action-btn.danger) {
  color: var(--tu-color-feedback-error-text); border-color: var(--tu-color-feedback-error-border);
}
html[data-palette="violet"] :where(.tu-btn-destructive, .btn-secondary.danger, .action-btn.danger):hover:not(:disabled) {
  background: var(--tu-color-feedback-error-bg); color: var(--tu-color-feedback-error-text); border-color: var(--tu-color-feedback-error-border);
}
html[data-palette="violet"] .tu-btn-primary {
  background-color: var(--tu-color-action-primary); background-image: none; color: var(--tu-color-text-on-action);
  border-radius: var(--tu-radius-control); box-shadow: none; font-size: 14px; font-weight: 700;
}
html[data-palette="violet"] .tu-btn-primary:hover { background-color: var(--tu-color-action-hover); }
html[data-palette="violet"] .tu-btn-tertiary { color: var(--tu-color-text-link); }

/* 応募・進行のマトリクスの操作ボタン: boost.css の高さ 30・間 6 を、操作の最低高さとボタンの間 8 にする */
html[data-palette="violet"] .scr-matrix-actions { gap: var(--b2b-stack-sm); }
html[data-palette="violet"] .scr-matrix-actions .btn,
html[data-palette="violet"] .scr-matrix-actions .btn-secondary,
html[data-palette="violet"] .scr-matrix-actions .action-btn {
  height: auto; min-height: var(--b2b-control-h); padding: 0 var(--tu-space-12);
}

/* 一覧の検索欄（ops / client 共通の型）: 入力欄の左に虫眼鏡のアイコンを置く。
   <span class="b2b-search"><span class="b2b-search-icon" aria-hidden="true">（search アイコン）</span><input …></span>
   幅の指定（flex・min-width・width）は外側の span に持たせ、入力欄はその幅いっぱいに広がる。
   外側に幅の指定が無いときは入力欄の元の幅のまま。アイコンは押せない飾りで、名前は入力欄の placeholder / aria-label が担う。 */
html[data-palette="violet"] .b2b-search {
  position: relative; display: inline-flex; align-items: center; min-width: 0; max-width: 100%;
}
html[data-palette="violet"] .b2b-search > input { flex: 1 1 auto; min-width: 0; padding-left: calc(var(--tu-space-12) + 16px + var(--tu-space-8)); }
html[data-palette="violet"] .b2b-search-icon {
  position: absolute; left: var(--tu-space-12); top: 50%; transform: translateY(-50%);
  display: inline-flex; font-size: 16px; color: var(--tu-color-icon-secondary); pointer-events: none;
}
@media (max-width: 768px) {
  html[data-palette="violet"] .b2b-search { width: 100%; }
}

/* ============================================================
   状態バッジの型（ops / client 共通。案件・応募・提出・支払い・請求）
   E-1 で信号機の色をやめた結果、公開中と公開前などが同じ灰色になったため、DS の範囲で型を分ける。
   色だけに頼らず、先頭のアイコン（::before のマスク）でも型を示す。文言は各画面のまま。
   - 動いている（公開中・進行中・応募受付中・利用中）: キーカラーの薄い面＋キーカラーの文字・点
   - 待ち・下書き（公開前・審査中・確認待ち・提出待ち・下書き・未振込）: 灰色の面＋濃いインク・時計
   - 完了（承認済み・達成・振込済み・報酬確定）: 面なしの枠のみ＋補助の文字・チェック
   - 終了（クローズ・終了・キャンセル・見送り・契約終了）: 面なしの枠のみ＋補助の文字・横線
   - エラー・停止（差戻し・修正依頼・要対応・凍結・一時停止）: エラー色の面・注意の三角
   バッジの型はクラス（.badge-* / .tu-badge--*）で決め、クラスだけでは分けられない状態（未振込・広告主の一時停止・
   提出の進行カード）は data-tone で上書きする（同じ詳細度のため後ろに置く）。案件の状態ピル（.cst-pill）は
   data-type で同じ型にそろえる。creator はこのファイルを読まないため変わらない。
   ============================================================ */
html[data-palette="violet"] :is(.badge, .tu-badge) { border: 1px solid transparent; opacity: 1; }
html[data-palette="violet"] :is(.badge, .tu-badge):is(.badge-in-progress, .tu-badge--in-progress, .badge-recruiting, .tu-badge--recruiting) { background: var(--tu-color-bg-selected); color: var(--tu-color-text-link); border-color: transparent; }
html[data-palette="violet"] :is(.badge, .tu-badge):is(.badge-draft, .tu-badge--draft, .badge-review, .tu-badge--review, .badge-review-wait, .tu-badge--review-wait, .badge-submit-wait, .tu-badge--submit-wait) { background: var(--tu-color-bg-muted); color: var(--tu-color-text-primary); border-color: transparent; }
html[data-palette="violet"] :is(.badge, .tu-badge):is(.badge-approved, .tu-badge--approved, .badge-achieved, .tu-badge--achieved) { background: transparent; color: var(--tu-color-text-secondary); border-color: color-mix(in srgb, var(--tu-color-border-control) 55%, transparent); }
html[data-palette="violet"] :is(.badge, .tu-badge):is(.badge-closed, .tu-badge--closed, .badge-canceled, .tu-badge--canceled, .badge-rejected) { background: transparent; color: var(--tu-color-text-secondary); border-color: color-mix(in srgb, var(--tu-color-border-control) 55%, transparent); }
html[data-palette="violet"] :is(.badge, .tu-badge):is(.badge-revision, .tu-badge--revision, .badge-frozen, .tu-badge--frozen) { background: var(--tu-color-feedback-error-bg); color: var(--tu-color-feedback-error-text); border-color: transparent; }
html[data-palette="violet"] :is(.badge, .tu-badge):is(.badge-in-progress, .tu-badge--in-progress, .badge-recruiting, .tu-badge--recruiting)::before { --badge-type-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='6' fill='black' stroke='none'/%3E%3C/svg%3E"); }
html[data-palette="violet"] :is(.badge, .tu-badge):is(.badge-draft, .tu-badge--draft, .badge-review, .tu-badge--review, .badge-review-wait, .tu-badge--review-wait, .badge-submit-wait, .tu-badge--submit-wait)::before { --badge-type-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
html[data-palette="violet"] :is(.badge, .tu-badge):is(.badge-approved, .tu-badge--approved, .badge-achieved, .tu-badge--achieved)::before { --badge-type-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
html[data-palette="violet"] :is(.badge, .tu-badge):is(.badge-closed, .tu-badge--closed, .badge-canceled, .tu-badge--canceled, .badge-rejected)::before { --badge-type-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E"); }
html[data-palette="violet"] :is(.badge, .tu-badge):is(.badge-revision, .tu-badge--revision, .badge-frozen, .tu-badge--frozen)::before { --badge-type-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19L12 3.5z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
html[data-palette="violet"] :is(.badge, .tu-badge)[data-tone="active"],
html[data-palette="violet"] .cst-pill[data-type="active"] { background: var(--tu-color-bg-selected); color: var(--tu-color-text-link); border-color: transparent; }
html[data-palette="violet"] :is(.badge, .tu-badge)[data-tone="waiting"],
html[data-palette="violet"] .cst-pill[data-type="waiting"] { background: var(--tu-color-bg-muted); color: var(--tu-color-text-primary); border-color: transparent; }
html[data-palette="violet"] :is(.badge, .tu-badge)[data-tone="done"],
html[data-palette="violet"] .cst-pill[data-type="done"] { background: transparent; color: var(--tu-color-text-secondary); border-color: color-mix(in srgb, var(--tu-color-border-control) 55%, transparent); }
html[data-palette="violet"] :is(.badge, .tu-badge)[data-tone="ended"],
html[data-palette="violet"] .cst-pill[data-type="ended"] { background: transparent; color: var(--tu-color-text-secondary); border-color: color-mix(in srgb, var(--tu-color-border-control) 55%, transparent); }
html[data-palette="violet"] :is(.badge, .tu-badge)[data-tone="error"],
html[data-palette="violet"] .cst-pill[data-type="error"] { background: var(--tu-color-feedback-error-bg); color: var(--tu-color-feedback-error-text); border-color: transparent; }
html[data-palette="violet"] :is(.badge, .tu-badge)[data-tone="active"]::before,
html[data-palette="violet"] .cst-pill[data-type="active"]::before { --badge-type-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='6' fill='black' stroke='none'/%3E%3C/svg%3E"); }
html[data-palette="violet"] :is(.badge, .tu-badge)[data-tone="waiting"]::before,
html[data-palette="violet"] .cst-pill[data-type="waiting"]::before { --badge-type-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
html[data-palette="violet"] :is(.badge, .tu-badge)[data-tone="done"]::before,
html[data-palette="violet"] .cst-pill[data-type="done"]::before { --badge-type-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
html[data-palette="violet"] :is(.badge, .tu-badge)[data-tone="ended"]::before,
html[data-palette="violet"] .cst-pill[data-type="ended"]::before { --badge-type-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E"); }
html[data-palette="violet"] :is(.badge, .tu-badge)[data-tone="error"]::before,
html[data-palette="violet"] .cst-pill[data-type="error"]::before { --badge-type-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19L12 3.5z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
html[data-palette="violet"] :is(.badge, .tu-badge):is(.badge-in-progress, .tu-badge--in-progress, .badge-recruiting, .tu-badge--recruiting, .badge-draft, .tu-badge--draft, .badge-review, .tu-badge--review, .badge-review-wait, .tu-badge--review-wait, .badge-submit-wait, .tu-badge--submit-wait, .badge-approved, .tu-badge--approved, .badge-achieved, .tu-badge--achieved, .badge-closed, .tu-badge--closed, .badge-canceled, .tu-badge--canceled, .badge-rejected, .badge-revision, .tu-badge--revision, .badge-frozen, .tu-badge--frozen, [data-tone])::before,
html[data-palette="violet"] .cst-pill[data-type]::before {
  content: ''; flex-shrink: 0; width: 12px; height: 12px; border-radius: 0; background: currentColor;
  -webkit-mask: var(--badge-type-icon) center / contain no-repeat; mask: var(--badge-type-icon) center / contain no-repeat;
}
/* 案件の状態ピルは型のアイコンを先頭に出すため、分類だけの点（.cst-dot）は隠す */
html[data-palette="violet"] .cst-pill[data-type] > .cst-dot { display: none; }

/* ============================================================
   可読文字の下限（ops / client 共通）
   読ませる文字は 12px 以上にする。クリエイター画面と共有する boost.css と、CSS を差し込む共有 JS
   （boost-dock.js・boost-thread.js・boost-flow.js・boost-memo.js・boost-notify-popup.js・boost-hint.js）が
   12px 未満で組んでいるラベル・時刻・件数・注記を、運営・広告主の画面ではここで 12px にそろえる。
   インライン style には効かない。
   ============================================================ */
html[data-palette="violet"] :is(
  .camp-drawer-section-title, .camp-drawer-phase-steps, .camp-drawer-phase-arrow, .camp-drawer-phase-dwell,
  .camp-drawer-bar-label, .camp-drawer-stat-label, .camp-drawer-timeline-meta, .campaign-card__brand, .notif-time,
  .boost-dropzone .bdz-sub, .boost-dropzone .bdz-hint, .sticker-badge .sticker-name, .sticker-badge .sticker-sub,
  .official-boost-badge, .camp-filter-count, .pii-vault-badge, .video-platform-badge, .cc-stat-label, .ccr-live-tag,
  .ccr-brand, .filter-bar-hint, .bpp-tab, .cl-summary-label, .avatar-stack .as-item, .avatar-stack .as-more,
  .bdz-thumb-name, .boost-dropzone .bdz-filename-name, .bdz-thumb-file-size, .bdz-thumb-file-badge,
  .bf-att-video-open, .bmv-fallback-name, .mu-filename, .msg-preview-time, .manual-badge,
  .mfig-step small, .mfig-actor small, .mfig-actor-link small, .mfig-vcard small,
  .scr-matrix-table th, .scr-matrix-sub, .rpt-footnote, .rpt-kpi-label, .rpt-kpi-sub, .rpt-kpi-footnote,
  .rpt-section-extra, .rpt-mom-marker, .rpt-mom-xaxis, .rpt-mom-legend, .rpt-cr-stats, .rpt-cr-cost, .rpt-hl-stats,
  .rpt-hl-link, .bfss-step-num, .bfss-state, .bfss-owner, .bfss-row-num,
  .bt-sec-arrow, .bt-more, .bt-note, .bt-goto-review, .bt-readonly-chip,
  .bdk-row-campaign, .bdk-row-last, .bdk-row-time, .bdk-row-consult, .bdk-thread-open, .bdk-bmsg-sender,
  .bdk-thread-gate, .bdk-ai-rated-note, .bdk-ai-label, .bdk-ai-note, .bdk-ai-escalation-banner, .bdk-ai-sendto,
  .bdk-ai-act, .bdk-ai-msg.system, .bdk-ai-msg.notice, .bdk-ai-escalate, .bdk-fb-page, .bdk-fb-attach-btn,
  .bdk-fb-file-hint, .bdk-fb-file-chip, .bdk-tab,
  .bf-si-sender, .bf-si-ai-assist-note, .bf-si-time, .bf-si-note-head, .bf-unread-divider, .bf-consult-divider,
  .bf-date-divider, .bf-th-rules-arrow, .bf-summary-cap,
  .boost-np-time, .bm-head-page, .bm-attach-btn, .bm-file-chip
) { font-size: 12px; }

/* 入力欄の文字は幅によらず 16px 以上（iOS の自動拡大を防ぎ、読ませる文字の下限もそろえる）。
   スライダー（range）は文字を持たないが、拡大の判定に入らないよう同じ値にする。 */
html[data-palette="violet"] :is(.input, select.input, textarea.input, input[type="range"]) { font-size: 16px; }

/* 押せる要素の当たり判定（ops / client 共通）。モバイル幅では 44px 以上にする。
   確認ダイアログのボタン・レポートの切替チップと投稿リンク・進行一覧の「その他の操作」は共有部品のため、ここでそろえる。
   閉じている「その他の操作」の中身は表示しない（details の既定と同じ。幅 0 の列に縦書きで残さない）。 */
html[data-palette="violet"] .bp-more:not([open]) > .bp-more-menu { display: none; }
@media (max-width: 768px) {
  html[data-palette="violet"] :is(.bc-btn, .rpt-mom-chip, .rpt-hl-link, .bp-more-menu > *) { min-height: 44px; }
  html[data-palette="violet"] .rpt-hl-link { display: inline-flex; align-items: center; }
  html[data-palette="violet"] .bp-more > summary { min-width: 44px; min-height: 44px; }
  html[data-palette="violet"] :is(.mfig-step, .mfig-vcard, .mfig-actor) small a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
}

/* ホームの「トピック一覧」（boost-topics.js・運営画面と広告主画面の共通部品）。
   重要度は行の左端の線で示し、種類のラベル・期限の文言（「3日超過」）と読み上げ用の語を併記する
   （色だけで伝えない）。至急=エラー色、注意=テーマ色、お知らせ=区切り線の色。 */
html[data-palette="violet"] .tu-topics {
  background: var(--tu-color-bg-surface); border: 1px solid var(--tu-color-border-subtle);
  border-radius: var(--tu-radius-card); padding: var(--tu-space-20); min-width: 0;
}
html[data-palette="violet"] .tu-topics-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--tu-space-8) var(--tu-space-12); margin-bottom: var(--tu-space-12); }
html[data-palette="violet"] .tu-topics-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--tu-color-text-primary); }
html[data-palette="violet"] .tu-topics-updated { font-size: 12px; color: var(--tu-color-text-secondary); }
html[data-palette="violet"] .tu-topics-failed { font-size: 12px; color: var(--tu-color-feedback-error-text); }
html[data-palette="violet"] .tu-topics-refresh { margin-left: auto; }
html[data-palette="violet"] .tu-topics-tabs { display: flex; flex-wrap: wrap; gap: var(--tu-space-8); margin-bottom: var(--tu-space-12); }
html[data-palette="violet"] .tu-topics-tab-n { font-variant-numeric: tabular-nums; }
html[data-palette="violet"] .tu-topics-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tu-space-8) var(--tu-space-12); margin-bottom: var(--tu-space-12); }
html[data-palette="violet"] .tu-topics-kinds { display: flex; flex-wrap: wrap; gap: var(--tu-space-8); flex: 1 1 320px; min-width: 0; }
html[data-palette="violet"] .tu-topics-search {
  flex: 0 1 280px; min-width: 0; height: var(--b2b-control-h, 36px); padding: 0 var(--tu-space-12);
  font-size: 16px; color: var(--tu-color-text-primary); background: var(--tu-color-bg-canvas);
  border: 1px solid var(--tu-color-border-control); border-radius: var(--tu-radius-control);
}
html[data-palette="violet"] .tu-topics-search:focus-visible { outline: 2px solid var(--tu-color-border-focus); outline-offset: 1px; }
html[data-palette="violet"] .tu-topics-notice { font-size: 12px; color: var(--tu-color-text-secondary); margin-bottom: var(--tu-space-8); }
html[data-palette="violet"] .tu-topics-state { padding: var(--tu-space-16) 0; font-size: 14px; color: var(--tu-color-text-secondary); display: flex; align-items: center; flex-wrap: wrap; gap: var(--tu-space-8); }
html[data-palette="violet"] .tu-topics-ul { list-style: none; margin: 0; padding: 0; }
html[data-palette="violet"] .tu-topic + .tu-topic { border-top: 1px solid var(--tu-color-border-subtle); }
html[data-palette="violet"] .tu-topic-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, auto) 16px; align-items: center;
  gap: var(--tu-space-4) var(--tu-space-12); padding: var(--tu-space-12) var(--tu-space-12) var(--tu-space-12) var(--tu-space-16);
  border-left: 4px solid var(--tu-color-border-subtle); color: var(--tu-color-text-primary); text-decoration: none; min-width: 0;
}
html[data-palette="violet"] a.tu-topic-row { cursor: pointer; }
html[data-palette="violet"] a.tu-topic-row:hover { background: var(--tu-color-bg-hover); }
html[data-palette="violet"] a.tu-topic-row:focus-visible { outline: 2px solid var(--tu-color-border-focus); outline-offset: -2px; }
html[data-palette="violet"] .tu-topic[data-sev="danger"] .tu-topic-row { border-left-color: var(--tu-color-feedback-error-text); }
html[data-palette="violet"] .tu-topic[data-sev="warning"] .tu-topic-row { border-left-color: var(--tu-color-action-primary); }
html[data-palette="violet"] .tu-topic-thumb { width: 40px; height: 40px; border-radius: var(--tu-radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--tu-color-bg-muted); }
html[data-palette="violet"] .tu-topic-thumb img { width: 40px; height: 40px; object-fit: cover; display: block; }
html[data-palette="violet"] .tu-topic-initial { font-size: 16px; font-weight: 700; color: var(--tu-color-text-secondary); }
html[data-palette="violet"] .tu-topic-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html[data-palette="violet"] .tu-topic-line1 { display: flex; align-items: center; gap: var(--tu-space-8); min-width: 0; }
html[data-palette="violet"] .tu-topic-kind {
  flex-shrink: 0; font-size: 12px; font-weight: 700; padding: 1px var(--tu-space-8); border-radius: var(--tu-radius-full);
  background: var(--tu-color-bg-muted); color: var(--tu-color-text-secondary);
}
html[data-palette="violet"] .tu-topic[data-sev="danger"] .tu-topic-kind { background: var(--tu-color-feedback-error-bg); color: var(--tu-color-feedback-error-text); }
html[data-palette="violet"] .tu-topic-title { font-size: 14px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-palette="violet"] .tu-topic-count { flex-shrink: 0; font-size: 12px; font-weight: 700; padding: 1px var(--tu-space-8); border-radius: var(--tu-radius-full); border: 1px solid var(--tu-color-border-control); color: var(--tu-color-text-primary); }
html[data-palette="violet"] .tu-topic-detail { font-size: 12px; color: var(--tu-color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-palette="violet"] .tu-topic-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px var(--tu-space-12); font-size: 12px; color: var(--tu-color-text-secondary); min-width: 0; max-width: 360px; }
html[data-palette="violet"] .tu-topic-meta-item { white-space: nowrap; }
html[data-palette="violet"] .tu-topic-due.is-overdue { color: var(--tu-color-feedback-error-text); font-weight: 700; }
html[data-palette="violet"] .tu-topic-chev { font-size: 18px; color: var(--tu-color-text-tertiary); text-align: center; }
@media (max-width: 768px) {
  html[data-palette="violet"] .tu-topics { padding: var(--tu-space-16); }
  html[data-palette="violet"] .tu-topics-search { flex: 1 1 100%; }
  /* 狭い画面では区分タブと種類チップを横スクロールの1行にし、一覧を最初の画面に入れる */
  html[data-palette="violet"] .tu-topics-tabs,
  html[data-palette="violet"] .tu-topics-kinds { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: var(--tu-space-4); }
  html[data-palette="violet"] .tu-topics-tabs::-webkit-scrollbar,
  html[data-palette="violet"] .tu-topics-kinds::-webkit-scrollbar { display: none; }
  html[data-palette="violet"] .tu-topics-tabs > *,
  html[data-palette="violet"] .tu-topics-kinds > * { flex: 0 0 auto; white-space: nowrap; }
  html[data-palette="violet"] .tu-topics-kinds { flex: 1 1 100%; }
  html[data-palette="violet"] .tu-topic-row { grid-template-columns: 40px minmax(0, 1fr) 16px; padding: var(--tu-space-12) var(--tu-space-8) var(--tu-space-12) var(--tu-space-12); }
  html[data-palette="violet"] .tu-topic-main { grid-column: 2; }
  html[data-palette="violet"] .tu-topic-chev { grid-column: 3; grid-row: 1; }
  html[data-palette="violet"] .tu-topic-meta { grid-column: 2 / 4; grid-row: 2; justify-content: flex-start; max-width: none; }
  html[data-palette="violet"] .tu-topic-meta-item { white-space: normal; }
}

/* 運営ホーム（boost-ops-home.js）。全体像（流れ図・今週の動き・実施中の案件）と、運営待ちの一覧（2階層目）。
   区切りは余白と細い線だけにし、色は主操作・リンク・いちばん運営待ちが多い段の枠に置く。
   並びは部品の幅で決める（@container）。ops は data-palette="violet" 固定だが、ほかのテーマでも
   崩れないよう data-palette の値を問わずに当てる（このファイルは creator に読み込ませない）。 */
html[data-palette] .oh-home {
  container-type: inline-size; container-name: ops-home;
  max-width: var(--tu-size-content-wide, 75rem); min-width: 0;
  color: var(--tu-color-text-primary); font-size: 1rem; line-height: 1.5;
}
html[data-palette] .oh-home :where(h1, h2, h3, p, ul, ol) { margin: 0; }
html[data-palette] .oh-home :where(ul, ol) { list-style: none; padding: 0; }
/* リンクで作った主操作（.btn-primary）は既存の主ボタンの色のままにする */
html[data-palette] .oh-home :where(a:not(.btn-primary)) { color: inherit; text-decoration: none; }
html[data-palette] .oh-home :where(a.btn-primary) { text-decoration: none; }
html[data-palette] .oh-home :where(button:not(.btn-primary)) { font: inherit; }
html[data-palette] .oh-home :is(a, button, [tabindex]):focus-visible { outline: 2px solid var(--tu-color-border-focus); outline-offset: 2px; }
html[data-palette] .oh-ph { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--tu-space-4) var(--tu-space-16); margin-bottom: var(--tu-space-32); }
html[data-palette] .oh-title { font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
/* 一覧の切り替え後に読み上げの位置を移すための見出し（押せる物ではないので枠は出さない） */
html[data-palette] .oh-home .oh-title[data-oh-focus]:is(:focus, :focus-visible) { outline: none; }
html[data-palette] .oh-h-n { font-size: 0.875rem; font-weight: 400; color: var(--tu-color-text-secondary); margin-left: var(--tu-space-4); font-variant-numeric: tabular-nums; }
html[data-palette] .oh-upd { font-size: 0.875rem; line-height: 1.25rem; color: var(--tu-color-text-secondary); font-variant-numeric: tabular-nums; }
html[data-palette] .oh-warn { font-size: 0.875rem; line-height: 1.25rem; color: var(--tu-color-feedback-error-text); }
html[data-palette] .oh-refresh,
html[data-palette] .oh-lnk,
html[data-palette] .oh-more {
  display: inline-flex; align-items: center; min-height: var(--tu-size-hit, 44px); padding: 0 var(--tu-space-8);
  background: none; border: 0; cursor: pointer; color: var(--tu-color-text-link);
  font-size: 0.875rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px;
}
html[data-palette] .oh-refresh { margin-left: auto; }
html[data-palette] .oh-refresh:disabled { color: var(--tu-color-text-tertiary); cursor: default; }
html[data-palette] .oh-more { padding-left: 0; }
html[data-palette] .oh-h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }
html[data-palette] .oh-h3 { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: var(--tu-color-text-secondary); }
html[data-palette] .oh-blk + .oh-blk { margin-top: var(--tu-space-48); }
html[data-palette] .oh-bh { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--tu-space-8) var(--tu-space-16); margin-bottom: var(--tu-space-12); }
html[data-palette] .oh-lead { font-size: 1rem; line-height: 1.5rem; color: var(--tu-color-text-secondary); margin-bottom: var(--tu-space-16); }
html[data-palette] .oh-lead b { color: var(--tu-color-text-primary); }
html[data-palette] .oh-muted { color: var(--tu-color-text-secondary); }
html[data-palette] .oh-sm { font-size: 0.875rem; }
html[data-palette] .oh-state { padding: var(--tu-space-16) 0; font-size: 0.875rem; color: var(--tu-color-text-secondary); display: flex; align-items: center; flex-wrap: wrap; gap: var(--tu-space-8); }
html[data-palette] .oh-home .oh-primary { font-weight: 700; }
html[data-palette] .oh-primary { min-height: var(--tu-size-control, 48px); padding: 0 var(--tu-space-20); border-radius: var(--tu-radius-control); display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
html[data-palette] .oh-chev { color: var(--tu-color-text-tertiary); font-size: 1.25rem; }
html[data-palette] .oh-th { flex: 0 0 auto; width: 3rem; height: 3rem; aspect-ratio: 1; border-radius: var(--tu-radius-control); object-fit: cover; background: var(--tu-color-bg-muted); display: block; }
html[data-palette] .oh-th-none { display: block; }

/* 期限・リスク */
html[data-palette] .oh-risk { margin-bottom: var(--tu-space-40); }
html[data-palette] .oh-risk .oh-h2 { margin-bottom: var(--tu-space-8); }
html[data-palette] .oh-list > li { border-top: 1px solid var(--tu-color-border-subtle); }
html[data-palette] .oh-list > li:last-child { border-bottom: 1px solid var(--tu-color-border-subtle); }
html[data-palette] .oh-rk-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px var(--tu-space-16); align-items: center; min-height: 3.5rem; padding: var(--tu-space-8); }
html[data-palette] .oh-rk-k { grid-row: 1 / span 2; font-size: 1rem; }
html[data-palette] .oh-rk-t, html[data-palette] .oh-rk-d { grid-column: 2; font-size: 0.875rem; line-height: 1.25rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
html[data-palette] .oh-rk-t { font-weight: 500; }
html[data-palette] .oh-rk-d { color: var(--tu-color-text-secondary); }
html[data-palette] .oh-rk-r .oh-chev { grid-column: 3; grid-row: 1 / span 2; }

/* 案件の流れと運営待ち（段のタイル全体を押せる領域にする。最多の段だけ soft 面と太字の数字） */
html[data-palette] .oh-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--tu-color-border-subtle); border-bottom: 1px solid var(--tu-color-border-subtle); padding: var(--tu-space-8) 0; }
html[data-palette] .oh-st { position: relative; min-width: 0; padding: 0 var(--tu-space-4) 0 var(--tu-space-16); }
html[data-palette] .oh-st + .oh-st::before {
  content: ""; position: absolute; left: 0; top: 1.5rem; width: 0.625rem; height: 0.625rem;
  border-top: 2px solid var(--tu-color-border-strong); border-right: 2px solid var(--tu-color-border-strong);
  transform: translateX(-2px) rotate(45deg);
}
html[data-palette] .oh-st-hit {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--tu-space-4); width: 100%; height: 100%;
  min-height: var(--tu-size-hit, 44px); margin: 0; padding: var(--tu-space-12); border: 0; border-radius: var(--tu-radius-control);
  background: none; color: inherit; text-align: left;
}
html[data-palette] button.oh-st-hit { cursor: pointer; }
html[data-palette] .oh-st.is-top .oh-st-hit { background: var(--tu-color-bg-selected); }
html[data-palette] .oh-st-l { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--tu-color-text-secondary); overflow-wrap: anywhere; }
html[data-palette] .oh-st-no { display: none; }
html[data-palette] .oh-st-wl { font-size: 0.75rem; line-height: 1rem; color: var(--tu-color-text-secondary); }
html[data-palette] .oh-st-wk { margin-left: 2px; }
html[data-palette] .oh-st-nr { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tu-space-4); min-width: 0; }
html[data-palette] .oh-st-wn { font-size: 2rem; line-height: 2.5rem; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
html[data-palette] .oh-st.is-top .oh-st-wn { font-weight: 700; }
html[data-palette] .oh-st-wn small { font-size: 0.875rem; font-weight: 400; margin-left: 2px; color: var(--tu-color-text-secondary); }
html[data-palette] .oh-st-wn.is-zero { font-size: 1.25rem; font-weight: 400; color: var(--tu-color-text-tertiary); }
html[data-palette] .oh-st-nr .oh-chev { color: var(--tu-color-text-secondary); }
html[data-palette] .oh-st-old { font-size: 0.75rem; line-height: 1rem; color: var(--tu-color-text-secondary); font-variant-numeric: tabular-nums; }
html[data-palette] :is(.oh-st-old, .oh-old).is-long { font-weight: 700; color: var(--tu-color-text-primary); }
html[data-palette] .oh-st-tot { font-size: 0.75rem; line-height: 1rem; color: var(--tu-color-text-secondary); font-variant-numeric: tabular-nums; }
html[data-palette] .oh-off { margin-top: var(--tu-space-20); display: flex; flex-wrap: wrap; align-items: center; gap: var(--tu-space-8) var(--tu-space-16); }
html[data-palette] .oh-off-ul { display: flex; flex-wrap: wrap; gap: 0 var(--tu-space-24); }
html[data-palette] .oh-off-i { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tu-size-hit, 44px); padding: 0; border: 0; background: none; cursor: pointer; color: var(--tu-color-text-primary); font-size: 0.875rem; text-align: left; }
html[data-palette] .oh-off-i.is-static { cursor: default; }
html[data-palette] .oh-off-i b { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
html[data-palette] .oh-old { font-size: 0.75rem; color: var(--tu-color-text-secondary); }

/* 今週の動き */
html[data-palette] .oh-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--tu-space-24) var(--tu-space-32); }
html[data-palette] .oh-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html[data-palette] .oh-m-l { font-size: 0.875rem; line-height: 1.25rem; color: var(--tu-color-text-secondary); }
html[data-palette] .oh-m-l small { font-size: 0.75rem; }
html[data-palette] .oh-m-v { font-size: 1.5rem; line-height: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html[data-palette] .oh-m-v small { font-size: 0.875rem; font-weight: 400; margin-left: 2px; }
html[data-palette] .oh-m-c { font-size: 0.75rem; line-height: 1rem; color: var(--tu-color-text-secondary); font-variant-numeric: tabular-nums; }
html[data-palette] .oh-sp { margin-top: var(--tu-space-8); }
html[data-palette] .oh-spark { display: block; width: 100%; height: 2.5rem; }
html[data-palette] .oh-spark rect { fill: var(--tu-color-border-strong); opacity: 0.45; }
html[data-palette] .oh-spark rect.is-cur { fill: var(--tu-color-text-primary); opacity: 1; }
html[data-palette] .oh-sp-ax { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--tu-space-8); font-size: 0.75rem; line-height: 1rem; color: var(--tu-color-text-secondary); font-variant-numeric: tabular-nums; }

/* 実施中の案件 */
html[data-palette] .oh-tbl-wrap { min-width: 0; }
html[data-palette] .oh-tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.25rem; table-layout: auto; }
html[data-palette] .oh-tbl th { background: none; text-align: left; font-weight: 500; color: var(--tu-color-text-secondary); padding: var(--tu-space-8); border-bottom: 1px solid var(--tu-color-border-subtle); white-space: nowrap; }
html[data-palette] .oh-tbl td { padding: 10px var(--tu-space-8); border-bottom: 1px solid var(--tu-color-border-subtle); white-space: nowrap; }
html[data-palette] .oh-tbl tbody tr[data-oh-row-link] { cursor: pointer; }
html[data-palette] .oh-num, html[data-palette] .oh-tbl th.oh-num { text-align: right; font-variant-numeric: tabular-nums; }
html[data-palette] .oh-tbl td.oh-c-t { width: 50%; max-width: 0; white-space: normal; }
html[data-palette] .oh-tbl td.is-over { font-weight: 700; }
html[data-palette] .oh-c-a { display: flex; align-items: center; gap: var(--tu-space-12); min-width: 0; min-height: var(--tu-size-hit, 44px); }
html[data-palette] .oh-c-a .oh-th { width: 2.5rem; height: 2.5rem; }
html[data-palette] .oh-c-txt { display: flex; flex-direction: column; min-width: 0; }
html[data-palette] .oh-c-n { font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
html[data-palette] .oh-c-s { font-size: 0.75rem; line-height: 1rem; color: var(--tu-color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-palette] .oh-foot { margin-top: var(--tu-space-40); font-size: 0.875rem; color: var(--tu-color-text-secondary); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--tu-space-4); }
html[data-palette] .oh-foot .oh-lnk { padding: 0 var(--tu-space-4); }
html[data-palette] .oh-foot-sep { margin-left: var(--tu-space-16); }

/* 運営待ちの一覧（2階層目） */
html[data-palette] .oh-crumb { margin-bottom: var(--tu-space-8); }
html[data-palette] .oh-crumb .oh-lnk { padding-left: 0; text-decoration: none; }
html[data-palette] .oh-q-h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--tu-space-16) var(--tu-space-24); margin-bottom: var(--tu-space-24); }
html[data-palette] .oh-q-hl { flex: 1 1 28rem; min-width: 0; }
html[data-palette] .oh-q-h .oh-lead { margin: var(--tu-space-8) 0 0; max-width: 44rem; }
html[data-palette] .oh-q-acts { display: flex; flex-direction: column; align-items: flex-end; gap: var(--tu-space-4); }
html[data-palette] .oh-q-list > li { border-top: 1px solid var(--tu-color-border-subtle); }
html[data-palette] .oh-q-list > li:last-child { border-bottom: 1px solid var(--tu-color-border-subtle); }
html[data-palette] .oh-q-row { display: flex; align-items: center; gap: var(--tu-space-16); min-height: 4rem; padding: var(--tu-space-12) var(--tu-space-8); }
html[data-palette] .oh-q-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-palette] .oh-q-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--tu-space-12); }
html[data-palette] .oh-q-t { font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; min-width: 0; }
html[data-palette] .oh-q-s { font-size: 0.875rem; line-height: 1.25rem; color: var(--tu-color-text-secondary); overflow-wrap: anywhere; }
html[data-palette] .oh-q-s .is-over { font-weight: 700; color: var(--tu-color-text-primary); }
html[data-palette] .oh-q-n { flex: 0 0 auto; min-width: 5rem; text-align: right; font-size: 0.875rem; color: var(--tu-color-text-secondary); white-space: nowrap; }
html[data-palette] .oh-q-n b { font-size: 1.5rem; color: var(--tu-color-text-primary); font-variant-numeric: tabular-nums; margin-right: 2px; }
html[data-palette] .oh-q-o { flex: 0 0 auto; font-size: 0.875rem; color: var(--tu-color-text-secondary); white-space: nowrap; }
html[data-palette] .oh-q-row:not(.is-item) .oh-q-o { min-width: 6rem; text-align: right; }
html[data-palette] .oh-q-item .oh-q-o { flex: 0 1 auto; white-space: normal; min-width: 0; }
html[data-palette] .oh-q-go { flex: 0 0 auto; font-size: 0.875rem; font-weight: 500; color: var(--tu-color-text-link); white-space: nowrap; }
html[data-palette] .oh-q-quote { font-size: 0.875rem; line-height: 1.375rem; margin-top: var(--tu-space-4); overflow-wrap: anywhere; }
html[data-palette] .oh-q-quote:not(.is-muted)::before { content: "「"; }
html[data-palette] .oh-q-quote:not(.is-muted)::after { content: "」"; }
html[data-palette] .oh-q-quote.is-muted { color: var(--tu-color-text-secondary); }
/* 1件ずつの行: 本文は3行で省略し、「全文を表示」でその行だけ開く。行の動詞のリンクを行全体に広げる */
html[data-palette] .oh-q-item { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--tu-space-12) var(--tu-space-8); min-width: 0; }
html[data-palette] .oh-q-item:not(.is-open) .oh-q-full { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html[data-palette] .oh-q-item .oh-q-full { white-space: pre-wrap; }
html[data-palette] .oh-q-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--tu-space-12); }
html[data-palette] .oh-q-toggle { position: relative; z-index: 1; padding-left: 0; }
html[data-palette] .oh-q-foot .oh-q-go { margin-left: auto; display: inline-flex; align-items: center; min-height: var(--tu-size-hit, 44px); }
html[data-palette] .oh-q-stretch::after { content: ""; position: absolute; inset: 0; border-radius: var(--tu-radius-sm); }
html[data-palette] .oh-q-stretch:focus-visible { outline: none; }
html[data-palette] .oh-q-stretch:focus-visible::after { outline: 2px solid var(--tu-color-border-focus); outline-offset: -2px; }
html[data-palette] .oh-q-msg { margin-top: var(--tu-space-8); }
html[data-palette] .oh-q-who { display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--tu-color-text-secondary); }
html[data-palette] .oh-q-msg p { margin-top: 2px; font-size: 0.875rem; line-height: 1.375rem; overflow-wrap: anywhere; }
html[data-palette] .oh-empty { padding: var(--tu-space-32) 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--tu-space-12); color: var(--tu-color-text-secondary); }

/* 押した瞬間・hover（hover は細かいポインタの環境だけ） */
html[data-palette] :is(.oh-primary, button.oh-st-hit, .oh-off-i, .oh-rk-r, .oh-c-a, .oh-lnk, .oh-more, .oh-refresh):active { transform: scale(0.98); }
html[data-palette] .oh-q-row:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  html[data-palette] :is(a.oh-rk-r, .oh-q-row:not(.is-static), .oh-q-item.has-link, .oh-tbl tbody tr[data-oh-row-link], button.oh-st-hit):hover { background: var(--tu-color-bg-hover); }
  html[data-palette] .oh-st.is-top button.oh-st-hit:hover { background: var(--tu-color-bg-selected); }
  html[data-palette] .oh-q-item.has-link:hover .oh-q-go { text-decoration: underline; text-underline-offset: 3px; }
  html[data-palette] .oh-q-row:hover .oh-q-go,
  html[data-palette] .oh-off-i:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-palette] .oh-home :is(.oh-primary, button.oh-st-hit, .oh-off-i, .oh-rk-r, .oh-c-a, .oh-lnk, .oh-more, .oh-refresh, .oh-q-row):active { transform: none; }
}

/* 部品の幅で並びを変える */
@container ops-home (max-width: 68rem) {
  html[data-palette] .oh-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-palette] .oh-st:nth-child(4)::before { display: none; }
  html[data-palette] .oh-st:nth-child(-n+3) { padding-bottom: var(--tu-space-8); }
  html[data-palette] .oh-metrics { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
}
@container ops-home (max-width: 44rem) {
  html[data-palette] .oh-ph { margin-bottom: var(--tu-space-24); }
  /* 狭い幅: 3列×2行の小さなタイル（段の番号・段名・運営待ち・最古）。累計と今週の流入は出さない */
  html[data-palette] .oh-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tu-space-4); border: 0; padding: 0; }
  html[data-palette] .oh-st, html[data-palette] .oh-st:nth-child(-n+3) { padding: 0; }
  html[data-palette] .oh-st + .oh-st::before { display: none; }
  html[data-palette] .oh-st-hit { padding: var(--tu-space-8); gap: 2px; border: 1px solid var(--tu-color-border-subtle); }
  html[data-palette] .oh-st.is-top .oh-st-hit { border-color: transparent; }
  html[data-palette] .oh-st-no {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; margin-right: var(--tu-space-4);
    border-radius: var(--tu-radius-full); border: 1px solid var(--tu-color-border-strong); font-size: 0.75rem; line-height: 1; font-weight: 700;
    color: var(--tu-color-text-secondary); font-variant-numeric: tabular-nums;
  }
  html[data-palette] .oh-st-l { font-size: 0.75rem; line-height: 1rem; }
  html[data-palette] .oh-st-wl, html[data-palette] .oh-st-tot { display: none; }
  html[data-palette] .oh-st-wn { font-size: 1.25rem; line-height: 1.75rem; }
  html[data-palette] .oh-st-wn.is-zero { font-size: 1rem; }
  html[data-palette] .oh-bh .oh-primary { width: 100%; }
  html[data-palette] .oh-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tu-space-24) var(--tu-space-16); }
  html[data-palette] .oh-rk-r { grid-template-columns: minmax(0, 1fr) auto; padding: var(--tu-space-12) var(--tu-space-8); }
  html[data-palette] .oh-rk-k { grid-row: auto; }
  html[data-palette] .oh-rk-t, html[data-palette] .oh-rk-d { grid-column: 1; }
  html[data-palette] .oh-rk-r .oh-chev { grid-column: 2; grid-row: 1 / span 3; }
  html[data-palette] .oh-tbl thead { display: none; }
  html[data-palette] .oh-tbl, html[data-palette] .oh-tbl tbody, html[data-palette] .oh-tbl td { display: block; width: 100%; }
  html[data-palette] .oh-tbl tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--tu-color-border-subtle); padding: var(--tu-space-8) 0; }
  html[data-palette] .oh-tbl td { border: 0; padding: var(--tu-space-4) var(--tu-space-8); white-space: normal; }
  html[data-palette] .oh-tbl td.oh-c-t { grid-column: 1 / -1; max-width: none; width: auto; }
  html[data-palette] .oh-tbl td.oh-c-dl { grid-column: 1 / -1; color: var(--tu-color-text-secondary); }
  html[data-palette] .oh-tbl td.oh-c-dl.is-over { color: var(--tu-color-text-primary); }
  html[data-palette] .oh-tbl td.oh-num { text-align: left; }
  html[data-palette] .oh-tbl td.oh-num::before { content: attr(data-label); display: block; font-size: 0.75rem; color: var(--tu-color-text-secondary); }
  html[data-palette] .oh-q-acts { align-items: stretch; width: 100%; }
  html[data-palette] .oh-q-row { flex-wrap: wrap; gap: var(--tu-space-8) var(--tu-space-12); }
  html[data-palette] .oh-q-row:not(.is-item) .oh-q-main { flex-basis: calc(100% - 4rem); }
  html[data-palette] .oh-q-n, html[data-palette] .oh-q-row:not(.is-item) .oh-q-o { min-width: 0; text-align: left; }
  html[data-palette] .oh-q-go { margin-left: auto; }
  html[data-palette] .oh-foot-sep { margin-left: 0; }
}