/* === keirin.life · TERMINAL theme === */

:root {
  --bg: #0A0D10;
  --panel: #11161B;
  --panel2: #0D1216;
  --border: #1C232B;
  --border-strong: #2A3440;
  --text: #D9E0E8;
  --text-dim: #8A94A3;
  --text-faint: #555F6B;
  --amber: #F59E0B;
  --cyan: #22D3EE;
  --magenta: #E879F9;
  --hit: #22C55E;
  --miss: #EF4444;
  --warn: #F59E0B;
  --rank-S: #F87171;
  --rank-A: #FB923C;
  --rank-B: #EAB308;
  --accent: #F59E0B;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sans: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}

body.kl-terminal {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
}
.kl-mono { font-family: var(--mono); font-feature-settings: 'tnum' 1; }
.kl-up { color: var(--hit); }
.kl-down { color: var(--miss); }
.kl-warn { color: var(--warn); }
.kl-dim { color: var(--text-dim); }
.kl-faint { color: var(--text-faint); }
.kl-tr { text-align: right; }

.kl-shell { max-width: 1600px; margin: 0 auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }

/* Topbar */
.kl-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: var(--panel2);
  border: 1px solid var(--border); font-family: var(--mono); font-size: 11px;
  gap: 16px; height: 40px;
}
.kl-brand { font-weight: 800; letter-spacing: 0.12em; color: var(--text); }
.kl-brand .kl-dot { color: var(--accent); margin: 0 6px; }
.kl-tabs { display: flex; gap: 0; }
.kl-tabs a {
  color: var(--text-dim); padding: 6px 14px; text-decoration: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  border-bottom: 2px solid transparent;
}
.kl-tabs a:hover { color: var(--text); }
.kl-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
.kl-meta { display: flex; gap: 14px; color: var(--text-dim); }
.kl-meta b { color: var(--text); }

/* KPI strip */
.kl-kpi {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
}
.kl-stat { background: var(--panel); padding: 8px 12px; }
.kl-stat.hi {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--panel)) 0%, var(--panel) 100%);
  border-left: 2px solid var(--accent);
}
.kl-stat-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  color: var(--text-dim); text-transform: uppercase;
}
.kl-stat-value { font-size: 20px; font-weight: 700; line-height: 1.1; font-family: var(--mono); }
.kl-stat-unit { font-size: 11px; color: var(--text-dim); font-weight: 400; margin-left: 3px; }
.kl-stat-delta { font-family: var(--mono); font-size: 10px; margin-top: 2px; }
.kl-stat-delta.up { color: var(--hit); }
.kl-stat-delta.down { color: var(--miss); }

/* Panel */
.kl-panel { background: var(--panel); border: 1px solid var(--border); display: flex; flex-direction: column; }
.kl-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--panel2);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
}
.kl-panel-title { color: var(--text); font-weight: 700; display: flex; align-items: center; gap: 8px; letter-spacing: 0.12em; }
.kl-panel-title::before { content: ''; width: 6px; height: 6px; background: var(--accent); }
.kl-panel-tag { font-size: 9px; background: var(--border); color: var(--text-dim); padding: 1px 6px; font-weight: 400; margin-left: 4px; }
.kl-panel-body { padding: 10px; }
.kl-panel-body-flush { padding: 0; }

.kl-panel.spotlight { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.kl-panel.spotlight .kl-panel-head {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, var(--panel2)), var(--panel2) 50%);
}

/* Grid */
.kl-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(380px, 1fr); gap: 10px; }
.kl-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* Filters */
.kl-filters { display: flex; gap: 0; }
.kl-filters a, .kl-filters button {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  padding: 3px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  cursor: pointer; text-decoration: none;
}
.kl-filters a:hover, .kl-filters button:hover { color: var(--text); border-color: var(--border-strong); }
.kl-filters a.active, .kl-filters button.active { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 700; }

