:root {
  color-scheme: light dark;
  --bg: #f5f7fb;
  --surface: #fff;
  --surface-muted: #eef2f7;
  --text: #172033;
  --muted: #657087;
  --border: #dbe1ea;
  --accent: #315efb;
  --up: #d33131;
  --down: #16834b;
  --warning: #b56b00;
  --shadow: 0 8px 28px rgba(26, 40, 72, .07);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root { --bg: #10141c; --surface: #181e29; --surface-muted: #222a37; --text: #edf2fb; --muted: #a8b1c2; --border: #303a4b; --accent: #8da7ff; --shadow: 0 8px 28px rgba(0, 0, 0, .2); }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); line-height: 1.55; overflow-x: hidden; }
a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.site-header { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.header-inner { align-items: center; display: flex; gap: 1.2rem; margin: 0 auto; max-width: 1440px; min-height: 64px; padding: .7rem 1.25rem; }
.brand { color: var(--text); font-size: 1.08rem; font-weight: 750; white-space: nowrap; }
.main-nav { display: flex; gap: .25rem; margin-right: auto; }
.main-nav a { border-radius: 8px; color: var(--muted); padding: .45rem .7rem; }
.main-nav a.active, .main-nav a:hover { background: var(--surface-muted); color: var(--text); text-decoration: none; }
.user-menu, .user-menu form { align-items: center; display: flex; gap: .65rem; }
.user-menu { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.link-button { background: transparent; border: 0; color: var(--accent); padding: .2rem 0; }
.page-shell { margin: 0 auto; max-width: 1440px; padding: 2rem 1.25rem 3rem; }
.site-footer { color: var(--muted); font-size: .8rem; margin: 0 auto; max-width: 1440px; padding: 0 1.25rem 1.5rem; }
.page-heading { align-items: flex-end; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1.4rem; }
.page-heading h1 { font-size: clamp(1.55rem, 3vw, 2.3rem); letter-spacing: -.02em; margin: .1rem 0 .25rem; }
.eyebrow { color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .15em; margin: 0; }
.muted { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.run-summary { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-wrap: wrap; gap: .6rem .9rem; padding: .75rem 1rem; }
.run-alert { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); }
.status-dot { background: var(--muted); border-radius: 50%; display: inline-block; height: .55rem; width: .55rem; }
.status-success, .status-complete { background: var(--down); }
.status-blocked, .status-failed, .status-partial, .status-interrupted { background: var(--up); }
.alert { border-radius: 10px; margin-bottom: 1rem; padding: .8rem 1rem; }
.alert-warning { background: color-mix(in srgb, var(--warning) 13%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 50%, var(--border)); color: var(--warning); }
.table-wrap { max-width: 100%; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--border); padding: .72rem .7rem; text-align: left; vertical-align: top; }
thead th { background: var(--surface-muted); color: var(--muted); font-size: .8rem; font-weight: 700; white-space: nowrap; }
tbody tr:hover { background: color-mix(in srgb, var(--surface-muted) 45%, transparent); }
.data-table th[scope="row"] { font-weight: 650; white-space: nowrap; }
.data-table th[scope="row"] small { color: var(--muted); display: block; font-size: .75rem; font-weight: 400; }
.numeric, .align-right { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.align-center { text-align: center; }
.up { color: var(--up); }
.down { color: var(--down); }
sup { color: var(--warning); font-size: .68em; margin-left: .15rem; }
.signal-list { min-width: 190px; }
.badge, .status-pill { border: 1px solid transparent; border-radius: 999px; display: inline-block; font-size: .78rem; line-height: 1.35; margin: .1rem .15rem .1rem 0; padding: .2rem .5rem; white-space: nowrap; }
.badge-bullish { background: color-mix(in srgb, var(--up) 13%, var(--surface)); color: var(--up); }
.badge-bearish { background: color-mix(in srgb, var(--down) 13%, var(--surface)); color: var(--down); }
.badge-warning { background: color-mix(in srgb, var(--warning) 13%, var(--surface)); color: var(--warning); }
.badge-info, .badge-neutral { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent); }
.status-pill { background: var(--surface-muted); border-color: var(--border); }
.status-pill-blocked, .status-pill-failed, .status-pill-partial, .status-pill-interrupted { color: var(--up); }
.empty-state { color: var(--muted); padding: 2rem; text-align: center; }
.chart-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chart-wide { grid-column: 1 / -1; }
.chart-card { min-width: 0; padding: 1rem; }
.chart-card h2, .detail-section h2, .report-nav h2 { font-size: 1rem; margin: 0 0 .55rem; }
.chart { height: 300px; min-width: 0; width: 100%; }
.detail-section { margin-top: 1rem; padding: 1rem; }
.section-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: .65rem; }
.range-switcher { display: flex; flex-wrap: wrap; gap: .35rem; }
.range-switcher button, .button-primary { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: .45rem .7rem; }
.range-switcher button.selected, .range-switcher button:hover, .button-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter-bar { align-items: end; display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; padding: 1rem; }
.filter-bar label { color: var(--muted); display: grid; font-size: .82rem; gap: .25rem; }
.filter-bar input, .filter-bar select { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; color: var(--text); min-height: 2.2rem; padding: .35rem .5rem; }
.runs-table td { white-space: nowrap; }
.report-layout { align-items: start; display: grid; gap: 1rem; grid-template-columns: 190px minmax(0, 1fr); }
.report-nav { padding: 1rem; position: sticky; top: 85px; }
.report-nav ul { list-style: none; margin: 0; padding: 0; }
.report-nav li + li { border-top: 1px solid var(--border); }
.report-nav a { display: block; padding: .45rem .25rem; }
.report-nav a.active { font-weight: 700; }
.report-content { min-width: 0; padding: clamp(1rem, 3vw, 2rem); }
.report-content h1 { font-size: 1.65rem; margin-top: 0; }
.report-content h2 { border-bottom: 1px solid var(--border); font-size: 1.2rem; margin-top: 2rem; padding-bottom: .35rem; }
.report-content table { font-size: .9rem; margin: .7rem 0 1.25rem; }
.report-content .table-wrap { margin: .7rem 0 1.25rem; }
.error-page { margin: 5rem auto; max-width: 560px; padding: 2rem; text-align: center; }
.error-page .button-primary { display: inline-block; margin-top: .75rem; }

@media (max-width: 760px) {
  .header-inner { align-items: flex-start; flex-wrap: wrap; padding: .7rem .8rem; }
  .main-nav { order: 3; overflow-x: auto; width: 100%; }
  .main-nav a { padding: .35rem .5rem; }
  .user-menu { margin-left: auto; }
  .page-shell { padding: 1.25rem .8rem 2rem; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .run-summary { font-size: .82rem; width: 100%; }
  .chart-grid { grid-template-columns: 1fr; }
  .chart-wide { grid-column: auto; }
  .chart { height: 245px; }
  .report-layout { grid-template-columns: minmax(0, 1fr); }
  .report-nav { min-width: 0; position: static; }
  .report-nav ul { display: flex; gap: .2rem .8rem; overflow-x: auto; }
  .report-nav li + li { border-top: 0; }
  .report-content { padding: 1rem; }
}

@media (max-width: 420px) {
  .brand { font-size: 1rem; }
  .user-menu > span { max-width: 75px; overflow: hidden; text-overflow: ellipsis; }
  th, td { padding-left: .55rem; padding-right: .55rem; }
}
.data-table td:first-child { white-space: nowrap; }