:root {
  --bg: #f6f7f5;
  --card: #ffffff;
  --line: #dcdfd8;
  --text: #1d221c;
  --muted: #6b7280;
  --accent: #15803d;
  --accent-weak: #dcfce7;
  --warn: #b45309;
  --neg: #b91c1c;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a;
    --card: #1d2125;
    --line: #313842;
    --text: #e7eae6;
    --muted: #9aa4b2;
    --accent: #4ade80;
    --accent-weak: #14311f;
    --warn: #fbbf24;
    --neg: #f87171;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  padding-bottom: 40px;
}

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--accent);
  color: #fff;
  /* ホーム画面から開いたとき、iPhone の時計に重ならないようにする */
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
@media (prefers-color-scheme: dark) { .topbar { background: #14532d; color: #e7f7ec; } }
.topbar .title { font-weight: 700; font-size: 17px; }
.topbar .dbinfo { font-size: 12px; opacity: .85; }

.tabs {
  position: sticky; top: var(--topbar-h, 44px); z-index: 19;
  display: flex; gap: 2px; background: var(--card);
  border-bottom: 1px solid var(--line); padding: 0 6px;
}
.tabs.sub { position: static; background: transparent; border: 0; margin: 14px 0 6px; }
.tab {
  flex: 1; padding: 11px 4px; border: 0; background: transparent;
  color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.panel { padding: 12px; max-width: 1100px; margin: 0 auto; }
.panel.hidden, .hidden { display: none; }
/* display を持つ他のクラスと重なっても隠れるようにする */
.hidden.inline, .hidden.actions, .hidden.chips, .hidden.row, .hidden.seg { display: none !important; }

.modeswitch { display: flex; gap: 8px; margin-bottom: 14px; }
.mode {
  flex: 1; padding: 11px; border: 1px solid var(--line); background: var(--card);
  color: var(--muted); border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer;
}
.mode.active { background: var(--accent-weak); border-color: var(--accent); color: var(--accent); }

.block { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; }
.block h3 { margin: 0 0 8px; font-size: 15px; }

.acc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.acc > summary { padding: 12px; font-weight: 600; cursor: pointer; font-size: 14px; list-style: none; position: relative; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: "＋"; position: absolute; right: 14px; color: var(--muted); }
.acc[open] > summary::after { content: "－"; }
.acc[open] > summary { border-bottom: 1px solid var(--line); }
.accbody { padding: 12px; }

.lab { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin: 12px 0 6px; }
.lab:first-child, .accbody > .lab:first-child { margin-top: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 8px 12px; border: 1px solid var(--line); background: var(--bg);
  border-radius: 999px; font-size: 13px; cursor: pointer; user-select: none; color: var(--text);
}
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) { .chip.on { color: #0b1410; } }
.chips.quick .chip { font-size: 12px; padding: 6px 10px; }

.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tilde { color: var(--muted); }
.unit { color: var(--muted); font-size: 13px; }

.num, .txt, .sel {
  padding: 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 16px; font-family: inherit;
}
.num { width: 92px; }
.txt { width: 100%; }
.sel { min-width: 110px; }
.sel.wide { width: 100%; }

.suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.suggest .s { font-size: 12px; padding: 5px 9px; border-radius: 6px; background: var(--accent-weak); color: var(--accent); cursor: pointer; }
.hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; }

.actions { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
button.primary {
  flex: 1; min-width: 160px; padding: 14px; border: 0; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
}
@media (prefers-color-scheme: dark) { button.primary { color: #0b1410; } }
button.ghost {
  padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--text); font-size: 14px; cursor: pointer;
}
button.small { padding: 8px 12px; font-size: 13px; }
.savedrow { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.savedrow .txt { flex: 1; }
#saved-list .chip { font-size: 12px; }
#saved-list .x { margin-left: 6px; opacity: .6; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; text-align: center; }
.card .k { font-size: 11px; color: var(--muted); }
.card .v { font-size: 20px; font-weight: 700; margin-top: 2px; }
.card .v.good { color: var(--accent); }
.card .v.bad { color: var(--neg); }

.cond { font-size: 12px; color: var(--muted); margin: 10px 0; line-height: 1.8; }
.cond b { color: var(--text); font-weight: 600; }

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; white-space: nowrap; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; }
th { background: var(--bg); color: var(--muted); font-size: 11px; position: sticky; top: 0; cursor: pointer; }
th.k, td.k { text-align: left; position: sticky; left: 0; background: var(--card); z-index: 1; }
th.k { background: var(--bg); }
tbody tr:hover td { background: var(--accent-weak); }
td.good { color: var(--accent); font-weight: 600; }
td.bad { color: var(--neg); }
td.win { font-weight: 700; }

/* ---- 予想タブ ---- */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.txt.area { font-family: ui-monospace, Consolas, monospace; font-size: 13px; white-space: pre; overflow-x: auto; line-height: 1.5; }
.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.inline .num { width: 70px; }
.row.wrap { flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.racelist { display: flex; flex-direction: column; gap: 6px; }
.race { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; background: var(--bg); }
.race.on { border-color: var(--accent); background: var(--accent-weak); }
.race .nm { font-weight: 600; font-size: 14px; }
.race .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.race .del { color: var(--muted); padding: 6px 10px; border-radius: 6px; flex: none; }
.race .del:hover { color: var(--neg); }
h4.sub { font-size: 13px; margin: 16px 0 6px; color: var(--muted); font-weight: 600; }
h4.sub:first-child { margin-top: 0; }
.fctitle { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.fcsub { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
td.hit, td.pick { color: var(--accent); font-weight: 700; }
td.lift-hi { color: var(--accent); font-weight: 600; }
td.lift-lo { color: var(--neg); }
.warnbox { margin-top: 10px; padding: 11px 13px; border-radius: 8px; font-size: 13px; line-height: 1.7;
  background: var(--accent-weak); border: 1px solid var(--line); }
.warnbox.strong { border-color: var(--warn); color: var(--warn); background: transparent; font-weight: 600; }

/* 激アツの組み合わせ */
.block.hot { border-color: var(--accent); }
.block.hot h3 { color: var(--accent); }
.block.hot td.k { font-weight: 600; }
.kindtag { font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: var(--accent-weak); color: var(--accent); white-space: nowrap; }
.nohit { padding: 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* 粒度の切り替え（種牡馬 / 小系統 / 大系統 / 型） */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 10px; flex-wrap: wrap; }
.seg button { padding: 9px 15px; border: 0; background: var(--card); color: var(--muted);
  font-size: 13px; font-weight: 600; cursor: pointer; border-right: 1px solid var(--line); font-family: inherit; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .seg button.on { color: #0b1410; } }
.sidehead { font-size: 13px; font-weight: 700; margin: 0 0 6px; padding-left: 8px; border-left: 3px solid var(--accent); }
.legend { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 10px 0 0;
  padding: 10px 12px; background: var(--bg); border-radius: 8px; }
.legend b { color: var(--text); }

.mark { margin-left: 2px; font-size: 13px; white-space: nowrap; }

/* 国系統の色分け（日本型＝黄／米国型＝赤／欧州型＝青） */
:root { --ty-jp: #a9760a; --ty-us: #c0392b; --ty-eu: #1d4ed8;
        --ag1: #c08a00; --ag2: #1d4ed8; --ag3: #c0392b; }
@media (prefers-color-scheme: dark) { :root { --ty-jp: #fbbf24; --ty-us: #f87171; --ty-eu: #7dabff;
        --ag1: #fcd34d; --ag2: #7dabff; --ag3: #f87171; } }
.ty-jp { color: var(--ty-jp); font-weight: 600; }
.ty-us { color: var(--ty-us); font-weight: 600; }
.ty-eu { color: var(--ty-eu); font-weight: 600; }
.tylegend { display: inline-flex; gap: 10px; flex-wrap: wrap; margin-left: 4px; }
.tylegend span::before { content: "■ "; }

/* 予想印のプルダウン */
.marksel { padding: 4px 2px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 16px; font-family: inherit; min-width: 52px; text-align: center; }

/* 近走結果（馬柱の並べ方） */
td.runcol { vertical-align: top; padding: 6px 8px; }
.run { font-size: 11px; line-height: 1.45; text-align: left; white-space: normal; min-width: 146px; max-width: 190px; }
.run .rd { color: var(--muted); }
.run .rn { font-weight: 600; color: var(--text); }
.run .rf { margin-top: 1px; }
.run .rf .f1 { color: var(--neg); font-weight: 700; }
.run .rf .f3 { color: var(--accent); font-weight: 700; }
.run .rt { color: var(--muted); }
/* 上がり3F の順位色（1位=黄／2位=青／3位=赤） */
.ag1 { color: var(--ag1); font-weight: 700; }
.ag2 { color: var(--ag2); font-weight: 700; }
.ag3 { color: var(--ag3); font-weight: 700; }
.run .rp { color: var(--text); }
.run .rp .cl { color: var(--muted); }
.run .rp b { font-weight: 700; letter-spacing: .02em; }
.run .ri { color: var(--muted); }
.run .idx { font-weight: 700; color: var(--text); }
.run .idx.hi { color: var(--accent); }
.run .idx.lo { color: var(--muted); font-weight: 400; }
.run-empty { color: var(--muted); }

/* レースメモの中身に応じた色分け（見直せる＝薄い赤／逆＝薄い青） */
.run.tone-plus { background: rgba(220, 38, 38, .10); border-radius: 6px; padding: 4px 6px; margin: -4px -6px; }
.run.tone-minus { background: rgba(37, 99, 235, .12); border-radius: 6px; padding: 4px 6px; margin: -4px -6px; }
.run.tone-neutral { background: rgba(128, 128, 128, .10); border-radius: 6px; padding: 4px 6px; margin: -4px -6px; }
@media (prefers-color-scheme: dark) {
  .run.tone-plus { background: rgba(248, 113, 113, .16); }
  .run.tone-minus { background: rgba(125, 171, 255, .16); }
  .run.tone-neutral { background: rgba(160, 170, 185, .12); }
}
/* 📝 は右上に置く（押すとメモがポップアップで出る） */
.run { position: relative; }
.run .pen { position: absolute; top: 0; right: 0; z-index: 2;
  font-size: 12px; line-height: 1; padding: 2px 3px; border: 0; border-radius: 4px;
  background: transparent; cursor: pointer; font-family: inherit; }
.run .pen:hover { background: rgba(128, 128, 128, .25); }
.urllist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.urlrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-weak); }
.urlrow .u { font-family: ui-monospace, Consolas, monospace; font-size: 16px; font-weight: 700;
  color: var(--accent); user-select: all; flex: 1; word-break: break-all; }
.estodds { color: var(--muted); }
.estodds sup { font-size: 9px; margin-left: 1px; }
.run.racelink { cursor: pointer; }
.run.racelink:hover { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.memopop { position: absolute; z-index: 60; width: min(320px, calc(100vw - 24px));
  background: var(--card); border: 1px solid var(--accent); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3); overflow: hidden; }
.memopop.hidden { display: none; }
.memopop .mp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--bg); border-bottom: 1px solid var(--line);
  font-size: 11px; color: var(--muted); }
.memopop .mp-close { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 2px; }
.memopop .mp-body { padding: 10px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.memopop .mp-foot { padding: 0 10px 9px; font-size: 11px; }
.memopop .mp-foot a { color: var(--accent); }
.tonelegend { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.tonelegend span { padding: 1px 8px; border-radius: 4px; }
.tonelegend .tp { background: rgba(220, 38, 38, .14); }
.tonelegend .tm { background: rgba(37, 99, 235, .16); }
@media (prefers-color-scheme: dark) {
  .tonelegend .tp { background: rgba(248, 113, 113, .2); }
  .tonelegend .tm { background: rgba(125, 171, 255, .2); }
}
.tagrow { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--accent-weak); color: var(--accent); white-space: nowrap; }

/* ---- 馬別ページ（重ねて表示） ---- */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 20px 10px; }
.modal.hidden { display: none; }
.modal-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.modal-box { position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); width: 100%; max-width: 940px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg); }
.hm-name { font-size: 17px; font-weight: 700; }
.hm-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.hm-close { border: 0; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; padding: 0 4px; }
.modal-note { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.modal-note .lab { margin-top: 0; }
.hm-saved { font-size: 11px; color: var(--accent); margin-top: 4px; min-height: 14px; }
.modal-body { padding: 12px 14px; overflow: auto; }
#hm-tabs { margin: 0; padding: 0 10px; border-bottom: 1px solid var(--line); }

/* 血統表（左が新しい代） */
.pedtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.pedtable th { font-size: 11px; text-align: center; padding: 4px; position: static; }
.pedtable td { border: 1px solid var(--line); padding: 6px 8px; text-align: left;
  vertical-align: middle; white-space: nowrap; }
.pedtable td.ps { background: rgba(120, 175, 255, .13); }   /* 父側 */
.pedtable td.pd { background: rgba(255, 140, 175, .13); }   /* 母側 */
@media (prefers-color-scheme: dark) {
  .pedtable td.ps { background: rgba(120, 175, 255, .10); }
  .pedtable td.pd { background: rgba(255, 140, 175, .10); }
}
.pedtable .pnone { color: var(--muted); }

.pedbox { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pedcell { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--bg); }
.pedcell .t { font-size: 11px; color: var(--muted); }
.pedcell .v { font-size: 15px; font-weight: 600; margin-top: 2px; }
.pedcell .s { font-size: 11px; color: var(--muted); margin-top: 2px; }
.proflist { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.profitem { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: var(--bg); }
.profitem .t { font-size: 11px; color: var(--muted); }
.profitem .v { font-size: 14px; font-weight: 600; margin-top: 2px; }
.rnote { width: 150px; min-height: 30px; font-size: 11px; padding: 5px 6px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--text); font-family: inherit; resize: vertical; }
.rnote.filled { border-color: var(--accent); }
a.horselink { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); cursor: pointer; }
a.horselink:hover { color: var(--accent); border-bottom-color: var(--accent); }

.empty { text-align: center; color: var(--muted); padding: 60px 20px; }
#result-area { margin-top: 18px; border-top: 2px solid var(--line); padding-top: 6px; }
#result-area .empty { padding: 28px 20px; }
.log { font-size: 12px; font-family: ui-monospace, Consolas, monospace; white-space: pre-wrap; margin-top: 10px; color: var(--muted); }
.steps { margin: 0 0 12px; padding-left: 20px; font-size: 14px; }
.steps code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-size: 12px; }

/* ===================== 買い目 ===================== */
.betrow { margin: 10px 0 14px; }
.betrow-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.betrow-h b { font-size: 14px; }
.betrow-h .hint { margin: 0; }
.mkq { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.mkq .q {
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  border-radius: 999px; font-size: 12px; padding: 4px 9px; cursor: pointer; line-height: 1.4;
}
.mkq .q:hover { border-color: var(--accent); }

.hchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
.hchip {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text);
  padding: 7px 8px; cursor: pointer; text-align: left; font-size: 12px; min-height: 38px;
}
.hchip.on { border-color: var(--accent); background: var(--accent-weak); box-shadow: inset 0 0 0 1px var(--accent); }
.hchip .c-no {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px;
  border-radius: 4px; font-weight: 700; font-size: 12px; border: 1px solid var(--line);
}
.hchip .c-mk { font-size: 12px; color: var(--accent); font-weight: 700; }
.hchip .c-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
/* 枠の色（JRAの枠色） */
.hchip.w1 .c-no { background: #fff; color: #111; }
.hchip.w2 .c-no { background: #222; color: #fff; }
.hchip.w3 .c-no { background: #d43b3b; color: #fff; }
.hchip.w4 .c-no { background: #2f6fd0; color: #fff; }
.hchip.w5 .c-no { background: #f2c53d; color: #111; }
.hchip.w6 .c-no { background: #3f9a55; color: #fff; }
.hchip.w7 .c-no { background: #e08a3c; color: #fff; }
.hchip.w8 .c-no { background: #e79ab5; color: #111; }

.betprev { border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px 12px; margin-top: 12px; }
.bp-sum { font-size: 15px; }
.bp-pts { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.bp-pts span { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }

.betitem { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; }
.bi-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bi-h b { font-size: 15px; }
.bi-m { font-size: 12px; color: var(--muted); }
.bi-n { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; }
.bi-del { border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; padding: 0 2px; }
.bi-pts { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.bi-pts span { font-size: 13px; font-variant-numeric: tabular-nums; }
.bi-who { font-size: 11px; color: var(--muted); margin-top: 5px; }
.bettotal { text-align: right; font-size: 16px; padding: 6px 2px 0; }
.btnlink { display: inline-block; text-decoration: none; padding: 12px 16px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--card); color: var(--text); font-size: 14px; }

/* 投票メモ */
.modal-box.sheet { max-width: 620px; }
.shrow { border-bottom: 1px solid var(--line); padding: 10px 0; }
.sh-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sh-i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
@media (prefers-color-scheme: dark) { .sh-i { color: #0b1410; } }
.sh-h b { font-size: 17px; }
.sh-y { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.sh-p { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.sh-p span { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sh-total { text-align: right; font-size: 18px; font-weight: 700; padding: 12px 0; }

/* 買い目 － 点ごとの金額・オッズ */
.row .sep { color: var(--line); }
.txt.num { width: 100px; }
.bi-lab { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ptable { margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.prow {
  display: grid; grid-template-columns: 1fr 96px 104px 96px; gap: 8px; align-items: center;
  padding: 5px 10px; border-top: 1px solid var(--line);
}
.prow:first-child { border-top: 0; }
.prow.head { background: var(--bg); font-size: 11px; color: var(--muted); padding: 6px 10px; }
.prow.head span:nth-child(n+2) { text-align: right; }
.pr-pt { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pr-od { text-align: right; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-am input {
  width: 100%; padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 13px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.bi-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin-top: 8px; padding: 7px 9px; border: 1px dashed var(--line); border-radius: 8px;
}
.tgrp { display: inline-flex; align-items: center; gap: 5px; }
.bi-tools .alab { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bi-tools .num { width: 84px; padding: 6px 8px; font-size: 13px; }
.bi-tools .sel { padding: 6px 8px; font-size: 13px; }
.bi-tools button { padding: 6px 11px; white-space: nowrap; }
.alab { font-size: 13px; color: var(--muted); }
button.ghost:disabled { opacity: .45; cursor: default; }
.bm-wait { font-size: 12px; color: var(--muted); text-align: right; padding-top: 4px; }
.pr-ret { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.pr-ret.lose, .hint .lose { color: var(--neg); font-weight: 700; }
.bi-foot { font-size: 12px; color: var(--muted); margin-top: 7px; text-align: right; }

.betmoney { margin-top: 6px; }
.bm-line { text-align: right; font-size: 14px; padding: 2px 2px; }
.bm-line .bm-sub { font-size: 11px; color: var(--muted); }
.bm-line.ok { color: var(--accent); }
.bm-line.ng { color: var(--neg); }

.bp-pts span i { font-style: normal; color: var(--accent); margin-left: 3px; font-size: 11px; }

/* 投票メモ － 点ごとに金額が違うとき */
.sh-list { margin-top: 8px; }
.sh-list > div { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
  padding: 3px 0; border-bottom: 1px dotted var(--line); }
.sh-list span { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sh-list b { font-size: 15px; font-variant-numeric: tabular-nums; }
.sh-list i { font-style: normal; font-size: 11px; color: var(--muted); min-width: 110px; text-align: right; }
.sh-e { font-size: 12px; color: var(--muted); margin-top: 6px; text-align: right; }
.sh-ret { text-align: right; font-size: 14px; color: var(--muted); }

@media (max-width: 560px) {
  .bi-tools { gap: 7px; padding: 7px; }
  .tgrp { flex: 1 0 100%; }
  .bi-tools .num { width: 72px; }
  .bi-tools .tgrp button { margin-left: auto; }
  .prow { grid-template-columns: minmax(70px, 1fr) 62px 66px 76px; gap: 4px; padding: 5px 6px; }
  .pr-od { font-size: 12px; }
  .pr-am input { padding: 5px 4px; }
  .pr-pt { font-size: 12.5px; }
  .pr-ret { font-size: 12px; }
  .prow.head { font-size: 10px; }
}

/* ===================== アカウント ===================== */
.userbox { display: flex; align-items: center; align-self: center; gap: 5px; margin-left: auto; }
.uicon { font-size: 14px; }
.usel {
  padding: 5px 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px; max-width: 120px;
}
.usel option { color: #111; background: #fff; }
.ubtn {
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12);
  color: #fff; border-radius: 8px; padding: 4px 8px; font-size: 13px; cursor: pointer;
}
.umrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.umrow .umname { flex: 1; min-width: 120px; }
.umnow { font-size: 11px; color: var(--accent); }
.umadd { display: flex; gap: 8px; margin-top: 14px; }
.umadd .txt { flex: 1; }
.umadd .primary { flex: 0 0 auto; min-width: 110px; padding: 10px 14px; }
@media (max-width: 560px) {
  /* スマホは「題名＋アカウント」を1行、データ件数をその下に小さく。画面上部を占めすぎないようにする */
  .topbar { flex-wrap: wrap; gap: 4px 10px; padding-bottom: 6px; padding-top: calc(7px + env(safe-area-inset-top, 0px)); }
  .topbar .title { font-size: 15px; flex: 1; }
  .topbar .dbinfo { order: 3; width: 100%; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .userbox { width: auto; margin: 0 0 0 auto; }
  .uname { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .usel { max-width: none; flex: 1; }
}

/* 共通メモ（オーナーが書く／全員が読む） */
.notecard { border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; white-space: pre-wrap; background: var(--bg); }
.rnote.owner { border-color: var(--warn); }
.onote { font-size: 11px; color: var(--warn); margin-bottom: 4px; white-space: pre-wrap; }
.pen.owner { color: var(--warn); }
.mp-sec { margin-bottom: 10px; }
.mp-sec:last-child { margin-bottom: 0; }
.mp-sec b { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.mp-sec div { white-space: pre-wrap; }
.umown { font-size: 11px; color: var(--warn); }
#hm-owner-box { margin-bottom: 10px; }

/* ===================== ログイン ===================== */
.login { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: var(--bg); }
.login.hidden { display: none; }
.loginbox { width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 20px; }
.ltitle { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.loginbox .lab { margin-top: 12px; }
.loginbox .txt, .loginbox .sel { width: 100%; box-sizing: border-box; }
.loginbox .primary { width: 100%; margin-top: 14px; }
.lgerr { color: var(--neg); font-size: 13px; min-height: 18px; margin-top: 10px; }
.uname { font-size: 13px; font-weight: 600; }
.umnopw { font-size: 11px; color: var(--warn); }
.umpw { display: flex; gap: 8px; flex-wrap: wrap; }
.umpw .txt { flex: 1; min-width: 140px; }
@media (max-width: 560px) { .umpw .txt { min-width: 100%; } }
.tab.hidden, details.acc.hidden { display: none !important; }

/* 投票メモ － 1点ずつ消し込む */
.sh-list { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.shpt {
  display: grid; grid-template-columns: 20px 1fr auto auto; gap: 10px; align-items: baseline;
  width: 100%; text-align: left; padding: 9px 10px; border: 0; border-bottom: 1px dotted var(--line);
  background: transparent; color: var(--text); cursor: pointer; border-radius: 6px;
}
.shpt .ck { color: var(--accent); font-weight: 700; font-size: 15px; }
.shpt:hover { background: var(--bg); }
.shpt .pt { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.shpt b { font-size: 15px; font-variant-numeric: tabular-nums; }
.shpt i { font-style: normal; font-size: 11px; color: var(--muted); min-width: 104px; text-align: right; }
.shpt.done { opacity: .4; }
.shpt.done .pt { text-decoration: line-through; }
.shpt.done .ck::before { content: '✓'; }
.sh-left { text-align: right; font-size: 14px; padding: 6px 0; color: var(--muted); }
.sh-left b { color: var(--text); }
.sh-left.clear { color: var(--accent); }
.sh-left.clear b { color: var(--accent); }
#sh-foot .actions { justify-content: flex-end; margin: 6px 0 0; }
#sh-foot .actions .ghost { flex: 0 0 auto; }

/* 馬別ページの過去成績も、メモの内容で色を付ける（出馬表と同じ見え方） */
#hm-runs tr.tone-plus td { background: rgba(220, 38, 38, .10); }
#hm-runs tr.tone-minus td { background: rgba(37, 99, 235, .12); }
#hm-runs tr.tone-neutral td { background: rgba(128, 128, 128, .08); }
@media (prefers-color-scheme: dark) {
  #hm-runs tr.tone-plus td { background: rgba(248, 113, 113, .14); }
  #hm-runs tr.tone-minus td { background: rgba(125, 171, 255, .14); }
  #hm-runs tr.tone-neutral td { background: rgba(160, 170, 185, .10); }
}

/* 開催傾向 */
.mtcard { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.mt-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.mt-h b { font-size: 15px; }
.mt-sub { font-size: 11px; color: var(--muted); }
.mt-body { gap: 10px; margin-top: 4px; }
.mt-body h4.sub { margin: 0 0 4px; }
.mt-up { color: var(--warn); font-size: 10px; margin-right: 3px; }
/* 場ごとのカードは、狭いときは1列に。カード内の父／母父も同じ考え方で折り返す */
#meeting.grid2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; }
#meeting table { font-size: 12px; }
#meeting th, #meeting td { padding: 4px 6px; }
.mt-body { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (max-width: 900px) {
  #meeting.grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #meeting table { font-size: 11px; }
  #meeting th, #meeting td { padding: 4px 3px; }
}


/* ===================== スマホ向けの調整 ===================== */
/* 固定列は馬名だけ。印・枠・馬番まで固定すると重なって読めなくなる */
th.k.ns, td.k.ns { position: static; }
/* レース内の切り替え（出馬表／血統／コース傾向／買い目）は画面上部に貼り付く */
#fc-tabs {
  position: sticky; top: calc(var(--topbar-h, 44px) + var(--maintabs-h, 44px)); z-index: 18;
  background: var(--bg); margin: 10px 0 6px; padding: 0; border-bottom: 1px solid var(--line);
}
/* 開催傾向の折りたたみ */
@media (max-width: 700px) {
  th, td { padding: 7px 7px; }
  table { font-size: 12px; }
  .racelist .race { padding: 10px 12px; }
}

/* ===================== 答え合わせ ===================== */
.bar { height: 10px; background: var(--line); border-radius: 6px; overflow: hidden; margin-top: 10px; }
.bar .fill { height: 100%; width: 0; background: var(--accent); transition: width .4s; }
.txt.short { width: 150px; }
#bt-runs .chip.run { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; max-width: 100%; }
#bt-runs .chip .x { opacity: .6; font-size: 11px; }
#bt-runs .chip .x:hover { opacity: 1; }

span.good { color: var(--accent); font-weight: 600; }
span.bad { color: var(--neg); }

/* ===================== 今週やること ===================== */
.weekly { list-style: none; margin: 8px 0 0; padding: 0; }
.weekly li { display: grid; grid-template-columns: 28px 1fr; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.weekly li:last-child { border-bottom: none; }
.weekly .st { font-size: 18px; line-height: 1.2; text-align: center; }
.weekly .lb { font-weight: 600; }
.weekly .lb .opt { font-weight: 400; font-size: 11px; color: var(--muted); margin-left: 6px; }
.weekly .dt { grid-column: 2; font-size: 12px; }
.weekly .how { grid-column: 2; font-size: 12px; color: var(--muted); }
.weekly li.done .lb { color: var(--muted); text-decoration: line-through; }
.weekly li.done .how { display: none; }

/* メインタブが6つあるので、狭い画面では詰めずに横スクロールにする */
@media (max-width: 700px) {
  #maintabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #maintabs::-webkit-scrollbar { display: none; }
  #maintabs .tab { flex: 0 0 auto; padding: 11px 9px; font-size: 13px; white-space: nowrap; }
}

.hotctl { margin: 6px 0 8px; align-items: center; }
.hotctl .seg { margin-bottom: 0; }

td.edge .good { color: var(--accent); font-weight: 600; }
td.edge .bad { color: var(--neg); }

#jv-log { max-height: 160px; overflow: auto; font-size: 11px; }

.ag4 { color: var(--muted); font-size: 11px; }

/* 馬別ページの過去成績：行を押すとレース結果。レース結果は馬別ページより手前に出す */
#hm-runs tr.racerow { cursor: pointer; }
#hm-runs tr.racerow:hover td { background: rgba(34, 197, 94, .08); }
#race-modal { z-index: 60; }

/* ===================== 予想タブ：一覧とレース画面 ===================== */
.rgroup { margin-bottom: 12px; }
.rghead { font-size: 13px; color: var(--muted); margin: 6px 0 6px; }
.rghead b { color: var(--fg); font-size: 14px; margin-right: 6px; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.rgrid .race { align-items: stretch; padding: 8px 8px 8px 0; }
.rgrid .rno { flex: 0 0 44px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent); }
.rgrid .rbody { flex: 1; min-width: 0; }
.rgrid .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rgrid .nm .gr { color: var(--accent); margin-right: 2px; }
.rgrid .del { align-self: center; }
.fcbar {
  position: sticky; top: calc(var(--topbar-h, 44px) + var(--maintabs-h, 44px)); z-index: 18;
  display: flex; align-items: center; gap: 8px; padding: 6px 0; margin: 0 0 8px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.fcbar-title { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcbar-title .d { color: var(--muted); font-weight: 600; font-size: 12px; margin-right: 4px; }
.fcbar-nav { display: flex; gap: 4px; }
.fcbar button:disabled { opacity: .35; cursor: default; }
#fc-tabs { top: calc(var(--topbar-h, 44px) + var(--maintabs-h, 44px) + var(--fcbar-h, 0px)); }
.fcopts { margin: 6px 0 8px; }
.fcopts > summary { font-size: 13px; }
.fcopts > summary .hint { margin: 0 0 0 6px; }
@media (max-width: 700px) {
  .rgrid { grid-template-columns: 1fr; }
  .fcbar-title .n { display: block; font-size: 13px; }
}

/* 一覧：日付で切り替え、競馬場ごとに列（3場×12R が1画面に入るように詰める） */
.rdays { margin-bottom: 8px; }
.rdays button .cnt { font-size: 10px; opacity: .7; margin-left: 4px; }
.rtracksel { margin-bottom: 8px; }
.rtracks { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 10px; }
.rtrack { min-width: 0; }
.rthead { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 6px; }
.rthead b { font-size: 15px; }
.rthead .hint { margin: 0; }
.rtrack .rrow { padding: 4px 6px 4px 0; margin-bottom: 4px; }
.rtrack .rrow .rno { flex: 0 0 38px; font-size: 13px; }
.rtrack .rrow .nm { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtrack .rrow .meta { font-size: 11px; margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtrack .rrow .del { padding: 4px 6px; font-size: 12px; }
@media (max-width: 700px) {
  .rtracks { grid-template-columns: 1fr; }
}
.rtrack .rrow .rbody { flex: 1; min-width: 0; }

/* ===================== 実践予想 ===================== */
.verdict { padding: 10px 12px; border-radius: 8px; font-size: 15px; margin: 6px 0 10px; border: 1px solid var(--line); }
.verdict.go { background: rgba(34, 197, 94, .12); border-color: var(--accent); }
.verdict.skip { background: rgba(128, 128, 128, .12); }
.verdict.wait { background: rgba(250, 204, 21, .10); }
.ev.good { color: var(--accent); font-weight: 700; }
.ev.ok { color: var(--accent); }
.ev.bad { color: var(--neg); }
#pr-horses tr.pick td { background: rgba(34, 197, 94, .08); }
.prbets { margin: 6px 0; padding-left: 18px; }
.prbets li { margin-bottom: 6px; }
.biasline { margin-bottom: 6px; }
/* 近走の色：薄い（データ判定）／濃い（メモ） */
.run.tone-plus.light { background: rgba(220, 38, 38, .05); }
.run.tone-minus.light { background: rgba(37, 99, 235, .06); }
@media (prefers-color-scheme: dark) {
  .run.tone-plus.light { background: rgba(248, 113, 113, .08); }
  .run.tone-minus.light { background: rgba(125, 171, 255, .08); }
}
.tonelegend .tp.light { background: rgba(220, 38, 38, .05); }
.tonelegend .tm.light { background: rgba(37, 99, 235, .06); }
.mark.dot { font-size: 11px; }
.dot.red { color: #dc2626; }
.dot.blue { color: #2563eb; }
.dot.light { opacity: .45; }
#pr-review tr.tone-plus td { background: rgba(220, 38, 38, .10); }
#pr-review tr.tone-minus td { background: rgba(37, 99, 235, .12); }
#pr-review tr.tone-plus.light td { background: rgba(220, 38, 38, .04); }
#pr-review tr.tone-minus.light td { background: rgba(37, 99, 235, .05); }

/* 実践予想：軸候補の券種別表 */
.axbox { margin: 8px 0 12px; }
.axtable { font-size: 12px; }
.axtable td, .axtable th { white-space: nowrap; }

/* 濃い色（メモで確かめたもの）は、薄い色（データの判定）とはっきり分ける：色を濃くして左に線を引く */
.run.tone-minus:not(.light) { background: rgba(37, 99, 235, .24); box-shadow: inset 3px 0 0 #2563eb; }
.run.tone-plus:not(.light) { background: rgba(220, 38, 38, .18); box-shadow: inset 3px 0 0 #dc2626; }
#hm-runs tr.tone-minus td { background: rgba(37, 99, 235, .24); }
#hm-runs tr.tone-plus td { background: rgba(220, 38, 38, .18); }
#hm-runs tr.tone-minus td:first-child { box-shadow: inset 3px 0 0 #2563eb; }
#hm-runs tr.tone-plus td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
#pr-review tr.tone-minus:not(.light) td { background: rgba(37, 99, 235, .24); }
#pr-review tr.tone-plus:not(.light) td { background: rgba(220, 38, 38, .18); }
.tonelegend .tm:not(.light) { background: rgba(37, 99, 235, .3); box-shadow: inset 3px 0 0 #2563eb; }
.tonelegend .tp:not(.light) { background: rgba(220, 38, 38, .22); box-shadow: inset 3px 0 0 #dc2626; }
@media (prefers-color-scheme: dark) {
  .run.tone-minus:not(.light) { background: rgba(125, 171, 255, .32); box-shadow: inset 3px 0 0 #7dabff; }
  .run.tone-plus:not(.light) { background: rgba(248, 113, 113, .26); box-shadow: inset 3px 0 0 #f87171; }
  #hm-runs tr.tone-minus td { background: rgba(125, 171, 255, .32); }
  #hm-runs tr.tone-plus td { background: rgba(248, 113, 113, .26); }
  #hm-runs tr.tone-minus td:first-child { box-shadow: inset 3px 0 0 #7dabff; }
  #hm-runs tr.tone-plus td:first-child { box-shadow: inset 3px 0 0 #f87171; }
  #pr-review tr.tone-minus:not(.light) td { background: rgba(125, 171, 255, .32); }
  #pr-review tr.tone-plus:not(.light) td { background: rgba(248, 113, 113, .26); }
  .tonelegend .tm:not(.light) { background: rgba(125, 171, 255, .36); box-shadow: inset 3px 0 0 #7dabff; }
  .tonelegend .tp:not(.light) { background: rgba(248, 113, 113, .3); box-shadow: inset 3px 0 0 #f87171; }
}

/* 濃い色はもっとはっきり（特にダークモード）。青は濃い青の地に明るい青の線、赤も同様 */
.run.tone-minus:not(.light) { background: rgba(37, 99, 235, .3); box-shadow: inset 4px 0 0 #1d4ed8; }
.run.tone-plus:not(.light) { background: rgba(220, 38, 38, .24); box-shadow: inset 4px 0 0 #b91c1c; }
@media (prefers-color-scheme: dark) {
  .run.tone-minus:not(.light) { background: rgba(37, 99, 235, .55); box-shadow: inset 4px 0 0 #93c5fd; }
  .run.tone-plus:not(.light) { background: rgba(220, 38, 38, .5); box-shadow: inset 4px 0 0 #fca5a5; }
  #hm-runs tr.tone-minus td { background: rgba(37, 99, 235, .55); }
  #hm-runs tr.tone-plus td { background: rgba(220, 38, 38, .5); }
  #hm-runs tr.tone-minus td:first-child { box-shadow: inset 4px 0 0 #93c5fd; }
  #hm-runs tr.tone-plus td:first-child { box-shadow: inset 4px 0 0 #fca5a5; }
  #pr-review tr.tone-minus:not(.light) td { background: rgba(37, 99, 235, .55); }
  #pr-review tr.tone-plus:not(.light) td { background: rgba(220, 38, 38, .5); }
  .tonelegend .tm:not(.light) { background: rgba(37, 99, 235, .6); box-shadow: inset 4px 0 0 #93c5fd; }
  .tonelegend .tp:not(.light) { background: rgba(220, 38, 38, .55); box-shadow: inset 4px 0 0 #fca5a5; }
  .run.tone-minus.light { background: rgba(125, 171, 255, .14); }
  .run.tone-plus.light { background: rgba(248, 113, 113, .14); }
}

/* 実践予想2 */
.p2memo { font-size: 12px; white-space: normal; max-width: 420px; padding: 2px 6px; border-radius: 4px; margin: 2px 0; }
.p2memo.tone-plus { background: rgba(220, 38, 38, .18); box-shadow: inset 3px 0 0 #dc2626; }
.p2memo.tone-minus { background: rgba(37, 99, 235, .22); box-shadow: inset 3px 0 0 #2563eb; }
@media (prefers-color-scheme: dark) {
  .p2memo.tone-plus { background: rgba(220, 38, 38, .4); box-shadow: inset 3px 0 0 #fca5a5; }
  .p2memo.tone-minus { background: rgba(37, 99, 235, .45); box-shadow: inset 3px 0 0 #93c5fd; }
}

/* スコア・指数の上位3頭 */
.rk { font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.rk1 { background: rgba(250, 204, 21, .35); color: #7a5b00; }
.rk2 { background: rgba(148, 163, 184, .35); color: #334155; }
.rk3 { background: rgba(217, 119, 6, .28); color: #7c3a00; }
@media (prefers-color-scheme: dark) {
  .rk1 { background: rgba(250, 204, 21, .3); color: #fde68a; }
  .rk2 { background: rgba(148, 163, 184, .3); color: #e2e8f0; }
  .rk3 { background: rgba(217, 119, 6, .32); color: #fdba74; }
}

/* レース結果のメモ列 */
#hm-runs td.memo, #hm-runs th.memo, #rm-table td.memo, #rm-table th.memo { text-align: left; min-width: 300px; max-width: 420px; white-space: normal; }
.rmmemo { font-size: 12px; line-height: 1.5; }
#rm-table tr.tone-plus td { background: rgba(220, 38, 38, .18); }
#rm-table tr.tone-minus td { background: rgba(37, 99, 235, .22); }
@media (prefers-color-scheme: dark) {
  #rm-table tr.tone-plus td { background: rgba(220, 38, 38, .35); }
  #rm-table tr.tone-minus td { background: rgba(37, 99, 235, .4); }
}

/* 枠番の色（JRAの枠色） */
.wk { display: inline-block; min-width: 1.6em; padding: 0 4px; border-radius: 4px; text-align: center; font-weight: 700; line-height: 1.5; }
.wk.w1 { background: #fff; color: #111; border: 1px solid #999; }
.wk.w2 { background: #222; color: #fff; border: 1px solid #666; }
.wk.w3 { background: #d43b3b; color: #fff; }
.wk.w4 { background: #2f6fd0; color: #fff; }
.wk.w5 { background: #f2d33c; color: #111; }
.wk.w6 { background: #2e9e4f; color: #fff; }
.wk.w7 { background: #ef8a2c; color: #fff; }
.wk.w8 { background: #f28ab8; color: #111; }

.umperm { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }

/* 予想タブのコース傾向：6つの表を横に並べ、表の中で横スクロールしないよう詰める */
#fc-trend { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px 14px; align-items: start; }
#fc-trend .trbox h4.sub { margin: 0 0 4px; }
#fc-trend table { font-size: 12px; }
#fc-trend th, #fc-trend td { padding: 4px 6px; }
#fc-trend th.k, #fc-trend td.k { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  #fc-trend { grid-template-columns: 1fr; }
  #fc-trend th, #fc-trend td { padding: 4px 5px; font-size: 11px; }
}

/* 開催傾向：型の偏り（米国 ― 日本 ― 欧州） */
.tb-wrap { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 10px; }
.tb-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tb-label { font-size: 12px; color: var(--muted); min-width: 28px; }
.typebar { position: relative; width: 220px; height: 30px; flex: none; }
.typebar .tb-line { position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--line); }
.typebar .tb-line::before, .typebar .tb-line::after, .typebar .tb-l.l50::before { content: ''; position: absolute; top: -3px; width: 2px; height: 8px; background: var(--line); }
.typebar .tb-line::before { left: 0; } .typebar .tb-line::after { right: 0; }
.typebar .tb-l { position: absolute; top: 14px; font-size: 11px; color: var(--muted); }
.typebar .tb-l.l0 { left: 0; } .typebar .tb-l.l50 { left: 50%; transform: translateX(-50%); } .typebar .tb-l.l100 { right: 0; }
.typebar .tb-l.l50::before { left: 50%; top: -5px; height: 8px; }
.typebar .tb-mark { position: absolute; top: -8px; transform: translateX(-50%); color: var(--accent); font-style: normal; font-size: 14px; line-height: 1; }
.tb-note { font-size: 12px; color: var(--muted); }
.tb-note b { color: var(--text); }
@media (max-width: 560px) { .typebar { width: 180px; } .tb-note { flex-basis: 100%; padding-left: 38px; } }

/* スマホ：予想ページの見た目を詰める（血統タブなど） */
@media (max-width: 560px) {
  #fc-tabs { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; scrollbar-width: none; }
  #fc-tabs::-webkit-scrollbar { display: none; }
  #fc-tabs .tab { flex: none; font-size: 13px; padding: 9px 10px; }
  #fc-cards { grid-template-columns: 1fr 1fr; }
  #fc-cards .card:nth-child(3) { display: none; }   /* 条件は上の「条件を変える」に出ているので重ねない */
  #fc-cards .card .v { font-size: 16px; }
  #fcsec-blood th, #fcsec-blood td { padding: 6px 4px; font-size: 11px; }
  #fcsec-blood h4.sub { margin-top: 12px; }
  #fcsec-blood .legend { font-size: 11px; }
}

/* レース一覧の日付ボタン：折り返しても縦横に区切り線が出るようにする */
.seg.rdays { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: var(--line); }
.seg.rdays button { border: 0; margin: 0; }

/* スマホ（〜700px）：2列に並べている表やカードは全部1列に。横に切れないよう1項目ずつ縦に読む */
@media (max-width: 700px) {
  .grid2, .mt-body, #fc-trend, .pedbox { grid-template-columns: 1fr !important; }
  .proflist { grid-template-columns: 1fr 1fr; }
}

/* 固定列（馬名など）を最前面に。近走の 📝 やメモ本文が透けて重ならないように */
th.k, td.k { z-index: 3; }
.run .pen { z-index: 1; }
/* 色付きの行では、固定列の背景を不透明にする（横スクロールした中身が透けないように） */
#rm-table tr.tone-plus td.k, #hm-runs tr.tone-plus td.k, #pr-review tr.tone-plus:not(.light) td.k { background: color-mix(in srgb, var(--card) 76%, #dc2626) !important; }
#rm-table tr.tone-minus td.k, #hm-runs tr.tone-minus td.k, #pr-review tr.tone-minus:not(.light) td.k { background: color-mix(in srgb, var(--card) 72%, #2563eb) !important; }
#hm-runs tr.tone-neutral td.k { background: color-mix(in srgb, var(--card) 90%, #808080) !important; }
#pr-review tr.tone-plus.light td.k { background: color-mix(in srgb, var(--card) 94%, #dc2626) !important; }
#pr-review tr.tone-minus.light td.k { background: color-mix(in srgb, var(--card) 93%, #2563eb) !important; }

/* スマホの出馬表：馬番＋縦書きの馬名を左端に固定（netkeiba 風） */
th.k.hn, td.k.hn { width: 38px; min-width: 38px; max-width: 38px; padding: 4px 3px; text-align: center; vertical-align: top; }
.hn-v .wk { font-size: 11px; min-width: 1.5em; }
.hn-v a.horselink.v { writing-mode: vertical-rl; text-orientation: mixed; font-size: 12px; line-height: 1.1; letter-spacing: 1px;
  max-height: 132px; overflow: hidden; border-bottom: 0; border-left: 1px dotted var(--muted); padding-left: 1px; }
.hn-v .hn-m { writing-mode: vertical-rl; font-size: 11px; line-height: 1; }
.hn-v .hn-m .mark { margin: 0; }
@media (max-width: 700px) {
  #fc-horses .run { min-width: 150px; max-width: 165px; }
  #fc-horses td.runcol { padding: 5px 5px; }
  #fc-horses .marksel { padding: 4px 0; }
}

/* ポップアップの閉じるボタン：指で押せる大きさに。画面の上端（時計や切り欠き）にかからないよう少し下げる */
.hm-close { font-size: 26px; line-height: 1; padding: 6px 10px; min-width: 44px; min-height: 44px; margin: -6px -6px -6px 0; border-radius: 8px; }
.hm-close:hover, .hm-close:active { background: rgba(128, 128, 128, .18); color: var(--text); }
.modal { padding-top: calc(env(safe-area-inset-top, 0px) + 20px); }
.modal-foot { display: none; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--bg); text-align: center; }
.modal-foot button { width: 100%; padding: 12px; font-size: 15px; }
@media (max-width: 700px) {
  .modal { padding: calc(env(safe-area-inset-top, 0px) + 28px) 6px 6px; }
  .modal-box { max-height: calc(100vh - env(safe-area-inset-top, 0px) - 34px); }
  .modal-foot { display: block; }
}

/* スマホの出馬表：左端では横書き、横にスクロールしたら縦書きの細い列に */
td.k.hn .hn-v { display: none; }
td.k.hn { width: auto; min-width: 130px; text-align: left; vertical-align: top; padding: 8px 8px; }
td.k.hn .hn-h { white-space: nowrap; min-width: 114px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.tablewrap.xscrolled th.k.hn, .tablewrap.xscrolled td.k.hn { width: 38px; min-width: 38px; max-width: 38px; padding: 4px 3px; text-align: center; vertical-align: top; }
.tablewrap.xscrolled td.k.hn .hn-h { display: none; }
.tablewrap.xscrolled td.k.hn .hn-v { display: flex; flex-direction: column; align-items: center; gap: 5px; }