/*
  TIPSTAR（https://tipstar.com/）の見た目に寄せる上書き。base.css・style.css（と確認画面の <style>）のあとに読む。
  紺の背景・白文字・ピンクの強調。水色→紫のグラデーションは TIPSTAR のブランド色なので、
  主ボタンと選択中の切替だけに使う（design-no-ai-look の例外：クライアントのブランド指定）。
*/
:root {
  --ts-bg: #0e121c;
  --ts-surface: #1b2030;
  --ts-raise: #2e2e38;
  --ts-line: #2c3242;
  --ts-line-strong: #4a5165;
  --ts-ink: #ffffff;
  --ts-sub: #c5cad7;
  --ts-blue: #0fa7e9;
  --ts-pink: #ed3c94;
  --ts-grad: linear-gradient(117deg, #0fa7e9 0%, #0a82e6 20%, #820bd9 100%);

  --fr-blue: var(--ts-blue);
  --fr-blue-hover: #0a82e6;
  --fr-blue-soft: var(--ts-bg);
  --fr-blue-active: var(--ts-raise);
  --fr-side: var(--ts-bg);
  --fr-filter: var(--ts-surface);
  --fr-bg: var(--ts-bg);
  --fr-ink: var(--ts-ink);
  --fr-sub: var(--ts-sub);
  --fr-line: var(--ts-line);
  --fr-line-strong: var(--ts-line-strong);
  --fr-th: var(--ts-surface);
  --fr-ok: #4fd18b;
  --fr-ok-soft: #133524;
  --fr-err: var(--ts-pink);
  --fr-err-soft: #3d1530;
  --fr-warn: #ffc24b;
  --fr-warn-soft: #3a2b0d;
  --fr-muted-soft: var(--ts-raise);
  --fr-radius: 8px;

  --bg: var(--ts-bg);
  --panel: var(--ts-surface);
  color-scheme: dark;
}

body { background: var(--ts-bg); color: var(--ts-ink); font-family: "Noto Sans JP", -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; }
a { color: #3cb4f0; }

/* 左メニュー：TIPSTAR のヘッダーと同じ紺。ロゴは白い太字 */
.fr-side { border-right: 1px solid var(--ts-line); }
.fr-brand { color: var(--ts-ink); font-size: 16px; font-weight: 800; letter-spacing: .02em; line-height: 1.3; }
.fr-nav a { color: var(--ts-ink); border-radius: 100px; padding: 8px 14px; }
.fr-nav a:hover { background: var(--ts-surface); }
.fr-nav a.on { background: var(--ts-raise); }
.fr-top, .fr-head { background: var(--ts-bg); }
.fr-top { color: var(--ts-sub); }
.fr-head { border-bottom: 1px solid var(--ts-line); }
.fr-head h1 svg { stroke: var(--ts-ink); }

/* ボタン：丸いピル型。主ボタンはブランドのグラデーション */
.fr-btn, button, .button {
  background: var(--ts-raise); color: var(--ts-ink); border: 1px solid transparent; border-radius: 100px; padding: 7px 18px;
}
.fr-btn:hover, button:hover, .button:hover { background: #3a3a46; }
.fr-btn.primary, button.primary { background: var(--ts-grad); border-color: transparent; color: #fff; font-weight: 700; }
.fr-btn.primary:hover, button.primary:hover { background: var(--ts-grad); filter: brightness(1.08); }
.fr-btn.quiet, button.quiet { color: #3cb4f0; }
.fr-btn.quiet:hover, button.quiet:hover { background: var(--ts-surface); }

/* 区切りボタン：TIPSTAR の「競輪／オートレース」タブの形（濃い面に、選択中だけグラデーション） */
.fr-seg { background: var(--ts-raise); border-radius: 100px; padding: 3px; gap: 2px; }
.fr-seg button, .fr-seg button:first-child, .fr-seg button:last-child {
  margin: 0; border: 0; border-radius: 100px; background: transparent; color: var(--ts-sub); padding: 5px 14px;
}
.fr-seg button:hover { background: #3a3a46; color: var(--ts-ink); }
.fr-seg button.on { background: var(--ts-grad); color: #fff; font-weight: 700; }
#sheet-month { border-radius: 18px; }
#sheet-month .mc { color: inherit; opacity: .8; }

/* 入力 */
input, select, textarea { background: var(--ts-bg); color: var(--ts-ink); border: 1px solid var(--ts-line-strong); }
input::placeholder, textarea::placeholder { color: #8a90a2; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(15, 167, 233, .35); border-color: var(--ts-blue); }
.title-input:focus { background: var(--ts-bg); }

/* 絞り込みパネル・表 */
.fr-filter { background: var(--ts-surface); }
.fr-field > .fr-label { color: var(--ts-sub); }
.fr-table { background: transparent; }
.fr-table th { background: var(--ts-surface); color: var(--ts-sub); }
.sheet-table tbody tr[data-key]:hover td { background: var(--ts-surface); }
#sheet-head th:hover, #sheet-head th.sorted { color: var(--ts-ink); }
#sheet-head th::after { color: #6b7185; }
#sheet-head th.sorted[data-dir="asc"]::after, #sheet-head th.sorted[data-dir="desc"]::after { color: var(--ts-blue); }
.sheet-table .chg { color: #3cb4f0; }
.chip.fb { color: #3cb4f0; background: #10283a; }
.fb-text mark { background: #4a3a10; }
.list li:hover { background: var(--ts-surface); }
.drop.over { background: var(--ts-surface); }
.rows li:hover { background: var(--ts-surface); }
.entries tr + tr td, .riders tr + tr td { border-top-color: var(--ts-line); }
.race-banner { background: var(--ts-surface); }
dialog { background: var(--ts-surface); color: var(--ts-ink); border: 1px solid var(--ts-line); border-radius: 12px; }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
.fr-top .who a { color: #3cb4f0; }
@media (max-width: 900px) {
  .fr-side { border-right: 0; border-bottom: 1px solid var(--ts-line); }
  .sheet-table tr { border-top-color: var(--ts-line); }
}

/* ---------- 確認画面（/api/sheet/review.html） ---------- */
body.review header { background: var(--ts-bg); border-bottom: 1px solid var(--ts-line); }
body.review .meta, body.review .cap, body.review .card .who, body.review .mk-s, body.review .empty, body.review .label { color: var(--ts-sub); }
body.review .card img { border-color: var(--ts-line); }
body.review .fx li { border-bottom-color: var(--ts-line); }
body.review button.seek { background: var(--ts-grad); color: #fff; font-weight: 700; }
body.review .nav a { background: var(--ts-raise); color: var(--ts-ink); border: 0; border-radius: 100px; }
body.review .marks { background: var(--ts-surface); }
body.review .mk-s.ok { color: var(--fr-ok); }
body.review .mk-s.todo { color: var(--fr-warn); }
body.review .memo { background: var(--ts-bg); color: var(--ts-ink); border-color: var(--ts-line-strong); }
body.review .lv-fb { background: #10283a; color: #3cb4f0; }