:root{
      --bg:#0b0f14;
      --panel:#111826;
      --panel2:#0f1722;
      --line:#223044;
      --text:#eaf0ff;
      --muted:#a9b6cc;

      --accent:#3b82f6;
      --accent2:#22c55e;

      --sel:#1f2a3f;

      --w1:#ffffff; /* 枠色 */
      --w2:#111111;
      --w3:#e53e3e;
      --w4:#3b82f6;
      --w5:#f4d03f;
      --w6:#22c55e;
      --w7:#f28c28;
      --w8:#f08bd8;
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", sans-serif;
      background:linear-gradient(180deg, #070a0f, var(--bg));
      color:var(--text);
    }

    .wrap{
      max-width:760px;
      margin:0 auto;
      padding:12px 10px 18px;
    }

    .bar-title{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:8px;
    }

    .pill{
      border:1px solid var(--line);
      background:rgba(255,255,255,0.03);
      color:var(--text);
      padding:10px 12px;
      border-radius:14px;
      font-size:16px;
      line-height:1;
      cursor:pointer;
      user-select:none;
      transition:transform .05s ease, background .15s ease, border-color .15s ease;
      white-space:nowrap;
    }
    .pill:active{ transform:scale(.98); }
    .pill.active{
      background:rgba(59,130,246,0.20);
      border-color:rgba(59,130,246,0.55);
    }

    .race-grid{
      display:grid;
      grid-template-columns: repeat(6, 1fr);
      gap:8px;
      margin:6px 0 10px;
    }
    @media (max-width:420px){
      .race-grid{ grid-template-columns: repeat(4, 1fr); }
    }

    .headline{
      border:1px solid var(--line);
      background:rgba(255,255,255,0.03);
      border-radius:14px;
      padding:10px 12px;
      margin:8px 0 10px;
    }
    .headline .big{
      font-size:15px;
      font-weight:700;
      margin-bottom:4px;
    }
    .headline .small{
      font-size:12px;
      color:var(--muted);
    }

    .list{
      border:1px solid var(--line);
      border-radius:14px;
      overflow:hidden;
      background:rgba(255,255,255,0.02);
    }

    .list-head, .row{
      display:grid;
      grid-template-columns: 48px 1fr 52px 74px;
      gap:8px;
      align-items:center;
      padding:10px 10px;
    }

    .list-head{
      background:rgba(255,255,255,0.04);
      border-bottom:1px solid var(--line);
      font-size:12px;
      color:var(--muted);
    }
    .list-head div{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    .row{
      border-bottom:1px solid rgba(34,48,68,0.55);
      cursor:pointer;
      user-select:none;
      font-size:16px;
    }
    .row:last-child{ border-bottom:none; }
    .row:active{ background:rgba(255,255,255,0.04); }
    .row.selected{
      background:rgba(59,130,246,0.14);
      outline:1px solid rgba(59,130,246,0.35);
      outline-offset:-1px;
    }

    .waku-umaban{
      display:flex;
      flex-direction:column;
      gap:6px;
      align-items:flex-start;
      justify-content:center;
      min-width:0;
    }
    .waku{
      width:40px;
      height:22px;
      border-radius:7px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      font-size:13px;
      line-height:1;
      border:1px solid rgba(255,255,255,0.25);
    }
    .umaban{
      width:40px;
      height:22px;
      border-radius:7px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      font-size:13px;
      line-height:1;
      background:rgba(255,255,255,0.05);
      border:1px solid rgba(255,255,255,0.10);
    }

    .horse{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .horse .name{
      font-weight:800;
      font-size:17px;
      line-height:1.15;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:100%;
    }
    .horse .sub{
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .kg{
      text-align:center;
      font-weight:800;
      font-size:16px;
      white-space:nowrap;
    }
    .jockey{
      text-align:center;
      font-weight:800;
      font-size:16px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .modal-backdrop{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.55);
      display:none;
      z-index:50;
      padding:10px;
    }
    .modal-backdrop.show{ display:flex; }

    .modal{
      margin:auto;
      width:min(760px, 100%);
      max-height:92vh;
      border-radius:16px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,0.12);
      background:linear-gradient(180deg, rgba(17,24,38,0.98), rgba(12,18,28,0.98));
      box-shadow:0 12px 40px rgba(0,0,0,0.45);
      display:flex;
      flex-direction:column;
    }

    .modal-top{
      position:sticky;
      top:0;
      z-index:2;
      background:rgba(12,18,28,0.96);
      border-bottom:1px solid rgba(34,48,68,0.75);
      padding:10px 10px 8px;
    }

    .modal-topline{
      display:grid;
      grid-template-columns: 74px 1fr;
      gap:10px;
      align-items:center;
    }

    .badge{
      display:flex;
      gap:6px;
      align-items:center;
      justify-content:flex-start;
      min-width:0;
    }
    .badge .waku-mini{
      width:34px; height:24px; border-radius:8px;
      display:flex; align-items:center; justify-content:center;
      font-weight:900; font-size:13px; border:1px solid rgba(255,255,255,0.22);
    }
    .badge .uma-mini{
      width:34px; height:24px; border-radius:8px;
      display:flex; align-items:center; justify-content:center;
      font-weight:900; font-size:13px;
      background:rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.12);
    }

    .navbtns{
      display:flex;
      gap:8px;
      justify-content:flex-end;
      flex-wrap:nowrap;
    }
    .btn{
      border:1px solid rgba(34,48,68,0.9);
      background:rgba(255,255,255,0.04);
      color:var(--text);
      padding:10px 10px;
      border-radius:12px;
      font-size:14px;
      font-weight:800;
      line-height:1;
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
    }
    .btn:active{ transform:scale(.99); }
    .btn.primary{
      background:rgba(59,130,246,0.18);
      border-color:rgba(59,130,246,0.55);
    }

    .modal-title{
      margin-top:8px;
      display:grid;
      grid-template-columns: 1fr;
      gap:6px;
    }

    .modal-horse-name{
      font-size:18px;
      font-weight:900;
      line-height:1.2;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .modal-line2{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }

    .modal-body{
      overflow:auto;
      -webkit-overflow-scrolling:touch;
      padding:10px;
    }

    .card{
      border:1px solid rgba(34,48,68,0.75);
      background:rgba(255,255,255,0.03);
      border-radius:14px;
      padding:10px;
      margin-bottom:10px;
    }

    .card h3{
      margin:0 0 8px;
      font-size:13px;
      color:var(--muted);
      font-weight:900;
      letter-spacing:.02em;
    }

    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:8px;
    }
    .kv{
      border:1px solid rgba(255,255,255,0.06);
      background:rgba(0,0,0,0.12);
      border-radius:12px;
      padding:10px 10px;
      min-width:0;
    }
    .kv .k{
      font-size:11px;
      color:var(--muted);
      font-weight:800;
      margin-bottom:4px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .kv .v{
      font-size:16px;
      font-weight:900;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .tabbar{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin:10px 0 10px;
    }

    .tab{
      flex:1 1 auto;
      text-align:center;
      padding:10px 8px;
      border-radius:12px;
      border:1px solid rgba(34,48,68,0.9);
      background:rgba(255,255,255,0.04);
      font-weight:900;
      font-size:14px;
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
    }
    .tab.active{
      background:rgba(34,197,94,0.18);
      border-color:rgba(34,197,94,0.55);
    }

    .race-detail{
      display:none;
    }
    .race-detail.show{
      display:block;
      animation:fadein .12s ease-out;
    }
    @keyframes fadein{
      from{ opacity:.35; transform:translateY(2px); }
      to{ opacity:1; transform:translateY(0); }
    }

    .line-row{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
      margin:6px 0;
      font-size:14px;
      font-weight:800;
      color:var(--text);
    }
    .line-row span{
      color:var(--muted);
      font-weight:800;
      font-size:12px;
    }

    .markline{
      font-size:14px;
      font-weight:900;
      color:var(--text);
      margin-top:6px;
    }
    .markline span{
      color:var(--muted);
      font-weight:900;
      margin-right:6px;
    }

    .hidden{ display:none !important; }

/* ===== 文字サイズ（小/中/大） ===== */
:root{
  --base-sm: 14px;
  --base-md: 16px;
  --base-lg: 18px;
  --base: var(--base-md);
}
html[data-font="sm"]{ --base: var(--base-sm); }
html[data-font="md"]{ --base: var(--base-md); }
html[data-font="lg"]{ --base: var(--base-lg); }

body{ font-size: var(--base); }

/* ===== テーマ（昼/夜） =====
   既存のデザイン（夜系）をデフォルトとして保持し、昼テーマだけ色を上書きします。
*/
html[data-theme="day"]{
  --bg:#f6f8ff;
  --panel:#ffffff;
  --panel2:#eef3ff;
  --text:#121726;
  --muted:#44506c;
  --line: rgba(18,23,38,.12);
  --accent:#246cff;
  --accent2:#00a89c;
}

/* ===== 上部（競馬場の選択行 + 設定ボタン） ===== */
.top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.top-row .bar-title{ margin-bottom:0; }

/* ===== ボタンUI（index_new.html/css の雰囲気を踏襲） ===== */
.prefs{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.seg{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.04);
}
html[data-theme="day"] .seg{ background: rgba(18,23,38,.03); }

.seg button{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--text);
  padding:7px 10px;
  font-size:.85rem;
  cursor:pointer;
  line-height:1;
}
.seg button:hover{ filter:brightness(1.06); }
.seg button[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(122,162,255,.20), rgba(122,162,255,.06));
}
html[data-theme="day"] .seg button[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(36,108,255,.18), rgba(36,108,255,.06));
}

/* スマホ時は右側ボタンを詰める */
@media (max-width: 520px){
  .prefs{ width:100%; justify-content:flex-end; }
}

/* ===== 改良版：文字サイズ（控えめに変化） =====
   既存CSSはpx指定が多いので、主要テキスト要素をスケールして控えめに変化させます。
*/
:root{ --font-scale: 1; }
html[data-font="sm"]{ --font-scale: .93; }
html[data-font="md"]{ --font-scale: 1; }
html[data-font="lg"]{ --font-scale: 1.08; }

body{ font-size: calc(16px * var(--font-scale)) !important; }
.pill{ font-size: calc(16px * var(--font-scale)) !important; }
.headline .big{ font-size: calc(15px * var(--font-scale)) !important; }
.headline .small{ font-size: calc(12px * var(--font-scale)) !important; }
.list-head{ font-size: calc(12px * var(--font-scale)) !important; }
.row{ font-size: calc(16px * var(--font-scale)) !important; }
.waku, .umaban, .badge .waku-mini, .badge .uma-mini, .modal-line2, .card h3{
  font-size: calc(13px * var(--font-scale)) !important;
}
.horse .name{ font-size: calc(17px * var(--font-scale)) !important; }
.horse .sub, .line-row span{ font-size: calc(12px * var(--font-scale)) !important; }
.kg, .jockey, .kv .v{ font-size: calc(16px * var(--font-scale)) !important; }
.btn, .tab, .line-row, .markline{ font-size: calc(14px * var(--font-scale)) !important; }
.modal-horse-name{ font-size: calc(18px * var(--font-scale)) !important; }
.kv .k{ font-size: calc(11px * var(--font-scale)) !important; }

/* 設定ボタンは全体の文字サイズに追従（rem→em） */
.seg button{ font-size: .85em !important; }

/* ===== 改良版：テーマ（昼=白基調 / 夜=黒基調） =====
   既存（夜）をデフォルト、昼だけ変数を上書きして全体に反映します。
*/
html[data-theme="day"]{
  --bg:#f7f9ff;
  --panel:#ffffff;
  --panel2:#eef3ff;
  --line:#cfd8ea;
  --text:#111827;
  --muted:#44506c;

  --accent:#2563eb;
  --accent2:#16a34a;

  --sel:#e8eefc;

  /* 枠色(馬番)も見やすいように */
  --w1:#111111;
}

/* 設定ボタン：昼は白地で見えるように */
.prefs .seg{
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}
html[data-theme="day"] .prefs .seg{
  background: color-mix(in srgb, var(--panel2) 92%, transparent);
}
.prefs .seg button{
  color: var(--text);
}
.prefs .seg button[aria-pressed="true"]{
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
html[data-theme="night"] .prefs .seg button[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(122,162,255,.22), rgba(122,162,255,.06));
}

/* ===== 昼テーマ配色（参考: index_new.css の Day palette） ===== */
html[data-theme="day"]{
  --bg:#f6f8ff;
  --panel:#ffffff;
  --panel2:#eef3ff;
  --line: rgba(18,23,38,.10);
  --text:#121726;
  --muted:#44506c;
  --accent:#246cff;
  --accent2:#00a89c;
  --sel: rgba(36,108,255,.10);

  /* 馬番枠（白の上で見えるように） */
  --w1:#111111;
}

/* 背景グラデ：昼は白基調に */
html[data-theme="day"] body{
  background: linear-gradient(180deg, #ffffff, var(--bg)) !important;
  color: var(--text) !important;
}

/* カード/ボタン類：昼は “薄い影＋薄い境界” で見えるように */
html[data-theme="day"] .btn,
html[data-theme="day"] .pill,
html[data-theme="day"] .tab .tab,
html[data-theme="day"] .card .card{
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--panel2) 72%, transparent) !important;
  color: var(--text) !important;
}