/* Race table */
.kl-race-wrap { max-height: 720px; overflow: auto; }
.kl-race-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.kl-race-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel2); color: var(--text-dim);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 6px 8px; text-align: left;
  border-bottom: 1px solid var(--border-strong); font-weight: 500;
}
.kl-race-table th.kl-tr { text-align: right; }
.kl-race-table tbody td {
  padding: 5px 8px; border-bottom: 1px solid var(--border);
  font-family: var(--mono); white-space: nowrap;
}
.kl-race-row { cursor: pointer; }
.kl-race-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.kl-race-row.kl-selected td { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.kl-race-row.kl-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.kl-race-row.is-hit td { background: color-mix(in srgb, var(--hit) 6%, transparent); }
.kl-race-row.row-S td:first-child { box-shadow: inset 2px 0 0 var(--rank-S); }
.kl-race-row.row-A td:first-child { box-shadow: inset 2px 0 0 var(--rank-A); }
.kl-race-row.row-B td:first-child { box-shadow: inset 2px 0 0 var(--rank-B); }
.kl-td-velo { color: var(--text); font-weight: 600; }
.kl-td-line { color: var(--amber); font-weight: 600; }
.kl-td-class { font-size: 10px; color: var(--text-dim); }

/* Rank & chips */
.kl-rank {
  display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 800;
  padding: 1px 5px; color: #000; margin-right: 4px;
}
.kl-rank.r-S { background: var(--rank-S); }
.kl-rank.r-A { background: var(--rank-A); }
.kl-rank.r-B { background: var(--rank-B); }
.kl-rank.large { font-size: 18px; padding: 4px 10px; }
.kl-pat-chip {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  padding: 1px 6px; border: 1px solid; margin-right: 3px;
}
.kl-pat-chip.r-S { color: var(--rank-S); border-color: color-mix(in srgb, var(--rank-S) 50%, transparent); background: color-mix(in srgb, var(--rank-S) 10%, transparent); }
.kl-pat-chip.r-A { color: var(--rank-A); border-color: color-mix(in srgb, var(--rank-A) 50%, transparent); background: color-mix(in srgb, var(--rank-A) 10%, transparent); }
.kl-pat-chip.r-B { color: var(--rank-B); border-color: color-mix(in srgb, var(--rank-B) 50%, transparent); background: color-mix(in srgb, var(--rank-B) 10%, transparent); }

/* Spotlight */
.kl-spot { display: flex; flex-direction: column; gap: 10px; }
.kl-spot-head { display: flex; justify-content: space-between; align-items: center; }
.kl-spot-velo { font-size: 20px; font-weight: 800; }
.kl-spot-race { font-size: 24px; font-weight: 900; color: var(--accent); font-family: var(--mono); }
.kl-spot-line {
  font-size: 16px; color: var(--amber); letter-spacing: 0.08em; font-weight: 700;
  padding: 8px 10px; background: var(--panel2); border: 1px dashed var(--border-strong);
  font-family: var(--mono);
}
.kl-spot-meta { display: flex; gap: 14px; font-size: 11px; color: var(--text-dim); font-family: var(--mono); }
.kl-spot-meta b { color: var(--text); }

/* AI box */
.kl-ai {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cyan) 6%, var(--panel2)), var(--panel2));
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, var(--border));
  padding: 10px;
}
.kl-ai-tag { background: var(--cyan); color: #000; padding: 1px 6px; font-weight: 800; font-size: 9px; letter-spacing: 0.1em; font-family: var(--mono); }
.kl-ai-body { font-size: 12px; color: var(--text); line-height: 1.6; margin: 6px 0 0; }
.kl-ai-reco { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12px; }
.kl-reco-tag { background: var(--miss); color: #fff; padding: 1px 6px; font-weight: 800; font-size: 9px; letter-spacing: 0.1em; margin-right: 8px; font-family: var(--mono); }

/* Ticker */
.kl-ticker { background: var(--panel2); border: 1px solid var(--border); overflow: hidden; height: 26px; }
.kl-ticker-track { display: flex; animation: kl-tick 60s linear infinite; white-space: nowrap; height: 100%; align-items: center; }
@keyframes kl-tick { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.kl-tick-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; font-family: var(--mono); font-size: 11px; }
.kl-tick-item.hit .kl-tick-velo { color: var(--hit); }
.kl-tick-velo { color: var(--text); font-weight: 600; }
.kl-tick-pay { color: var(--text); font-weight: 700; }
.kl-tick-pay.hit { color: var(--hit); }
.kl-tick-sep { color: var(--text-faint); }

/* Perf */
.kl-perf-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 4px; }
.kl-perf-title h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 0.04em; }
.kl-perf-sub { margin-top: 2px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); font-family: var(--mono); }
.kl-perf-ctrls { display: flex; gap: 8px; align-items: center; }
.kl-seg { display: flex; border: 1px solid var(--border); }
.kl-seg a, .kl-seg button {
  background: transparent; border: none; color: var(--text-dim);
  padding: 4px 12px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; cursor: pointer; text-decoration: none;
}
.kl-seg a.active, .kl-seg button.active { background: var(--accent); color: #000; font-weight: 700; }

.kl-chart-wrap { padding: 10px; background: var(--panel); }
.kl-perf-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1.3fr); gap: 10px; }

