:root { color-scheme: dark; --bg:#101217; --panel:#181c24; --line:#2b3240; --text:#f2f5fb; --muted:#aab4c4; --accent:#69b7ff; --bad:#ff6b6b; --good:#5de08a; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--text); }
header { display:flex; align-items:center; justify-content:space-between; padding:24px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#1a2030,#11141b); }
h1 { margin:0; font-size:30px; letter-spacing:.5px; }
h1 span { font-size:15px; color:var(--muted); }
p { color:var(--muted); margin:6px 0 0; }
button, select, input { background:#0f131b; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:9px 11px; }
button { cursor:pointer; font-weight:650; }
button:hover { border-color:var(--accent); }
#refreshBtn { background:#12304a; border-color:#24547b; }
.status { margin:16px 24px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--muted); }
.status.good { color:var(--good); } .status.bad { color:var(--bad); }
.tabs { display:flex; gap:8px; padding:0 24px 16px; }
.tab.active { background:#22364e; border-color:var(--accent); }
main { padding:0 24px 32px; }
.panel { display:none; } .panel.active { display:block; }
.filters, .formulaHeader { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-bottom:14px; padding:14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
label { color:var(--muted); display:flex; flex-direction:column; gap:5px; font-size:13px; }
input { min-width:220px; }
.tableWrap { border:1px solid var(--line); border-radius:12px; overflow:auto; background:var(--panel); max-height:70vh; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; text-align:left; }
th { position:sticky; top:0; background:#202636; color:#dfe9f7; cursor:pointer; z-index:1; }
tr:hover td { background:#1f2532; }
.num { text-align:right; font-variant-numeric: tabular-nums; }
.badge { display:inline-block; padding:2px 7px; border-radius:999px; background:#293344; color:#dce7f5; font-size:12px; }
.hint { margin:0 0 12px; }
.formulaGrid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin-top:12px; }
.weightCard { padding:12px; border:1px solid var(--line); background:var(--panel); border-radius:10px; }
.weightCard input { width:100%; min-width:0; }
.totalLine { margin-top:12px; padding:12px; border-radius:10px; background:#141923; border:1px solid var(--line); font-weight:700; }
.totalLine.good { color:var(--good); } .totalLine.bad { color:var(--bad); }
.sideBySideGrid { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap:16px; align-items:start; }
.compareCard { min-width:0; border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; }
.compareCard h2 { margin:0; padding:12px 14px; border-bottom:1px solid var(--line); font-size:17px; background:#1f2635; }
.tableWrap.compact { border:0; border-radius:0; max-height:62vh; }
.comparisonSummary { display:grid; gap:8px; margin:0 0 14px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#141923; color:var(--muted); }
.comparisonSummary div { display:flex; gap:18px; flex-wrap:wrap; }
.comparisonSummary strong { color:var(--text); }
@media (max-width: 1100px) { .sideBySideGrid { grid-template-columns: 1fr; } }

.matchupLayout { display:grid; grid-template-columns: minmax(390px, 1fr) minmax(390px, 1fr) minmax(360px, .9fr); gap:16px; align-items:start; }
.formationPanel { min-width:0; border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; }
.formationPanel h2 { margin:0; padding:12px 14px; border-bottom:1px solid var(--line); font-size:17px; background:#1f2635; }
.formationBoard { position:relative; min-height:520px; padding:10px; overflow:hidden; background:
  linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
  linear-gradient(180deg, rgba(255,255,255,.035) 1px, transparent 1px),
  linear-gradient(180deg,#152018,#111820);
  background-size: 10% 10%, 10% 10%, auto; }
.defenseBoard { background:
  linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
  linear-gradient(180deg, rgba(255,255,255,.035) 1px, transparent 1px),
  linear-gradient(180deg,#201718,#121820);
  background-size: 10% 10%, 10% 10%, auto; }
.los { position:absolute; top:8px; bottom:8px; width:2px; background:rgba(255,255,255,.5); color:rgba(255,255,255,.7); font-size:10px; letter-spacing:.06em; text-transform:uppercase; writing-mode:vertical-rl; display:flex; align-items:center; justify-content:center; z-index:0; }
.offenseLos { left:82%; }
.defenseLos { left:18%; }
.playerCard { position:absolute; width:58px; min-height:42px; border:1px solid var(--line); border-radius:8px; padding:4px 3px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; box-shadow:0 5px 14px rgba(0,0,0,.2); transform:translate(-50%,-50%); z-index:1; }
.playerCard .slot { color:#dfe9f7; font-weight:850; font-size:9px; line-height:1; letter-spacing:.025em; }
.playerCard .pname { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; line-height:1.1; margin-top:2px; }
.playerCard .pscore { font-weight:900; margin-top:2px; font-size:10px; line-height:1; font-variant-numeric: tabular-nums; }
.playerCard.elite { background:#123720; border-color:#2d8a4d; }
.playerCard.strong { background:#193b30; border-color:#409170; }
.playerCard.solid { background:#3c3420; border-color:#8b7638; }
.playerCard.weak { background:#421f26; border-color:#914052; }
.playerCard.empty { background:#171b23; border-style:dashed; color:var(--muted); }
.playerCard.offense.line { box-shadow:0 0 0 2px rgba(105,183,255,.15), 0 5px 14px rgba(0,0,0,.2); }
.playerCard.offense.off { opacity:.96; }
.playerCard.defense.line { box-shadow:0 0 0 2px rgba(255,107,107,.12), 0 5px 14px rgba(0,0,0,.2); }
.matchupList { display:flex; flex-direction:column; gap:8px; padding:12px; }
.matchRow { display:grid; grid-template-columns: 1.05fr 1.35fr auto 1.35fr auto; gap:8px; align-items:center; padding:9px; border:1px solid var(--line); border-radius:10px; background:#141923; font-size:12px; }
.matchLabel { color:#dfe9f7; font-weight:800; }
.versus { color:var(--muted); }
.edge { font-weight:900; font-variant-numeric: tabular-nums; }
.matchRow.advBig { border-color:#2d8a4d; background:#12251a; }
.matchRow.advSmall { border-color:#409170; background:#14231d; }
.matchRow.disBig { border-color:#914052; background:#2a151a; }
.matchRow.disSmall { border-color:#8b7638; background:#251f14; }
.matchRow.even { border-color:#46536a; }
@media (max-width: 1350px) { .matchupLayout { grid-template-columns: 1fr; } .formationBoard { min-height:500px; } }
@media (max-width: 720px) { .formationBoard { min-height:470px; } .playerCard { width:54px; } .matchRow { grid-template-columns:1fr; } }

.trainingGrid { display:grid; grid-template-columns: minmax(360px, .85fr) minmax(520px, 1.15fr); gap:16px; align-items:start; }
.goodText { color:var(--good); }
.badText { color:var(--bad); }
.tcAlloc { min-width:74px; padding:6px 8px; }
@media (max-width: 1150px) { .trainingGrid { grid-template-columns: 1fr; } }

/* v1.0 spreadsheet-style Training Camp */
.tcSheet { display:block; }
.tcWorkbookWrap { border:1px solid var(--line); border-radius:12px; overflow-x:auto; overflow-y:visible; max-height:none; background:#111722; }
table.tcWorkbook { table-layout:fixed; width:auto; min-width:940px; border-collapse:collapse; font-size:11px; font-variant-numeric:tabular-nums; }
.tcWorkbook th, .tcWorkbook td { padding:4px 5px; height:24px; border:1px solid #303848; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.tcWorkbook th { position:static; background:#1f2635; color:#dfe9f7; text-align:center; font-weight:850; cursor:default; }
.tcWorkbook tr:hover td { background:inherit; }
.tcWorkbook th:nth-child(1), .tcWorkbook td:nth-child(1),
.tcWorkbook th:nth-child(2), .tcWorkbook td:nth-child(2) { text-align:left; }
.tcHeaderRow th { background:#202636; color:#e7eefb; }
.tcStatRow td { background:#121924; }
.tcStatRow:nth-child(10n+3) td,
.tcStatRow:nth-child(10n+5) td,
.tcStatRow:nth-child(10n+7) td,
.tcStatRow:nth-child(10n+9) td { background:#151d2a; }
.tcNameCell { font-weight:750; color:#f4f7fc; text-align:left; }
.tcAttr { font-weight:900; color:#dfe9f7; text-align:center; }
.tcResult { text-align:center; color:#e9eef6; }
.tcResult.positive { color:#cfe8d6; }
.tcResult.chosen { outline:2px solid rgba(105,183,255,.72); outline-offset:-2px; background:#19314d !important; color:#ffffff; font-weight:900; }
.tcAlloc { width:58px; min-width:0; padding:2px 3px; border-radius:4px; font-size:11px; text-align:right; }
.tcTotalRow td { background:#0f141d; border-bottom:3px solid #41516b; color:var(--muted); }
.tcTotalRow.legal td { background:#101b17; }
.tcTotalRow.illegal td { background:#241417; }
.tcActions { text-align:center; display:flex; gap:8px; align-items:center; justify-content:center; overflow:visible !important; }
.tcMiniOptimize { padding:3px 7px; border-radius:6px; font-size:11px; }
@media (max-width: 900px) { table.tcWorkbook { font-size:10px; min-width:900px; } .tcWorkbook th, .tcWorkbook td { padding:3px 4px; } }