/* デザイントークン（2026-07-24 刷新: ポップ・ウォーム配色 / カード風 / ダーク自動追従） */
:root {
  --accent: #ff6b52;          /* コーラル */
  --accent-strong: #e85539;
  --accent-soft: #ffe9e2;     /* 淡いコーラル(ホバー・強調背景) */
  --bg: #faf6ef;              /* クリーム地 */
  --surface: #ffffff;         /* カード面 */
  --surface-dim: #f3ece1;     /* 沈んだ面(非活性・画像プレースホルダ) */
  --surface-tint: #fff4ef;    /* 行ホバーの暖色チント */
  --text: #43382e;
  --muted: #9d8f7e;
  --hairline: #eee4d6;        /* 極薄の境界線 */
  --tag-bg: #ffe9c2;
  --tag-text: #7c5a1d;
  --ok-bg: #e9f6e4; --ok-border: #bfe3b1; --ok-text: #2f6b33;
  --ng-bg: #fdecea; --ng-border: #f5c2bd; --ng-text: #b3261e;
  --header-a: #ff8a5c;        /* ヘッダーグラデーション始点 */
  --header-b: #ff5e62;        /* 同・終点 */
  --radius: 14px;             /* カード角丸 */
  --radius-s: 10px;           /* 入力欄角丸 */
  --shadow-card: 0 1px 3px rgba(120, 80, 40, .07), 0 6px 18px rgba(120, 80, 40, .06);
  --shadow-btn: 0 4px 12px rgba(232, 85, 57, .3);
  --font-round: 'Zen Maru Gothic', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #ff7a63;
    --accent-strong: #ff8d78;
    --accent-soft: #4b2c24;
    --bg: #221d17;
    --surface: #2d2720;
    --surface-dim: #362f26;
    --surface-tint: #383026;
    --text: #f0e8dc;
    --muted: #a3937f;
    --hairline: #3d352a;
    --tag-bg: #46351a; --tag-text: #ffd88f;
    --ok-bg: #263b24; --ok-border: #3c5c39; --ok-text: #a4d9a0;
    --ng-bg: #442725; --ng-border: #6b3a36; --ng-text: #f2a49c;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .3);
    --shadow-btn: 0 4px 12px rgba(0, 0, 0, .4);
  }
}

/* テーマカラー(設定画面で切替。body のクラスでトークンを上書きする)
   ── テラコッタ: くすんだ煉瓦色。暖かさを保ったまま彩度を落とした落ち着き */
body.theme-terracotta {
  --accent: #bf6b4f; --accent-strong: #a85940; --accent-soft: #f3e0d8;
  --bg: #f7f1ea; --surface-tint: #f9efe8;
  --header-a: #c98661; --header-b: #a85940;
  --shadow-btn: 0 4px 12px rgba(168, 89, 64, .28);
}
/* ── セージ: 灰みのある緑。ナチュラルで穏やか */
body.theme-sage {
  --accent: #7a9370; --accent-strong: #66815d; --accent-soft: #e6ecdf;
  --bg: #f4f5ef; --surface-dim: #eaeee1; --surface-tint: #f1f4ea;
  --text: #3d4437; --muted: #8e9682; --hairline: #e3e7d8;
  --tag-bg: #e3ead7; --tag-text: #4f5f3f;
  --header-a: #93ac85; --header-b: #66815d;
  --shadow-card: 0 1px 3px rgba(70, 90, 60, .07), 0 6px 18px rgba(70, 90, 60, .06);
  --shadow-btn: 0 4px 12px rgba(102, 129, 93, .28);
}
/* ── ブルーグレー: 灰青。最も静かでクール */
body.theme-slate {
  --accent: #5f7d9c; --accent-strong: #4e6a87; --accent-soft: #e2eaf2;
  --bg: #f2f4f7; --surface-dim: #e9edf2; --surface-tint: #eef3f8;
  --text: #333c46; --muted: #8794a3; --hairline: #e1e7ee;
  --tag-bg: #dfe7ef; --tag-text: #3d5570;
  --header-a: #7290ad; --header-b: #4e6a87;
  --shadow-card: 0 1px 3px rgba(50, 70, 90, .07), 0 6px 18px rgba(50, 70, 90, .06);
  --shadow-btn: 0 4px 12px rgba(78, 106, 135, .28);
}
@media (prefers-color-scheme: dark) {
  body.theme-terracotta {
    --accent: #cf8266; --accent-strong: #db9077; --accent-soft: #45291f;
    --bg: #221b16; --surface: #2d251f; --surface-dim: #362d25;
    --surface-tint: #382e26; --hairline: #3d332a;
    --header-a: #8a5138; --header-b: #6e4130;
  }
  body.theme-sage {
    --accent: #93ad87; --accent-strong: #a3bd97; --accent-soft: #313d2b;
    --bg: #1c201a; --surface: #262b23; --surface-dim: #2f352b;
    --surface-tint: #303827; --text: #e9ede2; --muted: #99a18c;
    --hairline: #363d30; --tag-bg: #38422c; --tag-text: #cfdcb8;
    --header-a: #55684c; --header-b: #43553c;
  }
  body.theme-slate {
    --accent: #7e9cba; --accent-strong: #8fabc7; --accent-soft: #2a3644;
    --bg: #191d22; --surface: #22272e; --surface-dim: #2b323a;
    --surface-tint: #2a323c; --text: #e6ebf1; --muted: #909cab;
    --hairline: #333b45; --tag-bg: #2e3d4e; --tag-text: #b4cbe2;
    --header-a: #47617c; --header-b: #384e66;
  }
}

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Hiragino Sans", "Noto Sans JP", sans-serif;
       background: var(--bg); color: var(--text); font-size: 15px; }

