/* 競艇AI予測 - メインスタイル
   水・レースをイメージしたデザイン */

:root {
  --bg-dark: #0b1120;
  --bg-card: #151d2e;
  --bg-card-hover: #1e2a3f;
  --bg-alt: #0a0f1c;
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-muted: #1e3a5f;
  --text: #e8edf5;
  --text-muted: #8494a7;
  --text-secondary: #b0bec5;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-xs: 5px;
  --shadow: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
  --glow-accent: 0 0 20px rgba(59,130,246,0.15);
  /* 枠番色（1号艇〜6号艇） */
  --waku-1: #ffffff;
  --waku-2: #000000;
  --waku-3: #ef4444;
  --waku-4: #3b82f6;
  --waku-5: #eab308;
  --waku-6: #22c55e;
  --waku-3-alt: #e74c3c;
  --waku-4-alt: #2980b9;
  --waku-5-alt: #f1c40f;
  --waku-6-alt: #2ecc71;
  /* 互換用エイリアス */
  --primary: #3b82f6;
  --danger: #ef4444;
  --card-bg: #151d2e;
  --bg-secondary: #151d2e;
  --surface-2: #1a2435;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-dark);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

/* スキップリンク（キーボード・スクリーンリーダー用） */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

/* ヘッダー */
.header {
  background: rgba(11,17,32,0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.65rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.15rem;
  white-space: nowrap;
}

.logo:hover {
  color: var(--accent);
}

.logo-icon {
  font-size: 1.35rem;
}

.logo-main {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, var(--accent), #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-sub {
  font-size: 0.55rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .logo-sub { display: none; }
}

.header-clock {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.nav {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.82rem;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
  position: relative;
}

.nav-link:hover {
  color: var(--accent);
  background: rgba(59,130,246,0.08);
}

.nav-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.nav-link:hover svg { opacity: 1; }

.nav-link-active {
  color: var(--accent);
  background: rgba(59,130,246,0.12);
}
.nav-link-active svg { opacity: 1; }
.nav-link-active::after {
  content: '';
  position: absolute;
  bottom: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.nav-link-admin {
  margin-left: 0.25rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
}

.header-auth {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}
.header-user-name {
  font-size: 0.78rem;
  color: var(--text-secondary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-link-logout {
  font-size: 0.75rem !important;
  color: var(--text-muted) !important;
  padding: 0.2rem 0.5rem !important;
}
.nav-link-logout:hover { color: #fca5a5 !important; }
.header-user-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  transition: opacity 0.15s;
}
.header-user-link:hover { opacity: 0.8; }
.footer-links {
  margin-top: 0.5rem;
  font-size: 0.72rem;
}
.footer-sep {
  color: var(--text-muted);
  margin: 0 0.3rem;
}

.footer-link {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-decoration: none;
  transition: color var(--transition);
}
.footer-link:hover { color: var(--accent); }

.bnav-svg {
  margin-bottom: 1px;
}

/* メイン */
.main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
}

/* ページヒーロー */
.page-hero {
  margin-bottom: 1.5rem;
}

.page-title {
  margin: 0 0 0.3rem;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.race-hero .race-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.link-external {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
}

.link-external:hover {
  text-decoration: underline;
}
.link-live {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #fff !important;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none !important;
}
.link-live:hover { opacity: 0.85; }

/* パンくず */
/* breadcrumb: 3144行付近の強化版を使用 */

/* カード */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover {
  border-color: var(--border-strong);
}
.card-full { grid-column: 1 / -1; }

.card-title {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card-title a {
  color: var(--text);
  text-decoration: none;
}

.card-title a:hover {
  color: var(--accent);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.card-header .card-title {
  margin: 0;
}

/* ページ上部のアクションバー（戻る・更新） */
.action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.card-desc {
  margin: -0.5rem 0 1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* フォーム */
.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
}

.form-input,
.form-select {
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--bg-dark);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  min-width: 140px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.date-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.date-quick {
  display: flex;
  gap: 0.25rem;
}

.btn-quick {
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  background: var(--bg-card-hover);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.btn-quick:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.form-actions {
  margin-top: 0.5rem;
}

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: white;
  box-shadow: 0 1px 3px rgba(59,130,246,0.3);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: 0 2px 8px rgba(59,130,246,0.35);
}

.btn-secondary {
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.btn-secondary:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  border-color: var(--border-strong);
  color: var(--text);
}

/* 会場グリッド */
.stadium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.stadium-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s, border-color 0.2s;
}

.stadium-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
}

.stadium-name {
  font-weight: 500;
}

.stadium-arrow {
  color: var(--text-muted);
  font-size: 1.2rem;
}

/* レースグリッド */
.race-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}

.race-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.75rem;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s, border-color 0.2s;
}

.race-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
}

.race-number {
  font-weight: 700;
  font-size: 1.1rem;
}

.race-grade {
  font-size: 0.75rem;
  color: var(--accent);
  margin-top: 0.25rem;
}

.race-weather {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  text-align: center;
}

.race-deadline-mini {
  display: block;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.race-card-done {
  border-color: rgba(34, 197, 94, 0.3);
}
.race-card-cancelled {
  border-color: rgba(239, 68, 68, 0.3);
  opacity: 0.6;
}

.race-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  margin-top: 0.2rem;
}

.race-status-done {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}

.race-status-open {
  background: rgba(14, 165, 233, 0.15);
  color: var(--accent);
}

/* 空状態 */
.empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.empty-hint {
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.filter-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* 出走表 */
.entries-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.entries-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.entries-table th,
.entries-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.entries-table th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.85rem;
}

/* 出走表カード */
.entry-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.entry-card {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  transition: background 0.15s;
}
.entry-card:hover { background: var(--bg-card-hover); }
.entry-waku-1 { border-left: 4px solid var(--waku-1); }
.entry-waku-2 { border-left: 4px solid var(--waku-2); }
.entry-waku-3 { border-left: 4px solid var(--waku-3); }
.entry-waku-4 { border-left: 4px solid var(--waku-4); }
.entry-waku-5 { border-left: 4px solid var(--waku-5); }
.entry-waku-6 { border-left: 4px solid var(--waku-6); }
.entry-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.entry-waku {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.entry-player-info {
  flex: 1;
  min-width: 0;
}
.entry-player-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
  text-decoration: none;
}
.entry-player-name:hover { text-decoration: underline; }
.entry-player-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.entry-st {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.82rem;
  background: rgba(14,165,233,0.1);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.entry-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.entry-stat-group {
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  padding: 5px 8px;
}
.entry-stat-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entry-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
}
.entry-stat-main {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
}
.entry-stat-sub {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
}
.entry-card-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.entry-card-extra span {
  background: rgba(255,255,255,0.04);
  padding: 2px 6px;
  border-radius: 3px;
}
@media (max-width: 640px) {
  .entry-card-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .entry-card-header { gap: 8px; }
  .entry-player-name { font-size: 0.88rem; }
}

.waku-cell {
  font-weight: 600;
  color: var(--accent);
}

.name-cell {
  font-weight: 500;
}

.reg-cell {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* レース結果テーブル */
.results-table-wrap,
.results-list-table-wrap {
  overflow-x: auto;
}

.results-table,
.results-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.results-table th,
.results-table td,
.results-list-table th,
.results-list-table td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.results-table th,
.results-list-table th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.85rem;
}

.order-cell {
  font-weight: 600;
  color: var(--accent);
}

.result-flying { color: var(--warning); }
.result-late { color: var(--warning); }
.result-disqualified { color: var(--error); opacity: 0.8; }

/* 払戻金 */
.payoffs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

.payoff-block {
  background: var(--bg-dark);
  border-radius: var(--radius-sm);
  padding: 1rem;
}

.payoff-type {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
}

.payoff-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.payoff-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.9rem;
}

.payoff-combo {
  font-family: var(--font-mono);
  font-weight: 500;
}

.payoff-amount {
  color: var(--success);
  font-weight: 600;
}

.payoff-pop {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* 予測リスト */
.prediction-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prediction-row {
  display: grid;
  grid-template-columns: 60px 1fr 70px 50px;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-dark);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--border);
}

.prediction-rank-1 { border-left-color: #fbbf24; }
.prediction-rank-2 { border-left-color: #94a3b8; }
.prediction-rank-3 { border-left-color: #b45309; }

.pred-waku {
  font-weight: 600;
  color: var(--accent);
}

.pred-prob {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.1rem;
}

.pred-rank {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* レース詳細グリッド */
.race-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .race-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* シミュレーション */
.combo-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.combo-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.combo {
  font-family: var(--font-mono);
}

.combo-prob {
  color: var(--accent);
  font-weight: 500;
}

/* 期待値 */
.value-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.value-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-dark);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--success);
  font-size: 0.95rem;
}

.value-combo {
  font-family: var(--font-mono);
  font-weight: 600;
  min-width: 80px;
}

.value-ev {
  font-weight: 600;
  color: var(--success);
}

.value-return {
  color: var(--success);
  font-size: 0.9rem;
}

/* 統計 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.5rem;
}

.stat-item {
  text-align: center;
  padding: 1.25rem;
  background: var(--bg-dark);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.stat-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
}

.stat-highlight .stat-value {
  color: var(--success);
  font-size: 2rem;
}

.stat-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.stats-error {
  color: var(--error);
}

/* 情報リスト */
.info-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.info-list li {
  margin-bottom: 0.5rem;
}

.step-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.step-list li {
  margin-bottom: 1rem;
}

.step-list strong {
  display: block;
  margin-bottom: 0.25rem;
}

.step-list p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.info-dl {
  margin: 0.5rem 0 0;
}

.info-dl dt {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--accent);
}

.info-dl dt:first-child {
  margin-top: 0;
}

.info-dl dd {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
  color: var(--text-muted);
}

.warning-card {
  border-left: 4px solid var(--warning);
}

/* バッジ */
.badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background: var(--accent-muted);
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* トースト */
.toast {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 0.75rem 1.25rem;
  background: rgba(21,29,46,0.95);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  font-size: 0.85rem;
  font-weight: 500;
  max-width: 90vw;
}

.toast.toast-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-success {
  border-left: 3px solid var(--success);
}

.toast-error {
  border-left: 3px solid var(--error);
}

.toast-info {
  border-left: 3px solid var(--accent);
}

/* ローディング */
.loading {
  color: var(--text-muted);
  padding: 2rem;
  text-align: center;
}

.loading::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* エラーアクション */
.error-actions {
  margin-top: 1.5rem;
}

/* フッター */
.footer {
  margin-top: 2rem;
  padding: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-size: 0.9rem;
}

.footer-note {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  opacity: 0.8;
}


.panel-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.panel-stat {
  text-align: center;
  padding: 0.75rem;
  background: var(--bg-dark);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.panel-stat-value {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
}

.panel-stat-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: #16a34a;
}

.btn-warning {
  background: var(--warning);
  color: #1e293b;
}

.btn-warning:hover:not(:disabled) {
  background: #d97706;
}

.btn-danger {
  background: var(--error);
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: #dc2626;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* 進捗バー */
.progress-wrap {
  margin: 0.75rem 0;
}

.progress-bar-outer {
  height: 8px;
  background: var(--bg-dark);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-inner {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.3s ease;
  min-width: 0;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

/* タスクログ */
.task-log {
  max-height: 250px;
  overflow-y: auto;
  background: var(--bg-dark);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 0.75rem;
}

.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.task-item:last-child {
  border-bottom: none;
}

.task-name {
  font-weight: 500;
  flex: 1;
}

.task-status {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.task-status-running {
  background: rgba(14, 165, 233, 0.2);
  color: var(--accent);
}

.task-status-completed {
  background: rgba(34, 197, 94, 0.2);
  color: var(--success);
}

.task-status-error {
  background: rgba(239, 68, 68, 0.2);
  color: var(--error);
}

.task-time {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* フォームグループ (管理画面用) */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.form-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* チェック結果テーブル */
.check-results {
  margin-top: 0.75rem;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.check-item:last-child {
  border-bottom: none;
}

.check-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.check-ok { color: var(--success); }
.check-warn { color: var(--warning); }
.check-error { color: var(--error); }

/* スイッチ */
.switch-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.switch {
  position: relative;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--bg-card-hover);
  border-radius: 24px;
  transition: 0.3s;
}

.switch-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}

.switch input:checked + .switch-slider {
  background: var(--accent);
}

.switch input:checked + .switch-slider::before {
  transform: translateX(20px);
}

/* 6艇カード横並び */
.racer-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
  .racer-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 500px) {
  .racer-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.racer-card {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.racer-card .waku-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.waku-1 { background: var(--waku-1); color: #000; }
.waku-2 { background: var(--waku-2); color: #fff; }
.waku-3 { background: var(--waku-3-alt); color: #fff; }
.waku-4 { background: var(--waku-4-alt); color: #fff; }
.waku-5 { background: var(--waku-5-alt); color: #000; }
.waku-6 { background: var(--waku-6-alt); color: #000; }

.racer-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.racer-class {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.racer-stats {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.racer-stats .stat-row {
  display: flex;
  justify-content: space-between;
}

.racer-stats .stat-val {
  color: var(--text);
  font-weight: 500;
  font-family: var(--font-mono);
}

.win-bar-wrap {
  margin-top: 0.75rem;
}

.win-bar-outer {
  height: 6px;
  background: var(--bg-dark);
  border-radius: 3px;
  overflow: hidden;
}

.win-bar-inner {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.win-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  margin-top: 0.2rem;
}

.win-bar-label .label {
  color: var(--text-muted);
}

.win-bar-label .pct {
  font-weight: 600;
  font-family: var(--font-mono);
}

/* 予測比較（事前 vs 最新）- スマホでも横並び維持 */
.prediction-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6px;
  align-items: start;
}
@media (max-width: 480px) {
  .prediction-compare-grid {
    gap: 4px;
  }
  .prediction-compare-grid > div:nth-child(2) {
    font-size: 1rem;
  }
}

/* 折りたたみ比較の矢印回転 */
details[open] .compare-arrow {
  transform: rotate(90deg);
}
details summary::-webkit-details-marker {
  display: none;
}

/* TOP記法リスト */
.sim-notation-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0.75rem;
}
.sim-notation-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 4px;
  background: rgba(255,255,255,0.03);
}
.sim-notation-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sim-notation-text {
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.sim-notation-part {
  white-space: nowrap;
  background: rgba(255,255,255,0.04);
  padding: 1px 6px;
  border-radius: 3px;
}
.sim-notation-text a[href^="tel"] {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
}

/* Top30 グリッド */
.sim-top-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
}

/* ヒートマップ的3連単 */
.trifecta-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.25rem;
}

.trifecta-grid > .trifecta-cell {
  min-width: 0;
}

.trifecta-cell {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 5px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  border: 1px solid var(--border);
  min-height: 34px;
  overflow: hidden;
  isolation: isolate;
}

/* 明るいマスでも暗いマスでも同じ白文字にするため、全体に薄い暗幕（順位の青の濃さは下のレイヤーでそのまま分かる） */
.trifecta-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(15, 23, 42, 0.28);
  pointer-events: none;
  z-index: 0;
}

/* 1位だけ枠を目立たせない（Top15グリッド先頭セルのみ） */
.trifecta-grid--top15 > .trifecta-cell:first-child {
  border-color: transparent;
}

/* 全マス共通：色は統一（順位とは無関係に見えるように） */
.trifecta-combo {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  margin-bottom: 0;
  white-space: nowrap;
  color: #f1f5f9;
  text-shadow:
    0 0 1px rgba(15, 23, 42, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.55);
}

.trifecta-odds {
  font-size: 0.55rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
  color: #e2e8f0;
  text-shadow:
    0 0 1px rgba(15, 23, 42, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.55);
}

.trifecta-prob {
  position: relative;
  z-index: 1;
  font-size: 0.6rem;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
  color: #e2e8f0;
  text-shadow:
    0 0 1px rgba(15, 23, 42, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.5);
}

.trifecta-cell-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
  min-width: 0;
}

/* タブレット・PC：買い目・オッズ・％を1行に */
@media (min-width: 641px) {
  .trifecta-cell {
    align-items: center;
    min-height: 30px;
  }

  .trifecta-cell-body {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
  }

  .trifecta-odds {
    font-size: 0.62rem;
  }

  .trifecta-prob {
    align-self: center;
  }
}

/* 3連単 Top16〜30 の折りたたみ */
.trifecta-more-wrap {
  margin-top: 0.45rem;
}
.trifecta-more-summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 2px;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.trifecta-more-summary::-webkit-details-marker {
  display: none;
}

/* レスポンシブ (640px) */
@media (max-width: 640px) {
  .filter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .form-input,
  .form-select {
    min-width: 100%;
  }

  .stadium-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .race-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .prediction-row {
    grid-template-columns: 50px 1fr 60px 40px;
    font-size: 0.9rem;
  }

  .card-header {
    flex-direction: column;
    align-items: stretch;
  }

  .race-detail-grid .entries-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 3連単Top：狭い画面では5列だと潰れるため3列（16〜30位の折りたたみ内も同じクラス） */
  .trifecta-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .trifecta-cell {
    padding: 5px 6px;
    gap: 5px;
    min-height: 36px;
  }

  .trifecta-combo {
    font-size: 0.68rem;
  }

  .trifecta-odds {
    font-size: 0.52rem;
  }

  .trifecta-prob {
    font-size: 0.55rem;
  }
}

@media (max-width: 380px) {
  .trifecta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }
}

/* ============================================================
   スティッキーレースヘッダー
   ============================================================ */
.race-sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: var(--card-bg, #1e293b);
  border-bottom: 1px solid var(--border);
  padding: 6px 16px;
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.race-sticky-header.visible {
  transform: translateY(0);
}
.sticky-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
}
.sticky-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}
.sticky-breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.sticky-breadcrumb strong { color: var(--text); font-weight: 800; font-size: 0.9rem; }
.sticky-sep { color: var(--border); font-size: 0.7rem; }
@media (max-width: 480px) {
  .sticky-breadcrumb { font-size: 0.7rem; gap: 2px; }
  .sticky-breadcrumb strong { font-size: 0.8rem; }
}
.race-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--surface-2, #374151);
  color: var(--text);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.15s;
}
.race-nav-btn:hover {
  background: var(--primary);
  color: #fff;
}
.race-nav-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ============================================================
   タブナビゲーション（レース詳細）
   ============================================================ */
.race-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem;
}

.race-tab {
  flex: 1 1 auto;
  text-align: center;
  padding: 0.6rem 0.5rem;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
  transition: color 0.2s, border-color 0.2s;
}

.race-tab:hover {
  color: var(--accent);
}

.race-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* 部品交換バッジ */
.parts-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.parts-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: rgba(239, 68, 68, 0.15);
  color: var(--error);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.parts-badge-none {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-muted);
}

/* 展開データテーブル */
.analytics-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.analytics-table th,
.analytics-table td {
  padding: 0.5rem 0.6rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.analytics-table th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.8rem;
}

.analytics-table td:first-child,
.analytics-table th:first-child {
  text-align: left;
}

.analytics-table .highlight-cell {
  color: var(--success);
  font-weight: 600;
}

/* オッズテーブル */
.odds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.odds-block {
  background: var(--bg-dark);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
}

.odds-block h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--accent);
  font-weight: 600;
}

.odds-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.odds-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.odds-list li:last-child {
  border-bottom: none;
}

.odds-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text);
}