/* Pattern filter */
.kl-pf-head, .kl-pf-row {
  display: grid; grid-template-columns: 22px minmax(60px, 1fr) 48px 60px 48px;
  align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; padding: 4px 6px;
}
.kl-pf-head { color: var(--text-dim); font-size: 9px; letter-spacing: 0.1em; border-bottom: 1px solid var(--border-strong); }
.kl-pf-row { border-bottom: 1px dashed var(--border); cursor: pointer; color: var(--text); }
.kl-pf-row.off { opacity: 0.35; }
.kl-pf-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* RR bars */
.kl-rr-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; margin-bottom: 6px; }
.kl-rr-bar { position: relative; height: 18px; background: var(--panel2); border: 1px solid var(--border); overflow: hidden; }
.kl-rr-fill { position: absolute; top: 0; bottom: 0; left: 0; }
.kl-rr-fill.win { background: color-mix(in srgb, var(--hit) 70%, transparent); }
.kl-rr-fill.mid { background: color-mix(in srgb, var(--warn) 70%, transparent); }
.kl-rr-fill.loss { background: color-mix(in srgb, var(--miss) 70%, transparent); }
.kl-rr-100 { position: absolute; top: 0; bottom: 0; left: 66.67%; width: 1px; background: var(--text-faint); }
.kl-rr-val { position: absolute; right: 6px; top: 2px; font-size: 10px; font-weight: 700; font-family: var(--mono); }

/* Perf table */
.kl-perf-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.kl-perf-table thead th {
  position: sticky; top: 0; background: var(--panel2); color: var(--text-dim);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border-strong); font-weight: 500;
}
.kl-perf-table th.kl-tr { text-align: right; }
.kl-perf-table tbody td { padding: 5px 10px; border-bottom: 1px solid var(--border); font-family: var(--mono); }
.kl-perf-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.kl-perf-table tbody td.kl-tr { text-align: right; }

/* Date nav */
.kl-datenav {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--panel); border: 1px solid var(--border); padding: 6px 12px;
  font-family: var(--mono); font-size: 11px;
}
.kl-datenav a {
  color: var(--text-dim); text-decoration: none; padding: 3px 10px; border: 1px solid var(--border);
}
.kl-datenav a:hover { color: var(--accent); border-color: var(--accent); }
.kl-datenav input[type=date] {
  background: var(--panel2); border: 1px solid var(--border-strong); color: var(--text);
  font-family: var(--mono); padding: 3px 8px; font-size: 11px;
}

/* Result badge */
.kl-result-badge {
  display: inline-flex; align-items: center; gap: 6px; background: var(--panel2);
  border: 1px solid var(--border-strong); padding: 3px 8px; font-family: var(--mono); font-size: 11px;
}
.kl-result-badge .amt { color: var(--text); font-weight: 700; }
.kl-result-badge.hit { border-color: var(--hit); }
.kl-result-badge.hit .amt { color: var(--hit); }

/* === LIGHT THEME — activated via <html class="theme-light"> === */
html.theme-light {
  color-scheme: light;
  --bg: #F7F5EF;
  --panel: #FFFFFF;
  --panel2: #F2EEE3;
  --border: #E1DBCB;
  --border-strong: #C9C2B2;
  --text: #1F2937;
  --text-dim: #5B6472;
  --text-faint: #9AA2B0;
  --amber: #B45309;
  --cyan: #0E7490;
  --magenta: #A21CAF;
  --hit: #047857;
  --miss: #B91C1C;
  --warn: #B45309;
  --rank-S: #DC2626;
  --rank-A: #EA580C;
  --rank-B: #CA8A04;
  --accent: #B45309;
}
html.theme-light body.kl-terminal { background: var(--bg); color: var(--text); }
html.theme-light .kl-rank { color: #FFF; }
html.theme-light .kl-filters a.active, html.theme-light .kl-filters button.active,
html.theme-light .kl-seg a.active, html.theme-light .kl-seg button.active { color: #FFF; }
html.theme-light .kl-ai-tag { color: #FFF; }

/* Theme toggle */
.kl-theme-toggle {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  padding: 4px 10px; cursor: pointer; margin-left: 10px;
}
.kl-theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* Table legend / 凡例 */
.kl-legend {
  border-top: 1px dashed var(--border);
  background: var(--panel2);
  padding: 10px 12px;
  font-size: 10px;
  line-height: 1.7;
  color: var(--text-dim);
}
.kl-legend-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
}
.kl-legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px 18px;
}
.kl-legend-grid b { color: var(--text); font-weight: 700; margin-right: 4px; }
.kl-legend-note {
  margin-top: 8px; padding-top: 6px; border-top: 1px dotted var(--border);
  font-size: 10px; color: var(--text-dim);
}

/* Responsive */
@media (max-width: 1100px) {
  .kl-grid, .kl-perf-grid { grid-template-columns: 1fr; }
  .kl-kpi { grid-template-columns: repeat(4, 1fr); }
  .kl-topbar { flex-wrap: wrap; height: auto; }
}
@media (max-width: 640px) {
  .kl-kpi { grid-template-columns: repeat(2, 1fr); }
  .kl-meta { display: none; }
}