/* ヘッダー: テーマ色のグラデーション。
   flex + wrap にしてあるのは、収まらないときに折り返した分がヘッダーの背景の中に
   留まるようにするため。float:right だと折り返した分がヘッダーの外へはみ出し、
   下のコンテンツに重なる（2026-08-10 の不具合。ロゴが tubeinbox → つんどくTube で
   広がり、iPhone の幅で 1 行に収まらなくなって露見した）。 */
header { background: linear-gradient(120deg, var(--header-a), var(--header-b));
         color: #fff; padding: 12px 18px;
         display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
header a { color: #fff; text-decoration: none; font-weight: 700;
           font-family: var(--font-round); font-size: 17px; }
/* margin-left:auto でロゴとの間を空ける。以降の項目はまとめて右へ寄る */
header .header-links { margin-left: auto; font-size: 13px; }
header .header-links a { font-weight: 500; font-size: 13px; margin-left: 8px;
                         padding: 4px 12px; border-radius: 999px;
                         background: rgba(255, 255, 255, .18);
                         transition: background .15s; }
header .header-links a:hover { background: rgba(255, 255, 255, .32); }
/* 言語切替(仕様書 Q20)。同じ部品(_lang_form.html)をヘッダーとフッターに置き、
   画面幅でどちらか一方だけを見せる。PC はヘッダー・スマホはフッター。
   色が 2 系統あるのは背景が違うため（ヘッダー = 濃いグラデーション / フッター = ページ色）*/
header .lang-form select { font: inherit; font-size: 12px; padding: 3px 8px;
                           border-radius: 999px; color: #fff;
                           border: 1px solid rgba(255, 255, 255, .45);
                           background: rgba(255, 255, 255, .18); }
header .lang-form select option { color: var(--text); background: var(--surface); }
.lang-form-footer { display: none; margin-top: 10px; }
.lang-form-footer select { font: inherit; font-size: 14px; padding: 5px 12px;
                           border-radius: 999px; color: var(--text);
                           border: 1px solid var(--hairline);
                           background: var(--surface); }

main { max-width: 1200px; margin: 18px auto; padding: 0 14px; }
a { color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 表: 罫線をやめて行を角丸カード風に(行間で区切る) */
table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
th, td { padding: 8px 12px; text-align: left; border: none; }
th { color: var(--muted); font-size: 12px; font-weight: 600;
     white-space: nowrap; padding-top: 0; padding-bottom: 0; }
th.sortable a { text-decoration: none; color: var(--muted); }
th.sortable a:hover { color: var(--accent-strong); }
td { background: var(--surface); }
tr td:first-child { border-radius: var(--radius) 0 0 var(--radius); }
tr td:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
tbody tr:hover td { background: var(--surface-tint); }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }
.count { color: var(--muted); margin: 8px 2px; font-size: 13px; }

/* 入力欄の共通スタイル */
select, input[type=text], input[type=number], textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-s);
  padding: 6px 10px; }
