:root { color-scheme: light; --page-max-width: 1600px; --ink: #202729; --muted: #63716d; --line: #d7dfdd; --paper: #f5f7f7; --accent: #22644f; }
body { background: var(--paper); color: var(--ink); font-family: Arial, sans-serif; }
html { scroll-padding-top: calc(var(--site-chrome-height, 164px) + 16px); }
#site-chrome { position: sticky; top: 0; z-index: 100; }
.brand-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 0 0 auto; }
#header .brand-lockup #fantaski-logo { width: 158px; height: auto; max-width: none; }
.brand-parent { display: flex; align-items: center; gap: 5px; color: #bac7c3; font-size: 10px; line-height: 1; white-space: nowrap; }
.brand-parent img { display: block; width: 76px; height: auto; }
* { box-sizing: border-box; letter-spacing: 0; }
#header { background: #192326; padding: 20px 32px; min-height: 92px; }
#header-line { height: 0; margin: 0; }
#account-controls { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; color: white; font-size: 13px; }
#account-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#account-controls a { color: white; text-decoration: underline; white-space: nowrap; }
#account-controls [hidden] { display: none; }
#account-sign-out { color: white; background: transparent; border: 1px solid #6c797d; padding: 9px 12px; font-size: 13px; white-space: nowrap; }
@media (max-width: 600px) {
  #header { gap: 12px; }
  #header > div[style] { display: none; }
  #header .brand-lockup #fantaski-logo { width: 80px; height: auto; flex-shrink: 0; }
  .brand-parent { font-size: 8px; gap: 3px; }
  .brand-parent img { width: 56px; }
  #account-controls { flex: 1; gap: 6px; flex-wrap: nowrap; max-width: none; }
  #account-name { font-size: 11px; max-width: 180px; flex: 0 1 auto; }
  #account-controls #account-playing-style { margin: 0; flex-shrink: 0; }
  #account-sign-out { padding: 7px 9px; min-height: 40px; font-size: 12px; flex-shrink: 0; }
}
#fantaski-tabs-row { background: white; padding: 0 32px; border-bottom: 1px solid var(--line); }
#tab-bar { gap: 0; width: 100%; }
.tab { color: #52615c; border: 0; border-bottom: 3px solid transparent; background: transparent; border-radius: 0; padding: 18px 13px 15px; font-size: 14px; }
.tab.active { color: var(--ink); background: transparent; border-color: var(--accent); }
.tab:hover { background: #edf2ef; color: var(--ink); }
.tab-content { max-width: var(--page-max-width); padding: 32px; font-size: 16px; color: var(--ink); background: var(--paper); }
#create { margin-top: 0; }
.tab-content h2 { font-size: 28px; }
.tab-content h3 { font-size: 20px; }
.tab-content h4 { font-size: 16px; }
.tab-content p { line-height: 1.6; }
.tab-content a { color: var(--accent); }
.tab-content [style*="color:white"], .tab-content [style*="color: white"], .tab-content [style*="color:#fff"], .tab-content [style*="color: #fff"] { color: var(--ink) !important; }
.tab-content [style*="color:#ccc"], .tab-content [style*="color: #ccc"] { color: var(--muted) !important; }
.race-select-row { flex-wrap: wrap; }
.race-select-row .label { color: var(--muted); font-size: 14px; }
input, select, textarea { color: var(--ink); background: white; font: inherit; border: 1px solid #b8c4c2; border-radius: 4px; padding: 10px; max-width: 100%; }
button { background: var(--accent); color: white; border: 0; border-radius: 4px; padding: 11px 16px; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); }
.board-card, .score-card, .ai-card, .race-col { background: transparent; color: var(--ink); box-shadow: none; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); padding: 20px 0; }
.board-card h3, .ai-card h3, .ai-card h4, .score-card h3 { color: var(--ink); border-color: var(--line); }
.race-col { flex: 1 1 300px; width: auto; min-width: 0; }
.race-col h3 { text-align: left; }
.race-col li { border-color: var(--line); padding: 12px 0; }
.leaderboards-wrapper, .scores-wrapper { max-width: none; }
.leaderboard-table td, .leaderboard-table th, .race-results-table, .collapsible-content table, .collapsible-content td, .collapsible-content th { color: var(--ink); }
.leaderboard-table th, .pick-table th, .race-results-table th { background: #e9efec; color: #52615c; font-size: 13px; }
.leaderboard-table tr:nth-child(even), .pick-table tr:nth-child(even) { background: #edf2ef; }
.leaderboard-table td, .pick-table td, .race-results-table td, .ai-table td { border-bottom: 1px solid var(--line); }
.pick-table { background: transparent; border-radius: 0; }
.collapsible-header { background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 16px; }
.collapsible-content { background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); padding: 16px; border-radius: 0; }
.ai-pill-header { background: #e9efec; color: var(--ink); border-radius: 4px; font-size: 14px; }
.ai-card { min-width: 0; }
.no-data { color: var(--muted); }
.national-story { border-left: 3px solid #c83c35; padding: 8px 0 8px 20px; }
.national-story p + p { margin-top: 14px; }
.venue-story p + p { margin-top: 16px; }
.historical-winners summary { padding: 12px 0; cursor: pointer; color: #52615c; font-size: 14px; }
.historical-table-scroll { max-height: 420px; overflow: auto; }
.historical-table-scroll th { position: sticky; top: 0; background: #e9efec; }
.metric-bar { background: #dce5e0; }
.metric-bar-fill { background: #38816a; }
#home-welcome { text-align: left !important; font-size: 16px !important; }
#user-info { text-align: left !important; color: var(--muted); font-size: 12px !important; }
:focus-visible { outline: 3px solid #e9b63b; outline-offset: 3px; }
@media (max-width: 700px) {
  #header { padding: 16px; min-height: 72px; }
  #fantaski-logo { height: 40px; }
  #fantaski-tabs-row { padding: 0 8px; }
  #tab-bar { flex-wrap: nowrap; overflow-x: auto; }
  .tab { flex-shrink: 0; padding: 16px 10px 13px; font-size: 13px; }
  .tab-content { padding: 24px 16px; }
  .two-col-grid { grid-template-columns: minmax(0, 1fr); }
  .chart-row { flex-wrap: wrap; }
  .race-select-row select { min-width: 0; width: 100%; }
  .leaderboard-table, .pick-table, .race-results-table { display: block; overflow-x: auto; max-width: 100%; }
}