:root{
    --accent:#2563eb; --accent-dark:#1d4ed8; --accent-soft:#eff4ff;
    --ink:#0f172a; --muted:#64748b; --faint:#94a3b8;
    --line:#e9e4d8; --surface:#ffffff; --page:#f1eee4;
  }
  body{ background:var(--page); }
  .log-box{ font-family:'Consolas','Courier New',monospace; font-size:12px; }
  /* ピル型タブ */
  .tab{ display:inline-flex; align-items:center; gap:6px; padding:7px 15px; border-radius:10px;
        font-size:13px; color:var(--muted); cursor:pointer; border:none; background:transparent; transition:all .15s; }
  .tab:hover{ background:#ece6da; color:var(--ink); }
  .tab-active{ background:var(--accent)!important; color:#fff!important; box-shadow:0 1px 2px rgba(37,99,235,.35); }
  /* カード */
  .card{ background:var(--surface); border:1px solid var(--line); border-radius:16px;
         box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 16px -8px rgba(16,24,40,.10); }
  /* バッジ */
  .badge{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:500;
          padding:2px 9px; border-radius:999px; white-space:nowrap; }
  .badge-green{ background:#e7f8ef; color:#067647; }
  .badge-amber{ background:#fef6e7; color:#b54708; }
  .badge-red{ background:#fdecec; color:#b42318; }
  .badge-gray{ background:#eef1f6; color:#475467; }
  .badge-indigo{ background:var(--accent-soft); color:var(--accent-dark); }
  .site-pill{ display:inline-block; background:#f4f6fa; border:1px solid var(--line); border-radius:8px;
              padding:2px 9px; font-size:12px; color:#475467; white-space:nowrap; }
  /* 集計カード */
  .stat{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:13px 15px; }
  .stat-label{ font-size:12px; color:var(--muted); margin-bottom:3px; }
  .stat-num{ font-size:24px; font-weight:600; color:var(--ink); line-height:1.1; }
  /* 集計ピル（コンパクト1行） */
  .stat-pill{ display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line);
              border-radius:999px; padding:4px 12px; font-size:12px; color:var(--muted); white-space:nowrap; }
  .stat-pill b{ font-size:14px; font-weight:700; color:var(--ink); }
  /* 結果タブ（まとめスレ / YouTube） */
  .rtab{ background:transparent; border:none; border-bottom:2px solid transparent; cursor:pointer; font-family:inherit;
         font-size:12px; font-weight:600; color:var(--muted); padding:5px 9px; margin-bottom:-1px; transition:.15s;
         white-space:nowrap; }
  .rtab:hover{ color:var(--ink); }
  .rtab.rtab-on{ color:var(--accent); border-bottom-color:var(--accent); }
  .rtab-n{ font-size:12px; font-weight:500; color:var(--faint); }
  /* コントロール用セレクト */
  .ctrl-select{ border:1px solid var(--line); border-radius:8px; padding:5px 9px; font-size:12px; background:#fff; color:var(--ink); cursor:pointer; }
  /* 検索中スピナー（検索ボタン内） */
  .spin{ display:inline-block; width:13px; height:13px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; }
  /* 一覧の「検索中」表示用の大きめスピナー（白背景向けにアクセント色） */
  .spin-lg{ display:inline-block; width:30px; height:30px; border:3px solid var(--accent-soft); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  /* プレビューで選択中の行 */
  tr.row-sel > td{ background:var(--accent-soft) !important; }
  /* プレビュー時の2行目メタ（作成日・有効・画像・レス・企画化） */
  .row-meta{ font-size:11px; color:var(--faint); margin-top:4px; font-variant-numeric:tabular-nums; }
  .row-meta .rm-un{ color:var(--accent-dark); }
  /* 確認済み（没）：チェックすると濃くグレーアウト（次の更新で非表示になる） */
  tr.mm-done{ background:#aeb4bd !important; opacity:.72; }
  tr.mm-done td{ color:#4b5563 !important; }
  /* ⚠ 選択中(row-sel)は td 背景を !important で塗るので、そのままだと「済」の行を選ぶと
     グレーではなく選択ハイライト色になってしまう。済のセル背景も塗って負けないようにする。 */
  tr.mm-done > td{ background:#aeb4bd !important; }
  tr.mm-done.row-sel > td{ background:#9aa1ab !important; }  /* 済かつ選択中は少し濃いグレー */
  tr.mm-done .site-pill, tr.mm-done a{ text-decoration:line-through; color:#4b5563 !important; }
  .gc.mm-done{ opacity:.6; filter:grayscale(1) brightness(.82); }
  /* 方針A：実測して0枚だった水増しスレの目印（消さずに薄く・赤字＝次の再描画で沈む） */
  tr.mm-dud{ opacity:.5; }
  tr.mm-dud .mm-valid{ color:#dc2626; font-weight:600; }
  .gc.mm-dud{ opacity:.45; }
  .gc.mm-dud .cap{ background:#dc2626; }
  .mm-cell input.mm-confirm{ display:inline-block; vertical-align:middle; }
  /* ギャラリーのカード */
  .gc{ border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; background:#fff; transition:.12s; }
  .gc:hover{ border-color:var(--accent); }
  .gc.gc-sel{ outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); }
  .gt{ position:relative; height:0; padding-bottom:75%; background:#eef1f6; color:var(--faint); background-size:cover; background-position:center; overflow:hidden; }
  .gt .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .gt.has-img .ph{ display:none; }
  .gt .cap{ position:absolute; left:5px; bottom:5px; font-size:11px; background:rgba(15,23,42,.78); color:#fff; padding:1px 7px; border-radius:999px; z-index:1; }
  .gt .ok{ position:absolute; right:5px; top:5px; font-size:11px; background:#067647; color:#fff; padding:1px 6px; border-radius:999px; z-index:1; }
  .gl{ padding:5px 7px; }
  .g-title{ font-size:11px; line-height:1.35; height:2.7em; overflow:hidden; color:var(--ink); }
  .g-meta{ font-size:11px; color:var(--faint); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* 左サイドバー */
  .sidebar{ width:168px; flex:none; background:#fff; border-right:1px solid var(--line); padding:16px 11px; display:flex; flex-direction:column; gap:3px; position:sticky; top:0; height:100vh; overflow-y:auto; }
  .sb-nav{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; font-size:13px; color:var(--muted); cursor:pointer; }
  .sb-nav:hover{ background:#f1f5f9; color:var(--ink); }
  .sb-nav.on{ background:var(--accent); color:#fff; }
  .sb-nav .ico{ width:16px; height:16px; }
  .sb-divider{ border-top:1px solid var(--line); margin:10px 6px; }
  .sb-label{ font-size:11px; color:var(--faint); padding:0 8px 5px; }
  .sb-kw{ display:flex; flex-wrap:wrap; gap:5px; padding:0 6px; }
  .sb-kw .kw{ font-size:11px; padding:2px 9px; border-radius:999px; background:#f1eee4; color:var(--muted); cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sb-kw .kw:hover{ background:var(--accent-soft); color:var(--accent-dark); }
  /* チップ */
  .chip{ display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line);
         border-radius:999px; padding:5px 11px; font-size:12px; color:var(--muted); }
  /* バズワードマスタのチップ */
  .master-chip{ display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line);
                border-radius:999px; padding:7px 9px 7px 14px; font-size:14px; color:var(--ink); transition:border .12s; }
  .master-chip:hover{ border-color:var(--accent); }
  .master-chip .w{ cursor:pointer; }
  .master-del{ border:none; background:#f1f1f4; color:var(--faint); border-radius:999px; width:19px; height:19px;
               line-height:1; font-size:11px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:none; }
  .master-del:hover{ background:#fde2e2; color:#c0322b; }
  /* 別表記（表記揺れ）チップ＋追加入力 */
  .bwm-vars{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:5px; }
  .bwm-var{ display:inline-flex; align-items:center; gap:2px; font-size:11px; font-weight:400; color:var(--muted);
            background:#eef1f6; border-radius:999px; padding:1px 4px 1px 9px; }
  .bwm-var button{ border:none; background:none; color:var(--faint); cursor:pointer; font-size:10px; line-height:1; padding:0 2px; }
  .bwm-var button:hover{ color:#c0322b; }
  .bwm-var-input{ font-size:11px; border:1px dashed var(--line); border-radius:999px; padding:2px 9px; width:80px;
                  outline:none; color:var(--ink); background:#fff; font-weight:400; }
  .bwm-var-input:focus{ border-color:var(--accent); border-style:solid; width:120px; }
  .bwm-var-input::placeholder{ color:var(--faint); }
  /* 入力フィールド */
  .field{ display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line);
          border-radius:12px; padding:4px 6px 4px 14px; transition:border .15s, box-shadow .15s; }
  .field:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
  .field input{ flex:1; border:none; outline:none; background:transparent; font-size:15px; color:var(--ink); padding:9px 0; }
  /* メイン検索ボックスは大きめ（縦幅を強調） */
  #search-field{ padding:3px 4px 3px 12px; border-radius:8px; }
  #search-field input{ font-size:14px; padding:6px 0; }
  #search-field #btn-buzzword{ padding:7px 16px; font-size:13px; border-radius:7px; }
  /* ボタン */
  .btn-primary{ display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#fff; border:none;
                border-radius:10px; padding:9px 18px; font-size:14px; font-weight:500; cursor:pointer; transition:background .15s; }
  .btn-primary:hover{ background:var(--accent-dark); }
  .btn-primary:disabled{ background:#cbd5e1; cursor:not-allowed; }
  .btn-ghost{ display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line);
              border-radius:10px; padding:8px 15px; font-size:13px; color:var(--ink); cursor:pointer; transition:.15s; }
  .btn-ghost:hover{ background:#f1f5f9; }
  .btn-ghost:disabled{ opacity:.5; cursor:not-allowed; }
  /* プレミアムテーブル */
  .ptable{ width:100%; border-collapse:collapse; font-size:13px; }
  .ptable thead th{ background:#f6f2e9; color:var(--muted); font-weight:500; text-align:left; padding:10px 12px; font-size:12px; }
  .ptable tbody td{ padding:10px 12px; border-top:1px solid var(--line); color:#334155; }
  .ptable tbody tr:hover{ background:#f9fafc; }
  /* 「済」チェック列は右端に固定＝横スクロールしても隠れない */
  .ptable thead th.mm-th{ position:sticky; right:0; z-index:3; background:#f6f2e9;
    box-shadow:-7px 0 7px -6px rgba(16,24,40,.14); }
  .ptable tbody td.mm-cell{ position:sticky; right:0; z-index:1; background:#fff;
    box-shadow:-7px 0 7px -6px rgba(16,24,40,.14); }
  .ptable tbody tr:hover td.mm-cell{ background:#f9fafc; }
  .ico{ width:1em; height:1em; display:inline-block; vertical-align:-0.13em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

  /* ───── YouTubeタブの分類まわり（企画勝敗パターン分析=SPM と同じ作りに揃える） ─────
     見た目を向こうと合わせるのは好みの問題ではない。同じ意味のものが同じ形で出ていないと、
     2画面を行き来する仕分け作業で毎回読み直すことになる。 */
  /* 分類済みフラグ（軸A=A / 軸B=B）。付与済みだけ色が付く */
  .ax-flag{ display:inline-block; width:17px; height:17px; line-height:17px; text-align:center;
    font-size:10px; font-weight:700; border-radius:5px; margin-right:2px;
    background:#eef2f7; color:#c9d2dc; vertical-align:middle; }
  .ax-flag.a.on{ background:var(--accent-soft); color:var(--accent); }
  .ax-flag.b.on{ background:#dcfce7; color:#16a34a; }
  /* 行内の🏷＝分類パネルを開くだけ（付与はD&D） */
  .row-classify{ font-size:11px; border:1px solid var(--line); background:#fff; border-radius:6px;
    padding:2px 7px; cursor:pointer; color:var(--muted); }
  .row-classify:hover{ border-color:var(--accent); color:var(--accent); }
  /* 分類済みの行は未分類とはっきり見分ける（緑地＋左の緑帯） */
  #yt-body tr.is-classified > td{ background:#e9f6de !important; }
  #yt-body tr.is-classified > td:first-child{ box-shadow:inset 4px 0 0 #63b13a; }
  /* 右パネルで再生中の行を強調 */
  #yt-body tr.yt-playing > td{ background:#eaf1ff !important; }
  #yt-body tr.yt-playing > td:first-child{ box-shadow:inset 4px 0 0 var(--accent); }
  /* ドラッグ&ドロップ */
  #yt-body tr[draggable]{ cursor:grab; }
  #yt-body tr.row-dragging{ opacity:.45; }
  body.cls-dragging #cls-panel{ box-shadow:-8px 0 24px -12px rgba(15,23,42,.28), inset 3px 0 0 var(--accent); }
  .cls-r.cls-drop{ background:#dbeafe !important; box-shadow:inset 0 0 0 2px var(--accent); }
  .cls-g.cls-drop{ background:#dbeafe !important; box-shadow:inset 0 0 0 2px var(--accent); }
  /* パネル下部のカテゴリ作成フォーム */
  .clsadd-btn{ display:block; width:100%; text-align:left; padding:9px 12px; border-radius:8px;
    border:none; background:none; cursor:pointer; color:var(--accent-dark); font-size:13px;
    font-weight:600; font-family:inherit; }
  .clsadd-btn:hover{ background:var(--accent-soft); }
  .clsadd-form{ padding:10px 12px; display:none; }
  .clsadd-form.on{ display:block; }
  .clsadd-kind{ display:flex; gap:4px; margin-bottom:8px; background:#f4f6fa; padding:3px; border-radius:8px; }
  .clsadd-kb{ flex:1; padding:6px 8px; border:none; border-radius:6px; background:transparent;
    font-size:12px; font-weight:600; color:#6b7280; cursor:pointer; font-family:inherit; }
  .clsadd-kb.on{ background:#fff; color:var(--accent); box-shadow:0 1px 2px rgba(0,0,0,.08); }
  .clsadd-fld{ width:100%; box-sizing:border-box; padding:7px 10px; border:1px solid var(--line);
    border-radius:8px; font-size:13px; outline:none; font-family:inherit; margin-bottom:8px; }
  .clsadd-fld:focus{ border-color:var(--accent); }
  .clsadd-go{ width:100%; padding:9px; border:none; border-radius:8px; background:var(--accent);
    color:#fff; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
  .clsadd-go:hover{ background:var(--accent-dark); }