select:hover, input[type=text]:hover { border-color: var(--accent); }
/* プレースホルダー: ブラウザ既定(--text の約50%透過)は濃すぎるため --muted 基準で薄く統一 */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .7; }

/* ボタンはピル型・ふわっと浮く */
button { font: inherit; font-family: var(--font-round); font-weight: 500;
         background: var(--accent); color: #fff; border: none; cursor: pointer;
         border-radius: 999px; padding: 7px 20px;
         transition: background .15s, transform .15s, box-shadow .15s; }
button:hover { background: var(--accent-strong); transform: translateY(-1px);
               box-shadow: var(--shadow-btn); }

/* グループタブ: ピル型 */
.group-tabs { display: flex; gap: 8px; margin-bottom: 12px;
              overflow-x: auto; padding: 2px; } /* タブが多い場合は横スクロール(スマホ含む) */
.group-tabs a { padding: 7px 18px; background: var(--surface);
                border: 1px solid var(--hairline); border-radius: 999px;
                text-decoration: none; color: var(--text); white-space: nowrap;
                font-size: 14px; font-family: var(--font-round); font-weight: 500;
                transition: background .15s, border-color .15s; }
.group-tabs a:hover { background: var(--accent-soft); border-color: var(--accent); }
.group-tabs a.active { background: var(--accent); border-color: var(--accent);
                       color: #fff; font-weight: 700; }

/* 絞り込みフォーム: 角丸カード */
.filters { background: var(--surface); border-radius: var(--radius);
           box-shadow: var(--shadow-card); padding: 12px;
           margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px;
           align-items: center; }
.filters select, .filters input[type=text] { max-width: 220px; }
.filters button { padding: 7px 22px; }
.shuffle-link, .reset-link { padding: 6px 16px; background: var(--surface);
                border: 1px solid var(--hairline); border-radius: 999px;
                text-decoration: none; color: var(--text); white-space: nowrap;
                font-size: 14px; font-family: var(--font-round); font-weight: 500;
                transition: background .15s, border-color .15s; }
.shuffle-link:hover, .reset-link:hover { background: var(--accent-soft);
                                         border-color: var(--accent); }
.shuffle-link.active { background: var(--accent); border-color: var(--accent);
                       color: #fff; font-weight: 700; }

.bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
            background: var(--surface); border-radius: var(--radius);
            box-shadow: var(--shadow-card);
            padding: 10px 12px; margin-bottom: 10px; font-size: 13px; }
.bulk-bar select { padding: 5px 10px; }
.bulk-bar button { padding: 6px 18px; }
.check-col { width: 30px; text-align: center; }
.check-col input { width: 16px; height: 16px; cursor: pointer;
                   vertical-align: middle; accent-color: var(--accent); }

.pager { margin: 16px 0; text-align: center; }
.pager a, .pager .current { display: inline-block; padding: 6px 14px; margin: 0 3px;
           border-radius: 999px; background: var(--surface);
           box-shadow: var(--shadow-card); text-decoration: none; }
.pager .current { background: var(--accent); color: #fff; }

.msg { background: var(--ok-bg); border: 1px solid var(--ok-border);
       color: var(--ok-text); border-radius: var(--radius);
       padding: 10px 14px; margin-bottom: 12px; }
.msg.error { background: var(--ng-bg); border-color: var(--ng-border);
             color: var(--ng-text); }

/* ステータス: 色付きピル */
.status-cell { white-space: nowrap; }
.status-cell form { display: flex; gap: 4px; align-items: center; }
.status-select { font-size: 12px; padding: 3px 8px; border: 1px solid var(--hairline);
                 background: var(--surface); color: var(--muted); cursor: pointer;
                 border-radius: 999px; }
.status-select.st-important { background: #e05252; border-color: #e05252; color: #fff; font-weight: 600; }
.status-select.st-later { background: #ef8f34; border-color: #ef8f34; color: #fff; font-weight: 600; }
.status-select.st-watched { background: #4c9e63; border-color: #4c9e63; color: #fff; font-weight: 600; }
.status-select.st-skip { background: #6b7280; border-color: #6b7280; color: #fff; font-weight: 600; }
.status-select option { background: var(--surface); color: var(--text); font-weight: 400; }
.status-apply { font-size: 12px; padding: 3px 12px; }

/* タグ: 暖色ピル */
.tag { display: inline-block; background: var(--tag-bg); color: var(--tag-text);
       border-radius: 999px; padding: 2px 10px; margin: 1px 2px; font-size: 12px; }
.has-memo { margin-left: 4px; }
.detail-btn { font-size: 12px; padding: 4px 14px; white-space: nowrap;
              border: 1px solid var(--accent); border-radius: 999px;
              background: var(--surface); color: var(--accent-strong);
              text-decoration: none; transition: background .15s; }
.detail-btn:hover { background: var(--accent-soft); }

/* サムネイル */
.thumb-col, .td-thumb { width: 120px; }
.td-thumb { padding: 4px 6px; }
.td-thumb img { display: block; width: 120px; height: 68px; object-fit: cover;
                border-radius: 8px; background: var(--surface-dim); }
/* 削除・非公開になった動画（サムネ URL も消している）の代わりの枠 */
.thumb-missing { display: flex; align-items: center; justify-content: center;
  width: 120px; height: 68px; border-radius: 8px; font-size: 22px;
  background: var(--surface-dim); opacity: .5; }

/* PC の一覧: 列幅を内容に依存させない（絞り込み・タブ切替でタイトル幅が揺れないように）。
   幅指定なしのタイトル列が残り全部をもらう = 常に一定。スマホのカード表示には適用しない */
@media (min-width: 721px) {
  .video-table { table-layout: fixed; width: 100%; }
  .video-table .th-published { width: 100px; }
  .video-table .th-channel { width: 170px; }
  .video-table .th-duration { width: 64px; }
  .video-table .th-tags { width: 120px; }
  .video-table .th-status { width: 110px; }
  .video-table .th-edit { width: 76px; }
  /* 固定幅では長い名前に列を広げさせず折り返す */
  .video-table .td-channel { white-space: normal; }
  .video-table .td-title, .video-table .td-channel { overflow-wrap: break-word; }
}

/* 詳細・編集 */
.video-title { font-size: 20px; font-family: var(--font-round); font-weight: 700; }
.video-title a { color: var(--text); text-decoration: none; }
.video-title a:hover { color: var(--accent-strong); }
.detail-thumb img { display: block; width: 100%; max-width: 480px;
                    border-radius: var(--radius); background: var(--surface-dim); }
.detail-table { max-width: 800px; margin-bottom: 16px; }
.detail-table th { width: 110px; }
.edit-form { background: var(--surface); border-radius: var(--radius);
             box-shadow: var(--shadow-card); padding: 18px; max-width: 700px; }
.edit-form .field { margin-bottom: 14px; }
.edit-form label { display: block; font-size: 13px; font-weight: 700;
                   font-family: var(--font-round); margin-bottom: 4px; }
.edit-form input[type=text], .edit-form select, .edit-form textarea {
  width: 100%; max-width: 480px; }
.edit-form .help { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.edit-form button { padding: 8px 26px; }
.errorlist { color: var(--ng-text); margin: 0; padding-left: 18px; font-size: 13px; }

/* チャンネル設定画面 */
.page-title { font-size: 22px; margin: 4px 0 16px;
              font-family: var(--font-round); font-weight: 700; }
.settings-section { background: var(--surface); border-radius: var(--radius);
                    box-shadow: var(--shadow-card);
                    padding: 16px 18px; margin-bottom: 16px; }
.settings-section h2 { font-size: 16px; margin: 0 0 10px;
                       font-family: var(--font-round); font-weight: 700; }
.settings-section .help { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.settings-section table { border-spacing: 0 6px; }
.settings-section td { background: var(--bg); }
.settings-section tbody tr:hover td { background: var(--surface-tint); }
.settings-add-form .field { margin-bottom: 12px; }
.settings-add-form label { display: block; font-size: 13px; font-weight: 700;
                           font-family: var(--font-round); margin-bottom: 4px; }
.settings-add-form input[type=text], .settings-add-form select {
  width: 100%; max-width: 480px; }
.settings-add-form button { padding: 8px 26px; }
.table-scroll { overflow-x: auto; }
.settings-table select, .settings-table input[type=text] { padding: 4px 8px; }
.settings-table tr.inactive td { color: var(--muted); background: var(--surface-dim); }
.row-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row-form button { padding: 5px 16px; font-size: 13px; }
.row-form .check-label { white-space: nowrap; font-size: 13px; }
.row-form input[type=checkbox] { accent-color: var(--accent); }
.order-input { width: 70px; }
.group-add-form { margin-top: 10px; }

/* スマホ(720px以下): 一覧をカード表示に切り替える。PC の表表示は変えない */
@media (max-width: 720px) {
  body { font-size: 17px; }
  main { margin: 10px auto; }
  /* ヘッダーを 1 行に収める。日本語のロゴ「つんどくTube」は tubeinbox より
     20px ほど広く、iPhone の幅では既定サイズだと収まらない。
     いちばん幅を食う言語セレクタはフッターへ逃がす（未ログインでも切り替えられる
     状態は保つ）。それでも足りないとき（📊 が出るスタッフなど）は
     flex-wrap がヘッダーの背景の中で折り返す */
  header { padding: 10px 12px; gap: 6px; }
  header a { font-size: 16px; }
  header .header-links a { margin-left: 6px; padding: 4px 10px; }
  header .lang-form { display: none; }
  .lang-form-footer { display: block; }
  /* min-width: 0 でフレックス項目の縮小を許可(長いチャンネル名でも枠内に収める) */
  .filters select, .filters input[type=text] { flex: 1 1 45%; max-width: none;
                                               min-width: 0; font-size: 17px; }
  .filters button { flex: 1 1 auto; font-size: 16px; }
  .shuffle-link, .reset-link { font-size: 16px; }
  .count { font-size: 15px; }

  .video-table { border-spacing: 0; }
  .video-table, .video-table tbody { display: block; }
  .video-table thead { display: none; } /* 列見出し(ソートリンク)はスマホでは出さない */
  .video-table tr { display: flex; flex-wrap: wrap; align-items: center;
                    gap: 4px 8px; background: var(--surface);
                    border-radius: var(--radius); box-shadow: var(--shadow-card);
                    padding: 12px; margin-bottom: 10px; }
  .video-table tr:hover td, .video-table td { background: transparent; }
  .video-table td { display: block; border-radius: 0; padding: 0; }
  /* 一括更新はPC専用(チェックボックス・操作バーはスマホでは出さない) */
  .bulk-bar { display: none; }
  .video-table td.check-col { display: none; }
  /* カード内の並び: サムネイル → 投稿日・チャンネル名 → タイトル → タグ → ステータス・編集 */
  .video-table td.td-thumb { order: 0; width: 100%; padding: 0; }
  .video-table td.td-thumb img { width: 100%; height: auto; border-radius: 10px; }
  .video-table td.td-thumb .thumb-missing { width: 100%; height: 180px;
    border-radius: 10px; }
  .video-table td.td-published { order: 2; font-size: 15px; color: var(--muted); }
  .video-table td.td-published::before { content: "投稿 "; }
  /* CSS の content は gettext で翻訳できないため lang 属性で切り替える(仕様書 Q20) */
  html[lang="en"] .video-table td.td-published::before { content: "Published "; }
  .video-table td.td-published:empty { display: none; } /* RSS範囲外の過去動画は空欄 */
  .video-table td.td-channel { order: 3; font-size: 15px; color: var(--muted); }
  .video-table td.td-channel::before { content: "· "; }
  /* 区切りの中黒は「前に項目があるとき」だけ。投稿日を列 OFF にした / 投稿日が空の
     カードで行頭が「· 」から始まるのを防ぐ（βテスト J-1）。
     :has 未対応ブラウザでは中黒が残るだけで表示は壊れない */
  .video-table tr:not(:has(td.td-published:not(:empty))) td.td-channel::before {
    content: none; }
  .video-table td.td-title { order: 4; width: 100%; font-size: 19px;
                             line-height: 1.5; }
  .video-table td.tags-cell { order: 5; width: 100%; }
  .video-table td.tags-cell:empty { display: none; }
  .video-table td.status-cell { order: 6; }
  .video-table td.td-edit { order: 7; margin-left: auto; }
  .tag { font-size: 15px; }
  .status-select { font-size: 17px; padding: 6px 12px; }
  .status-apply { font-size: 16px; padding: 6px 14px; }
  .detail-btn { font-size: 16px; padding: 6px 16px; }

  .detail-table td { word-break: break-all; } /* 詳細ページのURL折り返し */

  /* 左スワイプ仕分け（videos/swipe.js）。カード枠は動かさず中身だけ横に動かし、
     空いた右側の帯に「見ない」を出す。pan-y なので縦スクロールはブラウザに任せる。
     帯の幅を移動量ちょうどにするのが肝（カード全面を覆うと中身の上に被る） */
  /* pinch-zoom も残す。pan-y だけだと一覧の上で拡大できなくなる（弱視の方に実害） */
  .video-table tbody tr { position: relative; overflow: hidden;
    touch-action: pan-y pinch-zoom; }
  .video-table tbody tr::before {
    content: attr(data-swipe-label); position: absolute;
    top: 0; bottom: 0; right: 0; width: calc(var(--swipe-dx, 0px) * -1);
    display: flex; align-items: center; justify-content: center;
    background: var(--muted); color: #fff; overflow: hidden;
    font-family: var(--font-round); font-weight: 700; white-space: nowrap;
    pointer-events: none; }
  .video-table tbody tr.swipe-ready::before { background: var(--ng-text); }
  .video-table tbody tr.swiping td { transform: translateX(var(--swipe-dx, 0)); }
  .video-table tbody tr.swipe-animate td { transition: transform .18s ease-out; }
  .video-table tbody tr.swipe-animate::before { transition: width .18s ease-out; }
}

/* ===== tubeinbox 追加分（v21 style.css からの差分はこのセクションに集約） ===== */
/* リンク切れ動画（削除・非公開検出・FR-14）の行と badge */
.video-table tr.unavailable td { opacity: .55; }
.unavail-badge { color: var(--ng-text); background: var(--ng-bg);
  border: 1px solid var(--ng-border); border-radius: 999px; padding: 0 8px;
  font-size: .75em; margin-left: 6px; white-space: nowrap; }
/* プラン上限超過で収集停止中のチャンネル badge（FR-05） */
.badge-stopped { color: var(--tag-text); background: var(--tag-bg);
  border-radius: 999px; padding: 0 8px; font-size: .78em;
  margin-left: 6px; white-space: nowrap; }
/* 削除ボタン */
button.danger { background: var(--ng-bg); border: 1px solid var(--ng-border);
  color: var(--ng-text); box-shadow: none; }
/* 長さ列（N-1）。スマホカードでは投稿日の並びに出す */
@media (max-width: 720px) {
  .video-table td.td-duration { order: 3; font-size: 15px; color: var(--muted); }
  .video-table td.td-duration::before { content: "· "; }
  .video-table td.td-duration:empty { display: none; }
  /* 長さの中黒も同様。投稿日もチャンネル名も出ていないときは付けない（βテスト J-1） */
  .video-table tr:not(:has(td.td-published:not(:empty), td.td-channel))
    td.td-duration::before { content: none; }
}
/* フッター（公開ページの法務リンク + YouTube API 表記・FR-15） */
.site-footer { max-width: 1200px; margin: 32px auto 24px; padding: 16px 20px 0;
  border-top: 1px solid var(--hairline); color: var(--muted); font-size: 12.5px; }

/* 認証画面（ユーザー登録・ログイン）: メール / Google の 2 択をカードで並べる */
input[type=email], input[type=password] {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-s);
  padding: 6px 10px; }
input[type=email]:hover, input[type=password]:hover { border-color: var(--accent); }
.auth-lead { margin: 0 0 16px; }
.auth-options { display: flex; align-items: stretch; gap: 12px; max-width: 900px; }
.auth-card { flex: 1 1 0; min-width: 0; background: var(--surface);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 18px 20px; }
.auth-card h2 { font-size: 16px; margin: 0 0 6px;
  font-family: var(--font-round); font-weight: 700; }
.auth-card > .help { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.auth-form .field { margin-bottom: 14px; display: flex; flex-direction: column; }
.auth-form label { display: block; font-size: 13px; font-weight: 700;
  font-family: var(--font-round); margin-bottom: 4px; }
.auth-form input { width: 100%; }
/* Django の field group は help text を入力欄の前に出すため、下に並べ替える */
.auth-form .helptext { order: 9; font-size: 12px; color: var(--muted);
  margin: 4px 0 0; }
.auth-form .helptext ul { margin: 0; padding-left: 18px; }
.auth-form button { padding: 8px 26px; margin-top: 4px; }
/* 「ログインしたままにする」: チェックボックスとラベルを1行に並べる */
.auth-form .remember { display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-family: var(--font-round); font-weight: 700;
  margin-bottom: 14px; }
.auth-form .remember input { width: auto; margin: 0; }
.auth-divider { display: flex; align-items: center; color: var(--muted);
  font-size: 13px; font-family: var(--font-round); }
.btn-social { display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 9px 24px;
  text-decoration: none; font-family: var(--font-round); font-weight: 500;
  box-shadow: var(--shadow-card);
  transition: border-color .15s, background .15s, transform .15s; }
.btn-social:hover { border-color: var(--accent); background: var(--surface-tint);
  transform: translateY(-1px); }
@media (max-width: 720px) {
  .auth-options { flex-direction: column; }   /* スマホは縦積み */
  .auth-divider { justify-content: center; }
}
.site-footer a { color: var(--muted); }

/* 収集設定（表示設定タブ）: ショート判定しきい値の分数入力 */
.row-form .minutes-input { width: 4.5rem; text-align: center; }

/* 一覧上部の操作カードの見出しと項目ラベル（何をする欄か分かるように） */
.bar-title { flex-basis: 100%; font-size: 12px; font-weight: 700;
             color: var(--muted); letter-spacing: .05em; }
.filters { align-items: flex-end; }  /* ラベル付きで背が高くなった項目とボタンの下端を揃える */
.filter-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.filter-label { font-size: 11px; font-weight: 600; color: var(--muted);
                padding-left: 2px; }
@media (max-width: 720px) {
  .bar-title { font-size: 13px; }
  .filter-field { flex: 1 1 45%; }
  /* 既存の .filters select への flex 指定はラップ後は外側(.filter-field)が担う */
  .filter-field select, .filter-field input[type=text] { flex: none; width: 100%;
                                                         max-width: none; }
}

/* 料金ページ: 無料/プレミアムをカードで分け、項目行の境界線で見比べやすくする */
.plan-cards { display: flex; gap: 16px; align-items: stretch; max-width: 780px; }
.plan-card { flex: 1 1 0; background: var(--surface);
             border: 1px solid var(--hairline); border-radius: var(--radius);
             box-shadow: var(--shadow-card); padding: 20px 22px;
             display: flex; flex-direction: column; }
.plan-card-premium { border-color: var(--accent); }
.plan-name { margin: 0 0 4px; font-size: 18px; font-family: var(--font-round); }
.plan-price { margin: 0 0 14px; font-size: 22px; font-weight: 700; }
.plan-price-sub { font-size: 13px; font-weight: 500; color: var(--muted); }
.plan-features { margin: 0 0 18px; display: flex; flex-direction: column; }
.plan-features > div { display: flex; justify-content: space-between; gap: 12px;
                       align-items: baseline; padding: 9px 2px;
                       border-top: 1px solid var(--hairline); }
.plan-features dt { color: var(--muted); font-size: 13px; white-space: nowrap; }
.plan-features dd { margin: 0; font-size: 14px; font-weight: 600; text-align: right; }
.plan-features .plan-na { color: var(--muted); font-weight: 500; }
.plan-cta { margin: auto 0 0; }  /* カードの高さを揃えたままボタンを下端に置く */
.plan-coming { color: var(--muted); font-size: 13px; }
@media (max-width: 720px) {
  .plan-cards { flex-direction: column; }  /* スマホは縦積み */
}

/* はじめかたガイド: 購読チャンネルが無い間だけ一覧の代わりに表示 */
.empty-guide { max-width: 640px; margin: 40px auto; padding: 28px 32px;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-card); text-align: center; }
.empty-guide h2 { font-family: var(--font-round); font-size: 20px; margin: 0 0 12px; }
.empty-guide .lead { margin: 0 0 8px; }
.empty-guide ol { display: inline-block; text-align: left;
  margin: 10px auto 20px; padding-left: 22px; line-height: 2; }
.empty-guide .cta { display: inline-block; font-family: var(--font-round);
  font-weight: 500; background: var(--accent); color: #fff; text-decoration: none;
  border-radius: 999px; padding: 10px 30px;
  transition: background .15s, transform .15s, box-shadow .15s; }
.empty-guide .cta:hover { background: var(--accent-strong);
  transform: translateY(-1px); box-shadow: var(--shadow-btn); }

/* 運営ダッシュボード（/app/stats/・スタッフ専用）。設定画面のカードに揃える */
.stat-sections { display: grid; gap: 12px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.stat-card { background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 14px 16px; }
.stat-card h2 { font-size: 15px; margin: 0 0 10px;
  font-family: var(--font-round); font-weight: 700; }
.stat-card dl { margin: 0; }
.stat-card dl > div { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 8px; padding: 5px 0; border-top: 1px solid var(--hairline); }
.stat-card dl > div:first-child { border-top: none; }
.stat-card dt { font-size: 13px; color: var(--muted); }
/* 値は右寄せ。入りきらなければラベルを潰さず次の行に折り返す */
.stat-card dd { margin: 0 0 0 auto; font-family: var(--font-round); font-weight: 700;
  font-size: 17px; text-align: right; }
/* 補足は行いっぱいを使う。値の下に押し込めるとラベルが縦 1 文字に潰れる */
.stat-card dd.stat-note { flex: 1 0 100%; margin-left: 0; font-family: inherit;
  font-weight: 400; font-size: 12px; color: var(--muted); }

/* 送信待ちのボタン（チャンネル登録は API を数回叩くため数秒かかる） */
button.is-busy { opacity: .75; }
button.is-busy::before { content: ''; display: inline-block;
  width: .85em; height: .85em; margin-right: .5em; vertical-align: -.08em;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: tb-spin .8s linear infinite; }
@keyframes tb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  button.is-busy::before { animation: none; }
}

/* スワイプ仕分けの結果表示（元に戻す付き）。スマホのみで出るが幅の制限はしない */
.swipe-toast { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 50; display: flex; align-items: center; gap: 14px;
  max-width: min(92vw, 520px); padding: 10px 16px; border-radius: 999px;
  background: var(--text); color: var(--bg); font-size: 15px;
  box-shadow: var(--shadow-card); }
/* display:flex が UA の [hidden] を上書きしてしまうため明示的に消す */
.swipe-toast[hidden] { display: none; }
.swipe-toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swipe-toast button { flex: none; font: inherit; font-family: var(--font-round);
  font-weight: 700; color: var(--bg); background: none; box-shadow: none;
  border: 1px solid var(--bg); border-radius: 999px; padding: 4px 14px; }
/* タッチ端末では 1 回目のタップが hover の適用に使われ「元に戻す」が空振りすることがある */
@media (hover: hover) {
  .swipe-toast button:hover { background: var(--bg); color: var(--text); }
}
/* iOS Safari はアドレスバーが画面下にあり、畳まれた帯の上をタップしても
   バーの展開に使われてページに届かない（Chrome は上バーなので起きない）。
   「元に戻す」は 6 秒で消えるため、空振り 1 回で取り消しに失敗する。
   viewport に viewport-fit=cover が無く env() が 0 になるので固定値で持ち上げる */
@media (max-width: 720px) {
  .swipe-toast { bottom: 76px; }
}

/* エラーページ(404 / 403)。カードの見た目は はじめかたガイド と揃える。
   500 は request 無しで描画されるため base.html を継承できず、この CSS も届かない
   (templates/500.html にインラインで持たせてある) */
.error-page { max-width: 560px; margin: 40px auto; padding: 28px 32px;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-card); text-align: center; }
.error-page .error-code { font-family: var(--font-round); font-size: 48px;
  font-weight: 700; color: var(--accent); line-height: 1; margin: 0 0 8px; }
.error-page h1 { font-family: var(--font-round); font-size: 20px; margin: 0 0 12px; }
.error-page p { margin: 0 0 8px; }
.error-page .cta { display: inline-block; margin-top: 16px;
  font-family: var(--font-round); font-weight: 500;
  background: var(--accent); color: #fff; text-decoration: none;
  border-radius: 999px; padding: 10px 30px;
  transition: background .15s, transform .15s, box-shadow .15s; }
.error-page .cta:hover { background: var(--accent-strong);
  transform: translateY(-1px); box-shadow: var(--shadow-btn); }