html {
        box-sizing: border-box;
      }
      *,
      *::before,
      *::after {
        box-sizing: inherit;
      }
      body.haidex-app {
        padding: 12px 16px 28px;
        font-size: 14px;
        line-height: 1.45;
      }
      body.haidex-app > h1.haidex-page-title {
        font-size: 1.45rem;
        font-weight: 700;
        margin: 0 0 10px;
        color: var(--haidex-text);
      }
      .scope-panel-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        margin: 0 0 8px;
        padding: 0;
        border: none;
        background: none;
        font: inherit;
        font-size: 1.17em;
        font-weight: bold;
        text-align: left;
        cursor: pointer;
        color: inherit;
      }
      .benchmark-scope-panel.scope-panel .scope-panel-toggle {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 8px;
      }
      .scope-panel-icon {
        flex-shrink: 0;
        width: 1em;
        text-align: center;
        font-size: 0.85em;
        line-height: 1;
      }
      .scope-panel-body[hidden] {
        display: none !important;
      }
      .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; min-width: 0; max-width: 100%; }
      .card {
        border: 1px solid var(--haidex-border, #d8e1dc);
        border-radius: 7px;
        padding: 12px;
        min-width: 0;
        max-width: 100%;
        background: var(--haidex-card, #fff);
      }
      label { display: inline-flex; gap: 8px; align-items: center; }
      input[type="number"] { width: 96px; }
      table { border-collapse: collapse; width: 100%; }
      /* 局一覧: 内部縦scrollをやめ、ページ全体scrollへ寄せる（横scrollは維持） */
      #hits_tbl_wrap,
      #compare_main_hits_wrap,
      #compare_benchmark_hits_wrap {
        overflow-x: auto;
        overflow-y: visible;
        margin-top: 8px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      /* 局一覧 typography（global th,td{font-size:12px} をセルへ直接上書き） */
      #hits_tbl_wrap,
      #compare_main_hits_wrap,
      #compare_benchmark_hits_wrap {
        --kyoku-table-font-size: 15px;
        --kyoku-player-font-size: 14px;
        --kyoku-child-font-size: 14px;
        --kyoku-table-cell-pad-x: 5px;
        --kyoku-short-col-pad-x: 4px;
      }
      #hits_tbl.kyoku-parent-table,
      #compare_main_hits_tbl.kyoku-parent-table,
      #compare_benchmark_hits_tbl.kyoku-parent-table {
        width: max-content;
        min-width: 0;
        max-width: none;
        table-layout: auto;
        font-size: var(--kyoku-table-font-size);
        line-height: 1.35;
      }
      #hits_tbl.kyoku-parent-table th,
      #hits_tbl.kyoku-parent-table td,
      #compare_main_hits_tbl.kyoku-parent-table th,
      #compare_main_hits_tbl.kyoku-parent-table td,
      #compare_benchmark_hits_tbl.kyoku-parent-table th,
      #compare_benchmark_hits_tbl.kyoku-parent-table td {
        white-space: nowrap;
        padding-left: var(--kyoku-table-cell-pad-x);
        padding-right: var(--kyoku-table-cell-pad-x);
        font-size: var(--kyoku-table-font-size);
        line-height: 1.35;
      }
      #hits_tbl.kyoku-parent-table .kyoku-hit-count-cell,
      #hits_tbl.kyoku-parent-table .kyoku-parent-num-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-hit-count-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-num-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-hit-count-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-num-cell {
        text-align: right;
        font-variant-numeric: tabular-nums;
      }
      /* プレイヤー名: 本文より1px小さく、最大8字を省略せず nowrap 表示 */
      #hits_tbl.kyoku-parent-table .kyoku-parent-player-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-player-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-player-cell,
      #hits_tbl.kyoku-parent-table .kyoku-player-name,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-player-name,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-player-name {
        white-space: nowrap;
        font-size: var(--kyoku-player-font-size);
        line-height: 1.35;
        min-width: 8.1em;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
      }
      /* 短い列の左右 padding を詰めて名前列の余裕を確保 */
      #hits_tbl.kyoku-parent-table .kyoku-parent-seat-cell,
      #hits_tbl.kyoku-parent-table .kyoku-parent-state-cell,
      #hits_tbl.kyoku-parent-table .kyoku-parent-junme-cell,
      #hits_tbl.kyoku-parent-table .kyoku-parent-result-cell,
      #hits_tbl.kyoku-parent-table .kyoku-parent-num-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-seat-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-state-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-junme-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-result-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-num-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-seat-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-state-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-junme-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-result-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-num-cell {
        padding-left: var(--kyoku-short-col-pad-x);
        padding-right: var(--kyoku-short-col-pad-x);
      }
      /* 列align: 短い状態列は中央、数値は右、テキストは左 */
      #hits_tbl.kyoku-parent-table .hit-replay-col,
      #hits_tbl.kyoku-parent-table .hit-replay-cell,
      #compare_main_hits_tbl.kyoku-parent-table .hit-replay-col,
      #compare_main_hits_tbl.kyoku-parent-table .hit-replay-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .hit-replay-col,
      #compare_benchmark_hits_tbl.kyoku-parent-table .hit-replay-cell,
      #hits_tbl.kyoku-parent-table .kyoku-parent-bakyoku-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-bakyoku-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-bakyoku-cell,
      #hits_tbl.kyoku-parent-table .kyoku-parent-seat-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-seat-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-seat-cell,
      #hits_tbl.kyoku-parent-table .kyoku-parent-state-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-state-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-state-cell,
      #hits_tbl.kyoku-parent-table .kyoku-parent-result-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-result-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-result-cell {
        text-align: center;
      }
      #hits_tbl.kyoku-parent-table .kyoku-parent-rule-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-rule-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-rule-cell,
      #hits_tbl.kyoku-parent-table .kyoku-parent-shanten-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-shanten-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-shanten-cell,
      #hits_tbl.kyoku-parent-table .kyoku-parent-player-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-player-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-player-cell {
        text-align: left;
      }
      #hits_tbl.kyoku-parent-table .kyoku-parent-junme-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-junme-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-junme-cell {
        text-align: right;
        font-variant-numeric: tabular-nums;
      }
      /* header強調 + 薄い列境界 */
      #hits_tbl.kyoku-parent-table thead th,
      #compare_main_hits_tbl.kyoku-parent-table thead th,
      #compare_benchmark_hits_tbl.kyoku-parent-table thead th {
        position: sticky;
        top: 0;
        z-index: 4;
        font-weight: 700;
        background: var(--haidex-very-light, #f0f8f2);
        border-bottom: 2px solid var(--haidex-border, #d8e1dc);
        color: #222;
        box-shadow: inset -1px 0 0 color-mix(in srgb, var(--haidex-border, #d8e1dc) 70%, transparent);
      }
      #hits_tbl.kyoku-parent-table tbody td,
      #compare_main_hits_tbl.kyoku-parent-table tbody td,
      #compare_benchmark_hits_tbl.kyoku-parent-table tbody td {
        box-shadow: inset -1px 0 0 color-mix(in srgb, var(--haidex-border, #d8e1dc) 45%, transparent);
      }
      th, td { border-bottom: 1px solid #eee; padding: 6px 8px; text-align: left; font-size: 12px; }
      th { position: sticky; top: 0; background: #fafafa; }
      .muted { color: #666; font-size: 12px; }
      .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
      .grid {
        --cond-text: #222;
        --cond-muted: #666;
        --cond-border: #e0e0e0;
        --cond-surface: #fff;
        --cond-surface-subtle: #f7f8fa;
        --cond-primary: #1a5fb4;
        --cond-primary-hover: #15508f;
        --cond-focus: #1a73e8;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        min-width: 0;
        color: var(--cond-text);
      }
      .grid > *,
      .grid-left-stack,
      .card {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
      }
      .grid-left-stack {
        min-width: 0;
        max-width: 100%;
      }
      @media (min-width: 1000px) {
        .grid {
          grid-template-columns: 440px minmax(0, 1fr);
          align-items: start;
        }
      }
      button { padding: 8px 12px; }
      .pill { display: inline-block; padding: 2px 6px; border: 1px solid #ddd; border-radius: 999px; font-size: 12px; }
      pre { white-space: pre-wrap; word-break: break-word; background: #0b1020; color: #e6e6e6; padding: 12px; border-radius: 8px; }
      .grid a:link,
      .grid a:visited,
      body > p a:link,
      body > p a:visited,
      #haidex_auth_nav a:link,
      #haidex_auth_nav a:visited {
        color: var(--cond-primary, #1a5fb4);
      }
      .grid a:hover,
      body > p a:hover,
      #haidex_auth_nav a:hover {
        color: var(--cond-primary-hover, #15508f);
      }
      .grid a:focus-visible,
      body > p a:focus-visible,
      #haidex_auth_nav a:focus-visible,
      #conditions_search_card button:focus-visible,
      #conditions_search_card select:focus-visible,
      #conditions_search_card input:focus-visible,
      .results-card button:focus-visible,
      .results-card select:focus-visible,
      .results-card input:focus-visible {
        outline: 2px solid var(--cond-focus, #1a73e8);
        outline-offset: 2px;
      }

      /* --- 局成績・順位成績ダッシュボード（#metrics 専用） --- */
      #metrics.metrics-dashboard {
        display: block;
        gap: 0;
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
      }
      .metrics-section {
        min-width: 0;
      }
      .metrics-section + .metrics-section {
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid #e8ecef;
      }
      .metrics-section-header {
        margin-bottom: 10px;
      }
      /* 中見出し（局成績 / 順位成績） */
      .metrics-section-header h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: #263238;
        letter-spacing: 0.01em;
      }
      .metrics-section-note {
        margin: 4px 0 0;
        font-size: 11px;
        line-height: 1.4;
        color: #78909c;
      }
      .metrics-kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
        gap: 8px;
        align-items: stretch;
        margin-bottom: 0;
      }
      .metrics-rank-kpi-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }
      .metrics-rank-kpi-grid .metrics-kpi-label {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
      }
      .metrics-kpi-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0;
        min-height: 52px;
        padding: 8px 10px;
        border: 1px solid #e2e6ea;
        border-radius: 6px;
        background: #fff;
        box-sizing: border-box;
      }
      .metrics-kpi-card--priority .metrics-kpi-value {
        font-size: 16px;
        font-weight: 700;
      }
      .metrics-kpi-label {
        font-size: 11px;
        line-height: 1.3;
        color: #607d8b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .metrics-kpi-value {
        margin-top: 4px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.2;
        color: #222;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
      /* 局成績下段: 内部listをコンパクト左寄せ（右側余白可） */
      .metrics-detail-grid {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        gap: 8px 28px;
        margin-top: 14px;
        max-width: min(100%, 840px);
        min-width: 0;
        justify-content: start;
      }
      .metrics-detail-panel {
        min-width: 0;
        max-width: 100%;
      }
      .metrics-detail-grid > .metrics-detail-panel {
        justify-self: start;
        width: max-content;
        max-width: 100%;
      }
      /* 小見出し（局結果 / 和了・放銃 / 順位内訳 等） */
      .metrics-detail-panel h4,
      .metrics-subheading {
        margin: 0 0 7px;
        font-size: 12px;
        font-weight: 600;
        color: #607d8b;
        letter-spacing: 0.01em;
      }
      /* 局結果 / 和了・放銃 / 順位傾向: 対象試合の内訳に近いlabel/value距離 */
      .metrics-detail-list {
        display: grid;
        grid-template-columns: max-content auto;
        column-gap: 24px;
        row-gap: 6px;
        width: max-content;
        max-width: min(100%, 360px);
        min-width: 0;
        justify-self: start;
      }
      .metrics-detail-row {
        display: contents;
      }
      .metrics-detail-label {
        min-width: 0;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 400;
        color: #546e7a;
      }
      .metrics-detail-value {
        font-size: 14px;
        line-height: 1.35;
        text-align: right;
        white-space: nowrap;
        color: #222;
        font-variant-numeric: tabular-nums;
      }
      .metrics-detail-table {
        width: 100%;
        max-width: 100%;
        border-collapse: collapse;
        font-size: 14px;
        line-height: 1.35;
        table-layout: fixed;
      }
      .metrics-detail-table th,
      .metrics-detail-table td {
        padding: 4px 0;
        border: none;
        vertical-align: baseline;
      }
      .metrics-detail-table th {
        width: auto;
        text-align: left;
        font-weight: 400;
        white-space: nowrap;
        color: #546e7a;
        padding-right: 10px;
      }
      .metrics-detail-table td {
        width: 1%;
        text-align: right;
        white-space: nowrap;
        color: #222;
        font-variant-numeric: tabular-nums;
      }
      .metrics-rank-breakdown {
        margin-top: 0;
        max-width: none;
        min-width: 0;
      }
      .metrics-rank-breakdown-table {
        width: 100%;
        table-layout: fixed;
      }
      /* 順位成績下段: 情報量に合わせた非均等配分（約40/22/38） */
      .metrics-rank-body-grid {
        display: grid;
        grid-template-columns: minmax(0, 40fr) minmax(0, 22fr) minmax(0, 38fr);
        gap: 12px 16px;
        margin-top: 14px;
        align-items: start;
        max-width: 100%;
      }
      .metrics-rank-aux-stack {
        display: contents;
      }
      .metrics-rank-aux-panels {
        display: contents;
      }
      .metrics-rank-body-grid > .metrics-detail-panel,
      .metrics-rank-aux-panels > .metrics-detail-panel {
        margin-top: 0;
        min-width: 0;
      }
      /* 順位傾向: 内部コンパクト + 補助指標としてやや控えめ */
      .metrics-rank-trend {
        justify-self: start;
        width: max-content;
        max-width: 100%;
      }
      .metrics-rank-trend .metrics-detail-list {
        column-gap: 24px;
        row-gap: 0;
        max-width: min(100%, 260px);
      }
      .metrics-rank-trend .metrics-detail-label,
      .metrics-rank-trend .metrics-detail-value {
        padding: 4px 0;
        border-bottom: 1px solid #eef1f3;
      }
      .metrics-rank-trend .metrics-detail-row:last-child > .metrics-detail-label,
      .metrics-rank-trend .metrics-detail-row:last-child > .metrics-detail-value {
        border-bottom: none;
        padding-bottom: 0;
      }
      .metrics-rank-trend .metrics-detail-row:first-child > .metrics-detail-label,
      .metrics-rank-trend .metrics-detail-row:first-child > .metrics-detail-value {
        padding-top: 0;
      }
      .metrics-rank-trend .metrics-detail-label {
        font-size: 14px;
        color: #607d8b;
      }
      .metrics-rank-trend .metrics-detail-value {
        font-size: 15px;
        font-weight: 600;
        color: #222;
      }
      /* 対象試合の内訳: 列は確保しつつ内部はコンパクト左寄せ */
      .metrics-game-rule-breakdown {
        justify-self: start;
        width: 100%;
        max-width: 100%;
      }
      .metrics-game-rule-breakdown-list {
        display: grid;
        grid-template-columns: max-content auto;
        column-gap: 24px;
        row-gap: 0;
        width: max-content;
        max-width: min(100%, 360px);
        justify-self: start;
      }
      .metrics-game-rule-breakdown-row {
        display: contents;
      }
      .metrics-game-rule-breakdown-label {
        color: #455a64;
        min-width: 0;
        max-width: 16em;
        padding: 5px 0;
        font-size: 14px;
        line-height: 1.35;
        overflow-wrap: anywhere;
        word-break: break-word;
        border-bottom: 1px solid #eef1f3;
      }
      .metrics-game-rule-breakdown-count {
        color: #222;
        font-size: 15px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        text-align: right;
        padding: 5px 0;
        line-height: 1.35;
        border-bottom: 1px solid #eef1f3;
      }
      .metrics-game-rule-breakdown-list > .metrics-game-rule-breakdown-row:last-child > .metrics-game-rule-breakdown-label,
      .metrics-game-rule-breakdown-list > .metrics-game-rule-breakdown-row:last-child > .metrics-game-rule-breakdown-count {
        border-bottom: none;
        padding-bottom: 0;
      }
      .metrics-game-rule-breakdown-list > .metrics-game-rule-breakdown-row:first-child > .metrics-game-rule-breakdown-label,
      .metrics-game-rule-breakdown-list > .metrics-game-rule-breakdown-row:first-child > .metrics-game-rule-breakdown-count {
        padding-top: 0;
      }
      .metrics-game-rule-breakdown-empty {
        font-size: 12px;
        color: #90a4ae;
        grid-column: 1 / -1;
      }
      .metrics-rank-breakdown-table th,
      .metrics-rank-breakdown-table td {
        width: auto;
      }
      .metrics-rank-breakdown-table th {
        width: 52px;
        padding-right: 8px;
        color: #546e7a;
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
      }
      .metrics-rank-breakdown-table td.metrics-rank-rate {
        width: 72px;
        text-align: right;
        padding-right: 10px;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        color: #222;
        font-weight: 600;
      }
      .metrics-rank-breakdown-table td.metrics-rank-bar-cell {
        width: auto;
        padding-right: 0;
        vertical-align: middle;
      }
      .metrics-rank-bar-track {
        width: 100%;
        max-width: 340px;
        height: 9px;
        overflow: hidden;
        border-radius: 999px;
        background: #eceff1;
      }
      .metrics-rank-bar-fill {
        height: 100%;
        min-width: 0;
        border-radius: inherit;
        background: #90a4ae;
      }
      .metrics-debug-fold {
        margin-top: 18px;
        color: #90a4ae;
      }
      .metrics-debug-fold > summary {
        cursor: pointer;
        font-size: 11px;
        color: #90a4ae;
        list-style-position: outside;
      }
      .metrics-debug-fold > summary:hover {
        color: #78909c;
      }
      .metrics-debug-body {
        margin-top: 6px;
        font-size: 11px;
        line-height: 1.45;
        color: #90a4ae;
      }
      /* 1024前後: 順位内訳を上段、傾向+内訳を下段2カラム */
      @media (max-width: 1100px) and (min-width: 861px) {
        .metrics-rank-body-grid {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          grid-template-areas:
            "breakdown breakdown"
            "trend rules";
        }
        .metrics-rank-breakdown {
          grid-area: breakdown;
        }
        .metrics-rank-trend {
          grid-area: trend;
        }
        .metrics-game-rule-breakdown {
          grid-area: rules;
        }
      }
      @media (max-width: 860px) {
        .metrics-kpi-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .metrics-rank-kpi-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .metrics-rank-body-grid {
          grid-template-columns: 1fr;
          grid-template-areas: none;
        }
        .metrics-rank-breakdown,
        .metrics-rank-trend,
        .metrics-game-rule-breakdown {
          grid-area: auto;
        }
        .metrics-rank-aux-stack,
        .metrics-rank-aux-panels {
          display: flex;
          flex-direction: column;
          gap: 10px;
          min-width: 0;
        }
        .metrics-detail-grid {
          grid-template-columns: 1fr;
          max-width: 100%;
          gap: 10px;
        }
        .metrics-rank-breakdown,
        .metrics-rank-breakdown-table {
          width: 100%;
          max-width: 100%;
        }
        .metrics-rank-bar-track {
          max-width: none;
        }
        .metrics-rank-bar-cell {
          width: auto;
        }
      }
      @media (max-width: 420px) {
        .metrics-kpi-grid {
          grid-template-columns: 1fr;
        }
        .metrics-rank-kpi-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      /* === 局再生（検証用・CSS簡易卓） === */
      #replay_panel.card { padding: 4px 6px; margin-top: 4px; }
      .replay-panel-inner { max-width: 980px; margin: 0 auto; overflow: visible; }
      .replay-panel-title-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 4px;
        margin-bottom: 2px;
      }
      .replay-panel-title-row > div > div:first-child {
        font-size: 9px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
      }
      .replay-panel-title-row .muted {
        font-size: 7px !important;
        margin-top: 0 !important;
        line-height: 1.2 !important;
      }
      .replay-panel-title-row .muted code { font-size: 8px; }
      .replay-close { font-size: 10px; padding: 2px 6px; }
      #replay_panel #replay_hit_nav.replay-bottom-bar {
        margin: 0 0 2px !important;
        gap: 4px !important;
        padding: 2px 4px !important;
        font-size: 10px;
      }
      #replay_panel #replay_hit_nav.replay-bottom-bar button {
        padding: 3px 6px;
        font-size: 10px;
      }
      .replay-meta-line {
        font-size: 11px !important;
        margin: 0 0 4px !important;
        line-height: 1.35 !important;
      }
      .replay-top-bar {
        display: flex;
        flex-direction: column;
        gap: 1px;
        margin-bottom: 1px;
        font-size: 10px;
        line-height: 1.28;
        overflow: visible;
      }
      .replay-compact-summary {
        font-size: 10px;
        line-height: 1.28;
        padding: 2px 5px;
        background: #eef3f8;
        border: 1px solid #b0bec5;
        border-radius: 4px;
        color: #263238;
      }
      .replay-fold {
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        margin: 0;
      }
      .replay-fold > summary {
        cursor: pointer;
        padding: 2px 6px;
        background: #f5f5f5;
        font-weight: 600;
        font-size: 10px;
        color: #455a64;
        list-style-position: inside;
      }
      .replay-fold-body { padding: 4px 6px; }
      .replay-details-unified .replay-details-meta {
        margin: 0 0 4px;
        padding: 0 0 3px;
        border-bottom: 1px solid #e0e0e0;
        font-size: 10px;
        line-height: 1.32;
        color: #546e7a;
        white-space: pre-line;
      }
      .replay-details-unified > .replay-info-block + .replay-info-block {
        margin-top: 4px;
        padding-top: 4px;
        border-top: 1px dashed #eceff1;
      }
      #replay_panel .replay-panel-inner > #replay_source_meta,
      #replay_panel .replay-panel-inner > #replay_game_datetime {
        display: none;
      }
      .replay-fold-body .replay-info-block {
        border: none;
        padding: 4px 0;
        background: transparent;
      }
      #replay_panel .replay-top-bar {
        max-height: min(22vh, 200px);
        overflow-y: auto;
        overflow-x: hidden;
      }
      #replay_panel .replay-top-bar:not(:has(details[open])) {
        max-height: none;
        gap: 1px;
        margin-bottom: 2px;
      }
      #replay_panel .replay-top-bar:not(:has(details[open])) .replay-compact-summary {
        padding: 2px 6px;
        font-size: 10px;
        line-height: 1.3;
      }
      #replay_panel .replay-top-bar:not(:has(details[open])) .replay-fold > summary {
        padding: 2px 5px;
        font-size: 10px;
      }
      #replay_panel .replay-top-bar:not(:has(details[open])) .replay-meta-line {
        margin: 0 0 2px !important;
        line-height: 1.3 !important;
      }
      .replay-stage {
        --replay-mat-scale: 0.77;
        --replay-scale-gap-pull: -26vh;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 0;
        max-height: none;
        overflow: visible;
        padding-bottom: 0;
      }
      .replay-stage-main {
        min-width: 0;
        width: 100%;
        flex: 0 0 auto;
        padding-right: 0;
        margin-bottom: 0;
        overflow: visible;
      }
      .replay-stage > .replay-self-hand-dock {
        flex: 0 0 auto;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        position: relative;
        z-index: 8;
        pointer-events: auto;
      }
      .replay-stage-main + .replay-self-hand-dock {
        margin-top: -46px;
      }
      .replay-stage:has(.replay-mat-wrap--loading) > .replay-self-hand-dock {
        display: none;
      }
      .replay-step-dock {
        position: absolute;
        top: 6px;
        right: max(4px, calc(50% - 448px));
        z-index: 24;
        width: 88px;
        min-width: 0;
        flex: none;
        pointer-events: none;
      }
      .replay-step-dock .replay-bottom-bar--dock {
        pointer-events: auto;
        transform: scale(0.85);
        transform-origin: top right;
        opacity: 0.9;
      }
      @media (max-width: 860px) {
        .replay-step-dock {
          position: absolute;
          top: 6px;
          right: 4px;
          width: 84px;
        }
        .replay-bottom-bar--dock {
          flex-direction: column;
        }
      }
      .replay-mat-scale-shell {
        --replay-mat-scale: 0.77;
        --replay-mat-visual-max: 920px;
        transform: scale(var(--replay-mat-scale));
        transform-origin: top center;
        width: calc(100% / var(--replay-mat-scale));
        max-width: calc(var(--replay-mat-visual-max) / var(--replay-mat-scale));
        margin: 0 auto;
        margin-bottom: calc((1 / var(--replay-mat-scale) - 1) * var(--replay-scale-gap-pull, -28vh));
        line-height: normal;
        overflow: visible;
      }
      .replay-mat-wrap.replay-mat-wrap--loading .replay-mat-scale-shell {
        display: none;
      }
      .replay-info-block {
        border: 1px solid #cfd8dc;
        border-radius: 6px;
        padding: 6px 8px;
        background: #fafafa;
      }
      .replay-info-block--hit { background: #fff8f5; border-color: #ffccbc; }
      .replay-info-block--step {
        background: #f7f9fb;
        border-color: #b0bec5;
      }
      .replay-info-block strong { display: block; margin-bottom: 4px; font-size: 12px; color: #333; }
      .replay-analysis-lines {
        font-size: 12px;
        line-height: 1.55;
        color: #37474f;
        white-space: pre-line;
      }
      .replay-warn {
        grid-column: 1 / -1;
        padding: 8px 10px;
        border-radius: 6px;
        background: #fff8e1;
        border: 1px solid #ffe082;
        color: #6d4c41;
        font-size: 12px;
      }
      .replay-mat-wrap {
        --replay-mat-visual-max: 920px;
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        margin-bottom: 0;
        align-items: center;
        overflow: visible;
      }
      .replay-mat {
        display: grid;
        grid-template-columns: minmax(84px, 1fr) minmax(136px, 210px) minmax(84px, 1fr);
        grid-template-rows: auto auto auto;
        gap: 0 2px;
        align-items: start;
        margin-bottom: 0;
        width: 100%;
        overflow: visible;
      }
      .replay-mat .replay-cell {
        overflow: visible;
        position: relative;
      }
      .replay-pos--toimen {
        grid-column: 2;
        grid-row: 1;
        justify-self: stretch;
        width: 100%;
        margin-bottom: -32px;
        padding-bottom: 6px;
        z-index: 1;
      }
      .replay-pos--shimocha { grid-column: 1; grid-row: 2; align-self: center; z-index: 3; }
      .replay-pos--center {
        grid-column: 2;
        grid-row: 2;
        justify-self: center;
        width: 100%;
        max-width: 232px;
        z-index: 6;
      }
      .replay-pos--kamicha { grid-column: 3; grid-row: 2; align-self: center; z-index: 3; }
      .replay-pos--self {
        grid-column: 2;
        grid-row: 3;
        justify-self: stretch;
        width: 100%;
        margin-top: -18px;
        padding-top: 10px;
        z-index: 1;
      }

      .replay-pos--toimen .replay-player,
      .replay-pos--shimocha .replay-player,
      .replay-pos--kamicha .replay-player {
        padding: 3px 5px;
        font-size: 10px;
      }
      .replay-pos--toimen .replay-player {
        padding: 2px 5px 10px;
      }
      .replay-pos--toimen .replay-player-head,
      .replay-pos--self .replay-player-head {
        position: relative;
        z-index: 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: baseline;
        gap: 4px;
        margin: 0 0 4px;
        padding: 0;
        font-size: 9px;
        line-height: 1.12;
        min-height: 14px;
        flex-shrink: 0;
      }
      .replay-pos--toimen .replay-player-head {
        margin-bottom: 6px;
        padding-bottom: 8px;
      }
      .replay-pos--self .replay-player-head {
        margin-top: 10px;
        margin-bottom: 4px;
        padding: 6px 4px 4px;
        background: rgba(255, 255, 255, 0.94);
        border-radius: 4px;
        box-shadow: 0 1px 0 rgba(144, 164, 174, 0.35);
      }
      .replay-pos--toimen .replay-player-title,
      .replay-pos--self .replay-player-title {
        font-size: 9px;
        line-height: 1.12;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 58%;
      }
      .replay-pos--toimen .replay-player-stats,
      .replay-pos--self .replay-player-stats {
        font-size: 9px;
        line-height: 1.12;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 40%;
        flex-shrink: 0;
      }
      .replay-seat-stack--toimen {
        padding-bottom: 8px;
      }
      .replay-seat-area--toimen .replay-seat-label {
        margin-bottom: 4px;
        padding-bottom: 4px;
      }
      .replay-pos--shimocha .replay-player-head,
      .replay-pos--kamicha .replay-player-head {
        font-size: 10px;
        margin-bottom: 2px;
      }
      .replay-pos--toimen .replay-player-furo,
      .replay-pos--shimocha .replay-player-furo,
      .replay-pos--kamicha .replay-player-furo {
        margin-bottom: 2px;
      }
      .replay-pos--self .replay-player {
        padding: 10px 5px 3px;
        opacity: 0.92;
      }
      /* 自分手牌ドック（卓下辺の延長・中央集中・最前面） */
      .replay-self-hand-dock {
        /* 河捨て牌（.discard-river .replay-tile-svg-img）と同サイズ */
        --replay-hand-svg-width: 30px;
        --replay-hand-svg-max-height: 42px;
        box-sizing: border-box;
        width: fit-content;
        max-width: min(var(--replay-mat-visual-max, 940px), 100%);
        margin: 0 auto;
        padding: 0;
        transform: scale(var(--replay-mat-scale, 0.77));
        transform-origin: top center;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        position: relative;
        z-index: 8;
        align-self: center;
      }
      .replay-self-hand-dock .replay-hand-text-sub {
        margin: 0;
        padding: 0 1px 0;
        font-size: 8px;
        line-height: 1.1;
        color: #607d8b;
        text-align: center;
        word-break: break-all;
      }

      .replay-player {
        border: 1px solid #90a4ae;
        border-radius: 10px;
        padding: 8px 10px;
        background: #fff;
        min-width: 0;
      }
      .replay-player--riichi {
        border-color: #e53935;
        background: #fff5f5;
        box-shadow: inset 0 0 0 1px rgba(229, 57, 53, 0.15);
      }
      .replay-player-head {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 6px;
        align-items: baseline;
        margin-bottom: 8px;
        font-size: 12px;
      }
      .replay-player-title {
        font-weight: 700;
        color: #263238;
        line-height: 1.25;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .replay-player-stats { color: #455a64; font-size: 11px; white-space: nowrap; }

      .replay-player-furo {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-start;
        margin-bottom: 8px;
        min-height: 0;
      }
      .replay-meld-group {
        display: inline-flex;
        gap: 3px;
        padding: 3px 5px;
        border: 1px dashed #b0bec5;
        border-radius: 6px;
        background: #fafafa;
      }

      .replay-pos--shimocha .replay-player,
      .replay-pos--kamicha .replay-player {
        overflow: visible;
      }
      .replay-pos--shimocha,
      .replay-pos--kamicha {
        min-width: 136px;
      }

      /* 席エリア（rotate なし） */
      .replay-seat-area--shimocha,
      .replay-seat-area--kamicha {
        padding: 4px 6px;
      }
      /* 対面: ラベルは卓側へ（河並びは JS replayRiverSeatTransform） */
      .replay-seat-stack--toimen {
        display: flex;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 4px;
        width: 100%;
        direction: ltr;
      }
      .replay-seat-area--toimen .replay-seat-label,
      .replay-seat-area--toimen .replay-seat-status {
        text-align: center;
      }
      .replay-seat-side-layout {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 4px;
        width: 100%;
      }
      .replay-seat-area--kamicha .replay-seat-side-layout {
        flex-direction: row-reverse;
      }
      .replay-seat-info-stack {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        gap: 4px;
        writing-mode: vertical-rl;
        text-orientation: mixed;
      }
      .replay-seat-area--shimocha .replay-seat-info-stack {
        align-items: flex-start;
      }
      .replay-seat-area--kamicha .replay-seat-info-stack {
        flex-direction: column-reverse;
        align-items: flex-end;
      }
      .replay-seat-area--shimocha .replay-seat-label,
      .replay-seat-area--kamicha .replay-seat-label,
      .replay-seat-area--shimocha .replay-seat-status,
      .replay-seat-area--kamicha .replay-seat-status {
        margin-bottom: 0;
      }
      .replay-seat-area--shimocha .replay-player-head,
      .replay-seat-area--kamicha .replay-player-head {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 3px;
        margin-bottom: 0;
      }
      .replay-seat-area--shimocha .replay-player-title,
      .replay-seat-area--shimocha .replay-player-stats,
      .replay-seat-area--kamicha .replay-player-title,
      .replay-seat-area--kamicha .replay-player-stats {
        white-space: nowrap;
        line-height: 1.35;
      }
      .replay-seat-area--shimocha .replay-player-furo,
      .replay-seat-area--kamicha .replay-player-furo {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
        margin-bottom: 0;
        min-height: 0;
      }
      .replay-seat-area--shimocha .replay-meld-group,
      .replay-seat-area--kamicha .replay-meld-group {
        flex-direction: column;
        align-items: center;
      }

      .replay-river-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        overflow: visible;
      }
      .replay-river-wrap--shimocha,
      .replay-river-wrap--kamicha {
        flex: 0 1 auto;
        padding: 4px 2px;
      }

      /* 河: 単純 grid + JS 座標（direction / reverse / auto-flow 禁止） */
      .replay-river.discard-river {
        box-sizing: border-box;
        width: 100%;
        padding: 8px 10px;
        border-radius: 8px;
        background-color: #0b3d6e;
        border: 1px solid #082f57;
      }
      .replay-river-flow {
        display: grid;
        grid-auto-rows: max-content;
        grid-auto-columns: max-content;
        gap: 4px 5px;
        width: max-content;
        min-height: 28px;
      }
      .replay-seat-area--shimocha .replay-river-flow,
      .replay-seat-area--kamicha .replay-river-flow {
        row-gap: 0;
        column-gap: 12px;
      }
      /* 側席: 卓画面の上下（grid 行方向）だけ詰める。座標・回転は不変 */
      .replay-seat-area--shimocha .replay-river-tile-wrapper,
      .replay-seat-area--kamicha .replay-river-tile-wrapper {
        margin-block: -2px;
      }
      .replay-seat-area--self .replay-river-flow,
      .replay-seat-area--toimen .replay-river-flow {
        width: 100%;
      }
      /* 対面: 2段目以降を卓中央（画面上方向）へ視覚オフセット。gridRow は不変 */
      .replay-seat-area--toimen .replay-river-tile-wrapper {
        margin-top: calc(-1 * var(--river-row-visual-pull, 0px));
      }
      .replay-river-wrap--shimocha .replay-river-flow {
        margin-inline-start: auto;
      }
      .replay-river-wrap--kamicha .replay-river-flow {
        margin-inline-end: auto;
      }
      .replay-river-line-break {
        margin: 0;
        padding: 0;
        overflow: hidden;
        visibility: hidden;
        width: 0;
        height: 0;
      }

      /* 牌向き: wrapper のみ（角度は JS が --river-tile-rotate に設定） */
      .replay-river-tile-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        transform-origin: center center;
        transform: rotate(var(--river-tile-rotate, 0deg));
      }

      /* 河（捨て牌）SVG — Phase 2-B / 濃紺はコンテナのみ（牌・img へは掛けない） */
      .discard-river .discard-tile-wrap.discard-riichi {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 32px;
        box-sizing: border-box;
        outline: 2px solid #b71c1c;
        outline-offset: 1px;
        border-radius: 4px;
      }
      .discard-river .replay-tile-btn.discard-tile {
        padding: 0;
        border: none;
        background: transparent;
        line-height: 0;
        border-radius: 3px;
        vertical-align: bottom;
      }
      .discard-river .replay-tile-btn.discard-tile.discard-tile-fallback {
        min-width: 26px;
        height: 32px;
        font-size: 10px;
        padding: 0 4px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.18);
      }
      .discard-river .discard-tile .replay-tile-svg-img,
      .discard-river .discard-tile-img {
        display: block;
        width: 30px;
        height: auto;
        max-height: 42px;
        object-fit: contain;
        background: #fff;
        pointer-events: none;
        user-select: none;
      }
      .discard-river .discard-tile.discard-tsumogiri .replay-tile-svg-img,
      .discard-river .discard-tile.discard-tsumogiri.discard-tile-fallback {
        opacity: 0.78;
      }
      .discard-river .discard-tile-wrap.discard-riichi .discard-tile.discard-tile-fallback {
        min-width: 32px;
        height: 26px;
      }

      /* 現在打牌（河・自分手牌）— Phase 2-A */
      #replay_panel .replay-river .tile.tile-cur:not(.tile-hit),
      #replay_panel .discard-river .discard-tile.tile-cur:not(.tile-hit),
      #replay_panel .replay-self-hand-dock .replay-hand-row .tile-cur:not(.tile-hit),
      #replay_panel .replay-self-hand-dock .replay-hand-row .replay-tile-btn.replay-tile-svg.tile-cur:not(.tile-hit) {
        position: relative;
        z-index: 2;
        outline: 2px solid #ff9800;
        outline-offset: 1px;
        box-shadow:
          0 3px 8px rgba(0, 0, 0, 0.22),
          0 0 10px rgba(255, 152, 0, 0.42);
        transition:
          box-shadow 0.15s ease,
          outline-color 0.15s ease;
      }
      #replay_panel .replay-river-tile-wrapper.replay-river-tile-wrapper--cur {
        position: relative;
        z-index: 2;
        transform: rotate(var(--river-tile-rotate, 0deg)) translateY(-2px);
        transition: transform 0.15s ease;
      }
      #replay_panel .replay-river .tile.tile-hit.tile-cur,
      #replay_panel .discard-river .discard-tile.tile-hit.tile-cur,
      #replay_panel .replay-self-hand-dock .replay-hand-row .tile-hit.tile-cur,
      #replay_panel .replay-self-hand-dock .replay-hand-row .replay-tile-btn.replay-tile-svg.tile-hit.tile-cur {
        transition:
          box-shadow 0.15s ease,
          outline-color 0.15s ease;
      }

      button.replay-tile-btn {
        cursor: default;
        margin: 0;
        font: inherit;
        appearance: none;
        -webkit-appearance: none;
      }
      button.replay-tile-btn:disabled {
        opacity: 1;
        color: inherit;
      }

      /* 自分手牌帯：濃紺は ::before のみ。牌行は flex のみ（SVG へ background しない） */
      .replay-self-hand-dock .replay-hand-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1px;
        align-items: flex-end;
        justify-content: center;
        margin: 0 auto;
        min-height: 32px;
        width: fit-content;
        max-width: min(var(--replay-mat-visual-max, 940px), 100%);
        padding: 1px 2px 1px;
        box-sizing: border-box;
        position: relative;
        isolation: isolate;
        background: transparent;
        border: none;
        border-radius: 0;
      }
      .replay-self-hand-dock .replay-hand-row::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: 0 0 6px 6px;
        background-color: #0b3d6e;
        border: 1px solid #082f57;
        border-top: none;
        pointer-events: none;
      }
      .replay-self-hand-dock .replay-hand-row > * {
        position: relative;
        z-index: 1;
      }
      .replay-self-hand-dock .replay-hand-row .replay-tile-btn.tile {
        box-sizing: border-box;
        min-width: 26px;
        width: auto;
        height: 32px;
        padding: 0 4px;
        border-radius: 3px;
        font-size: 10px;
        font-weight: 600;
        flex: 0 0 auto;
      }
      /* 自分の打牌 step のみ：ツモ牌（文字牌 fallback 用） */
      .replay-self-hand-dock .replay-hand-row .replay-tile-btn.tile-draw-tsumo {
        outline: 2px solid #90caf9;
        outline-offset: 1px;
        z-index: 4;
      }
      /* 自分手牌のみ SVG 牌（Phase1-2）— 白牌面維持、filter 等は掛けない */
      .replay-self-hand-dock .replay-hand-row .replay-tile-btn.replay-tile-svg {
        padding: 0;
        border: none;
        background-color: #fff;
        min-width: 0;
        width: auto;
        height: auto;
        line-height: 0;
        border-radius: 3px;
        box-shadow: none;
        vertical-align: bottom;
      }
      .replay-self-hand-dock .replay-hand-row .replay-tile-svg-img {
        display: block;
        width: var(--replay-hand-svg-width);
        height: auto;
        max-height: var(--replay-hand-svg-max-height);
        object-fit: contain;
        background-color: #fff;
        pointer-events: none;
        user-select: none;
      }
      .replay-self-hand-dock .replay-hand-row .replay-tile-btn.replay-tile-svg.tile-draw-tsumo {
        outline: 2px solid #1565c0;
        outline-offset: 2px;
        box-shadow: none;
      }

      /* 簡易牌（画像なし・将来差し替え用クラス） */
      .tile {
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        height: 34px;
        padding: 2px 6px;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.18);
        font-size: 12px;
        font-weight: 600;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        color: #222;
      }
      .tile-m { background: #ffcdd2; border-color: #e57373; }
      .tile-p { background: #bbdefb; border-color: #64b5f6; }
      .tile-s { background: #c8e6c9; border-color: #81c784; }
      .tile-honor { background: #eceff1; border-color: #b0bec5; color: #37474f; }

      .tile-hit {
        outline: 2px solid #c62828;
        outline-offset: 1px;
        z-index: 2;
      }
      .tile-cur:not(.tile-hit) {
        outline: 2px solid #f9a825;
        outline-offset: 1px;
        z-index: 1;
      }
      .tile-hit.tile-cur {
        outline: 2px solid #c62828;
        outline-offset: 1px;
        box-shadow: 0 0 0 3px rgba(249, 168, 37, 0.95);
        z-index: 3;
      }

      /* 赤5（最優先で判別） */
      .tile-aka {
        color: #b71c1c !important;
        font-weight: 800 !important;
        background: #ffebee !important;
      }
      /* リーチ宣言牌（ヒット/カレントより枠を優先） */
      .tile-rch-decl {
        outline: 3px solid #b71c1c !important;
        outline-offset: 0;
        z-index: 8;
      }
      /* 鳴き牌（他家から取った1枚） */
      .tile-claim {
        outline: 3px solid #ef6c00 !important;
        outline-offset: 0;
        z-index: 7;
      }

      /* 中央卓情報（局面把握専用・NAGA系シンプル） */
      .replay-table-center {
        box-sizing: border-box;
        width: 100%;
        padding: 10px 10px 9px;
        border-radius: 7px;
        background: #0b3d6e;
        color: #fff;
        text-align: center;
        line-height: 1.38;
      }
      .replay-table-center-kmeta {
        margin: 0 0 8px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.03em;
      }
      .replay-table-center-score-mat {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 7px 6px;
        align-items: center;
        margin: 0 0 9px;
      }
      .replay-tc-seat {
        font-size: 12px;
        color: #e3f2fd;
      }
      .replay-tc-seat .replay-tc-score {
        display: block;
        margin-top: 1px;
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        font-variant-numeric: tabular-nums;
      }
      .replay-tc-seat--north { grid-column: 2; grid-row: 1; }
      .replay-tc-seat--west { grid-column: 1; grid-row: 2; text-align: right; }
      .replay-tc-seat--east { grid-column: 3; grid-row: 2; text-align: left; }
      .replay-tc-seat--south { grid-column: 2; grid-row: 3; }
      .replay-tc-oya {
        margin-left: 4px;
        font-size: 11px;
        font-weight: 700;
        color: #ffeb3b;
      }
      .replay-table-center-dora {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0 0 6px;
        font-size: 11px;
      }
      .replay-table-center-dora-label {
        color: #b3e5fc;
        font-weight: 600;
      }
      .replay-table-center-dora-tiles {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 4px;
        align-items: flex-end;
        justify-content: center;
      }
      .replay-table-center .replay-tile-btn.replay-tile-svg {
        padding: 0;
        border: none;
        background-color: #fff;
        line-height: 0;
        border-radius: 3px;
      }
      .replay-table-center .replay-tile-svg-img {
        display: block;
        width: 34px;
        height: auto;
        background-color: #fff;
      }
      .replay-table-center-wall {
        font-size: 12px;
        color: #b3e5fc;
      }

      .replay-bottom-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        padding: 6px 8px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #fcfcfc;
      }
      .replay-bottom-bar--dock {
        flex-direction: column;
        align-items: stretch;
        gap: 1px;
        padding: 2px 3px;
        background: rgba(252, 252, 252, 0.88);
        border: 1px solid rgba(189, 189, 189, 0.85);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
      }
      .replay-bottom-bar--dock button {
        padding: 2px 4px;
        font-size: 9px;
        width: 100%;
      }
      .replay-bottom-bar--dock .replay-step-readout {
        font-size: 9px;
        text-align: center;
        line-height: 1.28;
        margin: 0;
      }
      .replay-bottom-bar--dock .replay-slider-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        font-size: 9px;
        margin: 0;
      }
      .replay-bottom-bar--dock .replay-slider-wrap input[type="range"] {
        width: 100% !important;
        max-width: 100%;
      }
      .replay-bottom-bar .replay-step-readout {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 11px;
        color: #333;
      }
      .replay-slider-wrap {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
      }
      .replay-loading {
        padding: 12px;
        text-align: center;
        color: #666;
        font-size: 12px;
        border: 1px dashed #ccc;
        border-radius: 6px;
        margin-bottom: 6px;
      }
      .replay-mat-wrap.replay-mat-wrap--loading .replay-mat {
        display: none !important;
      }
      .replay-mat-wrap:not(.replay-mat-wrap--loading) .replay-mat {
        display: grid;
      }

      .cond-group {
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 12px;
      }
      .cond-group-title {
        font-weight: bold;
        margin-bottom: 6px;
      }
      /* Open-category condition rows: label(+PLUS) | control */
      #conditions_search_card .cond-category-body > .row {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        gap: 8px;
      }
      #conditions_search_card .cond-category-body > .row > label:has(> select),
      #conditions_search_card .cond-category-body > .row > label:has(> input[type="number"]):not(:has(> input[type="checkbox"])),
      #conditions_search_card .cond-category-body > .row > label:has(> input[type="text"]) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        column-gap: 10px;
        row-gap: 4px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
      }
      #conditions_search_card .cond-category-body > .row > label:has(> select) > select,
      #conditions_search_card .cond-category-body > .row > label:has(> input[type="text"]) > input[type="text"],
      #conditions_search_card .cond-category-body > .row > label:has(> input[type="number"]):not(:has(> input[type="number"] ~ input[type="number"])) > input[type="number"] {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        min-width: 0;
        max-width: 100%;
      }
      #conditions_search_card .cond-category-body > .row > label > .cond-paid-badge {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        align-self: center;
        margin-right: 0;
      }
      /* Range inside one label: keep name(+PLUS) left, inputs as a trailing group */
      #conditions_search_card .cond-category-body > .row > label:has(> input[type="number"] ~ input[type="number"]) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 8px;
        row-gap: 4px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      #conditions_search_card .cond-category-body > .row > label:has(> input[type="number"] ~ input[type="number"]) > input[type="number"]:first-of-type {
        margin-left: auto;
      }
      #conditions_search_card .cond-category-body select {
        width: 11.5rem;
        max-width: 100%;
        box-sizing: border-box;
      }
      #conditions_search_card .cond-category-body input[type="number"] {
        width: 4.5rem;
        min-width: 4rem;
        max-width: 100%;
        box-sizing: border-box;
      }
      .score-range-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      .score-range-row .cond-label-text,
      .diff-top-ge-row .cond-label-text,
      .diff-top-ge-row .diff-top-ge-label,
      .row .cond-label-text {
        white-space: nowrap;
        flex: 1 1 auto;
        min-width: 0;
      }
      .row:has(> .cond-paid-item),
      .score-range-row:has(.cond-paid-item),
      .diff-top-ge-row:has(.cond-paid-item) {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 4px 6px;
      }
      .score-range-row input[type="number"] {
        width: 5.5rem;
        flex: 0 0 auto;
        max-width: 42%;
        box-sizing: border-box;
      }
      .score-range-row > input[type="number"]:first-of-type {
        margin-left: auto;
      }
      .score-range-row .score-range-label,
      .score-range-row .score-range-sep {
        white-space: nowrap;
        flex-shrink: 0;
      }
      .diff-top-ge-row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      .diff-top-ge-row .diff-top-ge-label {
        white-space: nowrap;
      }
      .diff-top-ge-row > span[aria-hidden="true"] {
        margin-left: auto;
        flex-shrink: 0;
      }
      .diff-top-ge-row input[type="number"] {
        width: 4.5rem;
        flex: 0 0 auto;
        min-width: 4rem;
        box-sizing: border-box;
      }
      #conditions_search_card .cond-category-body > .row:has(> .cond-label-text):not(.score-range-row):not(.diff-top-ge-row) {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }
      #conditions_search_card .cond-category-body > .row:has(> .cond-label-text):not(.score-range-row):not(.diff-top-ge-row) > span[aria-hidden="true"] {
        margin-left: auto;
        flex-shrink: 0;
      }
      #conditions_search_card .cond-category-body > .row:has(> label > input[type="checkbox"]) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
      }
      #conditions_search_card .cond-category-body > .row > label:has(> input[type="checkbox"]) {
        display: inline-flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        max-width: 100%;
      }
      .cond-fieldset {
        margin-bottom: 12px;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 6px;
        min-width: 0;
        max-width: 100%;
      }
      .cond-fieldset legend {
        font-weight: bold;
        padding: 0 6px;
      }
      .cond-category-fieldset {
        padding: 0;
        margin-bottom: 5px;
        border-color: var(--cond-border, #e0e0e0);
        border-left: 3px solid var(--haidex-primary, #15803d);
        overflow: hidden;
      }
      .cond-category-fieldset--open {
        margin-bottom: 10px;
      }
      .cond-category-fieldset > legend {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 42px;
        padding: 0 10px;
        margin: 0;
        box-sizing: border-box;
        border-bottom: 1px solid var(--cond-border, #e0e0e0);
        background: var(--cond-surface, #fff);
        border-left: 3px solid transparent;
      }
      .cond-category-fieldset--open > legend {
        background: color-mix(in srgb, var(--haidex-very-light, #f0f8f2) 58%, #fff);
        border-left-color: var(--haidex-primary, #15803d);
      }
      @supports not (background: color-mix(in srgb, #000 10%, #fff)) {
        .cond-category-fieldset--open > legend {
          background: #eef6f0;
        }
      }
      .cond-category-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 42px;
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        font: inherit;
        font-weight: 700;
        font-size: 14px;
        text-align: left;
        cursor: pointer;
        color: inherit;
      }
      .cond-category-fieldset > legend:hover,
      .cond-category-toggle:hover {
        background: var(--cond-surface-subtle, #f7f8fa);
      }
      .cond-category-toggle:focus-visible {
        outline: 2px solid var(--cond-focus, #1a73e8);
        outline-offset: -2px;
        border-radius: 4px;
      }
      .cond-category-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        flex-shrink: 0;
        font-size: 0.75em;
        line-height: 1;
        color: var(--cond-muted, #666);
      }
      .cond-category-title {
        flex: 1 1 auto;
        min-width: 0;
        line-height: 1.3;
        font-weight: 700;
        color: var(--haidex-text, #111827);
      }
      .cond-category-toggle .cond-paid-category {
        margin-left: auto;
      }
      .cond-category-active-badge {
        font-size: 11px;
        font-weight: normal;
        color: #1565c0;
        background: #e3f2fd;
        border: 1px solid #90caf9;
        border-radius: 4px;
        padding: 1px 6px;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .cond-plan-guide {
        margin: 0 0 10px;
        padding: 8px 10px;
        font-size: 12px;
        line-height: 1.5;
        color: #546e7a;
        background: #f5f7f8;
        border: 1px solid #e2e6e9;
        border-radius: 6px;
      }
      .cond-plan-guide p {
        margin: 0 0 4px;
      }
      .cond-plan-guide .cond-plan-billing-link {
        display: inline-block;
        margin-top: 2px;
        margin-left: 0;
      }
      body.cond-plan-paid-access .cond-plan-guide {
        display: none !important;
      }
      .cond-plan-billing-link {
        margin-left: 4px;
        white-space: nowrap;
      }
      /* Pre-green-theme PLUS badge (091c9c9^) */
      .cond-paid-badge {
        display: inline-flex;
        align-items: center;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        color: #5d4037;
        background: #f3eeeb;
        border: 1px solid #a1887f;
        border-radius: 4px;
        padding: 1px 6px;
        white-space: nowrap;
        vertical-align: middle;
        flex-shrink: 0;
      }
      #conditions_search_card .cond-paid-control-locked,
      #conditions_search_card .cond-paid-control-locked:hover {
        background: #f3f4f6;
        border-color: #c5c9ce;
        color: #444;
        cursor: not-allowed;
        box-shadow: none;
      }
      #conditions_search_card input.cond-paid-control-locked[type="checkbox"] {
        accent-color: #9aa0a6;
      }
      #conditions_search_card .cond-paid-control-locked:focus-visible {
        outline: 2px solid var(--cond-focus, #1a73e8);
        outline-offset: 2px;
      }
      #conditions_search_card .cond-plan-options-popover {
        display: block;
        flex: 1 1 100%;
        width: 100%;
        max-width: 280px;
        margin: 6px 0 4px;
        padding: 8px 10px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #d0d5db;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        font-size: 12px;
        line-height: 1.4;
        color: #333;
        z-index: 6;
      }
      #conditions_search_card .cond-plan-options-popover-title {
        font-weight: 600;
        font-size: 12px;
        margin: 0 0 4px;
      }
      #conditions_search_card .cond-plan-options-list {
        list-style: none;
        margin: 4px 0;
        padding: 0;
        max-height: 180px;
        overflow-y: auto;
      }
      #conditions_search_card .cond-plan-options-group {
        margin: 4px 0;
      }
      #conditions_search_card .cond-plan-options-group-label {
        font-weight: 600;
        color: #555;
        margin: 2px 0;
      }
      #conditions_search_card .cond-plan-options-item {
        padding: 2px 0;
        cursor: default;
        user-select: text;
      }
      #conditions_search_card .cond-plan-options-item:hover {
        background: transparent;
      }
      #conditions_search_card .cond-plan-options-message {
        margin: 6px 0 0;
        font-size: 11px;
        color: #555;
      }
      @media (max-width: 480px) {
        #conditions_search_card .cond-plan-options-popover {
          max-width: 100%;
        }
      }
      .cond-paid-category {
        margin-left: 4px;
      }
      .cond-paid-subgroup {
        margin-left: 6px;
      }
      .cond-paid-item {
        margin-right: 6px;
      }
      label:has(> select),
      label:has(> input),
      label:has(.cond-paid-item) {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
        max-width: 100%;
      }
      /* Category-body label/control grid is defined above (before .cond-fieldset). */
      .cond-category-body {
        padding: 10px;
        background: var(--cond-surface, #fff);
      }
      .cond-category-body[hidden] {
        display: none !important;
      }
      #conditions_search_card select,
      #conditions_search_card input[type="number"],
      #conditions_search_card input[type="text"],
      #conditions_search_card input[type="date"],
      .results-card select,
      .results-card input[type="number"],
      .results-card input[type="text"],
      .results-card input[type="date"] {
        min-height: 32px;
        box-sizing: border-box;
        border: 1px solid #c8c8c8;
        border-radius: 4px;
        padding: 4px 8px;
        font: inherit;
        font-size: 14px;
        background: #fff;
        max-width: 100%;
      }
      #conditions_search_card input[type="checkbox"],
      .results-card input[type="checkbox"] {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
      }
      .cond-subgroup-title {
        font-size: 13px;
        font-weight: 600;
        color: #555;
        margin: 10px 0 6px;
        padding-bottom: 4px;
        border-bottom: 1px solid #e8e8e8;
      }
      .cond-subgroup-title:first-child {
        margin-top: 0;
      }
      .cond-card-toolbar-section {
        margin-bottom: 12px;
        font-size: 13px;
      }
      .cond-card-toolbar-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
      }
      .cond-card-toolbar-label {
        font-weight: 600;
        white-space: nowrap;
      }
      .cond-card-hint {
        margin: 4px 0 0;
        font-size: 11px;
        line-height: 1.4;
      }
      .cond-manage-toggle,
      .cond-card-section-toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        border: 1px solid #d0d0d0;
        border-radius: 4px;
        background: #f7f7f7;
        font: inherit;
        font-size: 12px;
        color: #555;
        cursor: pointer;
      }
      /* 比較・ベンチマーク分析: 補助セクションより1段強い入口（primary CTA ほど強くない） */
      .results-compare-group {
        /* 両タブ共通 typography（現行比 約+3px。階層は維持） */
        --cmp-fs-tab: 18px;
        --cmp-fs-label: 18px;
        --cmp-fs-control: 17px;
        --cmp-fs-chip: 15px;
        --cmp-fs-table: 20px;
        --cmp-fs-title: 20px;
        --cmp-fs-meta: 17px;
        --cmp-fs-hint: 16px;
        --cmp-fs-btn: 18px;
        --cmp-fs-sublabel: 15px;
        --cmp-fs-status: 17px;
        --cmp-w-bench: 640px;
        --cmp-w-condition: 760px;
        --cmp-w-ab: 880px;
        --cmp-w-ab-side: 350px;
        /* 局検索14列をデスクトップで横スクロールなしに収める（table≈960 + panel padding） */
        --cmp-w-shell: 1040px;
        --cmp-w-panel-stats: 720px;
        --cmp-w-panel-condition: 900px;
        --cmp-w-panel-kyoku: 1020px;
        --cmp-w-kyoku: 1020px;
      }
      .results-compare-group-toggle {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 12px 14px;
        border: 1.5px solid var(--haidex-border-strong, var(--haidex-primary, #15803d));
        border-radius: 8px;
        background: var(--haidex-very-light, #f0f8f2);
        color: var(--haidex-text, #111827);
        font: inherit;
        font-size: var(--cmp-fs-label);
        font-weight: 600;
        line-height: 1.35;
        cursor: pointer;
        text-align: left;
        transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
      }
      .results-compare-group-toggle .cond-card-section-title {
        font-size: var(--cmp-fs-label);
        font-weight: 700;
        color: var(--haidex-primary, #15803d);
      }
      .results-compare-group-toggle .cond-panel-icon {
        color: var(--haidex-primary, #15803d);
        font-size: var(--cmp-fs-sublabel);
        flex: 0 0 auto;
      }
      .results-compare-group-toggle:hover {
        background: color-mix(in srgb, var(--haidex-primary, #15803d) 12%, #fff);
        border-color: var(--haidex-primary, #15803d);
        box-shadow: 0 1px 0 color-mix(in srgb, var(--haidex-primary, #15803d) 18%, transparent);
      }
      .results-compare-group-toggle:focus-visible {
        outline: 2px solid var(--haidex-primary, #15803d);
        outline-offset: 2px;
      }
      .results-compare-group-toggle[aria-expanded="true"] {
        background: color-mix(in srgb, var(--haidex-primary, #15803d) 14%, #fff);
        border-color: var(--haidex-primary, #15803d);
        box-shadow: inset 3px 0 0 var(--haidex-primary, #15803d);
      }
      @supports not (background: color-mix(in srgb, #000 10%, #fff)) {
        .results-compare-group-toggle:hover,
        .results-compare-group-toggle[aria-expanded="true"] {
          background: #e8f5ec;
        }
      }
      .cond-manage-body {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
        padding: 8px 10px;
        border: 1px solid #e8e8e8;
        border-radius: 6px;
        background: #fafafa;
      }
      .cond-manage-body button {
        font-size: 12px;
      }
      .cond-preset-panel-fieldset {
        padding: 0;
      }
      .cond-preset-panel-fieldset > legend {
        display: block;
        width: 100%;
        padding: 8px;
        margin: 0;
      }
      .cond-preset-panel-body {
        padding: 8px;
        padding-top: 0;
      }
      .cond-card-collapsible-section {
        margin-top: 16px;
        padding-top: 12px;
        border-top: 1px solid #ececec;
      }
      .cond-card-section-body {
        margin-top: 8px;
      }
      .cond-search-actions {
        margin-top: 12px;
        margin-bottom: 12px;
        padding: 12px 0 10px;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #ececec;
      }
      .query-action-primary {
        margin-bottom: 10px;
      }
      .query-action-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
      }
      .query-action-status {
        margin-top: 6px;
        font-size: 12px;
        color: #78909c;
      }
      .cond-search-actions-heading {
        font-size: 14px;
        font-weight: 700;
        margin: 0 0 8px;
        color: #222;
        letter-spacing: 0.01em;
      }
      .cond-search-buttons {
        margin-top: 10px;
        align-items: center;
        gap: 8px;
      }
      .cond-btn-primary,
      .cond-btn-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0 14px;
        border-radius: 6px;
        cursor: pointer;
        line-height: 1.2;
      }
      .cond-btn-primary {
        font-weight: 700;
        font-size: 14px;
        color: #fff;
        background: var(--haidex-action-primary, #2f5f9f);
        border: 1px solid var(--haidex-action-primary-hover, #1e4478);
      }
      .cond-btn-primary:hover {
        background: var(--haidex-action-primary-hover, #1e4478);
        border-color: var(--haidex-action-primary-hover, #1e4478);
      }
      .cond-btn-primary:focus-visible,
      .cond-btn-secondary:focus-visible {
        outline: 2px solid var(--haidex-primary, #15803d);
        outline-offset: 2px;
      }
      .cond-btn-secondary {
        font-size: 13px;
        font-weight: 500;
        color: var(--haidex-text, #111827);
        background: var(--cond-surface, #fff);
        border: 1px solid var(--haidex-border, #d8e1dc);
      }
      .cond-btn-secondary:hover {
        background: var(--haidex-very-light, #f0f8f2);
        border-color: var(--haidex-border-green, #c9dfd0);
      }
      .query-action-sticky {
        position: sticky;
        bottom: 0;
        z-index: 10;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin: 0 -12px 8px;
        padding: 8px 12px;
        background: var(--cond-surface, #fff);
        border-top: 1px solid var(--cond-border, #e0e0e0);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
      }
      .query-action-sticky--hidden {
        display: none;
      }
      .query-action-sticky-summary {
        font-size: 12px;
        font-weight: 600;
        color: #333;
        white-space: nowrap;
      }
      .query-action-sticky-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
      }
      #conditions_search_card {
        padding-bottom: 12px;
      }
      #conditions_search_card.cond-sticky-active {
        padding-bottom: 3.5rem;
      }
      .cond-search-actions-heading {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 6px;
        color: #333;
      }
      .cond-search-buttons {
        margin-top: 8px;
        align-items: center;
        gap: 8px;
      }
      .cond-btn-primary {
        font-weight: 600;
        padding: 0.55rem 1.15rem;
        font-size: 14px;
        color: #fff;
        background: var(--haidex-action-primary, #2f5f9f);
        border: 1px solid var(--haidex-action-primary-hover, #1e4478);
        border-radius: 6px;
        cursor: pointer;
      }
      .cond-btn-primary:hover:not(:disabled) {
        background: var(--haidex-action-primary-hover, #1e4478);
      }
      .cond-btn-primary:disabled {
        opacity: 0.55;
        cursor: default;
      }
      .cond-btn-secondary {
        font-size: 13px;
        font-weight: 500;
        color: var(--haidex-text, #111827);
        background: #fff;
        border: 1px solid var(--haidex-border, #d8e1dc);
        border-radius: 6px;
        padding: 0.5rem 0.95rem;
        cursor: pointer;
      }
      .cond-btn-secondary:hover:not(:disabled) {
        background: var(--haidex-very-light, #f0f8f2);
        border-color: var(--haidex-border-green, #c9dfd0);
      }
      .cond-btn-primary:disabled,
      .cond-btn-secondary:disabled,
      #conditions_search_card button:disabled,
      .results-card button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .cond-panel-icon {
        display: inline-block;
        width: 1.1em;
        flex-shrink: 0;
        font-size: 0.85em;
      }
      .preset-fieldset .preset-save-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-end;
        margin-bottom: 10px;
      }
      .preset-fieldset .preset-save-row label {
        flex: 1 1 160px;
      }
      .preset-fieldset input[type="text"] {
        width: 100%;
        max-width: 280px;
      }
      .preset-table-wrap {
        overflow-x: auto;
        max-height: 280px;
        overflow-y: auto;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
      }
      .preset-table-wrap table {
        font-size: 12px;
      }
      .preset-table-wrap td {
        vertical-align: middle;
      }
      .preset-actions {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .preset-name-edit-input {
        width: 100%;
        max-width: 220px;
        font-size: 12px;
      }

      .active-condition-summary {
        font-size: 12px;
        line-height: 1.45;
        margin-bottom: 2px;
        color: #555;
      }
      .active-condition-count {
        margin: 0 0 6px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        color: #333;
      }
      .active-condition-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: flex-start;
        margin: 0;
        max-width: 100%;
      }
      .active-condition-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        box-sizing: border-box;
        max-width: 100%;
        font-size: 12px;
        line-height: 1.35;
        padding: 3px 7px;
        border-radius: 4px;
        background: #f3f4f6;
        border: 1px solid #e2e4e8;
        color: #333;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
      }
      .active-condition-none {
        margin: 0;
        font-size: 12px;
        line-height: 1.4;
      }

      .compare-diff-positive {
        color: #1b5e20;
      }
      .compare-diff-negative {
        color: #b71c1c;
      }
      .compare-diff-zero {
        color: #666;
      }

      /* --- 比較・ベンチマーク分析タブ --- */
      .compare-analysis-tablist {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        margin: 0 0 12px;
        max-width: var(--cmp-w-shell);
        overflow-x: visible;
        border-bottom: 1px solid var(--haidex-border, #d8e1dc);
        scrollbar-width: none;
      }
      .compare-analysis-tablist::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }
      .compare-analysis-tab {
        flex: 0 1 auto;
        min-width: max-content;
        margin: 0;
        padding: 8px 12px;
        border: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        background: transparent;
        color: var(--cond-muted, #555);
        font-size: var(--cmp-fs-tab);
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
        line-height: 1.3;
      }
      .compare-analysis-tab:hover {
        color: var(--haidex-text, #111827);
        background: var(--haidex-very-light, #f0f8f2);
      }
      .compare-analysis-tab[aria-selected="true"] {
        color: var(--haidex-primary, #15803d);
        font-weight: 700;
        border-bottom-color: var(--haidex-primary, #15803d);
        background: transparent;
      }
      .compare-analysis-tab:focus-visible {
        outline: 2px solid var(--haidex-primary, #15803d);
        outline-offset: 2px;
      }
      .compare-analysis-tabpanel[hidden] {
        display: none !important;
      }
      .compare-analysis-panel {
        margin: 0;
        padding: 0;
        background: transparent;
        border: none;
        max-width: 100%;
      }
      .compare-panel-content {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 10px 12px 12px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--haidex-very-light, #f0f8f2) 45%, #fff);
        border: 1px solid color-mix(in srgb, var(--haidex-border, #d8e1dc) 70%, transparent);
      }
      @supports not (background: color-mix(in srgb, #000 10%, #fff)) {
        .compare-panel-content {
          background: #f5faf6;
          border-color: var(--haidex-border, #d8e1dc);
        }
      }
      .compare-panel-content--stats {
        max-width: var(--cmp-w-panel-stats);
      }
      .compare-panel-content--condition {
        max-width: var(--cmp-w-panel-condition);
      }
      .compare-panel-content--kyoku {
        max-width: var(--cmp-w-panel-kyoku);
      }
      .compare-panel-content > .cond-card-hint {
        margin: 0 0 8px;
      }
      .compare-analysis-actions {
        margin: 10px 0 8px;
      }
      .compare-analysis-status {
        font-size: var(--cmp-fs-status);
        margin-bottom: 6px;
        min-height: 0;
      }
      .compare-analysis-error {
        font-size: var(--cmp-fs-status);
        margin-bottom: 6px;
        color: #b71c1c;
      }
      .compare-field-label {
        font-size: var(--cmp-fs-label);
        font-weight: 600;
        color: #333;
        margin-right: 6px;
      }
      .compare-ab-layout {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 8px 10px;
        margin-bottom: 4px;
        max-width: var(--cmp-w-ab);
      }
      .compare-ab-side {
        flex: 1 1 220px;
        min-width: 0;
        max-width: var(--cmp-w-ab-side);
        padding: 8px 10px;
        background: var(--haidex-very-light, #f0f8f2);
        border-radius: 6px;
        border: 1px solid var(--haidex-border, #d8e1dc);
      }
      .compare-ab-label {
        font-size: var(--cmp-fs-sublabel);
        font-weight: 700;
        color: var(--haidex-primary, #15803d);
        margin-bottom: 6px;
      }
      .compare-ab-select-label {
        display: block;
      }
      .compare-ab-select-label select {
        width: 100%;
        max-width: 100%;
        font-size: var(--cmp-fs-control);
      }
      .compare-ab-vs {
        flex: 0 0 auto;
        align-self: center;
        font-size: var(--cmp-fs-control);
        font-weight: 800;
        letter-spacing: 0.04em;
        color: var(--haidex-primary, #15803d);
        padding: 2px 0;
      }
      .compare-results-names {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
        margin: 8px 0 0;
        max-width: var(--cmp-w-condition);
      }
      .compare-results-name-block {
        min-width: 0;
        flex: 1 1 160px;
        max-width: 360px;
      }
      .compare-results-name-label {
        font-size: var(--cmp-fs-sublabel);
        font-weight: 700;
        color: #333;
        margin-bottom: 4px;
      }
      .compare-results-chips {
        margin: 0;
        gap: 4px;
      }
      .compare-results-chips .active-condition-tag,
      .benchmark-compare-conditions-chips .active-condition-tag {
        font-size: var(--cmp-fs-chip);
        padding: 2px 6px;
        background: color-mix(in srgb, var(--haidex-very-light, #f0f8f2) 70%, #fff);
        border-color: var(--haidex-border, #d8e1dc);
        color: #445;
      }
      .compare-bench-target-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        margin-bottom: 8px;
        max-width: var(--cmp-w-bench);
      }
      .compare-bench-target-label {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
      }
      .compare-bench-target-label select {
        font-size: var(--cmp-fs-control);
        max-width: min(100%, 280px);
      }
      .compare-bench-scope-btn {
        min-height: 34px;
        padding: 0 10px;
        font-size: var(--cmp-fs-control);
        font-weight: 500;
      }
      .compare-bench-scope-btn .scope-panel-icon {
        margin-right: 4px;
        font-size: var(--cmp-fs-sublabel);
      }
      #benchmark_scope_panel {
        margin: 0 0 4px;
        padding: 0;
        border: none;
        background: transparent;
        max-width: var(--cmp-w-bench);
      }
      #benchmark_scope_panel_body:not([hidden]) {
        margin-top: 8px;
        padding: 10px 12px;
        border: 1px solid var(--haidex-border, #d8e1dc);
        border-radius: 6px;
        background: #fff;
      }
      .benchmark-compare-vs-title {
        margin: 0 0 4px;
        font-size: var(--cmp-fs-title);
        font-weight: 700;
        color: var(--haidex-text, #111827);
        line-height: 1.35;
      }
      .benchmark-compare-meta-stats {
        margin: 0 0 6px;
        font-size: var(--cmp-fs-meta);
        color: #555;
        line-height: 1.4;
      }
      .benchmark-compare-conditions-chips {
        margin: 0 0 8px;
        gap: 4px;
      }
      .compare-hits-section {
        margin-top: 14px;
        padding-top: 10px;
        border-top: 1px solid var(--haidex-border, #d8e1dc);
        max-width: var(--cmp-w-shell);
      }
      .compare-hits-section:first-of-type {
        margin-top: 8px;
        padding-top: 0;
        border-top: none;
      }
      .compare-hits-section[hidden] {
        display: none !important;
      }
      .compare-hits-nav-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin: 0 0 8px;
      }
      .haidex-jump-link {
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        color: color-mix(in srgb, var(--haidex-primary, #15803d) 72%, #64748b);
        font: inherit;
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
        text-underline-offset: 2px;
        cursor: pointer;
        line-height: 1.4;
      }
      .haidex-jump-link:hover,
      .haidex-jump-link:focus-visible {
        color: var(--haidex-primary, #15803d);
        text-decoration: underline;
      }
      .haidex-jump-link:focus-visible {
        outline: 2px solid var(--haidex-primary, #15803d);
        outline-offset: 2px;
        border-radius: 2px;
      }
      .haidex-jump-link[hidden] {
        display: none !important;
      }
      .compare-hits-header-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        margin: 0 0 6px;
        min-width: 0;
      }
      .compare-hits-collapse-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        margin: 0;
        padding: 0;
        border: 1px solid var(--haidex-border, #d8e1dc);
        border-radius: 4px;
        background: #fff;
        color: #334;
        font: inherit;
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
      }
      .compare-hits-collapse-btn:hover {
        background: var(--haidex-very-light, #f0f8f2);
      }
      .compare-hits-collapse-btn[hidden] {
        display: none !important;
      }
      .compare-hits-section-title {
        margin: 0;
        font-size: var(--cmp-fs-label);
        font-weight: 700;
        color: #222;
        flex: 0 1 auto;
        min-width: 0;
      }
      .compare-hits-summary {
        font-size: var(--cmp-fs-hint);
        font-weight: 400;
        color: #667;
        margin: 0;
        flex: 1 1 auto;
        min-width: 7em;
        line-height: 1.35;
      }
      .compare-hits-pagination {
        margin: 0 0 6px;
        flex: 0 1 auto;
      }
      .compare-hits-pagination .muted {
        font-size: var(--cmp-fs-hint);
      }
      .compare-hits-results-body[hidden] {
        display: none !important;
      }
      .compare-hits-replay-help {
        margin: 0 0 8px;
        font-size: var(--cmp-fs-hint);
        line-height: 1.4;
        opacity: 0.9;
        color: #666;
      }
      /* 局検索 content wrapper 内は親幅に追従 */
      #compare_panel_benchmark_kyoku .compare-analysis-panel,
      #compare_panel_benchmark_kyoku .compare-hits-section,
      #compare_panel_benchmark_kyoku .compare-bench-target-row {
        max-width: 100%;
      }
      #compare_panel_condition .compare-results-names {
        margin-top: 10px;
      }
      #compare_benchmark_hits_wrap {
        background: #fff;
        border: 1px solid #e6ebf0;
        border-radius: 6px;
        padding: 4px 0;
        box-sizing: border-box;
      }
      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* --- 条件比較テーブル（このブロックのみ。ベンチ比較表へ影響しない） --- */
      #compare_results_wrap {
        overflow-x: auto;
        width: 100%;
        max-width: var(--cmp-w-condition);
        min-width: 0;
        margin-top: 8px;
      }
      #compare_results_tbl {
        width: 100%;
        min-width: 520px;
        max-width: var(--cmp-w-condition);
        table-layout: auto;
        border-collapse: collapse;
        background: #fff;
        font-size: var(--cmp-fs-table);
        line-height: 1.3;
      }
      /* Override global th,td{font-size:12px}; apply table size on cells directly */
      #compare_results_tbl th,
      #compare_results_tbl td {
        border: 1px solid #ddd;
        padding: 6px 5px;
        vertical-align: middle;
        font-size: var(--cmp-fs-table);
        line-height: 1.3;
      }
      #compare_results_tbl thead th {
        background: #f5f5f5;
        font-weight: 600;
        font-size: var(--cmp-fs-table);
      }
      #compare_results_tbl th:first-child,
      #compare_results_tbl td:first-child {
        text-align: left;
        white-space: nowrap;
        min-width: 7em;
      }
      #compare_results_tbl th:not(:first-child),
      #compare_results_tbl td:not(:first-child) {
        text-align: right;
        white-space: nowrap;
        min-width: 4.5em;
      }
      #compare_results_tbl th:last-child,
      #compare_results_tbl td:last-child {
        font-weight: 700;
        font-size: var(--cmp-fs-table);
        background: rgba(21, 128, 61, 0.04);
      }

      /* --- ベンチマーク比較テーブル（このブロックのみ。他テーブルへ影響しない） --- */
      .benchmark-compare-panel {
        max-width: 100%;
      }
      /* 成績比較の結果ブロック: コンテンツ必要幅 + 最小余白 */
      .benchmark-compare-results {
        margin-top: 10px;
        max-width: var(--cmp-w-bench);
        width: 100%;
      }
      #compare_panel_condition .cond-card-hint,
      #compare_panel_benchmark_stats .cond-card-hint {
        font-size: var(--cmp-fs-hint);
      }
      #compare_panel_condition .cond-btn-primary,
      #compare_panel_benchmark_stats .cond-btn-primary {
        font-size: var(--cmp-fs-btn);
        padding-inline: 14px;
      }
      #compare_panel_benchmark_stats .compare-bench-target-label select,
      #compare_panel_benchmark_kyoku .compare-bench-target-label select {
        font-size: var(--cmp-fs-control);
      }
      #benchmark_compare_scroll {
        overflow-x: auto;
        width: 100%;
        max-width: var(--cmp-w-bench);
        -webkit-overflow-scrolling: touch;
      }
      #benchmark_compare_tbl {
        width: 100%;
        max-width: var(--cmp-w-bench);
        min-width: 460px;
        table-layout: fixed;
        border-collapse: collapse;
        background: #fff;
        font-size: var(--cmp-fs-table);
      }
      #benchmark_compare_tbl th,
      #benchmark_compare_tbl td {
        border: 1px solid #ddd;
        padding: 6px 5px;
        vertical-align: middle;
        font-size: var(--cmp-fs-table);
        line-height: 1.3;
      }
      #benchmark_compare_tbl thead th {
        position: sticky;
        top: 0;
        background: #f5f5f5;
        z-index: 1;
        font-weight: 600;
        font-size: var(--cmp-fs-table);
        box-shadow: 0 1px 0 #ccc;
      }
      #benchmark_compare_tbl .benchmark-th-label,
      #benchmark_compare_tbl .benchmark-td-label {
        width: 30%;
        min-width: 100px;
        max-width: none;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: var(--cmp-fs-table);
      }
      #benchmark_compare_tbl .benchmark-th-num,
      #benchmark_compare_tbl .benchmark-td-num {
        width: 22%;
        min-width: 76px;
        max-width: none;
        text-align: right;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
        font-size: var(--cmp-fs-table);
      }
      #benchmark_compare_bench_meta {
        font-size: var(--cmp-fs-meta);
        line-height: 1.4;
        margin: 8px 0 4px;
        color: #555;
        max-width: var(--cmp-w-bench);
      }
      #benchmark_compare_bench_meta .benchmark-compare-meta-line {
        margin: 0;
      }
      #benchmark_compare_bench_meta .benchmark-compare-conditions-line {
        font-size: var(--cmp-fs-hint);
        color: #666;
        margin: 2px 0 0;
        line-height: 1.35;
      }
      #benchmark_compare_tbl .benchmark-th-diff,
      #benchmark_compare_tbl .benchmark-td-diff {
        width: 22%;
        min-width: 76px;
        max-width: none;
        text-align: right;
        font-weight: 700;
        font-size: var(--cmp-fs-table);
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        background: rgba(21, 128, 61, 0.05);
      }

      /* --- ベンチマーク局検索 hit テーブル（metrics の #benchmark_compare_tbl とは別） --- */
      #compare_hits_panel {
        overflow: visible;
        max-width: 100%;
      }
      .compare-hit-wrapper {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        margin-bottom: 12px;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #e8e8e8;
        border-radius: 6px;
        background: #fff;
      }
      .compare-hit-table {
        width: max-content;
        min-width: 100%;
        border-collapse: collapse;
        table-layout: auto;
        font-size: 12px;
        line-height: 1.35;
        background: #fff;
      }
      .compare-hit-table th,
      .compare-hit-table td {
        padding: 6px 8px;
        vertical-align: middle;
        white-space: nowrap;
        border-bottom: 1px solid #eee;
        font-size: 12px;
        line-height: 1.35;
        transform: none;
      }
      .compare-hit-table thead th {
        position: sticky;
        top: 0;
        background: #fafafa;
        z-index: 1;
        box-shadow: 0 1px 0 #e0e0e0;
        font-weight: 600;
      }
      .compare-hit-table tbody tr {
        cursor: pointer;
      }
      .compare-hit-table tbody tr:hover td {
        background: #f5f9ff;
      }

      .hit-replay-col,
      .hit-replay-cell {
        white-space: nowrap;
        width: 88px;
        min-width: 88px;
        max-width: 88px;
        padding: 4px 6px;
        vertical-align: middle;
      }
      .hit-replay-cell {
        background: #f7faff;
      }
      .hit-replay-cell-inner {
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .hit-replay-col {
        font-weight: 600;
        color: #1a4d8f;
      }
      /* normal / compare_main / compare_benchmark 共通（ベンチマーク側見た目を正とする） */
      .hit-replay-open-btn {
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        min-width: 72px;
        font-size: 11px;
        font-weight: 600;
        padding: 4px 8px;
        cursor: pointer;
        border: 1px solid #7eb0e8;
        border-radius: 4px;
        background: #e8f2fc;
        color: #134a82;
        white-space: nowrap;
        line-height: normal;
      }
      .hit-replay-open-btn:hover {
        background: #d4e8fb;
        border-color: #4a8fd4;
      }
      .hit-replay-v3-btn {
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        min-width: 72px;
        font-size: 10px;
        font-weight: 600;
        padding: 3px 6px;
        cursor: pointer;
        border: 1px solid #5a9ea8;
        border-radius: 4px;
        background: #e0f4f7;
        color: #0d4a52;
      }
      .hit-replay-v3-btn:hover {
        background: #c8ecf2;
        border-color: #2e8f9c;
      }
      .hit-replay-v4-btn {
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        min-width: 72px;
        font-size: 10px;
        font-weight: 600;
        padding: 3px 6px;
        cursor: pointer;
        border: 1px solid #7e57c2;
        border-radius: 4px;
        background: #ede7f6;
        color: #4527a0;
      }
      .hit-replay-v4-btn:hover {
        background: #e1d5f5;
        border-color: #5e35b1;
      }
      .data-context-bar {
        border: 1px solid #cfd8dc;
        background: #f5f7f8;
        padding: 8px 10px;
        margin: 0 0 8px;
        font-size: 11px;
        line-height: 1.55;
        color: #37474f;
      }
      .data-context-bar .ctx-row { margin: 0; }
      .data-context-bar .ctx-label { color: #546e7a; }
      .data-context-bar .ctx-id {
        font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
        font-size: 10px;
      }
      .data-context-bar .ctx-row--data {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 6px;
      }
      .data-context-bar .ctx-upload-link {
        margin-left: auto;
        font-size: 10px;
        white-space: nowrap;
      }
      .hit-replay-open-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
      }
      /* 左端 sticky: header intersection を最上位、body sticky は header より下 */
      #hits_tbl_wrap #hits_tbl.kyoku-parent-table thead th.hit-replay-col {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 6;
        background: #f3f6f9;
        box-shadow: 1px 0 0 #e0eaf5;
      }
      #hits_tbl_wrap #hits_tbl.kyoku-parent-table td.hit-replay-cell {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #f7faff;
        box-shadow: 1px 0 0 #e0eaf5;
      }
      #hits_tbl_wrap #hits_tbl.kyoku-parent-table tr.kyoku-parent-row:hover td.hit-replay-cell {
        background: #eef5ff;
      }
      #hits_tbl_wrap #hits_tbl.kyoku-parent-table tr.kyoku-parent-row.is-expanded td.hit-replay-cell {
        background: #e8f1fb;
      }
      #hits_tbl_wrap:not(.hits-detail-view) .hits-compact-only {
        display: inline;
      }
      #hits_tbl_wrap:not(.hits-detail-view) .hits-detail-only {
        display: none;
      }
      #hits_tbl_wrap.hits-detail-view .hits-compact-only {
        display: none;
      }
      #hits_tbl_wrap.hits-detail-view .hits-detail-only {
        display: inline;
      }
      #hits_tbl.kyoku-parent-table .hits-datetime-col,
      #compare_main_hits_tbl.kyoku-parent-table .hits-datetime-col,
      #compare_benchmark_hits_tbl.kyoku-parent-table .hits-datetime-col {
        white-space: nowrap;
      }
      #hits_tbl.kyoku-parent-table .kyoku-parent-rule-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-rule-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-rule-cell {
        white-space: nowrap;
        min-width: 92px;
      }
      #hits_tbl.kyoku-parent-table .kyoku-parent-result-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-result-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-result-cell {
        white-space: nowrap;
        min-width: 72px;
      }
      #hits_tbl.kyoku-parent-table .kyoku-parent-shanten-cell,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-parent-shanten-cell,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-parent-shanten-cell {
        white-space: nowrap;
        min-width: 88px;
        color: #78909c;
        font-weight: 400;
      }
      #hits_tbl.kyoku-parent-table .kyoku-col-group-start,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-col-group-start,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-col-group-start {
        border-inline-start: 1px solid var(--haidex-border-strong, #b7c9bc);
      }
      #hits_tbl.kyoku-parent-table thead th.kyoku-col-group-start,
      #compare_main_hits_tbl.kyoku-parent-table thead th.kyoku-col-group-start,
      #compare_benchmark_hits_tbl.kyoku-parent-table thead th.kyoku-col-group-start {
        border-inline-start: 1px solid var(--haidex-border-strong, #b7c9bc);
      }
      #hits_tbl.kyoku-parent-table .kyoku-state-menzen,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-state-menzen,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-state-menzen {
        color: #78909c;
        font-weight: 400;
      }
      #hits_tbl.kyoku-parent-table .kyoku-state-riichi,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-state-riichi,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-state-riichi,
      #hits_tbl.kyoku-parent-table .kyoku-state-furo,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-state-furo,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-state-furo {
        color: inherit;
        font-weight: 500;
      }
      #hits_tbl_wrap:not(.hits-detail-view) .kyoku-child-hit-table .hits-child-detail-col {
        display: none;
      }
      #hits_tbl_wrap:not(.hits-detail-view) .kyoku-child-hit-table .hits-child-reason-col {
        max-width: 200px;
        white-space: normal;
      }
      #hits_tbl_wrap.hits-detail-view .kyoku-child-hit-table .hits-child-reason-col {
        max-width: 360px;
        white-space: normal;
      }
      .hits-results-toolbar {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 28px 0 8px;
        padding-top: 22px;
        border-top: 2px solid var(--haidex-border, #d8e1dc);
        min-width: 0;
      }
      .hits-tbl-heading {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 1.35;
      }
      .hits-results-summary-bar {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin: 0;
        min-width: 0;
      }
      .hits-results-summary-text {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 10px;
        font-size: 13px;
        font-weight: 600;
        color: #222;
        line-height: 1.4;
      }
      .hits-results-counts {
        font-size: 13px;
        font-weight: 700;
        color: #222;
      }
      .hits-results-view-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 14px;
      }
      .hits-results-view-mode {
        font-size: 12px;
        font-weight: 400;
        color: #78909c;
      }
      .hits-pagination-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin: 0;
        min-width: 0;
      }
      .hits-pagination-bar button {
        min-height: 32px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 500;
        color: #444;
        background: #fff;
        border: 1px solid #c5c5c5;
        border-radius: 6px;
        cursor: pointer;
      }
      .hits-pagination-bar button:hover:not(:disabled) {
        background: #f7f8fa;
      }
      .hits-pagination-bar button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .hits-pagination-bar button:focus-visible {
        outline: 2px solid var(--cond-focus, #1a73e8);
        outline-offset: 2px;
      }
      .hits-page-info {
        font-size: 12px;
        margin-right: 2px;
        color: #546e7a;
      }
      .hits-hit-total-line {
        font-size: 12px;
        margin: 0;
      }
      .hits-hit-total-line[hidden] {
        display: none !important;
      }
      .hits-tbl-help {
        margin: 0 0 6px;
        font-size: 11px;
        line-height: 1.4;
      }
      #hits_tbl_wrap {
        display: block;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        border: 1px solid #e6ebf0;
        border-radius: 6px;
        background: #fff;
      }
      #compare_benchmark_hits_wrap,
      #compare_main_hits_wrap {
        border: 1px solid #e6ebf0;
        border-radius: 6px;
        background: #fff;
      }
      #hits_post_search_ui,
      .hits-results-toolbar,
      .results-card {
        min-width: 0;
        max-width: 100%;
      }
      #hits_tbl_wrap[hidden] {
        display: none !important;
      }
      #hits_tbl.kyoku-parent-table tbody tr.kyoku-parent-row:hover td {
        background: #f7fafc;
      }
      .hits-empty-state {
        margin: 8px 0 10px;
        padding: 12px 14px;
        font-size: 13px;
        line-height: 1.5;
        background: #f5f8fc;
        border: 1px solid #d8e4f0;
        border-radius: 8px;
        color: #445;
      }
      .hits-idle-state {
        margin: 4px 0 12px;
        padding: 16px 14px;
        border: 1px dashed var(--cond-border, #e0e0e0);
        border-radius: 8px;
        background: var(--cond-surface-subtle, #f7f8fa);
      }
      .hits-idle-heading {
        margin: 0 0 6px;
        font-size: 15px;
        font-weight: 600;
        color: var(--cond-text, #222);
      }
      .hits-idle-body {
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
        color: var(--cond-muted, #666);
      }
      .hits-idle-state[hidden],
      .hits-post-search-ui[hidden],
      #metrics[hidden] {
        display: none !important;
      }
      .results-card > .results-card-title,
      .card:has(> #hits_idle_state) > .results-card-title {
        margin: 0 0 10px;
        font-size: 1.2em;
        font-weight: 700;
        color: #1a1a1a;
        letter-spacing: 0.01em;
      }
      .results-card--idle .results-compare-group,
      #hits_idle_state:not([hidden]) ~ .results-compare-group {
        margin-top: 0.75rem;
        opacity: 1;
      }
      .results-card--idle .results-compare-group > .results-compare-group-toggle,
      #hits_idle_state:not([hidden]) ~ .results-compare-group > .results-compare-group-toggle {
        /* idle でも入口の強調を維持（薄い補助トグルに戻さない） */
        font-size: 15px;
        color: var(--haidex-text, #111827);
      }
      .results-advanced-section {
        margin-bottom: 10px;
      }
      .results-advanced-section > .cond-card-section-body {
        margin-top: 8px;
      }
      .results-compare-group {
        margin: 14px 0 28px;
        padding: 0 0 20px;
        border-bottom: 2px solid var(--haidex-border, #d8e1dc);
        border-radius: 8px;
        background: transparent;
        box-sizing: border-box;
      }
      .results-compare-group-panel {
        padding: 10px 12px 12px;
        max-width: var(--cmp-w-shell);
        background: transparent;
        border-radius: 0 0 8px 8px;
        box-sizing: border-box;
      }
      #compare_benchmark_results_body {
        background: #fff;
        border-radius: 6px;
        padding: 8px 0 0;
      }
      @media (max-width: 420px) {
        .results-compare-group-toggle {
          padding: 11px 12px;
          font-size: 17px;
        }
        .results-compare-group-toggle .cond-card-section-title {
          font-size: 17px;
        }
      }
      .results-compare-subsection + .results-compare-subsection {
        margin-top: 0;
        border-top: none;
        padding-top: 0;
      }
      .results-compare-subsection .cond-card-hint {
        margin: 0 0 8px;
      }
      @media (max-width: 480px) {
        .compare-ab-layout {
          flex-direction: column;
          align-items: stretch;
        }
        .compare-ab-side {
          max-width: 100%;
        }
        .compare-ab-vs {
          align-self: center;
          padding: 0;
        }
        .compare-analysis-tablist {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: thin;
        }
        .compare-panel-content--stats,
        .compare-panel-content--condition,
        .compare-panel-content--kyoku {
          max-width: 100%;
        }
        .compare-analysis-tablist::-webkit-scrollbar {
          width: auto;
          height: 6px;
          display: block;
        }
        .compare-analysis-tab {
          flex: 0 0 auto;
          padding: 8px 9px;
          font-size: 17px;
        }
        .cond-category-fieldset > legend,
        .cond-category-toggle {
          min-height: 44px;
        }
        .cond-category-title {
          white-space: normal;
        }
        .cond-category-fieldset > legend {
          flex-wrap: wrap;
          padding: 2px 10px;
        }
        .score-range-row,
        .diff-top-ge-row,
        .row:has(> .cond-paid-item),
        #conditions_search_card .cond-category-body > .row > label:has(> select),
        #conditions_search_card .cond-category-body > .row > label:has(> input) {
          max-width: 100%;
        }
        #conditions_search_card .cond-category-body > .row > label:has(> select),
        #conditions_search_card .cond-category-body > .row > label:has(> input[type="number"]):not(:has(> input[type="number"] ~ input[type="number"])),
        #conditions_search_card .cond-category-body > .row > label:has(> input[type="text"]) {
          grid-template-columns: minmax(0, 1fr) auto auto;
        }
        #conditions_search_card .cond-category-body select {
          width: min(11.5rem, 100%);
        }
        .score-range-row,
        .diff-top-ge-row,
        #conditions_search_card .cond-category-body > .row:has(> .cond-label-text):not(.score-range-row):not(.diff-top-ge-row) {
          flex-wrap: wrap;
        }
        .score-range-row > input[type="number"]:first-of-type,
        .diff-top-ge-row > span[aria-hidden="true"],
        #conditions_search_card .cond-category-body > .row:has(> .cond-label-text):not(.score-range-row):not(.diff-top-ge-row) > span[aria-hidden="true"] {
          margin-left: auto;
        }
        .query-action-sticky {
          margin-left: -12px;
          margin-right: -12px;
          gap: 6px;
        }
        .query-action-sticky-summary {
          white-space: normal;
          flex: 1 1 auto;
          min-width: 0;
        }
        .query-action-sticky-buttons {
          flex: 0 1 auto;
        }
        .query-action-sticky-buttons .cond-btn-primary,
        .query-action-sticky-buttons .cond-btn-secondary {
          min-height: 36px;
          padding: 6px 10px;
        }
        #conditions_search_card select,
        .results-card select {
          max-width: 100%;
        }
        .hits-idle-state {
          padding: 14px 12px;
        }
      }
      .haidex-beta-ui .haidex-beta-dev-only,
      .research-query-page .haidex-beta-dev-only {
        display: none !important;
      }
      .hits-detail-toggle-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #555;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
      }
      .kyoku-hit-count-expand-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        box-sizing: border-box;
        margin: 0;
        padding: 2px 6px;
        font-size: var(--kyoku-table-font-size, 15px);
        font-weight: 500;
        line-height: 1.3;
        cursor: pointer;
        border: 1px solid transparent;
        border-radius: 4px;
        background: transparent;
        color: #3d6a9e;
        white-space: nowrap;
      }
      .kyoku-hit-count-expand-btn:hover {
        background: #eef4fb;
        border-color: #b7cce6;
      }
      .kyoku-hit-count-expand-btn:focus-visible {
        outline: 2px solid #4a90d9;
        outline-offset: 1px;
      }
      .kyoku-hit-count-expand-btn:disabled {
        opacity: 0.7;
        cursor: wait;
      }
      .kyoku-parent-row td {
        vertical-align: middle;
        background: #fcfdff;
        border-bottom: 1px solid #d8e0ea;
      }
      .kyoku-parent-row.is-expanded td {
        background: #f3f7fc;
        border-bottom-color: #b8cce4;
      }
      .kyoku-child-row td {
        padding: 0;
        background: #f8fafc;
        border-bottom: 2px solid #c5d4e8;
      }
      .kyoku-child-hit-table {
        width: 100%;
        border-collapse: collapse;
        margin: 0;
        background: #fff;
        font-size: var(--kyoku-child-font-size, 14px);
      }
      #hits_tbl.kyoku-parent-table .kyoku-child-hit-table thead th,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-child-hit-table thead th,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-child-hit-table thead th,
      .kyoku-child-hit-table thead th {
        font-size: var(--kyoku-child-font-size, 14px);
        background: #eef3f9;
      }
      #hits_tbl.kyoku-parent-table .kyoku-child-hit-table tbody td,
      #compare_main_hits_tbl.kyoku-parent-table .kyoku-child-hit-table tbody td,
      #compare_benchmark_hits_tbl.kyoku-parent-table .kyoku-child-hit-table tbody td,
      .kyoku-child-hit-table tbody td {
        font-size: var(--kyoku-child-font-size, 14px);
        border-top: 1px solid #e3e9f0;
      }
      .kyoku-hit-count-cell {
        font-weight: 500;
        color: #3d6a9e;
        white-space: nowrap;
      }
      .kyoku-parent-rule-cell {
        white-space: nowrap;
        min-width: 92px;
        padding-left: var(--kyoku-table-cell-pad-x, 5px);
        padding-right: var(--kyoku-table-cell-pad-x, 5px);
      }
      .kyoku-parent-result-cell {
        white-space: nowrap;
        min-width: 72px;
        padding-left: var(--kyoku-short-col-pad-x, 4px);
        padding-right: var(--kyoku-short-col-pad-x, 4px);
      }
      .kyoku-parent-shanten-cell {
        white-space: nowrap;
        min-width: 88px;
        padding-left: var(--kyoku-table-cell-pad-x, 5px);
        padding-right: var(--kyoku-table-cell-pad-x, 5px);
      }
      .kyoku-parent-num-cell {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
      .kyoku-child-loading-row td,
      .kyoku-child-error-row td {
        padding: 8px 12px;
        font-size: var(--kyoku-child-font-size, 14px);
        color: #556;
        background: #f8fafc;
        border-bottom: 2px solid #c5d4e8;
      }
      .kyoku-child-error-row td {
        color: #a33;
      }
      .kyoku-hit-retry-btn {
        min-height: 28px;
        padding: 3px 8px;
        color: #8a2d2d;
        font-size: 12px;
        font-weight: 600;
        background: #fff;
        border: 1px solid #d9aaaa;
        border-radius: 4px;
        cursor: pointer;
      }
      .kyoku-hit-retry-btn:hover {
        background: #fff4f4;
      }
      .kyoku-hit-retry-btn:focus-visible {
        outline: 2px solid #b04a4a;
        outline-offset: 2px;
      }

      @media (max-width: 480px) {
        .diff-top-ge-row {
          flex-wrap: wrap;
        }
        .query-action-sticky {
          margin-left: 0;
          margin-right: 0;
        }
      }
      @media (max-width: 390px) {
        .kyoku-hit-count-cell {
          min-width: 78px;
          padding-inline: 3px;
        }
        .kyoku-hit-count-expand-btn {
          min-height: 32px;
          padding: 4px 5px;
          font-size: 12px;
        }
        .hit-replay-open-btn {
          min-height: 32px;
          padding: 4px 6px;
        }
        .kyoku-child-loading-row td,
        .kyoku-child-error-row td {
          padding: 8px;
          white-space: normal;
        }
      }