/* 予測実績ページ */
.perf-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.perf-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}
.perf-filter-bar .period-selector { margin-bottom: 0; }
.perf-filter-select {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.85rem;
}
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.about-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}
.about-stat-num { font-size: 2rem; font-weight: 700; }
.about-stat-label { font-size: 0.8rem; color: var(--text-muted); }
.about-stat-sub { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; }

.perf-card {
  text-align: center;
  padding: 0.75rem 0.5rem;
  background: var(--bg-dark);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  min-width: 0;
  overflow: hidden;
}

.perf-card-value {
  display: block;
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.perf-card-value.positive {
  color: var(--success);
}

.perf-card-value.negative {
  color: var(--error);
}

.perf-card-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  line-height: 1.4;
  word-break: break-word;
}

.perf-race-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.perf-race-row {
  display: grid;
  grid-template-columns: 120px 100px 1fr 80px 80px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-dark);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  border-left: 3px solid var(--border);
}

.perf-race-row.hit {
  border-left-color: var(--success);
}

.perf-race-row.miss {
  border-left-color: var(--error);
}

@media (max-width: 768px) {
  .perf-race-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
}

/* 選手データベース */
.player-search-form {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  min-width: 0;
}

.player-search-form input {
  flex: 1;
  min-width: 0;
}

.player-search-form .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.player-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}

.player-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s, border-color 0.2s;
}

.player-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
}

.player-card-id {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.player-card-name {
  font-weight: 600;
  font-size: 1rem;
}

.player-card-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.player-profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .player-profile {
    grid-template-columns: 1fr;
  }
}

.player-profile-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.player-profile-item .label {
  color: var(--text-muted);
}

.player-profile-item .value {
  font-weight: 600;
}

.player-history {
  list-style: none;
  margin: 0;
  padding: 0;
}

.player-history li {
  display: grid;
  grid-template-columns: 80px 60px 80px 60px 60px;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  align-items: center;
}

.player-history li a {
  color: var(--accent);
  text-decoration: none;
}

.player-history li a:hover {
  text-decoration: underline;
}

/* 会場カード強化 */
.stadium-card-enhanced {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  transition: background 0.2s, border-color 0.2s;
}

.stadium-card-enhanced:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
}

