:root {
      color-scheme: light;
      --bg: #fff8ea;
      --panel: #ffffff;
      --surface: #ffffff;
      --line: #cfc3a9;
      --line-dark: #8fa17e;
      --text: #172018;
      --muted: #465246;
      --navy: #0f5b3f;
      --navy-dark: #073a27;
      --navy-soft: #e8f3e7;
      --red: #b2212d;
      --red-soft: #fff0f1;
      --green: #13784f;
      --green-soft: #eef7eb;
      --gold: #9a711b;
      --gold-soft: #fff3cf;
      --row: #fbf6e9;
    }
    * { box-sizing: border-box; }
    html {
      background: var(--surface);
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    body {
      margin: 0;
      background: linear-gradient(180deg, #fffdf5 0, var(--bg) 260px);
      color: var(--text);
      font-family: "Noto Sans JP", Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
      font-size: 15px;
      line-height: 1.58;
    }
    header {
      background: var(--navy);
      border-top: 4px solid var(--gold);
      border-bottom: 1px solid var(--navy-dark);
      color: #fff;
      position: sticky;
      top: 0;
      z-index: 20;
    }
    .topbar {
      max-width: 1200px;
      margin: 0 auto;
      padding: 11px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .brand-link {
      display: flex;
      align-items: center;
      gap: 12px;
      height: 58px;
      min-width: 0;
      color: inherit;
      text-decoration: none;
      overflow: visible;
    }
    .brand-link:focus-visible {
      outline: 3px solid rgba(255,255,255,.78);
      outline-offset: 4px;
    }
    .brand-image {
      display: block;
      width: auto;
      height: 58px;
      max-width: min(360px, 58vw);
      object-fit: contain;
      object-position: left center;
      transform: none;
    }
    .brand.has-logo .brand-mark,
    .brand.has-logo .brand-copy {
      display: none;
    }
    .brand-mark {
      width: 40px;
      height: 40px;
      border: 2px solid rgba(255,255,255,.86);
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: rgba(255,255,255,.08);
      font-weight: 900;
      font-size: 18px;
      letter-spacing: 0;
      box-shadow: inset 0 -3px 0 rgba(0,0,0,.16);
      flex: 0 0 auto;
    }
    .brand-copy {
      min-width: 0;
    }
    h1 {
      margin: 0;
      font-size: 21px;
      letter-spacing: 0;
      font-weight: 800;
    }
    .header-sub, .status, .muted {
      color: var(--muted);
      font-size: 13px;
    }
    .header-sub {
      color: #d8ead8;
      font-size: 12px;
      margin-top: 1px;
    }
    .status {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      color: #dbe5ef;
    }
    .status span {
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.08);
      padding: 4px 8px;
    }
    .status strong { color: #fff; }
    .status strong.is-delayed { color: #ffd36a; }
    main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 14px 16px 18px;
      display: grid;
      grid-template-columns: 310px minmax(0, 1fr);
      gap: 14px;
    }
    #performancePanel {
      grid-column: 1 / -1;
    }
    .panel {
      background: transparent;
      border: 0;
      border-radius: 0;
      overflow: visible;
      box-shadow: none;
    }
    .ad-slot {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 3px;
      overflow: hidden;
      box-shadow: 0 2px 0 rgba(15, 91, 63, .06);
    }
    .panel-title {
      padding: 9px 12px;
      border: 2px solid var(--gold);
      margin-bottom: 8px;
      background: var(--surface);
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      position: relative;
    }
    .panel-title::before {
      content: "";
      width: 4px;
      height: 18px;
      background: var(--navy);
      border-radius: 1px;
      flex: 0 0 auto;
      box-shadow: 6px 0 0 var(--gold);
    }
    .panel-title > span:first-child {
      margin-right: auto;
    }
    .race-nav {
      position: sticky;
      top: 72px;
      align-self: start;
      max-height: calc(100vh - 90px);
      overflow: auto;
    }
    .date-tabs,
    .venue-tabs {
      display: flex;
      gap: 6px;
      padding: 9px;
      border-bottom: 1px solid var(--line);
      background: var(--surface);
      overflow-x: auto;
    }
    .date-tabs {
      border: 2px solid var(--gold);
      margin: 0 0 8px;
    }
    .venue-tabs {
      border: 2px solid var(--navy);
      margin: 0 0 8px;
    }
    .race-nav .panel-title {
      border-color: var(--navy);
      margin-bottom: 0;
      border-bottom: 0;
    }
    .race-nav > summary.panel-title {
      list-style: none;
      cursor: pointer;
    }
    .race-nav > summary.panel-title::-webkit-details-marker {
      display: none;
    }
    .race-nav > summary.panel-title::after {
      content: "閉じる ▴";
      margin-left: auto;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }
    .race-nav:not([open]) > summary.panel-title {
      border-bottom: 2px solid var(--navy);
      margin-bottom: 0;
    }
    .race-nav:not([open]) > summary.panel-title::after {
      content: "レースを選ぶ ▾";
    }
    .race-nav .date-tabs,
    .race-nav .venue-tabs {
      border-color: var(--navy);
      margin: 0;
      border-top: 0;
      border-bottom: 0;
    }
    .race-nav .race-list {
      border-top: 0;
    }
    button {
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      border: 1px solid var(--line-dark);
      background: var(--surface);
      color: var(--text);
      border-radius: 3px;
      padding: 6px 9px;
    }
    button:hover { border-color: var(--navy); background: #f7fbf3; }
    button.active {
      background: var(--navy);
      border-color: var(--navy);
      color: #fff;
    }
    .race-list {
      display: grid;
      gap: 0;
      padding: 0;
      border: 2px solid var(--navy);
      background: var(--surface);
    }
    .race-button {
      text-align: left;
      display: grid;
      gap: 4px;
      width: 100%;
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      padding: 9px 10px;
    }
    .race-button.active {
      border-left: 4px solid var(--gold);
      background: #fffdf4;
      color: var(--text);
      padding-left: 6px;
    }
    .race-main {
      display: flex;
      gap: 8px;
      align-items: baseline;
      flex-wrap: wrap;
    }
    .race-no {
      color: var(--navy-dark);
      font-size: 15px;
      font-weight: 800;
      min-width: 34px;
    }
    .race-name {
      font-size: 15.5px;
      font-weight: 800;
      overflow-wrap: anywhere;
    }
    .race-meta {
      color: var(--muted);
      font-size: 13px;
      padding-left: 0;
    }
    .content {
      display: grid;
      gap: 16px;
      min-width: 0;
    }
    .ad-slot {
      padding: 12px;
      text-align: center;
      color: var(--muted);
      font-size: 13px;
      background: var(--surface);
      border-style: dashed;
    }
    .performance {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      border: 2px solid var(--navy);
      margin: 0;
      background: var(--surface);
    }
    .performance-shell > summary {
      list-style: none;
      padding: 10px 12px;
      border: 2px solid var(--gold);
      margin: 0 0 8px;
      cursor: pointer;
      font-weight: 800;
      background: var(--surface);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }
    .performance-shell > summary::after,
    details.bet-stats > summary::after,
    details.bet-period > summary::after,
    details.rank-stats > summary::after,
    details.period-stats > summary::after,
    details.period-detail > summary::after {
      content: "開く ▾";
      margin-left: auto;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }
    .performance-shell[open] > summary::after,
    details.bet-stats[open] > summary::after,
    details.bet-period[open] > summary::after,
    details.rank-stats[open] > summary::after,
    details.period-stats[open] > summary::after,
    details.period-detail[open] > summary::after {
      content: "閉じる ▴";
    }
    .performance-shell > summary::-webkit-details-marker { display: none; }
    .performance-top {
      display: grid;
      grid-template-columns: repeat(2, minmax(220px, 1fr));
      gap: 0;
      align-items: start;
      border-bottom: 1px solid var(--line);
    }
    .wide-summary {
      background: var(--surface);
      border-right: 1px solid var(--line);
      align-self: start;
    }
    .wide-summary-head {
      padding: 10px 12px 8px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid var(--line);
      background: var(--surface);
    }
    .wide-summary-head strong {
      display: block;
      color: var(--navy-dark);
      font-size: 15px;
    }
    .wide-live-note {
      padding: 7px 12px 9px;
      color: var(--muted);
      font-size: 12px;
      background: var(--surface);
    }
    .wide-performance {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      background: var(--surface);
    }
    .wide-daily {
      padding: 0;
      min-width: 0;
      background: var(--surface);
    }
    .wide-scroll {
      max-height: 146px;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .wide-period-section {
      border-bottom: 1px solid var(--line);
    }
    .wide-period-section:last-child {
      border-bottom: 0;
    }
    .current-performance-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border-bottom: 1px solid var(--line);
      background: var(--surface);
    }
    .current-performance-grid .current-wide {
      border-right: 1px solid var(--line);
    }
    .current-performance-grid .current-wide:last-child {
      border-right: 0;
    }
    .current-wide-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      background: var(--surface);
    }
    .current-wide {
      background: var(--surface);
    }
    .current-wide-head {
      padding: 9px 12px;
      border-bottom: 1px solid var(--line);
      font-weight: 800;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      background: var(--surface);
    }
    .wide-stat {
      padding: 11px 12px;
      border-right: 1px solid var(--line);
    }
    .wide-stat:last-child { border-right: 0; }
    .wide-performance .wide-stat:nth-child(2n),
    .current-wide-row .wide-stat:nth-child(2n) { border-right: 0; }
    .wide-performance .wide-stat:nth-child(-n + 2) {
      border-bottom: 1px solid var(--line);
    }
    .current-wide-row .wide-stat:nth-child(-n + 2) {
      border-bottom: 1px solid var(--line);
    }
    .wide-stat .label {
      color: var(--muted);
      font-size: 12px;
    }
    .wide-stat .value {
      font-weight: 800;
      font-size: 19px;
      margin-top: 2px;
      color: var(--navy);
    }
    details.bet-stats > summary,
    details.bet-period > summary,
    details.rank-stats > summary,
    details.period-stats > summary,
    details.period-detail > summary {
      list-style: none;
      padding: 9px 12px;
      cursor: pointer;
      font-weight: 700;
      background: var(--surface);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    details.bet-stats > summary::-webkit-details-marker,
    details.bet-period > summary::-webkit-details-marker,
    details.rank-stats > summary::-webkit-details-marker,
    details.period-stats > summary::-webkit-details-marker,
    details.period-detail > summary::-webkit-details-marker { display: none; }
    details.bet-stats,
    details.bet-period {
      border-bottom: 1px solid var(--line);
    }
    details.bet-period:last-child {
      border-bottom: 0;
    }
    details.period-detail {
      border-bottom: 1px solid var(--line);
    }
    details.period-detail:last-child {
      border-bottom: 0;
    }
    .performance-block {
      min-width: 0;
      border-bottom: 1px solid var(--line);
      background: var(--surface);
    }
    .performance-block:last-child { border-bottom: 0; }
    .bet-performance-block {
      background: var(--surface);
    }
    .bet-performance-block .performance-top,
    .bet-performance-block .current-performance-grid {
      margin: 8px;
      border: 2px solid var(--navy);
      background: var(--surface);
    }
    .bet-performance-block .performance-top,
    .bet-performance-block .current-performance-grid {
      border-bottom-width: 2px;
    }
    .bet-performance-block .wide-summary-head,
    .bet-performance-block .current-wide-head {
      background: #edf5e8;
      color: #294332;
    }
    .bet-period > details.period-stats {
      background: var(--surface);
      border-top: 1px solid var(--line);
    }
    .bet-period > details.period-stats > summary {
      background: var(--surface);
    }
    .period-detail > summary {
      background: var(--surface);
      color: var(--text);
      font-weight: 800;
    }
    .period-detail .wide-scroll {
      padding: 8px;
      background: var(--surface);
    }
    .period-detail .wide-period-section {
      border-bottom: 0;
    }
    .period-detail .wide-period-section + .wide-period-section {
      margin-top: 8px;
    }
    .period-detail .compact-wrap {
      overflow-x: auto;
      border: 2px solid var(--navy);
      margin: 0;
    }
    .rank-mobile-list {
      display: none;
    }
    .rank-mobile-header,
    .rank-mobile-row {
      display: grid;
      grid-template-columns: 46px repeat(4, minmax(0, 1fr));
      align-items: center;
    }
    .rank-mobile-header {
      background: #edf5e8;
      color: #294332;
      border-bottom: 1px solid var(--line);
      font-size: 10px;
      font-weight: 800;
      text-align: center;
    }
    .rank-mobile-row {
      border-bottom: 1px solid var(--line);
      background: var(--surface);
    }
    .rank-mobile-row:last-child { border-bottom: 0; }
    .rank-mobile-header > span,
    .rank-mobile-row > span {
      min-width: 0;
      padding: 7px 3px;
      border-right: 1px solid var(--line);
    }
    .rank-mobile-header > span:last-child,
    .rank-mobile-row > span:last-child { border-right: 0; }
    .rank-mobile-row > span {
      text-align: center;
      color: var(--navy-dark);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.3;
    }
    .rank-mobile-count {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      white-space: nowrap;
    }
    .rank-performance-note {
      padding: 7px 10px 9px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
      background: var(--surface);
      border: 1px solid var(--line);
      border-top: 0;
    }
    .block-head {
      padding: 9px 12px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid var(--line);
      font-weight: 700;
      background: var(--surface);
    }
    .table-wrap {
      overflow-x: auto;
      border: 2px solid var(--navy);
      margin: 8px;
    }
    .compact-wrap {
      overflow: hidden;
      border: 0;
      margin: 0;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 790px;
    }
    .compact-table {
      min-width: 0;
      table-layout: fixed;
    }
    .compact-table th,
    .compact-table td {
      padding: 7px 8px;
      font-size: 13px;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    th, td {
      padding: 9px 10px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: middle;
    }
    th {
      background: #edf5e8;
      color: #294332;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
      text-align: center;
    }
    tbody tr,
    tbody tr:nth-child(even),
    tbody tr:hover {
      background: var(--surface);
    }
    td.num { text-align: right; }
    th.num { text-align: center; }
    .race-head {
      padding: 13px 14px 11px;
      border: 2px solid var(--navy);
      border-bottom: 0;
      margin-bottom: 0;
      background: var(--surface);
    }
    .race-titlebar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
    }
    .race-title-main {
      min-width: 0;
    }
    .race-head h2 {
      margin: 0;
      font-size: 20px;
      line-height: 1.35;
      color: var(--navy-dark);
    }
    .race-head .race-meta {
      padding: 0;
      margin-top: 5px;
    }
    .sortbar {
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
      border: 0;
      margin: 0;
      background: transparent;
      min-width: 360px;
    }
    .race-head + .table-wrap {
      margin: 0 0 8px;
      border-top: 0;
    }
    .sort-buttons {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .mobile-race-select {
      display: none;
      white-space: nowrap;
    }
    .wide-strip {
      padding: 12px;
      border: 2px solid var(--navy);
      margin: 0 0 8px;
      background: var(--surface);
    }
    .wide-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 8px;
      margin-top: 8px;
    }
    .wide-item {
      border: 2px solid var(--gold);
      border-radius: 2px;
      padding: 9px;
      background: var(--surface);
    }
    .wide-item.hit {
      border-color: var(--red);
      background: var(--surface);
    }
    .wide-item.lost {
      border-color: var(--line-dark);
    }
    .wide-selection {
      color: var(--red);
      font-weight: 800;
      font-size: 16px;
    }
    .wide-pair-names {
      margin-top: 2px;
    }
    .wide-pair-meta {
      margin-top: 2px;
    }
    .wide-guard-note {
      margin-top: 5px;
      color: var(--red);
      font-size: 12px;
      font-weight: 800;
    }
    .race-marks,
    .hit-marks {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      letter-spacing: 1px;
      white-space: nowrap;
    }
    .race-marks {
      font-size: 15px;
      line-height: 1;
    }
    .hit-marks {
      min-width: 54px;
      justify-content: center;
      font-size: 19px;
      line-height: 1;
    }
    .hit-cell {
      text-align: center;
    }
    .horse-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      height: 30px;
      padding: 0 8px;
      border-radius: 3px;
      border: 1px solid var(--navy-dark);
      background: var(--navy-dark);
      color: #fff;
      font-size: 19px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
      box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
    }
    .wide-hit-mark {
      display: inline-block;
      margin-top: 5px;
      font-size: 18px;
      line-height: 1;
    }
    .rank {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      min-height: 24px;
      padding: 2px 8px;
      border-radius: 2px;
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    .rank.S { background: var(--red); }
    .rank.A { background: var(--navy); }
    .rank.B { background: var(--green); }
    .rank.R { background: #5f6874; }
    .rank.N { background: #9aa5b1; }
    .frame-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border: 1px solid #888;
      border-radius: 2px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }
    .waku-1 { background: #fff; color: #111; border-color: #8f8f8f; }
    .waku-2 { background: #111; color: #fff; border-color: #111; }
    .waku-3 { background: #d71920; color: #fff; border-color: #b3151b; }
    .waku-4 { background: #1f5fbf; color: #fff; border-color: #164b98; }
    .waku-5 { background: #ffd51d; color: #111; border-color: #c8a500; }
    .waku-6 { background: #138a45; color: #fff; border-color: #0d6d35; }
    .waku-7 { background: #ee8b22; color: #111; border-color: #b96811; }
    .waku-8 { background: #f4a3c4; color: #111; border-color: #cf6e96; }
    .waku-unknown { background: #f0f0e8; color: var(--muted); border-color: var(--line-dark); }
    .horse {
      font-weight: 800;
      font-size: 15.5px;
      overflow-wrap: anywhere;
    }
    .horse-profile {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
    }
    .jockey {
      color: var(--muted);
      font-size: 13px;
      margin-top: 1px;
    }
    .runner-live-change {
      margin-top: 2px;
      color: #8b4a00;
      font-size: 11px;
      font-weight: 700;
    }
    .runner-status {
      display: inline-flex;
      margin-left: 6px;
      padding: 1px 5px;
      border: 1px solid #a42b32;
      border-radius: 2px;
      color: #a42b32;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.3;
      vertical-align: 1px;
    }
    tr.runner-inactive td,
    .runner-card.runner-inactive {
      background: #f4f4f1;
      color: #666;
    }
    .horse-attrs {
      display: grid;
      gap: 2px;
      min-width: 46px;
      justify-items: end;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.22;
      white-space: nowrap;
    }
    .horse-attrs span {
      display: block;
    }
    .signal {
      color: var(--red);
      font-weight: 700;
      white-space: nowrap;
    }
    .signal.off {
      color: var(--muted);
      font-weight: 500;
    }
    .trend-cell {
      display: grid;
      gap: 4px;
      min-width: 140px;
    }
    .trend-label {
      font-size: 12.5px;
      color: var(--muted);
      white-space: nowrap;
    }
    .trend-label.previous {
      font-size: 11px;
      font-weight: 600;
    }
    .trend-label.down { color: var(--red); font-weight: 700; }
    .trend-label.up { color: var(--green); font-weight: 700; }
    .spark {
      width: 122px;
      height: 34px;
      display: block;
    }
    .role {
      display: inline-flex;
      padding: 2px 7px;
      border-radius: 3px;
      background: var(--gold-soft);
      color: var(--gold);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }
    .runner-cards {
      display: none;
    }
    .runner-card {
      position: relative;
      background: var(--surface);
      border: 2px solid var(--navy);
      border-top-width: 0;
      padding: 9px 8px 8px;
    }
    .runner-card:first-child {
      border-top-width: 2px;
    }
    .runner-card-hit {
      position: absolute;
      top: 7px;
      right: 7px;
      z-index: 1;
    }
    .runner-card-hit .hit-marks {
      min-width: 0;
      padding: 2px 5px;
      border: 1px solid var(--gold);
      border-radius: 999px;
      background: #fffdf4;
      box-shadow: 0 1px 0 rgba(15,91,63,.08);
      font-size: 14px;
    }
    .runner-card-main {
      display: grid;
      grid-template-columns: 42px 34px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      padding-right: 40px;
    }
    .mobile-horse-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border: 1px solid #888;
      border-radius: 3px;
      font-size: 20px;
      font-weight: 900;
      line-height: 1;
      box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
    }
    .runner-card-rank {
      min-width: 32px;
      min-height: 26px;
      padding: 2px 6px;
      font-size: 12px;
      justify-self: center;
    }
    .runner-card-horse {
      min-width: 0;
    }
    .runner-card-name {
      padding-right: 4px;
      color: var(--text);
      font-size: 14px;
      font-weight: 800;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    .runner-card-sub {
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    .runner-card-signals {
      display: grid;
      grid-template-columns: minmax(0, .78fr) minmax(0, 1.48fr) minmax(0, .72fr) minmax(0, .62fr);
      gap: 5px;
      margin-top: 7px;
    }
    .runner-chip,
    .runner-trend-compact {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 3px;
      background: #fffdf8;
      padding: 5px 6px;
      font-size: 11px;
      line-height: 1.25;
    }
    .runner-chip .label,
    .runner-trend-compact .label {
      display: block;
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 700;
    }
    .runner-chip strong,
    .runner-trend-compact strong {
      display: block;
      margin-top: 1px;
      color: var(--text);
      font-size: 11.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .runner-chip.on strong {
      color: var(--red);
    }
    .runner-chip.off strong {
      color: var(--muted);
      font-weight: 600;
    }
    .runner-trend-compact .mini-trend {
      display: grid;
      gap: 1px;
      margin-top: 1px;
    }
    .runner-trend-compact .trend-label {
      font-size: 10.5px;
    }
    .runner-trend-compact .spark {
      width: 100%;
      height: 24px;
      margin-top: 3px;
      padding: 0;
      background: transparent;
      border: 0;
    }
    .empty {
      padding: 20px 12px;
      color: var(--muted);
      text-align: center;
    }
    .site-notice {
      grid-column: 1 / -1;
      background: var(--surface);
      border: 2px solid var(--navy);
      border-radius: 3px;
      padding: 9px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      font-size: 13px;
      box-shadow: 0 2px 0 rgba(15, 91, 63, .06);
    }
    .site-notice time {
      color: var(--navy);
      font-weight: 800;
      white-space: nowrap;
    }
    .site-notice span {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    footer {
      margin: 8px 0 0;
      padding: 0;
      background: var(--surface);
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
    }
    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 14px 16px 28px;
    }
    .footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 14px;
      margin-bottom: 8px;
      font-weight: 700;
    }
    .footer-links a {
      color: var(--navy);
      text-decoration: none;
    }
    .footer-links a:hover {
      text-decoration: underline;
    }
    .footer-note {
      margin: 0;
      text-align: center;
    }
    @media (max-width: 920px) {
      main {
        grid-template-columns: 1fr;
      }
      .race-nav {
        position: static;
        max-height: none;
        overflow: visible;
      }
      .date-tabs,
      .venue-tabs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
        gap: 0;
        padding: 0;
        overflow: visible;
      }
      .date-tabs button,
      .venue-tabs button {
        width: 100%;
        border-radius: 0;
        border-width: 0 1px 1px 0;
        padding: 8px 6px;
        text-align: center;
      }
      .race-nav .panel-title,
      .date-tabs,
      .venue-tabs,
      .race-list {
        width: 100%;
      }
      .mobile-race-select {
        display: inline-flex;
        justify-content: center;
        align-items: center;
      }
      .performance-top { grid-template-columns: 1fr; }
      .current-performance-grid { grid-template-columns: 1fr; }
      .current-performance-grid .current-wide { border-right: 0; border-bottom: 1px solid var(--line); }
      .current-performance-grid .current-wide:last-child { border-bottom: 0; }
      .wide-summary { border-right: 0; border-bottom: 1px solid var(--line); }
      .wide-stat { border-bottom: 1px solid var(--line); }
      .wide-performance .wide-stat:nth-child(2n) { border-right: 0; }
      .race-titlebar { grid-template-columns: 1fr; }
      .sortbar { min-width: 0; justify-content: flex-start; }
      .sort-buttons { justify-content: flex-start; }
    }
    @media (max-width: 560px) {
      .topbar, main {
        padding-left: 10px;
        padding-right: 10px;
      }
      .status {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 5px;
        padding-bottom: 1px;
        scrollbar-width: none;
      }
      .status::-webkit-scrollbar {
        display: none;
      }
      .status span {
        flex: 0 0 auto;
        padding: 4px 6px;
        font-size: 11px;
        white-space: nowrap;
      }
      .brand-link {
        height: 52px;
      }
      .brand-image {
        height: 52px;
        max-width: min(74vw, 320px);
      }
      .race-head h2 { font-size: 18px; }
      .content,
      #performancePanel,
      .performance-shell,
      .performance,
      details.bet-stats,
      details.bet-period,
      details.rank-stats,
      .performance-block,
      #racePanel,
      .wide-strip,
      .race-head,
      .sortbar,
      .sort-buttons {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }
      .performance-shell > summary,
      details.bet-stats > summary,
      details.bet-period > summary,
      details.rank-stats > summary,
      .block-head {
        min-width: 0;
      }
      details.rank-stats > summary {
        align-items: flex-start;
        gap: 8px;
      }
      details.rank-stats > summary .muted {
        min-width: 0;
        margin-left: auto;
        text-align: right;
        font-size: 11px;
        line-height: 1.35;
        overflow-wrap: anywhere;
      }
      .rank-stats .table-wrap {
        display: none;
      }
      .rank-mobile-list {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }
      .sortbar {
        display: grid;
        grid-template-columns: 1fr;
      }
      .sort-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .sort-buttons button,
      .mobile-race-select {
        width: 100%;
        min-width: 0;
      }
      .table-wrap {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
      }
      .race-table-wrap {
        display: none;
      }
      .runner-cards {
        display: grid;
        gap: 0;
        margin: 0 0 8px;
      }
      .runner-card-signals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .wide-strip {
        padding: 8px;
      }
      .wide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }
      .wide-item {
        position: relative;
        border-width: 1px;
        padding: 6px 7px;
      }
      .wide-item.hit {
        padding-right: 24px;
      }
      .wide-selection {
        font-size: 13px;
        line-height: 1.25;
      }
      .wide-pair-names,
      .wide-pair-meta {
        font-size: 11px;
        line-height: 1.3;
      }
      .wide-pair-names,
      .wide-pair-meta {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .wide-hit-mark {
        position: absolute;
        top: 6px;
        right: 6px;
        margin-top: 0;
        font-size: 15px;
      }
      table { min-width: 680px; }
      .wide-performance, .current-wide-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .current-wide-row .wide-stat:nth-child(2n) { border-right: 0; }
    }