:root {
  color-scheme: light;
  --ink: #1f2925;
  --muted: #67736d;
  --line: #d8dfdb;
  --surface: #fff;
  --surface-alt: #f3f6f4;
  --header: #16201c;
  --green: #087c63;
  --green-soft: #e2f2ec;
  --amber: #a45f09;
  --amber-soft: #fff2dc;
  --red: #ad3d3d;
  --red-soft: #fbeaea;
  --blue: #2e658f;
  --blue-soft: #e7f0f7;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--surface-alt); color: var(--ink); font: 14px/1.4 "Segoe UI", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
button, input { font: inherit; letter-spacing: 0; }

.app-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 24px; color: #fff; background: var(--header); border-bottom: 3px solid #d69a31; }
.app-header h1 { margin: 0; font-size: 21px; }
.app-header p { margin: 3px 0 0; color: #b8c6c0; font-size: 12px; }
.connection { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.connection time { margin-left: 8px; color: #b8c6c0; font-variant-numeric: tabular-nums; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #98a19d; }
.status-dot.live { background: #3cc59d; box-shadow: 0 0 0 4px rgb(60 197 157 / 15%); }
.status-dot.partial { background: #e6a63b; }
.status-dot.error { background: #e66d6d; }

.toolbar { min-height: 58px; display: flex; align-items: center; gap: 16px; padding: 9px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.segmented { display: inline-grid; grid-template-columns: repeat(3, minmax(58px, 1fr)); overflow: hidden; border: 1px solid #b9c4be; border-radius: 6px; }
.segmented button { min-height: 34px; padding: 6px 12px; border: 0; border-right: 1px solid #b9c4be; background: #fff; color: #344039; cursor: pointer; }
.segmented button:last-child { border-right: 0; }
.segmented button.active { color: #fff; background: var(--green); }
.search { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.search input { width: min(280px, 30vw); min-height: 34px; padding: 6px 10px; border: 1px solid #b9c4be; border-radius: 5px; outline: none; }
.search input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgb(8 124 99 / 12%); }
.event-count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.alert-sound-toggle { min-height: 34px; padding: 5px 10px; color: var(--green); background: #fff; border: 1px solid #9fb8ad; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.alert-sound-toggle[aria-pressed="false"] { color: var(--muted); background: #eef2f0; border-color: #c8d0cc; }
.warning { padding: 9px 24px; color: #7e2a2a; background: var(--red-soft); border-bottom: 1px solid #efc8c8; }

.workspace { display: grid; grid-template-columns: minmax(330px, 38%) minmax(0, 1fr); min-height: calc(100vh - 133px); }
.event-panel { min-width: 0; display: flex; flex-direction: column; background: #f9fbfa; border-right: 1px solid var(--line); }
.analysis-panel { min-width: 0; background: var(--surface); }
.section-heading { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; background: #eef2f0; border-bottom: 1px solid var(--line); }
.section-heading h2, .selected-heading h2 { margin: 0; font-size: 15px; }
.section-heading p, .selected-heading p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.section-heading > span { display: inline-grid; place-items: center; width: 26px; height: 26px; color: #fff; background: var(--red); border-radius: 4px; font-weight: 700; }
.event-list { max-height: clamp(220px, calc(100vh - 600px), 420px); min-height: 150px; overflow-y: auto; }
.event-row { width: 100%; min-height: 96px; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 16px; text-align: left; color: inherit; background: #fff; border-bottom: 1px solid #e5eae7; cursor: pointer; }
.event-row:hover { background: #f5f8f6; }
.event-row.selected { background: #eaf4f0; box-shadow: inset 4px 0 var(--green); }
.event-check { width: 17px; height: 17px; margin: 0; accent-color: var(--green); cursor: pointer; }
.event-body { min-width: 0; }
.event-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.sport-tag { padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 650; }
.sport-tag.basketball { color: var(--amber); background: var(--amber-soft); }
.sport-tag.volleyball { color: var(--green); background: var(--green-soft); }
.league { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.event-score { font-variant-numeric: tabular-nums; }
.event-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 7px; margin-top: 7px; }
.event-match strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-match strong:last-child { text-align: right; }
.event-match span { color: #8b948f; font-size: 11px; }
.event-market { display: flex; gap: 14px; margin-top: 7px; color: #53605a; font-size: 12px; font-variant-numeric: tabular-nums; }

.profit-panel { border-top: 8px solid var(--surface-alt); border-bottom: 1px solid var(--line); background: #fbfcfb; }
.profit-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 14px 4px; }
.profit-heading > div { display: grid; gap: 2px; min-width: 0; }
.profit-heading strong { font-size: 13px; }
.profit-heading > div span { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.profit-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
.profit-value.positive { color: var(--green); }
.profit-value.negative { color: var(--red); }
.profit-value.flat { color: var(--muted); }
.profit-chart-canvas { position: relative; min-height: 170px; padding: 0 10px; }
.profit-chart-canvas svg { display: block; width: 100%; height: auto; min-height: 170px; }
.profit-chart-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; color: var(--muted); font-size: 11px; text-align: center; }
.profit-chart-empty[hidden] { display: none; }
.profit-grid-line { stroke: #dde4e0; stroke-width: 1; }
.profit-zero-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.profit-axis-label { fill: var(--muted); font-size: 10px; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; }
.profit-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.profit-line.positive { stroke: var(--green); }
.profit-line.negative { stroke: var(--red); }
.profit-dot { stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.profit-dot.won { fill: var(--green); }
.profit-dot.lost { fill: var(--red); }
.profit-dot.void { fill: var(--amber); }
.profit-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 4px 14px 11px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }

.shadow-panel { border-top: 8px solid var(--surface-alt); border-bottom: 1px solid var(--line); background: #fbfcfb; }
.shadow-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 14px 3px; }
.shadow-heading > div { display: grid; gap: 2px; min-width: 0; }
.shadow-heading strong { font-size: 13px; }
.shadow-heading > div span { color: var(--muted); font-size: 11px; }
.shadow-value { font-variant-numeric: tabular-nums; }
.shadow-value.positive { color: var(--green); }
.shadow-value.negative { color: var(--red); }
.shadow-value.flat { color: var(--muted); }
.shadow-stats { padding: 0 14px 8px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.shadow-candidate-list { display: grid; gap: 1px; border-top: 1px solid #e2e8e4; }
.shadow-candidate-row { min-width: 0; padding: 8px 14px; background: #fff; border-bottom: 1px solid #e7ece9; }
.shadow-candidate-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.shadow-candidate-heading strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.shadow-market-tag { flex: 0 0 auto; padding: 1px 5px; color: var(--green); background: var(--green-soft); border-radius: 3px; font-size: 10px; }
.shadow-candidate-detail { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.shadow-candidate-latest { flex: 0 0 auto; color: #89938e; }
.shadow-empty { padding: 18px 14px; color: var(--muted); font-size: 11px; text-align: center; }
.shadow-empty[hidden] { display: none; }

.monitor-band { border-bottom: 1px solid var(--line); background: #f7f9f8; }
.monitor-heading { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 22px; border-bottom: 1px solid #e4e9e6; }
.monitor-heading strong { font-size: 13px; }
.monitor-heading span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.monitor-tabs { display: flex; gap: 8px; min-height: 65px; padding: 8px 22px; overflow-x: auto; }
.monitor-tab-wrap { position: relative; flex: 0 0 210px; min-width: 0; }
.monitor-tab { width: 100%; min-width: 0; min-height: 48px; display: grid; align-content: center; gap: 3px; padding: 7px 34px 7px 10px; text-align: left; color: var(--ink); background: #fff; border: 1px solid #cfd7d2; border-radius: 5px; cursor: pointer; }
.monitor-tab:hover { border-color: #9aaba2; }
.monitor-tab.active { border-color: var(--green); box-shadow: inset 3px 0 var(--green); }
.monitor-tab.has-signal { color: #075b49; background: var(--green-soft); border-color: #83baa8; }
.monitor-tab strong, .monitor-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitor-tab strong { font-size: 12px; }
.monitor-tab span { color: var(--muted); font-size: 11px; }
.monitor-remove { position: absolute; top: 50%; right: 7px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; color: #77827c; background: transparent; border: 0; border-radius: 4px; font-size: 19px; line-height: 1; transform: translateY(-50%); cursor: pointer; }
.monitor-remove:hover { color: var(--red); background: var(--red-soft); }
.monitor-empty { min-height: 65px; display: grid; place-items: center; padding: 8px 22px; color: var(--muted); font-size: 12px; }
.monitor-empty[hidden] { display: none; }
.selected-heading { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 22px; border-bottom: 1px solid var(--line); }
.selected-heading h2 { margin-top: 3px; font-size: 18px; }
.selected-score { font-size: 25px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.result-entry { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 7px 22px; background: #f7f9f8; border-bottom: 1px solid var(--line); }
.result-entry[hidden] { display: none; }
.result-entry > strong { margin-right: 4px; font-size: 12px; }
.result-entry label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.result-entry label span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-entry input { width: 58px; min-height: 30px; padding: 4px 6px; border: 1px solid #b9c4be; border-radius: 4px; font-variant-numeric: tabular-nums; }
.result-entry button { min-height: 30px; padding: 4px 10px; color: #fff; background: var(--green); border: 0; border-radius: 4px; cursor: pointer; }
.result-entry button:disabled { opacity: .55; cursor: wait; }
.result-entry > span:last-child { color: var(--muted); font-size: 11px; }
.source-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.source-item { min-height: 160px; padding: 12px 16px; border-right: 1px solid var(--line); }
.source-item:last-child { border-right: 0; }
.source-head { display: flex; align-items: center; gap: 8px; }
.source-head strong { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 4px; color: #fff; background: #3b4942; }
.source-b .source-head strong { background: var(--red); }
.source-c .source-head strong { background: var(--blue); }
.source-state { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
.source-state.matched, .source-state.live { color: var(--green); }
.source-state.matched-paused, .source-state.stale { color: var(--amber); }
.source-state.not-matched, .source-state.error { color: var(--red); }
.source-match { display: block; overflow: hidden; margin-top: 5px; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.source-score { float: right; margin-top: -16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.source-market-lines { display: grid; gap: 3px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); color: #35433c; font-size: 11px; font-variant-numeric: tabular-nums; }

.sync-band, .signal-band { min-height: 48px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 9px 22px; border-bottom: 1px solid var(--line); }
.sync-band span, .signal-band span { color: var(--muted); font-size: 12px; }
.sync-band.ready { background: var(--green-soft); }
.sync-band.stabilizing { background: var(--amber-soft); }
.signal-band { grid-template-columns: 76px minmax(0, 1fr); }
.signal-band strong { grid-column: 2; font-size: 16px; }
.signal-band .signal-label { grid-row: 1 / span 2; text-transform: uppercase; }
.signal-band.active { color: #075b49; background: #d7efe6; }
.signal-band.active strong { font-size: 18px; }
.signal-band.active.strong { color: #743b00; background: #ffe5b8; }
.signal-band.active.special-rule { color: #6d3900; background: #ffd88f; box-shadow: inset 5px 0 #d47b00; }
.signal-band.active.special-rule .signal-label { color: #8b4b00; font-weight: 700; }
.signal-band.conflict { color: #7a4a08; background: var(--amber-soft); }

.pace-chart-wrap { padding: 12px 22px 10px; border-bottom: 1px solid var(--line); background: #fbfcfb; }
.pace-chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 8px; }
.pace-chart-heading > div:first-child { display: grid; gap: 2px; }
.pace-chart-heading strong { font-size: 13px; }
.pace-chart-heading > div:first-child span { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.pace-chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 14px; color: var(--muted); font-size: 11px; }
.pace-chart-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pace-swatch { width: 18px; height: 0; border-top: 2px solid; }
.pace-swatch.projected { border-color: var(--green); }
.pace-swatch.market { border-color: var(--blue); }
.pace-swatch.threshold { border-color: var(--amber); border-top-style: dashed; }
.pace-chart-canvas { position: relative; min-height: 190px; }
.pace-chart-canvas svg { display: block; width: 100%; height: auto; min-height: 190px; }
.pace-chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.pace-chart-empty[hidden] { display: none; }
.pace-grid-line { stroke: #dde4e0; stroke-width: 1; }
.pace-axis-label { fill: var(--muted); font-size: 10px; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; }
.pace-threshold-band { fill: rgb(164 95 9 / 8%); stroke: none; }
.pace-threshold-line { fill: none; stroke: var(--amber); stroke-width: 1.25; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.pace-market-line { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pace-projected-line { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pace-projected-dot { fill: var(--surface); stroke: var(--green); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.pace-market-dot { fill: var(--surface); stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }

.comparison-wrap { border-bottom: 1px solid var(--line); }
.subheading { height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; background: #f6f8f7; border-bottom: 1px solid var(--line); }
.subheading h3 { margin: 0; font-size: 14px; }
.subheading span { color: var(--muted); font-size: 12px; }
.history-heading-actions { display: flex; align-items: center; gap: 10px; }
.history-heading-actions button { min-height: 28px; padding: 3px 9px; color: var(--ink); background: #fff; border: 1px solid #b9c9c1; border-radius: 4px; cursor: pointer; font-size: 12px; }
.history-heading-actions button:hover { background: #eef4f0; }
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 740px; border-collapse: collapse; table-layout: fixed; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid #e7ece9; font-variant-numeric: tabular-nums; }
th { height: 36px; color: #59645f; background: #edf1ef; font-size: 11px; }
td { height: 46px; }
th:nth-child(1) { width: 15%; } th:nth-child(2) { width: 12%; } th:nth-child(n+3):nth-child(-n+5) { width: 16%; } th:last-child { width: 25%; }
.result { color: var(--muted); }
.result.signal { color: var(--green); font-weight: 700; }
.special-rule-row td { background: #fff5df; }
.special-rule-row td:first-child { box-shadow: inset 4px 0 #d47b00; }
.history-wrap { border-top: 8px solid var(--surface-alt); border-bottom: 1px solid var(--line); }
.rule-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.rule-summary-item { min-height: 86px; display: grid; align-content: center; gap: 2px; padding: 10px 13px; background: #fff; }
.rule-summary-item strong { font-size: 12px; }
.rule-summary-item span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.rule-summary-item em { margin-top: 3px; color: var(--blue); font-size: 11px; font-style: normal; }
.rule-summary-item.promising em { color: var(--green); font-weight: 700; }
.rule-summary-item.weak em { color: var(--red); }
.history-table { min-width: 1080px; }
.history-table th:nth-child(1) { width: 9%; }
.history-table th:nth-child(2) { width: 9%; }
.history-table th:nth-child(3) { width: 20%; }
.history-table th:nth-child(4) { width: 23%; }
.history-table th:nth-child(5) { width: 9%; }
.history-table th:nth-child(6) { width: 21%; }
.history-table th:nth-child(7) { width: 9%; }
.history-main-row:has(.history-toggle[aria-expanded="true"]) { background: #f5faf8; }
.history-main-row.highlighted-rule td { background: #fff5df; }
.history-main-row.highlighted-rule td:first-child { box-shadow: inset 4px 0 #d47b00; }
.history-toggle { width: 100%; padding: 5px 24px 5px 0; position: relative; color: var(--ink); background: transparent; border: 0; text-align: left; cursor: pointer; }
.history-toggle::after { content: "⌄"; position: absolute; top: 3px; right: 3px; color: var(--green); font-size: 17px; transition: transform .15s ease; }
.history-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.history-toggle:hover, .history-toggle:focus-visible { color: var(--green); text-decoration: underline; outline: none; }
.history-detail-row > td { height: auto; padding: 0; background: #f5faf8; }
.history-detail { padding: 14px 18px 16px; border-top: 1px dashed #b8cbc2; box-shadow: inset 3px 0 var(--green); }
.history-rule-alert { margin-bottom: 10px; padding: 8px 10px; color: #6d3900; background: #ffe5b8; border: 1px solid #e6b65f; border-radius: 4px; font-weight: 700; }
.history-sync-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.history-sync-status span, .history-data-ready { color: #075b49; font-weight: 700; }
.history-sync-status span { padding: 4px 7px; background: var(--green-soft); border: 1px solid #afd3c4; border-radius: 4px; font-size: 11px; }
.history-outcome { font-weight: 700; }
.history-outcome.won { color: var(--green); }
.history-outcome.lost { color: var(--red); }
.history-outcome.void { color: #6d5600; }
.history-outcome.pending { color: var(--muted); }
.history-outcome-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #b8cbc2; }
.history-outcome-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.history-outcome-actions button { min-height: 30px; padding: 4px 10px; color: var(--ink); background: #fff; border: 1px solid #b9c9c1; border-radius: 4px; cursor: pointer; }
.history-outcome-actions button.active { color: #fff; background: var(--green); border-color: var(--green); }
.history-outcome-actions button:disabled { opacity: .55; cursor: wait; }
.rule-badge { display: inline-block; margin-left: 7px; padding: 2px 5px; color: #704000; background: #ffd88f; border: 1px solid #e0a43d; border-radius: 3px; font-size: 10px; font-weight: 700; text-decoration: none; }
.history-metrics, .history-reasons { margin-top: 12px; }
.history-metrics > strong, .history-reasons > strong { display: block; margin-bottom: 5px; font-size: 12px; }
.history-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.history-quotes span, .history-facts span { padding: 6px 8px; color: #46524c; background: #fff; border: 1px solid #e0e7e3; border-radius: 4px; font-size: 11px; }
.history-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.history-reasons ul { margin: 0; padding-left: 18px; color: #46524c; font-size: 11px; }
.history-reasons li + li { margin-top: 3px; }
.history-pagination { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; background: #f7f9f8; border-top: 1px solid var(--line); }
.history-pagination button { min-width: 76px; min-height: 32px; padding: 5px 12px; color: #fff; background: var(--green); border: 0; border-radius: 4px; cursor: pointer; }
.history-pagination button:disabled { color: #929b96; background: #e2e7e4; cursor: default; }
.history-pagination span { min-width: 150px; color: var(--muted); text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.research-wrap { border-top: 8px solid var(--surface-alt); border-bottom: 1px solid var(--line); }
.research-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--line); }
.research-rule { min-height: 104px; display: grid; align-content: center; gap: 3px; padding: 11px 14px; background: #fff; }
.research-rule strong { font-size: 12px; }
.research-rule span { color: var(--muted); font-size: 11px; }
.research-rule em { margin-top: 3px; color: var(--blue); font-size: 11px; font-style: normal; }
.research-rule.validated { background: var(--green-soft); }
.research-rule.validated em { color: var(--green); font-weight: 700; }
.research-rule.testing em { color: var(--amber); }
.empty { padding: 34px 18px; text-align: center; color: var(--muted); }
.rule-alert-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgb(15 24 20 / 58%); }
.rule-alert-modal[hidden] { display: none; }
.rule-alert-card { width: min(460px, 100%); padding: 24px; background: #fff; border: 2px solid #d89120; border-radius: 10px; box-shadow: 0 24px 70px rgb(0 0 0 / 28%); }
.rule-alert-badge { display: inline-block; padding: 3px 8px; color: #704000; background: #ffd88f; border-radius: 4px; font-size: 11px; font-weight: 700; }
.rule-alert-card h2 { margin: 10px 0 4px; font-size: 22px; }
.rule-alert-match { margin: 0 0 16px; color: var(--muted); }
.rule-alert-grid { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px 14px; padding: 13px; background: #f7f9f8; border: 1px solid var(--line); border-radius: 6px; }
.rule-alert-grid span { color: var(--muted); font-size: 12px; }
.rule-alert-grid strong { font-variant-numeric: tabular-nums; }
.rule-alert-rule { margin: 14px 0; color: #704000; font-size: 12px; }
.rule-alert-card button { width: 100%; min-height: 38px; color: #fff; background: var(--green); border: 0; border-radius: 5px; cursor: pointer; font-weight: 700; font-variant-numeric: tabular-nums; }

.section-heading.compact { min-height: auto; padding: 12px 14px; }
.system-health, .rule-control { border-bottom: 1px solid var(--line); background: #f7f9f8; }
.source-health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.source-health-item { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; }
.source-health-item strong { font-size: 13px; }
.source-health-item span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.source-health-item em { color: var(--green); font-size: 11px; font-style: normal; }
.source-health-item.error em { color: var(--red); }
.source-health-item.idle em, .source-health-item.starting em { color: var(--amber); }
.rule-control-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.rule-control-item { min-width: 0; display: grid; gap: 5px; padding: 12px 14px; background: #fff; }
.rule-control-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rule-control-title strong { font-size: 13px; }
.rule-control-title span { padding: 2px 5px; color: var(--green); background: var(--green-soft); border-radius: 3px; font-size: 10px; }
.rule-control-title span.paused, .rule-control-title span.auto-paused { color: var(--red); background: #fdeaea; }
.rule-control-item > span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.rule-control-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; font-size: 11px; font-variant-numeric: tabular-nums; }
.rule-control-item button { min-height: 30px; color: var(--green); background: #fff; border: 1px solid #9fb8ad; border-radius: 4px; cursor: pointer; }
.rule-control-item button.resume { color: #fff; background: var(--green); }
.risk-band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 12px; }
.risk-band.low { color: #075b49; background: var(--green-soft); }
.risk-band.medium { color: #704000; background: #fff3d6; }
.risk-band.high { color: #8d2424; background: #fdeaea; }
.replay-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; background: rgb(15 24 20 / 62%); }
.replay-modal[hidden] { display: none; }
.replay-dialog { width: min(980px, 100%); max-height: min(820px, calc(100vh - 40px)); overflow: auto; background: #fff; border-radius: 7px; box-shadow: 0 24px 70px rgb(0 0 0 / 30%); }
.replay-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px 10px; border-bottom: 1px solid var(--line); }
.replay-heading span { color: var(--muted); font-size: 11px; }
.replay-heading h2 { margin: 2px 0 0; font-size: 18px; }
.replay-heading button { width: 34px; height: 34px; padding: 0; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font-size: 21px; }
.replay-tabs { display: flex; gap: 1px; padding: 12px 18px 0; }
.replay-tabs button { min-width: 80px; min-height: 32px; color: var(--muted); background: #eef2f0; border: 0; cursor: pointer; }
.replay-tabs button[aria-selected="true"] { color: #fff; background: var(--green); }
.replay-summary { margin: 0; padding: 10px 18px; color: var(--muted); font-size: 12px; }
.replay-chart-wrap { min-height: 280px; padding: 0 12px; }
.replay-chart-wrap svg { display: block; width: 100%; min-height: 280px; }
.replay-grid { stroke: #dfe7e3; stroke-width: 1; }
.replay-line { fill: none; stroke: var(--blue); stroke-width: 2.5; }
.replay-signal-dot { fill: #d47b00; stroke: #fff; stroke-width: 2; }
.replay-axis { fill: var(--muted); font-size: 11px; }
.replay-signals { display: grid; gap: 1px; padding: 0 18px 18px; }
.replay-signal-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; background: #f7f9f8; font-size: 12px; }
.replay-action { margin-top: 12px; min-height: 34px; padding: 6px 10px; color: #fff; background: var(--green); border: 0; border-radius: 4px; cursor: pointer; }
.combo-history-modal { position: fixed; inset: 0; z-index: 1090; display: grid; place-items: center; padding: 20px; background: rgb(15 24 20 / 62%); }
.combo-history-modal[hidden] { display: none; }
.combo-history-dialog { width: min(920px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: auto; background: #fff; border-radius: 7px; box-shadow: 0 24px 70px rgb(0 0 0 / 30%); }
.combo-history-rows { display: grid; gap: 1px; padding: 0 18px 8px; }
.combo-history-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 10px; padding: 9px 10px; background: #f7f9f8; font-size: 12px; }
.combo-history-row strong { font-variant-numeric: tabular-nums; }
.combo-history-match { min-width: 0; display: grid; gap: 2px; }
.combo-history-match span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.combo-history-bet { color: var(--green); font-weight: 600; }
.combo-history-pagination { padding: 10px 18px 18px; }
.combo-forward-link { min-height: 20px; padding: 0; color: var(--blue, #3b82f6); background: transparent; border: 0; border-bottom: 1px dashed currentColor; border-radius: 0; cursor: pointer; font: inherit; font-size: inherit; }
.combo-forward-link:hover { color: var(--green); }
.combo-forward-link:disabled { color: var(--muted); border-bottom-color: transparent; cursor: default; }

@media (max-width: 900px) {
  .rule-control-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .source-health-grid, .rule-control-list { grid-template-columns: 1fr; }
  .source-health-item { grid-template-columns: auto minmax(0, 1fr); }
  .source-health-item em { grid-column: 2; }
  .replay-modal { padding: 8px; }
  .replay-dialog { max-height: calc(100vh - 16px); }
  .replay-signal-row { grid-template-columns: 68px minmax(0, 1fr); }
  .replay-signal-row > :last-child { grid-column: 2; }
  .combo-history-modal { padding: 8px; }
  .combo-history-dialog { max-height: calc(100vh - 16px); }
  .combo-history-row { grid-template-columns: 68px minmax(0, 1fr); }
  .combo-history-row > :last-child { grid-column: 2; }
}

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .event-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .event-list { max-height: 420px; }
}

@media (max-width: 620px) {
  .app-header { align-items: flex-start; padding: 12px 14px; }
  .app-header h1 { font-size: 18px; }
  .connection { flex-wrap: wrap; justify-content: flex-end; }
  .connection time { width: 100%; margin-left: 0; text-align: right; }
  .toolbar { flex-wrap: wrap; padding: 9px 14px; }
  .segmented { width: 100%; }
  .search { flex: 1; }
  .search span { display: none; }
  .search input { width: 100%; }
  .source-strip { grid-template-columns: 1fr; }
  .source-item { min-height: 145px; border-right: 0; border-bottom: 1px solid var(--line); }
  .source-item:last-child { border-bottom: 0; }
  .selected-heading { padding: 12px 14px; }
  .selected-heading h2 { font-size: 15px; }
  .selected-score { font-size: 20px; }
  .sync-band, .signal-band { padding: 9px 14px; }
  .pace-chart-wrap { padding: 11px 14px 8px; }
  .pace-chart-heading { align-items: stretch; flex-direction: column; gap: 7px; }
  .pace-chart-legend { justify-content: flex-start; }
  .subheading { padding: 0 14px; }
  .monitor-heading, .monitor-tabs { padding-left: 14px; padding-right: 14px; }
  .monitor-tab-wrap { flex-basis: 185px; }
  .result-entry { flex-wrap: wrap; padding: 8px 14px; }
  .result-entry > strong { width: 100%; }
  .history-quotes { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }


/* Combo direction cards (collapsible disclosure) */
.rule-control-list.combo-direction-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
details.combo-direction-card { grid-column: span 1; min-width: 0; padding: 0; background: #fff; display: flex; flex-direction: column; }
details.combo-direction-card > .combo-disclosure-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 10px 12px; user-select: none; }
details.combo-direction-card > .combo-disclosure-summary::-webkit-details-marker { display: none; }
details.combo-direction-card > .combo-disclosure-summary::before { content: "›"; color: var(--muted); transition: transform 0.18s ease; font-size: 14px; line-height: 1; }
details.combo-direction-card.combo-direction-open > .combo-disclosure-summary::before { transform: rotate(90deg); }
.combo-direction-card .rule-control-title strong { font-size: 13px; }
.combo-direction-count { margin-left: auto; padding: 2px 5px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; background: #f0f0f0; border-radius: 3px; }
.combo-direction-stats { padding: 2px 5px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; background: #f1f5ff; border-radius: 3px; white-space: nowrap; }
details.combo-direction-card > .combo-row { border-radius: 0; border-left: none; border-right: none; border-top: 1px solid var(--line); }
details.combo-direction-card > .combo-row:first-of-type { border-top: 1px solid var(--line); }
.combo-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: default; }
.combo-row.combo-alert { border-color: var(--green); background: #f0fdf4; }
.combo-detail { flex: 1; min-width: 0; display: grid; gap: 2px; }
.combo-id { font-size: 11px; font-weight: 600; color: #333; }
.combo-alert .combo-id { color: var(--green); }
.combo-tokens { font-size: 9px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-stats { font-size: 9px; color: var(--muted); font-variant-numeric: tabular-nums; }
.combo-alert-badge { font-size: 10px; padding: 2px 6px; color: var(--green); background: var(--green-soft); border-radius: 3px; white-space: nowrap; align-self: center; }
.combo-alert-toggle { min-width: 58px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--muted); font-size: 10px; white-space: nowrap; cursor: pointer; align-self: center; }
.combo-alert-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); cursor: pointer; }
.combo-alert-toggle input:disabled { cursor: wait; opacity: 0.55; }
.combo-alert .combo-alert-toggle { color: var(--green); font-weight: 700; }
.combo-direction-tag { color: var(--blue, #3b82f6) !important; background: #eef2ff !important; font-size: 10px !important; }
@media (max-width: 900px) { details.combo-direction-card { grid-column: span 4; } }