.stadium-card-enhanced.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.stadium-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stadium-card-series {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stadium-card-day {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* grade-badge: 3084行付近の強化版を使用 */

.night-badge {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
}

/* 天候詳細パネル */
.weather-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.weather-item {
  text-align: center;
  padding: 0.75rem;
  background: var(--bg-dark);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.weather-item-value {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}

.weather-item-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* 期間選択ボタン群 */
.period-selector {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.period-btn {
  padding: 0.4rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-dark);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  transition: all 0.2s;
}

.period-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.period-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* チャートコンテナ */
.chart-container {
  position: relative;
  width: 100%;
  height: 200px;
  max-height: 300px;
}

/* ============================================================
   V2 ダッシュボード - 全面刷新
   ============================================================ */

/* ダッシュボードヘッダー */
.dashboard-header {
  margin-bottom: 1.25rem;
}
.dashboard-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.dashboard-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
}
.auto-update-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 0.5rem;
}
.auto-update-on {
  background: rgba(16,185,129,0.15);
  color: var(--success);
}
.auto-update-off {
  background: rgba(239,68,68,0.15);
  color: var(--error);
}
.dashboard-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.date-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
/* 日付ナビ用のアイコンのみボタン（32x32）。テキスト付きボタンには使わない */
.btn-icon-only {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.btn-icon-only:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.form-input-sm {
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  max-width: 150px;
}
.btn-sm {
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.btn-accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-accent:hover {
  background: var(--accent-hover);
}

/* NEXTレースセクション */
.next-races-section {
  margin-bottom: 1.5rem;
}
.next-races-grid {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-top: 4px;
  padding-bottom: 4px;
}
.next-race-card {
  flex: 0 0 auto;
  min-width: 136px;
  background: linear-gradient(135deg, #1e3a5f 0%, #0c4a6e 100%);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.45rem 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.45rem;
  text-decoration: none;
  color: inherit;
  animation: pulse-border 2s ease-in-out infinite;
  transition: transform 0.15s, box-shadow 0.15s;
}
.next-race-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(14,165,233,0.35);
  border-color: #38bdf8;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes pulse-border {
  0%, 100% { border-color: var(--accent); box-shadow: 0 0 8px rgba(14,165,233,0.2); }
  50% { border-color: #38bdf8; box-shadow: 0 0 16px rgba(14,165,233,0.4); }
}
.nrc-label {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.58rem;
  padding: 0.1rem 0.38rem;
  border-radius: 4px;
  letter-spacing: 0.1em;
}
.nrc-stadium { font-weight: 700; font-size: 0.86rem; }
.nrc-race { color: var(--text-muted); font-size: 0.76rem; }
.nrc-time { font-size: 0.7rem; color: var(--text-muted); }
.nrc-countdown {
  font-size: 0.84rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent-hover);
  width: 100%;
}

/* ダッシュボード上部：本日のAI的中（PCは従来どおり余白広め） */
.dashboard-hit-summary {
  margin: 0.5rem 0;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(34, 197, 94, 0.08));
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: 10px;
}
.dashboard-hit-summary-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dashboard-hit-summary-title {
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--text);
}
.dashboard-hit-summary-badges {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.dashboard-hit-summary .dashboard-hit-summary-badge {
  font-size: 0.82rem;
  padding: 4px 12px;
}
.dashboard-hit-summary-link {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.dashboard-hit-summary-link:hover {
  text-decoration: underline;
}

/* 会場グリッド V2 */
.stadium-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.stadium-card-v2 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: all 0.15s;
  min-height: 140px;
}
.stadium-card-v2:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}
.stadium-closed {
  opacity: 0.4;
  pointer-events: none;
  display: none;
}
.stadium-grid-v2.show-all .stadium-closed {
  display: flex;
}
.sc-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}
.sc-name {
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  letter-spacing: 0.02em;
}
.sc-series {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-body { flex: 1; }
.sc-next {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.sc-next-label {
  font-weight: 700;
  font-size: 0.9rem;
}
.sc-next-dl {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.sc-next-cd {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
}
.sc-all-done {
  color: var(--text-muted);
  font-size: 0.8rem;
}
.sc-entry1 {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.25rem;
}
.sc-class {
  font-size: 0.7rem;
  background: var(--surface-2, #374151);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}
.sc-weather {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.sc-no-race {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* 開催中のみ/全会場 切り替え */
.stadium-toggle-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}
.stadium-toggle-btn {
  font-size: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.stadium-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.stadium-toggle-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.sc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 0.35rem;
}
.sc-footer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.4rem;
}
.sc-progress {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.sc-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s;
}
.sc-progress-text {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-family: var(--font-mono);
  min-width: 3.5em;
}

/* ========== レーステーブル（列表示） ========== */
.race-table {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.race-table-header {
  display: grid;
  grid-template-columns: 45px 60px 100px 70px 70px 1fr;
  gap: 4px;
  padding: 8px 12px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg-card);
}
.race-table-row {
  display: grid;
  grid-template-columns: 45px 60px 100px 70px 70px 1fr;
  gap: 4px;
  padding: 10px 12px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  transition: background 0.15s;
  font-size: 0.8rem;
}
.race-table-row:hover {
  background: rgba(14, 165, 233, 0.06);
}
.rt-row-done {
  opacity: 0.6;
}
.rt-row-cancelled {
  opacity: 1;
  background: rgba(127, 29, 29, 0.16);
  border-left: 4px solid #ef4444;
}
.rt-row-cancelled:hover {
  background: rgba(127, 29, 29, 0.24);
}
.rt-row-cancelled .rt-col-race strong,
.rt-row-cancelled .rt-dl-time,
.rt-row-cancelled .rt-col-weather,
.rt-row-cancelled .rt-col-result {
  color: #fecaca;
}
.rt-cancel-note {
  font-size: 0.58rem;
  font-weight: 700;
  color: #fca5a5;
  letter-spacing: 0.02em;
}
.rt-cancel-icon {
  display: inline-block;
  margin-left: 3px;
  color: #ef4444;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}
.race-list-card-cancelled {
  border-left: 4px solid #ef4444 !important;
  background: color-mix(in srgb, #ef4444 4%, var(--card-bg, #fff));
}
.stadium-cancelled-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  background: rgba(239, 68, 68, 0.12);
  border-radius: 6px;
  font-size: 0.82rem;
  color: #ef4444;
  font-weight: 600;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.rt-col-deadline {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rt-dl-label {
  font-size: 0.55rem;
  color: var(--text-muted);
}
.rt-dl-time {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
}
.rt-col-status-time {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
}
.rt-cd-text { white-space: nowrap; }
.rt-conf {
  display: inline-block;
  font-size: 0.6rem;
  font-family: var(--font-mono);
  color: var(--accent);
  background: rgba(14, 165, 233, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}
@media (max-width: 640px) {
  .race-table-header { display: none; }
  .race-table-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 10px 12px;
    font-size: 0.8rem;
  }
  .rt-col-race {
    min-width: 36px;
  }
  .rt-col-deadline {
    min-width: 40px;
  }
  .rt-col-status-time {
    min-width: 60px;
  }
  .rt-col-weather {
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
  }
  .rt-col-result {
    font-size: 0.75rem;
  }
  .rt-col-badge {
    width: 100%;
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* ステータスバッジ */
.status-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.status-upcoming { background: #1e3a5f; color: #7dd3fc; }
.status-closing { background: #7c2d12; color: #fdba74; animation: blink 1s ease-in-out infinite; }
.status-closed { background: #374151; color: #9ca3af; }
.status-racing { background: #14532d; color: #86efac; }
.status-result-pending { background: #78350f; color: #fbbf24; animation: blink 1.5s ease-in-out infinite; }
.status-finished { background: #1e293b; color: #64748b; }
.status-cancelled {
  background: rgba(127, 29, 29, 0.95);
  color: #fee2e2;
  border: 1px solid rgba(252, 165, 165, 0.35);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.18);
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: livePulse 1s ease-in-out infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.race-badges {
  display: inline-flex;
  gap: 0.3rem;
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
}
.ai-hit-badge {
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-weight: 700;
  background: linear-gradient(135deg, #b45309, #f59e0b);
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.ai-hit-badge.ai-hit-mode {
  background: linear-gradient(135deg, #059669, #10b981);
}
.ai-hit-badge-sm { font-size: 0.58rem; }
.ai-hit-badge-top10 { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.ai-hit-badge-top15 { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.upset-badge {
  font-size: 0.6rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.4;
}
.upset-badge-low { background: #1e3a5f; color: #7dd3fc; }
.upset-badge-mid { background: #78350f; color: #fbbf24; }
.upset-badge-high { background: #7c2d12; color: #fdba74; }
.upset-badge-extreme { background: #7f1d1d; color: #fca5a5; animation: blink 1.2s ease-in-out infinite; }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* カウントダウン色 */
.cd-urgent { color: #ef4444; font-weight: 700; display: inline; }
.cd-soon { color: #f59e0b; font-weight: 600; display: inline; }
.cd-over { color: var(--text-muted); font-size: 0.8em; display: inline; }
.rt-cd-text { display: inline; min-width: 0; }
.status-closing .rt-cd-text { font-size: 0.6rem; }

/* グレードバッジ（小） */
.night-badge-sm {
  font-size: 0.6rem;
  background: #312e81;
  color: #c4b5fd;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-weight: 600;
}

/* イベントバッジ共通 */
.event-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 4px;
  line-height: 1;
  vertical-align: middle;
}
.event-badge-sm { font-size: 0.7rem; padding: 0.1rem 0.25rem; }
.event-badge-md { font-size: 0.85rem; padding: 0.1rem 0.3rem; margin-left: 4px; }
.event-badge::before { font-style: normal; }
.event-night { background: #312e81; color: #c4b5fd; }
.event-night::before { content: "\263E"; }
.event-morning { background: #92400e; color: #fde68a; }
.event-morning::before { content: "\2600"; font-size: 0.85em; }
.event-summertime { background: #065f46; color: #6ee7b7; }
.event-summertime::before { content: "\2600"; font-size: 0.85em; }
.event-midnight { background: #1e1b4b; color: #a5b4fc; }
.event-midnight::before { content: "\2605"; font-size: 0.8em; }
.event-rookie { background: #064e3b; color: #34d399; }
.event-rookie::before { content: "\1F331"; font-size: 0.85em; }
.event-ladies { background: #831843; color: #f9a8d4; }
.event-ladies::before { content: "\2665"; font-size: 0.85em; }
.event-venus { background: #701a75; color: #e879f9; }
.event-venus::before { content: "\2640"; font-size: 0.9em; }

.stadium-all-done {
  opacity: 0.55;
  filter: grayscale(0.3);
  border-color: var(--border) !important;
}
.stadium-all-done:hover {
  opacity: 0.8;
  filter: none;
}
.stadium-all-cancelled {
  opacity: 0.6;
  filter: grayscale(0.6);
  border-color: var(--danger, #e53e3e) !important;
  background: color-mix(in srgb, var(--danger, #e53e3e) 4%, var(--card-bg, #fff));
}
.stadium-all-cancelled:hover {
  opacity: 0.85;
  filter: grayscale(0.2);
}
.sc-cancelled-label {
  color: var(--danger, #e53e3e);
  font-size: 0.85rem;
  font-weight: 600;
}
.sc-cancel-badge {
  font-size: 0.7rem;
  padding: 0.1em 0.45em;
}
.stadium-all-pending {
  opacity: 0.65;
  filter: grayscale(0.4);
  border-color: var(--warning, #d97706) !important;
  background: color-mix(in srgb, var(--warning, #d97706) 5%, var(--card-bg, #fff));
}
.stadium-all-pending:hover {
  opacity: 0.85;
  filter: none;
}
.sc-pending-badge {
  font-size: 0.7rem;
  padding: 0.1em 0.45em;
  background: var(--warning, #d97706);
  color: #fff;
  border-radius: 3px;
}
.sc-pending-label {
  color: var(--warning, #d97706);
  font-size: 0.8rem;
  font-weight: 600;
}

/* 枠番ドット */
.waku-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.waku-dot.waku-1 { background: var(--waku-1); border: 1px solid #aaa; }
.waku-dot.waku-2 { background: var(--waku-2); }
.waku-dot.waku-3 { background: var(--waku-3); }
.waku-dot.waku-4 { background: var(--waku-4); }
.waku-dot.waku-5 { background: var(--waku-5); }
.waku-dot.waku-6 { background: var(--waku-6); }

/* 締切順レース一覧 */
.upcoming-section { margin-top: 1rem; }
.upcoming-list { display: flex; flex-direction: column; gap: 2px; }
.upcoming-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-card);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  font-size: 0.85rem;
  overflow: hidden;
  min-width: 0;
}
.upcoming-row:hover { background: var(--bg-card-hover); }
.upcoming-urgent { border-left: 3px solid #ef4444; }
.ur-cd {
  flex-shrink: 0;
  width: 55px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
}
.ur-dl {
  flex-shrink: 0;
  font-family: var(--font-mono);
  color: var(--text-muted);
  width: 42px;
}
.ur-stadium { font-weight: 600; flex-shrink: 0; width: 48px; }
.ur-race { font-weight: 600; flex-shrink: 0; width: 28px; }
.ur-entry1 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.ur-class {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ur-weather {
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 55px;
  text-align: right;
}
.ur-pred {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.ur-grade { flex-shrink: 0; }
.ur-conf {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
}
.ur-conf-icon {
  font-size: 0.6rem;
  font-weight: 800;
  opacity: 0.8;
}
.ur-conf-high { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.ur-conf-mid { background: rgba(234, 179, 8, 0.15); color: #eab308; }
.ur-conf-low { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.ur-upset {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  background: rgba(249, 115, 22, 0.2);
  color: #f97316;
  white-space: nowrap;
}

/* ローディング */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--text-muted);
}
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 1rem;
}

/* ============================================================
   V2 レース一覧
   ============================================================ */

/* タブ切り替え */
.view-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--border);
}
.view-tab {
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
  font-family: inherit;
}
.view-tab:hover { color: var(--text); }
.view-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* レース行カード */
.race-row-card {
  display: grid;
  grid-template-columns: 70px 50px 60px 40px 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-card);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  font-size: 0.85rem;
  margin-bottom: 2px;
}
.race-row-card:hover { background: var(--bg-card-hover); }
.rrc-dl { font-family: var(--font-mono); color: var(--text-muted); }
.rrc-stadium { font-weight: 600; }
.rrc-race { font-weight: 700; }
.rrc-entries {
  display: flex;
  gap: 0.4rem;
  overflow: hidden;
}
.rrc-entry {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.75rem;
  white-space: nowrap;
}
.rrc-result {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--success);
}
.rrc-payoff {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--warning);
}

/* ============================================================
   V2 レース詳細
   ============================================================ */

/* 枠番背景色 */
.waku-bg-1 { border-left: 3px solid var(--waku-1); }
.waku-bg-2 { border-left: 3px solid var(--waku-2); }
.waku-bg-3 { border-left: 3px solid var(--waku-3); }
.waku-bg-4 { border-left: 3px solid var(--waku-4); }
.waku-bg-5 { border-left: 3px solid var(--waku-5); }
.waku-bg-6 { border-left: 3px solid var(--waku-6); }

/* 枠番セル（テーブル） */
.waku-cell {
  font-weight: 700;
  text-align: center;
  width: 30px;
}
.waku-cell-1 { color: #000; background: #f0f0f0; }
.waku-cell-2 { color: #fff; background: var(--waku-2); }
.waku-cell-3 { color: #fff; background: #dc2626; }
.waku-cell-4 { color: #fff; background: #2563eb; }
.waku-cell-5 { color: #000; background: #facc15; }
.waku-cell-6 { color: #000; background: var(--waku-6); }

/* 詳細ヘッダー: 締切カウントダウン */
.race-deadline-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.race-deadline-bar-cancelled {
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.28), rgba(69, 10, 10, 0.88));
  border-color: rgba(248, 113, 113, 0.35);
}
.rdb-label { font-weight: 600; }
.rdb-time {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
}
.cancelled-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(127, 29, 29, 0.95);
  border: 1px solid rgba(252, 165, 165, 0.35);
  color: #fee2e2;
  font-size: 0.52em;
  font-weight: 700;
  vertical-align: middle;
}
.cancelled-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  margin: -0.2rem 0 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(127, 29, 29, 0.18);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fee2e2;
}
.cancelled-notice strong {
  color: #fecaca;
  font-size: 1rem;
}
.cancelled-notice span {
  color: #fca5a5;
  font-size: 0.9rem;
}
.rdb-countdown {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 600;
  margin-left: auto;
}
.race-sticky-header .rdb-countdown {
  font-size: 0.82rem;
  font-weight: 700;
  margin-left: 4px;
}

/* 展開予想 */
.course-prediction {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  margin: 1rem 0;
}
.course-box {
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  text-align: center;
}
.course-box-header {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}
.course-box-name { font-size: 0.75rem; color: var(--text-muted); }
.course-box-st { font-family: var(--font-mono); font-size: 0.85rem; }

/* ナビ改善 */
.header-clock {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-left: 0.5rem;
}

/* ============================================================
   結果ページ（/results）・レース詳細結果タブ
   ============================================================ */

/* 結果ページ：絞り込みブロック */
.results-filter-card {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.results-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  min-width: 0;
}
.results-filter-form > * {
  min-width: 0;
}

.results-filter-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

.results-filter-date {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  min-width: 150px;
}

.results-filter-quick {
  display: flex;
  gap: 0.35rem;
}

.results-filter-quick .btn-quick {
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
}

.results-filter-stadium {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  min-width: 140px;
}

.results-filter-submit {
  padding: 0.5rem 1.25rem;
  font-size: 0.95rem;
}

/* 結果一覧ページ用カード */
.results-stadium-card {
  padding: 0;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.results-stadium-header {
  padding: 10px 16px;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.results-list-table-wrap {
  overflow-x: auto;
}

.results-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  table-layout: auto;
}

.results-list-table th,
.results-list-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.results-list-table th {
  background: var(--bg-alt);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.85rem;
}

.results-list-table tbody tr:hover {
  background: var(--bg-card-hover);
}

/* テーブル列幅（table-layout:fixed で確実に幅を確保） */
.results-col-r {
  width: 48px;
  text-align: center;
  font-weight: 700;
}

.results-col-payoff {
  width: 140px;
  text-align: right;
  white-space: nowrap;
}

.results-col-detail {
  width: 100px;
  text-align: center;
}

/* 1-2-3着セル：折り返し防止・十分な幅 */
.results-top3-cell {
  white-space: nowrap;
  text-align: center;
  width: 130px;
}

.results-top3-cell .waku-circle {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

.results-top3-cell .waku-sep {
  color: var(--text-muted);
  margin: 0 2px;
}

.results-kimarite {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.results-top3-names {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.results-payoff-cell {
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-mono);
}

.results-payoff-value {
  color: var(--accent);
  font-weight: 600;
}

.results-payoff-empty {
  color: var(--text-muted);
}

.results-detail-cell {
  text-align: center;
  padding: 0.5rem 0.75rem;
}

.results-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* レース詳細・結果タブ */
/* 結果一覧スマホ用カード */
.results-sp-list { display: flex; flex-direction: column; }
.results-sp-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 2px 0.5rem;
  align-items: center;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  min-width: 0;
  overflow: hidden;
}
.results-sp-row:active { background: var(--bg-card-hover); }
.rsp-r {
  grid-row: 1 / 4;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
}
.rsp-top3 {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2px;
}
.rsp-top3 .waku-circle {
  width: 20px; height: 20px; line-height: 20px;
  font-size: 0.72rem; font-weight: 700;
  text-align: center; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.rsp-top3 .waku-sep { color: var(--text-muted); margin: 0 1px; font-size: 0.72rem; }
.rsp-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.rsp-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
}
.rsp-kimarite {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 500;
  flex-shrink: 0;
}
.rsp-payoff {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.rsp-names {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 4px;
}

.results-detail-table .order-cell,
.results-detail-table .th-order {
  white-space: nowrap;
  min-width: 2.5em;
  text-align: center;
}

.results-detail-table th {
  white-space: nowrap;
}

/* PC/SP切り替え */
.show-sp { display: none; }
.hide-sp { display: block; }

/* スマホ用結果カード */
.result-cards { display: flex; flex-direction: column; gap: 0.5rem; }
.result-card {
  background: var(--bg-dark);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--border);
}
.result-card:first-child { border-left-color: #f59e0b; }
.result-card:nth-child(2) { border-left-color: #94a3b8; }
.result-card:nth-child(3) { border-left-color: #b45309; }
.result-card.result-disqualified { opacity: 0.5; }
.result-card.result-flying .rc-order,
.result-card.result-late .rc-order { color: #ef4444; }
.rc-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.rc-order {
  font-size: 1.1rem;
  font-weight: 800;
  min-width: 2.5rem;
}
.rc-name { font-weight: 600; font-size: 0.95rem; }
.rc-kimarite {
  font-size: 0.7rem;
  background: rgba(14,165,233,0.15);
  color: var(--accent);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  margin-left: auto;
  font-weight: 600;
}
.rc-details {
  display: flex;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  padding-left: 2.5rem;
}
.rc-details strong { color: var(--text); }

/* レスポンシブ (1024px) */
@media (max-width: 1024px) {
  .header-inner {
    padding: 0.5rem 1rem;
    gap: 0.5rem;
  }
  .nav {
    gap: 0.15rem;
  }
  .nav-link {
    padding: 0.25rem 0.4rem;
    font-size: 0.78rem;
  }
  .nav-link svg { display: none; }
  .main {
    padding: 1rem;
  }
  .admin-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .dashboard-title-row { flex-direction: column; align-items: flex-start; }
  .stadium-grid-v2 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.4rem; }
  .stadium-card-v2 { min-height: 120px; }
  .next-races-grid { gap: 0.5rem; }
  .next-race-card { min-width: 140px; padding: 0.5rem 0.75rem; }
  .upcoming-row { font-size: 0.75rem; gap: 0.4rem; padding: 0.4rem; }
  .race-row-card { grid-template-columns: 55px 40px 40px 30px 1fr auto; font-size: 0.78rem; gap: 0.3rem; padding: 0.4rem 0.5rem; }
  .rrc-entries { display: none; }
  .rrc-result, .rrc-payoff { display: none; }
  .course-prediction { grid-template-columns: repeat(6, 1fr); gap: 0.25rem; }
  .course-box { padding: 0.3rem 0.15rem; }
  .course-box-header { font-size: 0.8rem; }
  .course-box-name { font-size: 0.65rem; }
  .nav { gap: 0.15rem; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .nav-link { font-size: 0.75rem; padding: 0.2rem 0.3rem; white-space: nowrap; flex-shrink: 0; }
  .card { padding: 0.75rem; }
  .panel-stats { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .panel-stat-value { font-size: 1.1rem; }
  .perf-race-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .form-inline { gap: 0.4rem; flex-wrap: wrap; }
  .racer-cards { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .racer-card { padding: 0.5rem; font-size: 0.8rem; }
  .page-title { font-size: 1.2rem; }
  .page-hero { padding: 0.75rem 0; }
  .page-desc { font-size: 0.8rem; }
  .race-hero { padding: 0.5rem 0; }
  .race-meta { flex-wrap: wrap; gap: 0.3rem; font-size: 0.75rem; }
  .race-deadline-bar { flex-wrap: wrap; gap: 0.3rem; padding: 0.5rem; font-size: 0.8rem; }
  .tab-btn { font-size: 0.78rem; padding: 0.4rem 0.6rem; }
  .prediction-row { grid-template-columns: 45px 1fr 55px 35px; font-size: 0.82rem; gap: 0.2rem; padding: 0.3rem 0.5rem; }
  .trifecta-grid { gap: 0.2rem; grid-template-columns: repeat(5, 1fr); }
  .trifecta-cell { padding: 2px 4px; font-size: 0.68rem; }
  .trifecta-combo { font-size: 0.68rem; }
  .trifecta-prob { font-size: 0.56rem; }
  .value-row { font-size: 0.78rem; gap: 0.3rem; flex-wrap: wrap; }
  .value-combo { min-width: 60px; }
  .combo-list { font-size: 0.82rem; }
  h2.card-title { font-size: 0.95rem; }
  h3 { font-size: 0.9rem; }
  .link-external { font-size: 0.7rem; padding: 0.15rem 0.4rem; }
  .status-badge { font-size: 0.65rem; padding: 0.1rem 0.3rem; }
  .action-buttons { flex-wrap: wrap; gap: 0.3rem; }
  .btn { font-size: 0.8rem; padding: 0.4rem 0.75rem; }
  .race-badges { gap: 0.2rem; }

  /* 結果タブ: SP表示切替 */
  .hide-sp { display: none; }
  .show-sp { display: flex; }

  /* 払戻金SP最適化 */
  .payoffs-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .payoff-block { padding: 0.6rem; }
  .payoff-type { font-size: 0.8rem; margin-bottom: 0.3rem; }
  .payoff-list li { font-size: 0.78rem; gap: 0.3rem; padding: 0.2rem 0; }
  .payoff-combo { font-size: 0.78rem; }
  .payoff-amount { font-size: 0.78rem; }
  .payoff-pop { font-size: 0.65rem; }

  /* 結果フィルターフォームSP */
  .results-filter-form { gap: 0.5rem; }
  .results-filter-date { min-width: 120px; font-size: 0.9rem; }
  .results-filter-stadium { min-width: 100px; font-size: 0.9rem; }
  .results-filter-submit { padding: 0.45rem 1rem; }

  /* スマホ結果行 */
  .rsp-payoff { font-size: 0.78rem; }
  .results-sp-row { gap: 0 0.4rem; padding: 0.5rem 0.6rem; }
}
@media (max-width: 480px) {
  .stadium-grid-v2 { grid-template-columns: 1fr 1fr; gap: 0.3rem; }
  .stadium-card-v2 { min-height: 110px; padding: 0.5rem; }
  .sc-badges .ai-hit-badge { font-size: 0.5rem; padding: 0.05rem 0.3rem; }
  .panel-stats { grid-template-columns: repeat(2, 1fr); }
  .perf-summary { grid-template-columns: repeat(2, 1fr); }
  .racer-cards { grid-template-columns: 1fr; }
  .race-row-card { grid-template-columns: 50px 35px 35px 1fr auto; font-size: 0.72rem; }
  .rrc-dl { font-size: 0.7rem; }
  .main { padding: 0.5rem; }
  .card { padding: 0.5rem; margin-bottom: 0.5rem; }
  .prediction-row { grid-template-columns: 40px 1fr 50px 30px; font-size: 0.78rem; }
  .trifecta-grid { gap: 0.15rem; grid-template-columns: repeat(5, 1fr); }
  .trifecta-cell { padding: 2px 3px; font-size: 0.62rem; min-height: 22px; }
  .trifecta-combo { font-size: 0.62rem; }
  .trifecta-prob { font-size: 0.52rem; }
  .race-meta { font-size: 0.7rem; }
  .nav-link { font-size: 0.7rem; }
  .tab-btn { font-size: 0.72rem; padding: 0.3rem 0.5rem; }
  .race-badges .ai-hit-badge, .race-badges .upset-badge { font-size: 0.55rem; padding: 0.05rem 0.25rem; }
  .payoffs-grid { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .payoff-block { padding: 0.5rem; }
  .rc-details { padding-left: 0; font-size: 0.72rem; gap: 0.4rem; }
  .rc-order { font-size: 0.95rem; min-width: 2rem; }
  .rc-name { font-size: 0.85rem; }

  /* 締切順レース一覧 480px最適化 */
  .upcoming-row { gap: 0.2rem 0.3rem; padding: 0.35rem 0.5rem; font-size: 0.72rem; }
  .ur-cd { width: 42px; font-size: 0.72rem; }
  .ur-dl { width: 36px; font-size: 0.68rem; }
  .ur-stadium { width: 40px; font-size: 0.72rem; }
  .ur-race { width: 24px; font-size: 0.72rem; }
  .ur-weather { display: none; }
  .ur-class { display: none; }
  .ur-conf { font-size: 0.6rem; padding: 0.1rem 0.3rem; }
  .ur-entry1 { display: none; }

  /* 結果フィルターフォーム480px */
  .results-filter-form { gap: 0.4rem; }
  .results-filter-label { font-size: 0.78rem; }
  .results-filter-date { min-width: 110px; font-size: 0.85rem; padding: 0.4rem 0.5rem; }
  .results-filter-stadium { min-width: 90px; font-size: 0.85rem; padding: 0.4rem 0.5rem; }
  .results-filter-quick .btn-quick { padding: 0.35rem 0.5rem; font-size: 0.8rem; }
  .results-filter-submit { padding: 0.4rem 0.75rem; font-size: 0.85rem; }

  /* 選手検索フォーム480px */
  .player-search-form { gap: 0.5rem; }
  .player-search-form input { font-size: 0.85rem; padding: 0.4rem 0.6rem; }
  .player-search-form .btn { padding: 0.4rem 0.75rem; font-size: 0.85rem; }
}

/* ===== 買い目セクション ===== */
.bet-mode-section { overflow: hidden; }

/* 式別タブ */
.bet-type-tab {
  padding: 0.4rem 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.15s;
}
.bet-type-tab:hover { border-color: var(--accent); color: var(--text); }
.bet-type-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.confidence-bar {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem;
  border-radius: 8px; margin-bottom: 0.75rem; font-size: 0.85rem; flex-wrap: wrap;
}
.confidence-高 { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); }
.confidence-中 { background: rgba(234,179,8,0.12); border: 1px solid rgba(234,179,8,0.3); }
.confidence-低 { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); }
.confidence-label { font-weight: 600; color: var(--text-muted); }
.confidence-level { font-weight: 700; font-size: 1rem; }
.confidence-高 .confidence-level { color: #22c55e; }
.confidence-中 .confidence-level { color: #eab308; }
.confidence-低 .confidence-level { color: #ef4444; }
.confidence-score { color: var(--text-muted); font-size: 0.8rem; }
.confidence-reason {
  background: var(--bg-secondary); padding: 0.15rem 0.5rem; border-radius: 20px;
  font-size: 0.75rem; color: var(--text-muted);
}

.bet-mode-tabs {
  display: flex; gap: 0; margin-bottom: 0; border-bottom: 2px solid var(--border);
}
.bet-mode-tab {
  flex: 1; padding: 0.7rem 1rem; border: none; background: transparent;
  cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--text-muted);
  transition: all 0.2s; border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.bet-mode-tab:hover { color: var(--text); background: var(--bg-secondary); }
.bet-mode-tab.active[data-mode="stable"] {
  color: #22c55e; border-bottom-color: #22c55e; background: rgba(34,197,94,0.06);
}
.bet-mode-tab.active[data-mode="attack"] {
  color: #ef4444; border-bottom-color: #ef4444; background: rgba(239,68,68,0.06);
}
.mode-icon { font-size: 1.1rem; }

.bet-mode-content { padding: 1rem 0; }
.mode-desc {
  padding: 0.6rem 0.8rem; background: var(--bg-secondary); border-radius: 6px;
  margin-bottom: 0.8rem; font-size: 0.82rem; color: var(--text-muted); line-height: 1.5;
}
.mode-desc strong { color: var(--text); }

.bet-row {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.bet-type-badge {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px;
  font-size: 0.72rem; font-weight: 700; min-width: 48px; text-align: center;
}
.badge-3tan { background: #dc2626; color: #fff; }
.badge-2tan { background: #2563eb; color: #fff; }
.badge-3puku { background: #7c3aed; color: #fff; }
.bet-count { min-width: 35px; text-align: center; font-weight: 600; font-size: 0.85rem; }
.bet-prob { font-size: 0.8rem; color: var(--text-muted); }
.bet-reason { font-size: 0.75rem; color: var(--text-muted); }
.bet-total { margin-top: 0.5rem; font-weight: 700; font-size: 0.9rem; }

@media (max-width: 768px) {
  .bet-mode-tab { font-size: 0.8rem; padding: 0.5rem 0.5rem; }
  .bet-row { font-size: 0.82rem; gap: 0.3rem; }
  .confidence-bar { font-size: 0.78rem; padding: 0.4rem 0.6rem; }
}
@media (max-width: 480px) {
  .bet-mode-tab { font-size: 0.75rem; }
  .bet-type-badge { font-size: 0.65rem; min-width: 40px; padding: 0.1rem 0.3rem; }
}

/* ===== AI実績ページ モードタブ ===== */
.perf-mode-tab {
  flex: 1; padding: 0.6rem 1rem; border: none; background: transparent;
  cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--text-muted);
  transition: all 0.2s; border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.perf-mode-tab:hover { color: var(--text); background: var(--bg-secondary); }
.perf-mode-tab.active[data-pmode="overview"] {
  color: var(--primary); border-bottom-color: var(--primary);
}
.perf-mode-tab.active[data-pmode="stable"] {
  color: #22c55e; border-bottom-color: #22c55e; background: rgba(34,197,94,0.06);
}
.perf-mode-tab.active[data-pmode="attack"] {
  color: #ef4444; border-bottom-color: #ef4444; background: rgba(239,68,68,0.06);
}
.positive { color: var(--success) !important; }
.negative { color: var(--danger) !important; }
#venue-stats-controls,
#overview-comparison {
  min-width: 0;
}
@media (max-width: 768px) {
  .perf-mode-tab { font-size: 0.8rem; padding: 0.5rem 0.5rem; }
  .perf-race-row { grid-template-columns: 1fr auto !important; gap: 4px !important; }
  #overview-comparison { grid-template-columns: 1fr !important; }
  #mode-comparison { grid-template-columns: 1fr !important; }
  #venue-stats-controls { flex-direction: column; }
  #venue-stats-controls .perf-filter-select { width: 100%; }
}

/* ===== モバイル最適化（レース詳細テーブル） ===== */
@media (max-width: 768px) {
  .entries-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .entries-table { min-width: 900px; font-size: 0.75rem; }
  .entries-table th, .entries-table td { padding: 0.3rem 0.4rem; white-space: nowrap; }

  .racer-cards { grid-template-columns: 1fr !important; gap: 0.5rem !important; }
  .racer-card { padding: 0.8rem !important; }
  .racer-stats { font-size: 0.82rem; }

  .race-tabs { flex-wrap: wrap; }
  .race-tab { flex: 1 1 auto; padding: 0.5rem 0.3rem; font-size: 0.75rem; min-width: 0; }

  .page-hero { padding: 1rem !important; }
  .page-title { font-size: 1.2rem !important; }
  .race-meta { font-size: 0.8rem; flex-wrap: wrap; gap: 0.3rem; }
  .breadcrumb { font-size: 0.75rem; }

  .weather-panel { grid-template-columns: repeat(3, 1fr) !important; gap: 0.3rem !important; }
  .weather-item { padding: 0.4rem !important; }

  .analytics-table { min-width: 600px; font-size: 0.75rem; }
}

@media (max-width: 480px) {
  .racer-card .waku-badge { width: 28px; height: 28px; font-size: 0.9rem; }
  .racer-name { font-size: 0.95rem; }
  .stat-row { font-size: 0.78rem; }
  .race-deadline-bar { font-size: 0.8rem; flex-wrap: wrap; gap: 0.3rem; }
  .rdb-countdown { font-size: 0.8rem; }
}

/* タブのアクセシビリティ改善 */
.race-tab:focus-visible, .bet-mode-tab:focus-visible, .perf-mode-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.race-tab[aria-selected="true"] { font-weight: 700; }

/* ========== 的中速報ティッカー ========== */
.hit-ticker {
  background: linear-gradient(90deg, #1a1a2e 0%, #16213e 100%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  height: 40px;
  margin-bottom: 1rem;
}
.hit-ticker-label {
  flex-shrink: 0;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 2;
}
.hit-ticker-wrapper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}
.hit-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
  padding-left: 12px;
  will-change: transform;
}
.hit-ticker-track:hover { -webkit-animation-play-state: paused; animation-play-state: paused; }
.hit-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.8rem;
  padding: 2px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  transition: background 0.2s;
  flex-shrink: 0;
}
.hit-item:hover { background: rgba(255,255,255,0.12); }
.hit-item-gold {
  background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(239,68,68,0.1));
  border: 1px solid rgba(245,158,11,0.3);
  color: #fbbf24;
}
.hit-stadium { font-weight: 600; }
.hit-payout { font-weight: 700; color: var(--success); font-family: var(--font-mono); }
.hit-item-gold .hit-payout { color: #fbbf24; }
.hit-mode {
  font-size: 0.7rem;
  background: rgba(14,165,233,0.2);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 10px;
}

/* ========== 注目レースセクション ========== */
.featured-section { margin-bottom: 1rem; }
.featured-section .section-title-sm::before { content: '🎯'; }
.section-title-sm {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.75rem;
}
.section-title-sm::before { content: '🔥'; }
.featured-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-top: 4px;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.featured-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.featured-header-free {
  align-items: flex-end;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.featured-header .section-title-sm {
  margin-bottom: 0;
}
.featured-note {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}
.featured-grid::-webkit-scrollbar { height: 4px; }
.featured-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.featured-card {
  background: linear-gradient(135deg, var(--bg-card), #1a2744);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 170px;
  max-width: 210px;
  flex-shrink: 0;
}
.featured-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.feat-head {
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.feat-stadium { margin-right: 2px; }
.feat-conf-badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: auto;
}
.feat-countdown {
  font-size: 1.1rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--accent-hover);
  text-align: center;
}
.conf-high { background: rgba(34,197,94,0.15); color: var(--success); }
.conf-mid { background: rgba(14,165,233,0.15); color: var(--accent); }
.conf-low { background: rgba(245,158,11,0.15); color: var(--warning); }

/* ========== グレードバッジ強化 ========== */
.grade-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1.4;
}
.grade-sg {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1a1a2e;
  box-shadow: 0 0 8px rgba(251,191,36,0.4);
}
.grade-g1 {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 0 6px rgba(239,68,68,0.3);
}
.grade-g2 {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
}
.grade-g3 {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
}
.grade-ippan {
  background: rgba(148,163,184,0.15);
  color: var(--text-muted);
}

/* ========== モバイルボトムナビゲーション ========== */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  z-index: 200;
  padding: 3px 0;
  padding-bottom: env(safe-area-inset-bottom, 3px);
}
.bottom-nav-inner {
  display: flex;
  justify-content: space-around;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 2px;
}
.bnav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.52rem;
  padding: 4px 1px 3px;
  flex: 1 1 0;
  min-width: 0;
  transition: color var(--transition);
  position: relative;
  line-height: 1.2;
  gap: 1px;
}
.bnav-link:hover, .bnav-link.bnav-active { color: var(--accent); }
.bnav-link.bnav-admin { color: var(--yellow, #f59e0b); }
.bnav-link.bnav-admin.bnav-active { color: var(--accent); }
.bnav-link.bnav-cta { color: var(--success, #22c55e); }
.bnav-link.bnav-cta.bnav-active { color: var(--accent); }
.bnav-link.bnav-active .bnav-svg {
  transform: scale(1.1);
}
.bnav-svg {
  flex-shrink: 0;
  transition: transform var(--transition);
}
.bnav-icon {
  font-size: 1.2rem;
  margin-bottom: 1px;
  transition: transform var(--transition);
}
@media (max-width: 768px) {
  .bottom-nav { display: block; }
  body { padding-bottom: 60px; }
  .footer { margin-bottom: 52px; }
  .header .nav { display: none; }
  .header-inner {
    padding: 0.4rem 0.75rem;
    gap: 0.5rem;
  }
  .header-auth {
    gap: 0.35rem;
  }
  .header-auth .nav-link {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
  .header-auth .btn-sm {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }
  .header-user-name {
    max-width: 80px;
    font-size: 0.7rem;
  }
  .nav-link-logout {
    font-size: 0.65rem !important;
    padding: 0.15rem 0.35rem !important;
  }
  .logo-main { font-size: 1rem; }
  .header-clock { font-size: 0.65rem; padding: 1px 6px; }
  .main { padding: 1rem 0.75rem; }
  .card { padding: 1rem; border-radius: 10px; }
  .page-title { font-size: 1.2rem; }
}

/* ========== パンくずリスト強化 ========== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep { opacity: 0.4; }

/* ========== AI予想カード並列表示 ========== */
.ai-modes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 1rem;
}
@media (max-width: 1100px) {
  .ai-modes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .ai-modes-grid {
    grid-template-columns: 1fr;
  }
}
.ai-mode-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}
.ai-mode-card:hover { border-color: var(--accent); }
.ai-mode-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.ai-mode-name {
  font-weight: 700;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.35;
  min-width: 0;
}
.ai-mode-badge {
  font-size: 0.67rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.35;
  max-width: 100%;
  white-space: normal;
}
.badge-stable { background: rgba(34,197,94,0.2); color: var(--success); }
.badge-balanced { background: rgba(14,165,233,0.2); color: var(--accent); }
.badge-attack { background: rgba(239,68,68,0.2); color: var(--error); }
.badge-longshot { background: rgba(168,85,247,0.2); color: #a855f7; }
.badge-focus { background: rgba(14,165,233,0.2); color: var(--accent); }

/* ========== 逆張り展開予想 ========== */
.reverse-scenario-section {
  margin-top: 12px;
}
.reverse-scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.reverse-scenario-card {
  background: var(--bg-alt);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  transition: border-color 0.2s;
  min-width: 0;
}
.reverse-scenario-card:hover {
  border-color: rgba(168,85,247,0.4);
}
.rs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.rs-kimarite-badge {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 3px 12px;
  border-radius: 4px;
}
.rs-ratio {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.rs-body { }
.rs-fav {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}
.rs-fav-rate {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}
.rs-combos {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rs-combo-row {
  display: grid;
  grid-template-columns: minmax(48px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  min-width: 0;
}
.rs-combo-label {
  font-family: var(--font-mono);
  font-weight: 600;
  min-width: 0;
}
.rs-combo-bar-wrap {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.rs-combo-bar {
  height: 100%;
  background: linear-gradient(90deg, #a855f7, #7c3aed);
  border-radius: 3px;
  min-width: 2px;
}
.rs-combo-prob {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  min-width: 36px;
  text-align: right;
}
.rs-main-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.rs-main-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
}
.rs-badge-nige {
  background: rgba(34,197,94,0.15);
  color: var(--success);
  border: 1px solid rgba(34,197,94,0.3);
}
.rs-badge-tobi {
  background: rgba(239,68,68,0.15);
  color: var(--error);
  border: 1px solid rgba(239,68,68,0.3);
}
.rs-arrow {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 700;
}
.rs-longshot-hint {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(168,85,247,0.08);
  border: 1px solid rgba(168,85,247,0.2);
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.badge-win { background: rgba(245,158,11,0.2); color: var(--warning); }
.badge-place { background: rgba(20,184,166,0.2); color: #14b8a6; }
.ai-mode-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.ai-bet-row {
  display: grid;
  grid-template-columns: minmax(52px, auto) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  padding: 6px 0;
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(51,65,85,0.3);
  min-width: 0;
}
.ai-bet-row:last-child { border-bottom: none; }
.ai-bet-combo {
  font-family: var(--font-mono);
  font-weight: 600;
  min-width: 0;
}
.ai-bet-odds {
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .ai-mode-body { padding: 8px 10px; }
  .ai-mode-header { padding: 8px 10px; }
  .ai-bet-row {
    grid-template-columns: minmax(48px, auto) auto;
    font-size: 0.72rem;
    gap: 0.3rem;
  }
  .ai-bet-row > span:last-child {
    grid-column: 1 / -1;
  }
  .ai-mode-name { font-size: 0.82rem; }
  .ai-mode-badge { font-size: 0.6rem; }
  .rs-combo-row {
    grid-template-columns: minmax(46px, auto) minmax(0, 1fr) auto;
  }
  .rs-fav-rate {
    margin-left: 0;
  }
}
.ai-bet-ev { font-weight: 600; }
.ai-ev-high { color: var(--success); }
.ai-ev-mid { color: var(--accent); }
.ai-ev-low { color: var(--text-muted); }
.ai-mode-footer {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: rgba(0,0,0,0.15);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.ai-index-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-mono);
}
.ai-index-high { background: rgba(34,197,94,0.2); color: var(--success); }
.ai-index-mid { background: rgba(14,165,233,0.2); color: var(--accent); }
.ai-index-low { background: rgba(148,163,184,0.15); color: var(--text-muted); }

/* ========== オッズマトリクス表示 ========== */
.odds-matrix-wrap { overflow-x: auto; margin-top: 0.5rem; -webkit-overflow-scrolling: touch; }
.odds-matrix {
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 0.92rem;
  font-family: var(--font-mono);
  width: 100%;
  min-width: 340px;
}
.odds-matrix th {
  background: var(--bg-alt);
  color: var(--text-muted);
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 4px;
  text-align: center;
}
.odds-matrix td {
  padding: 10px 8px;
  border-radius: 4px;
  text-align: center;
  background: var(--bg-card);
  cursor: default;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.odds-matrix td:hover:not(.odds-self) {
  background: rgba(14,165,233,0.18);
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(14,165,233,0.25);
  z-index: 1;
  position: relative;
}
.odds-matrix .odds-self { background: var(--bg-alt); color: var(--text-muted); opacity: 0.4; }
.odds-value-bet {
  background: rgba(34,197,94,0.2) !important;
  color: var(--success) !important;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(34,197,94,0.4);
}
.odds-hot {
  background: rgba(239,68,68,0.12) !important;
  color: var(--error) !important;
  font-weight: 600;
}

/* 1着軸 ヘッダーセル（タップで切替） */
.odds-corner-label {
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--bg-alt);
  min-width: 52px;
  white-space: nowrap;
}
.odds-waku-th {
  cursor: pointer;
  font-weight: 800;
  font-size: 0.92rem;
  min-width: 36px;
  border-radius: 4px;
  transition: box-shadow 0.15s, transform 0.1s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.odds-waku-th:hover { transform: scale(1.08); }
.odds-waku-th.odds-th-active {
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 -3px 0 rgba(255,255,255,0.5);
  transform: scale(1.08);
}
.odds-waku-th.odds-th-active::after {
  content: '▼';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5rem;
  line-height: 1;
}
.waku-th-1 { color: #000; background: #f0f0f0; }
.waku-th-1.odds-th-active::after { color: #999; }
.waku-th-2 { color: #fff; background: #1a1a1a; }
.waku-th-2.odds-th-active::after { color: #1a1a1a; }
.waku-th-3 { color: #fff; background: #dc2626; }
.waku-th-3.odds-th-active::after { color: #dc2626; }
.waku-th-4 { color: #fff; background: #2563eb; }
.waku-th-4.odds-th-active::after { color: #2563eb; }
.waku-th-5 { color: #000; background: #facc15; }
.waku-th-5.odds-th-active::after { color: #facc15; }
.waku-th-6 { color: #000; background: #22c55e; }
.waku-th-6.odds-th-active::after { color: #22c55e; }

/* 2着軸 行ラベル */
.odds-waku-label {
  font-weight: 700;
  text-align: center;
  min-width: 32px;
  border-radius: 4px;
  font-size: 0.85rem;
}
.odds-waku-label.waku-cell-1 { color: #000; background: #f0f0f0; }
.odds-waku-label.waku-cell-2 { color: #fff; background: #1a1a1a; }
.odds-waku-label.waku-cell-3 { color: #fff; background: #dc2626; }
.odds-waku-label.waku-cell-4 { color: #fff; background: #2563eb; }
.odds-waku-label.waku-cell-5 { color: #000; background: #facc15; }
.odds-waku-label.waku-cell-6 { color: #000; background: #22c55e; }

.trifecta-board-help {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.trifecta-board-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.legend-chip-value {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.38);
  color: var(--success);
}

.legend-chip-high {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.28);
  color: #f87171;
}

.trifecta-board-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.trifecta-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 8px;
  min-width: 980px;
}

.trifecta-axis-card {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.trifecta-axis-header {
  padding: 10px 10px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
}

.trifecta-axis-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.trifecta-axis-number {
  font-size: 1rem;
  font-family: var(--font-mono);
  font-weight: 800;
}

.trifecta-axis-name {
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trifecta-axis-sub {
  font-size: 0.68rem;
  opacity: 0.82;
}

.trifecta-axis-table {
  display: grid;
  grid-template-columns: 28px 28px minmax(64px, 1fr);
  background: rgba(15, 23, 42, 0.92);
}

.trifecta-axis-row {
  display: contents;
}

.trifecta-second-cell,
.trifecta-third-cell,
.trifecta-odds-value {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  border-right: 1px solid rgba(148, 163, 184, 0.1);
  font-family: var(--font-mono);
}

.trifecta-second-cell,
.trifecta-third-cell {
  font-weight: 700;
  font-size: 0.85rem;
}

.trifecta-odds-value {
  background: rgba(30, 41, 59, 0.82);
  color: #e5e7eb;
  justify-content: flex-end;
  padding: 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
}

.trifecta-odds-value-bet {
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
}

.trifecta-odds-value-high {
  color: #f87171;
}

/* ========== パフォーマンスチャート ========== */
.perf-chart-section { margin: 1.5rem 0; }
.perf-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 768px) {
  .perf-chart-grid { grid-template-columns: 1fr; }
}
.perf-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.perf-chart-title {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-secondary);
}
.perf-highlight-card {
  background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(239,68,68,0.05));
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.perf-highlight-icon { font-size: 1.5rem; }
.perf-highlight-info { flex: 1; }
.perf-highlight-payout {
  font-size: 1.2rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: #fbbf24;
}

/* ========== 展開予想パネル ========== */
.tenkai-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 1rem 0;
}
.tenkai-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tenkai-patterns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.tenkai-card {
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  padding: 6px 4px;
  text-align: center;
}
.tenkai-type {
  font-size: 0.68rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.tenkai-prob {
  font-size: 1.1rem;
  font-weight: 800;
  font-family: var(--font-mono);
}
.tenkai-inescapable { color: var(--error); }
.tenkai-sashi { color: var(--accent); }
.tenkai-makuri { color: #a855f7; }
.tenkai-makuri-sashi { color: var(--warning); }
.tenkai-other { color: var(--text-muted); }

.ironclad-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.ironclad-high {
  background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.1));
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.3);
}
.ironclad-mid {
  background: rgba(14,165,233,0.15);
  color: var(--accent);
}
.ironclad-low {
  background: rgba(148,163,184,0.1);
  color: var(--text-muted);
}

/* ========== 選手DB強化 ========== */
.player-venue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
  margin-top: 0.75rem;
}
.player-venue-card {
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  padding: 8px;
  text-align: center;
  font-size: 0.75rem;
}
.player-venue-name { font-weight: 600; margin-bottom: 4px; }
.player-venue-stat {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
}
.player-matchup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}
.player-matchup-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
}
.player-matchup-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(51,65,85,0.4);
}

/* ========== 会場詳細レース行 ========== */
.races-stadium-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.race-detail-row {
  display: grid;
  grid-template-columns: 48px 90px 55px 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg-card);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.race-detail-row:hover { background: var(--bg-card-hover); }
.rdr-number { font-weight: 800; font-size: 1rem; }
.rdr-status { white-space: nowrap; }
.rdr-deadline { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); }
.rdr-name { font-size: 0.78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdr-entries { display: flex; gap: 0.3rem; overflow: hidden; }
.rdr-result-area { display: flex; align-items: center; gap: 0.6rem; }
.rdr-result { font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; color: var(--success); }
.rdr-payoff { font-family: var(--font-mono); font-size: 0.8rem; color: var(--warning); }
.rdr-badges { display: flex; gap: 0.3rem; align-items: center; }

@media (max-width: 768px) {
  .race-detail-row {
    grid-template-columns: 40px 80px 1fr auto;
    gap: 0.3rem;
    padding: 0.5rem;
  }
  .rdr-name, .rdr-entries { display: none; }
  .rdr-deadline { display: none; }
}
@media (max-width: 480px) {
  .race-detail-row {
    grid-template-columns: 36px 70px 1fr auto;
    font-size: 0.82rem;
  }
}

/* ========== タッチ最適化 ========== */
@media (max-width: 768px) {
  .btn-sm, .period-btn, .bet-mode-tab, .race-tab, .perf-mode-tab {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .featured-grid { gap: 6px; }
  .ai-modes-grid { grid-template-columns: 1fr; }
  .reverse-scenarios { grid-template-columns: 1fr; }
  .tenkai-patterns { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .tenkai-prob { font-size: 0.95rem; }
  .tenkai-type { font-size: 0.62rem; }
  .perf-highlight-card { flex-direction: column; text-align: center; }
  .odds-matrix { font-size: 0.82rem; min-width: 300px; }
  .odds-matrix td { padding: 8px 5px; }
  .odds-matrix th { padding: 6px 4px; }
  .odds-waku-th { font-size: 0.82rem; min-width: 30px; }
  .trifecta-board { min-width: 900px; }
  .trifecta-axis-name { font-size: 0.78rem; }
  .trifecta-odds-value { font-size: 0.88rem; padding: 0 8px; }
  .player-venue-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .dashboard-hit-summary {
    margin: 0.2rem 0 0.9rem 0;
    padding: 6px 8px;
    border-radius: 6px;
  }
  .dashboard-hit-summary-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
    align-items: stretch;
  }
  .dashboard-hit-summary-title {
    grid-column: 1 / -1;
    font-size: 0.76rem;
  }
  .dashboard-hit-summary-badges {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
  }
  .dashboard-hit-summary .dashboard-hit-summary-badge {
    font-size: 0.7rem;
    padding: 4px 6px;
    text-align: center;
    justify-self: stretch;
  }
  .dashboard-hit-summary-link {
    grid-column: 1 / -1;
    margin-left: 0;
    text-align: center;
    font-size: 0.68rem;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    white-space: normal;
  }

  .next-races-section {
    margin-bottom: 0.65rem;
  }
  .next-races-section .section-title-sm {
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
  }
  .next-races-grid {
    gap: 0.45rem;
    padding-top: 2px;
    padding-bottom: 2px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .next-race-card {
    min-width: calc((100vw - 40px) / 2.85);
    max-width: calc((100vw - 40px) / 2.65);
    padding: 0.28rem 0.4rem;
    gap: 0.12rem 0.3rem;
    border-radius: 8px;
    scroll-snap-align: start;
  }
  .nrc-label {
    font-size: 0.52rem;
    padding: 0.06rem 0.28rem;
  }
  .nrc-stadium {
    font-size: 0.78rem;
  }
  .nrc-race {
    font-size: 0.68rem;
  }
  .nrc-time {
    font-size: 0.64rem;
  }
  .nrc-countdown {
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .featured-section {
    margin-bottom: 0.65rem;
  }
  .featured-section .section-title-sm {
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
  }
  .featured-grid {
    gap: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .featured-card {
    min-width: calc((100vw - 40px) / 2.85);
    max-width: calc((100vw - 40px) / 2.65);
    padding: 5px 7px;
    gap: 3px;
    border-radius: 8px;
    scroll-snap-align: start;
  }
  .feat-head {
    font-size: 0.76rem;
    gap: 3px;
    flex-wrap: wrap;
  }
  .feat-conf-badge {
    font-size: 0.55rem;
    padding: 1px 5px;
    margin-left: 0;
  }
  .feat-countdown {
    font-size: 0.8rem;
    text-align: left;
    line-height: 1.2;
  }
}

@media (max-width: 480px) {
  .featured-grid { gap: 5px; }
  .hit-ticker { height: 36px; }
  .hit-ticker-label { font-size: 0.65rem; padding: 0 8px; }
  .hit-item { font-size: 0.7rem; padding: 1px 6px; }
}

/* ========== UI/UX改善: ユーティリティ ========== */
.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}

.stat-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
}
.stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.75rem;
}
.stat-card {
  text-align: center;
  padding: 0.75rem 0.5rem;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.text-success { color: var(--success); }
.text-error { color: var(--error); }
.text-warning { color: var(--warning); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); }
.font-mono { font-family: var(--font-mono); }

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.empty-state-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}
.empty-state p {
  margin: 0;
  font-size: 0.9rem;
}

/* タブの汎用スタイル強化 */
.tab-nav {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab-nav-btn {
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  white-space: nowrap;
}
.tab-nav-btn:hover {
  color: var(--text);
}
.tab-nav-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* アニメーション軽減対応 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* スクロールバー */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}


/* 会員制限のぼかし表示 */
.prediction-locked {
  position: relative;
  overflow: hidden;
}
.prediction-locked::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(transparent, var(--bg-card));
  pointer-events: none;
}
.prediction-upgrade-cta {
  text-align: center;
  padding: 1.5rem;
  background: rgba(59,130,246,0.08);
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  margin-top: -0.5rem;
}
.prediction-upgrade-cta p {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ユーザーバッジ */
.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.user-badge-admin { background: rgba(239,68,68,0.15); color: #fca5a5; }
.user-badge-member { background: rgba(59,130,246,0.15); color: var(--accent); }
.user-badge-free { background: rgba(148,163,184,0.15); color: var(--text-muted); }

/* マイページ */
.mypage-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 0;
}
.mypage-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
}
.mypage-section {
  margin-bottom: 1.5rem;
}
.mypage-section-title {
  margin-bottom: 1rem;
}
.mypage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.mypage-table th,
.mypage-table td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.mypage-table th {
  width: 140px;
  font-weight: 600;
  color: var(--text);
  background: rgba(59,130,246,0.05);
}
.mypage-table td {
  color: var(--text-secondary);
}
.mypage-table-spaced {
  margin-bottom: 1rem;
}
.mypage-status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.mypage-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.mypage-status-dot-success { background: var(--success); }
.mypage-status-dot-warning { background: var(--warning); }
.mypage-status-dot-muted { background: var(--text-muted); }
.mypage-status-text {
  font-weight: 600;
}
.mypage-status-text-success { color: var(--success); }
.mypage-status-text-warning { color: var(--warning); }
.mypage-status-text-muted { color: var(--text-muted); }
.mypage-note {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}
.mypage-danger-section {
  border: 1px solid rgba(239,68,68,0.2);
}
.mypage-danger-title {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.mypage-danger-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.mypage-danger-btn {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  font-size: 0.85rem;
}


/* キャンペーンバナー */
.campaign-banner {
  background: linear-gradient(90deg, rgba(245,158,11,0.15), rgba(59,130,246,0.15));
  border: 1px solid rgba(245,158,11,0.3);
  padding: 0.6rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fcd34d;
}

/* 法的ページ */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 0;
}
.legal-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
}
.legal-updated {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}
.legal-section {
  margin-bottom: 1.5rem;
}
.legal-section h2 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}
.legal-section p, .legal-section li {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.legal-section ul {
  padding-left: 1.2rem;
  margin: 0.5rem 0;
}
.legal-section li {
  margin-bottom: 0.3rem;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.legal-table th, .legal-table td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.legal-table th {
  width: 140px;
  font-weight: 600;
  color: var(--text);
  background: rgba(59,130,246,0.05);
}
.legal-table td {
  color: var(--text-secondary);
}
.legal-table a {
  color: var(--accent);
  text-decoration: none;
}

/* ========== 注目ページ フィルター・ソート ========== */
.pickup-venue-btn, .pickup-sort-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all 0.15s;
}
.pickup-venue-btn:hover, .pickup-sort-btn:hover {
  background: rgba(14,165,233,0.1);
  color: var(--accent);
}
.pickup-venue-btn.active, .pickup-sort-btn.active {
  background: rgba(14,165,233,0.15);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}


/* ── イン崩壊メーター ── */
.collapse-meter-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 0.8rem 0;
}
.collapse-meter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}
.collapse-meter-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}
.collapse-recommended-mode {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.25rem 0.8rem;
  border-radius: 20px;
  color: #fff;
}
.collapse-mode-stable { background: #2563eb; }
.collapse-mode-balanced { background: #059669; }
.collapse-mode-attack { background: #d97706; }
.collapse-mode-longshot { background: #dc2626; }
.collapse-mode-skip { background: #6b7280; }
.collapse-meter-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.collapse-meter-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.collapse-meter-bar-container {
  position: relative;
  height: 28px;
  background: linear-gradient(90deg, #2563eb 0%, #059669 30%, #d97706 55%, #dc2626 100%);
  border-radius: 14px;
  overflow: hidden;
}
.collapse-meter-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 14px 0 0 14px;
  transition: width 0.8s ease;
}
.collapse-meter-bar[data-level="safe"] {
  background: rgba(37,99,235,0.25);
  border-right: 3px solid #2563eb;
}
.collapse-meter-bar[data-level="caution"] {
  background: rgba(5,150,105,0.25);
  border-right: 3px solid #059669;
}
.collapse-meter-bar[data-level="danger"] {
  background: rgba(217,119,6,0.25);
  border-right: 3px solid #d97706;
}
.collapse-meter-bar[data-level="extreme"] {
  background: rgba(220,38,38,0.25);
  border-right: 3px solid #dc2626;
}
.collapse-meter-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.collapse-meter-guide {
  font-size: 0.82rem;
  color: var(--text);
  padding-top: 0.2rem;
}
.collapse-guide-item {
  display: block;
  padding: 0.3rem 0.5rem;
  background: var(--bg-dark);
  border-radius: 6px;
  border-left: 3px solid var(--primary);
}

/* ── 環境コンディションパネル ── */
.env-condition-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}
.env-condition-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 2px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.env-item.env-tailwind {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.env-tailwind .env-val { color: #16a34a; }
.env-item.env-headwind {
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.3);
}
.env-headwind .env-val { color: #ea580c; }
.wind-type-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
  background: rgba(99, 102, 241, 0.15);
  color: var(--primary);
}
.env-condition-title {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.env-condition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 0.5rem;
}
.env-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.4rem 0.2rem;
  background: var(--bg-dark);
  border-radius: 8px;
  text-align: center;
}
.env-item.env-warn {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.env-icon {
  font-size: 1.3rem;
  margin-bottom: 0.15rem;
}
.env-val {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.2;
}
.env-warn .env-val {
  color: #ef4444;
}
.env-lbl {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.env-impact-notes {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.env-impact-item {
  font-size: 0.8rem;
  color: var(--text);
  padding: 0.3rem 0.6rem;
  background: rgba(37, 99, 235, 0.06);
  border-radius: 6px;
  border-left: 3px solid var(--primary);
}

.detail-collect-body.collapsed {
  display: none;
}
.detail-collect-body {
  display: block;
}

/* ========== 的中実績ページ（BOATERS風） ========== */

.hits-controls {
  margin-bottom: 1rem;
}
.hits-period-bar {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.hits-period-btn {
  flex: 1;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  border-right: 1px solid var(--border);
}
.hits-period-btn:last-child {
  border-right: none;
}
.hits-period-btn:hover {
  color: var(--text);
  background: var(--bg-card-hover);
}
.hits-period-btn.active {
  color: #fff;
  background: var(--accent);
}

.hits-filter-section {
  margin-bottom: 1rem;
}
.hits-section-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 12px 0;
}
.hits-tabs {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 10px;
}
.hits-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  border-right: 1px solid var(--border);
}
.hits-tab:last-child {
  border-right: none;
}
.hits-tab:hover {
  color: var(--text);
  background: var(--bg-card-hover);
}
.hits-tab.active {
  color: var(--text);
  background: var(--bg-card-hover);
  border-bottom: 2px solid var(--accent);
}
.hits-tab-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
}
.hits-tab-icon-stable { background: #22c55e; }
.hits-tab-icon-balanced { background: #3b82f6; }
.hits-tab-icon-attack { background: #f97316; }

.hits-sort-bar {
  display: flex;
  gap: 8px;
}
.hits-sort-btn {
  padding: 6px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.hits-sort-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.hits-sort-btn.active {
  background: var(--text);
  color: var(--bg-dark);
  border-color: var(--text);
}

.hits-cards-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 1rem;
}

.hits-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.hits-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}
.hits-card-stable::before { background: #22c55e; }
.hits-card-balanced::before { background: #3b82f6; }
.hits-card-attack::before { background: #f97316; }

.hits-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.hits-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.hits-card-date {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.hits-card-hit-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #dc2626, #ef4444);
  padding: 3px 10px;
  border-radius: 14px;
}
.hits-card-hit-badge svg {
  width: 12px;
  height: 12px;
}
.hits-card-race {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.hits-card-venue {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.hits-recommended-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: #a855f7;
  border: 1px solid rgba(168,85,247,0.3);
  background: rgba(168,85,247,0.08);
  padding: 1px 6px;
  border-radius: 4px;
}

.hits-card-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.hits-mode-indicator {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hits-mode-indicator-stable { background: rgba(34,197,94,0.15); border: 2px solid #22c55e; }
.hits-mode-indicator-balanced { background: rgba(59,130,246,0.15); border: 2px solid #3b82f6; }
.hits-mode-indicator-attack { background: rgba(249,115,22,0.15); border: 2px solid #f97316; }

.hits-card-mode-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.hits-card-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 10px;
}

.hits-card-result {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.hits-card-result-label {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.hits-card-odds {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.hits-card-odds-value {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.hits-card-odds-unit {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.hits-card-bet {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.hits-card-payout {
  text-align: right;
}
.hits-card-payout-value {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--success);
}
.hits-card-payout-value small {
  font-size: 0.72rem;
  font-weight: 600;
}

.hits-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.hits-page-btn {
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.hits-page-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}
.hits-page-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

@media (max-width: 768px) {
  .hits-period-bar {
    flex-wrap: wrap;
  }
  .hits-period-btn {
    padding: 8px 6px;
    font-size: 0.75rem;
  }
  .hits-tabs {
    flex-wrap: wrap;
  }
  .hits-tab {
    padding: 8px 6px;
    font-size: 0.75rem;
  }
  .hits-card {
    padding: 12px 16px;
  }
  .hits-card-venue {
    font-size: 1rem;
  }
  .hits-card-odds-value {
    font-size: 1.3rem;
  }
  .hits-card-payout-value {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .hits-period-bar {
    border-radius: var(--radius-sm);
  }
  .hits-period-btn {
    padding: 7px 4px;
    font-size: 0.7rem;
  }
  .hits-tabs {
    border-radius: var(--radius-sm);
  }
  .hits-tab {
    font-size: 0.7rem;
    padding: 7px 4px;
    gap: 3px;
  }
  .hits-tab-icon {
    width: 12px;
    height: 12px;
  }
  .hits-card-result {
    flex-direction: column;
    align-items: flex-start;
  }
  .hits-card-payout {
    text-align: left;
  }
}

/* 推奨度★マーク */
.rt-rec-stars, .ur-rec-stars {
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  white-space: nowrap;
}
.rec-high {
  background: rgba(234,179,8,0.18);
  color: #facc15;
  font-weight: 700;
}
.rec-mid {
  background: rgba(96,165,250,0.15);
  color: #60a5fa;
  font-weight: 600;
}