@import url('/research-base.css');
@import url('/workspace.css');

body {
  margin: 0;
  background: radial-gradient(ellipse at 80% 0, var(--eb-bg-glow, rgba(14, 165, 233, 0.14)) 0, transparent 55%), var(--eb-bg, #090e17);
  color: var(--eb-text, #f1f5f9);
  font-family: 'DM Sans', system-ui, sans-serif;
  min-height: 100vh;
}
body > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: var(--eb-header-bg, rgba(9, 14, 23, 0.94));
  border-bottom: 1px solid var(--eb-border, #1e2d40);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
}
body > header .brand, body > header a:first-child {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.6px;
  color: #fff;
}
body > header .brand span {
  color: var(--eb-accent-soft, #38bdf8);
}
body > header a:not(.brand) {
  color: var(--eb-text, #f1f5f9);
  font-weight: 650;
  padding: 8px 14px;
  border: 1px solid #58346c;
  border-radius: 9px;
  background: #241634;
}
.prediction-sports, #sports {
  display: flex;
  gap: 10px;
  padding: 14px 32px;
  background: #160e29;
  border-bottom: 1px solid #3c2450;
  overflow-x: auto;
}
.prediction-sports a, #sports button {
  padding: 10px 18px;
  border-radius: 9px;
  border: 1px solid #4d2f66;
  background: #211531;
  color: var(--eb-muted, #94a3b8);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.prediction-sports a[aria-current="page"], #sports button[aria-pressed="true"] {
  background: linear-gradient(120deg, var(--eb-accent, #0ea5e9), var(--eb-accent2, #10b981));
  color: #fff;
  border-color: #d777ff;
  box-shadow: 0 3px 18px #a02bce35;
}
main {
  max-width: 1480px;
  margin: 0 auto;
  padding: 28px 32px 48px;
}
.hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid #452852;
  margin-bottom: 22px;
}
.hero h1 {
  font-size: 34px;
  font-weight: 850;
  margin-top: 6px;
}
.hero p {
  color: var(--eb-muted, #94a3b8);
  margin-top: 8px;
  max-width: 780px;
  line-height: 1.6;
}
.hero label {
  font-size: 12px;
  font-weight: 800;
  color: var(--eb-text, #f1f5f9);
  letter-spacing: 0.7px;
}
.hero input[type="date"] {
  display: block;
  margin-top: 6px;
  font-size: 17px;
  font-weight: 800;
  background: var(--eb-pill-bg, #162234);
  border: 2px solid var(--eb-accent, #0ea5e9);
  color: #fff;
  padding: 10px 14px;
  border-radius: 9px;
}
.controls, .filters, .results-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 16px;
  background: #21162d;
  border: 1px solid #482a59;
  border-radius: 13px;
  margin-bottom: 18px;
}
.controls nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.controls nav button {
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid #523368;
  background: #180f24;
  color: var(--eb-muted, #94a3b8);
  font-weight: 700;
  font-size: 12px;
}
.controls nav button[aria-pressed="true"] {
  background: linear-gradient(120deg, #b52cda, #8339ef);
  border-color: #d67eff;
  color: #fff;
}
.controls .model-select, .filters label, .results-controls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: #d6c3e8;
  font-weight: 700;
}
.controls input[type="search"], .filters input[type="search"] {
  flex: 1;
  min-width: 210px;
  background: #170f23;
  border: 1px solid #58386e;
  color: #fff;
  padding: 11px 14px;
  border-radius: 9px;
}
.passing-explanation {
  background: #1c1328;
  border: 1px solid #4b2f60;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.passing-explanation summary {
  font-weight: 750;
  color: #e6bfff;
  font-size: 13px;
}
.passing-explanation p {
  color: #dfd0ec;
  font-size: 12px;
  line-height: 1.7;
  margin-top: 10px;
}
#summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.summary-box {
  background: linear-gradient(135deg, #291c3a, #1b1228);
  border: 1px solid #58386e;
  border-radius: 12px;
  padding: 16px;
}
.summary-box small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: #cbaee0;
  font-weight: 750;
}
.summary-box strong {
  display: block;
  font-size: 26px;
  margin: 6px 0 4px;
  color: #fff;
}
.summary-box span {
  font-size: 11px;
  color: #d8c6e8;
}
.prediction-table, .nfl-player-list, .compare-scroll, .results-scroll {
  overflow-x: auto;
  border: 1px solid #513061;
  border-radius: 14px;
  background: #1b1328;
}
.prediction-table table, .nfl-player-list table, .compare-scroll table, .results-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
.prediction-table th, .nfl-player-list th, .compare-scroll th, .results-scroll th {
  background: var(--eb-border, #1e2d40);
  color: #e2c5f8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
  padding: 14px 16px;
  border-bottom: 1px solid #4a2e5c;
}
.prediction-table td, .nfl-player-list td, .compare-scroll td, .results-scroll td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--eb-pill-bg, #162234);
  color: #f6f0ff;
}
.prediction-table tr:nth-child(even) td, .nfl-player-list tr:nth-child(even) td {
  background: #231832;
}
.badge-over {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 6px;
  background: #113b2e;
  color: #39e2b3;
  border: 1px solid #1e7056;
  font-weight: 800;
  font-size: 12px;
}
.badge-under {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 6px;
  background: #3b1728;
  color: #ff7096;
  border: 1px solid #7a294b;
  font-weight: 800;
  font-size: 12px;
}
.badge-hit {
  color: #39e2b3;
  font-weight: 800;
}
.badge-miss {
  color: #ff608c;
  font-weight: 800;
}
.badge-upcoming {
  color: #d6b8f0;
}