html[data-theme="day"] .pill:hover,
html[data-theme="day"] .btn:hover,
html[data-theme="day"] .tab .tab:hover{
  background: color-mix(in srgb, var(--panel2) 86%, transparent) !important;
}

/* アクティブ状態（選択中） */
html[data-theme="day"] .pill.active,
html[data-theme="day"] .btn.active,
html[data-theme="day"] .tab .tab.active,
html[data-theme="day"] .tab .tab[aria-selected="true"]{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line)) !important;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel)) !important;
}

/* 見出し/区切り線など */
html[data-theme="day"] .list-head,
html[data-theme="day"] .bar-title,
html[data-theme="day"] .headline{
  color: var(--text) !important;
}
html[data-theme="day"] .list-head{
  border-color: var(--line) !important;
  background: color-mix(in srgb, var(--panel2) 65%, transparent) !important;
}

/* モーダル：昼は白いダイアログに */
html[data-theme="day"] .modal .modal{
  border-color: var(--line) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,255,.98)) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.18) !important;
}
html[data-theme="day"] .modal .modal *{
  color: var(--text);
}

/* ===== 修正：昼テーマで枠1が真っ黒になる問題 + モーダルが黒い問題 ===== */
html[data-theme="day"]{
  /* 枠1は白（文字はJSで黒になる仕様） */
  --w1:#ffffff !important;
}

/* モーダル：昼は白いカードに（上部バーも白） */
html[data-theme="day"] .modal{
  border-color: var(--line) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,248,255,.99)) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.18) !important;
}
html[data-theme="day"] .modal-top{
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--line) !important;
}
html[data-theme="day"] .modal-title,
html[data-theme="day"] .modal-horse-name{
  color: var(--text) !important;
}
html[data-theme="day"] .modal-line2{
  color: var(--muted) !important;
}

/* ===== 微調整：モーダル内フォントの太さ ===== */
/* 上部ナビ（←前 / 後→ / 閉じる）を少し細く */
.modal-top .btn,
.modal-top button{
  font-weight: 600 !important;
}

/* 基本データ（モーダル内のKV・ライン情報）を少し細く */
.modal .kv .v,
.modal .kv .k,
.modal-line2,
.modal-body .row,
.modal-body .line-row{
  font-weight: 500 !important;
}

/* 馬名は可読性を保つため据え置き */
.modal-horse-name{
  font-weight: 700;
}

/* ===== 微調整：一覧画面の枠番1（白背景）の視認性 ===== */
/* 枠番1は背景が白のため、薄い枠線を常時表示 */
.waku{
  border: 1px solid rgba(0,0,0,0.15);
}

/* 夜テーマでは従来通り（白系の枠線） */
html[data-theme="night"] .waku{
  border: 1px solid rgba(255,255,255,0.25);
}