:root { --ink:#16202a; --muted:#64717e; --line:#dce3e8; --paper:#f7f8f5; --panel:#fff; --accent:#123c52; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button { font:inherit; cursor:pointer; }
.app-shell { max-width:1600px; margin:auto; padding:16px clamp(18px,4vw,64px) 32px; }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-bottom:10px; }
.controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.mode-control { display:flex; padding:4px; border:1px solid var(--line); border-radius:9px; background:var(--panel); }
.mode-button,.reset-button { border:0; border-radius:6px; padding:9px 14px; color:var(--ink); background:transparent; font-size:.86rem; font-weight:700; }
.mode-button.is-active { color:#fff; background:var(--accent); }
.reset-button { color:var(--muted); }
.gameweek-range { width:min(440px,100%); margin:0; padding:8px 13px 9px; border:1px solid var(--line); border-radius:9px; background:var(--panel); }
.range-label { display:flex; justify-content:space-between; margin-bottom:8px; color:var(--muted); font-size:.76rem; font-weight:800; }.range-label output { color:var(--ink); }
.range-sliders { position:relative; height:18px; }.range-sliders input { position:absolute; top:0; width:100%; height:18px; margin:0; appearance:none; pointer-events:none; background:linear-gradient(90deg,#d8e3e8,#d8e3e8) center/100% 4px no-repeat; }.range-sliders input::-webkit-slider-thumb { width:18px; height:18px; appearance:none; border:3px solid #fff; border-radius:50%; background:#123c52; box-shadow:0 1px 4px rgba(10,25,35,.35); pointer-events:auto; }.range-sliders input::-moz-range-thumb { width:13px; height:13px; border:3px solid #fff; border-radius:50%; background:#123c52; box-shadow:0 1px 4px rgba(10,25,35,.35); pointer-events:auto; }
.adjustments { margin:0 0 10px; border:1px solid var(--line); border-radius:9px; background:var(--panel); }.adjustments summary { padding:9px 13px; color:#123c52; cursor:pointer; font-size:.84rem; font-weight:800; }.adjustments-content { padding:0 13px 13px; }.adjustments-content p { margin:0 0 12px; color:var(--muted); font-size:.78rem; }.adjustments-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:7px; margin-bottom:8px; }.adjustment-row { display:grid; grid-template-columns:minmax(95px,1fr) 1.4fr 1.4fr; align-items:center; gap:8px; padding:7px; border-radius:6px; background:#f3f6f4; font-size:.75rem; }.adjustment-row label { display:grid; grid-template-columns:auto auto; align-items:center; gap:3px 5px; color:var(--muted); }.adjustment-row output { color:var(--ink); font-weight:800; }.adjustment-row input { grid-column:1 / -1; width:100%; accent-color:#123c52; }
.restore-strip { display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-height:0; margin:-6px 0 13px; color:var(--muted); font-size:.78rem; }
.restore-chip { padding:5px 8px; border:1px solid #b8d8cf; border-radius:99px; color:#086c58; background:#eff9f5; font-size:.75rem; font-weight:800; }
.fixture-panel { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); box-shadow:0 12px 35px rgba(20,42,56,.06); }
.fixture-grid-wrap { overflow-x:auto; overflow-y:clip; }
.fixture-grid { width:100%; min-width:max-content; border-collapse:separate; border-spacing:0; font-size:.76rem; }
.fixture-grid th { position:sticky; top:0; z-index:2; padding:6px 5px; border-bottom:1px solid var(--line); background:#f2f5f3; color:#52606c; font-size:.68rem; letter-spacing:.05em; text-align:center; text-transform:uppercase; white-space:nowrap; }
.fixture-grid th.team-heading { position:sticky; left:0; z-index:4; min-width:158px; padding-left:16px; text-align:left; }
.fixture-grid td { height:48px; padding:2px 3px; border-right:1px solid #edf0f2; border-bottom:1px solid #edf0f2; text-align:center; }
.fixture-grid tr:last-child td { border-bottom:0; }
.team-cell { position:sticky; left:0; z-index:1; padding:0 10px 0 16px !important; background:#fff; border-right:1px solid var(--line) !important; color:var(--ink); font-weight:800; text-align:left !important; white-space:nowrap; }
.team-cell span { display:inline-block; max-width:118px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.inline-toggle { display:inline-grid; place-items:center; width:18px; height:18px; margin-left:4px; padding:0; border:0; border-radius:99px; color:#fff; background:#788590; font-weight:900; line-height:1; vertical-align:middle; }
.inline-toggle:hover,.inline-toggle:focus-visible { background:#123c52; outline:2px solid #74a9bd; outline-offset:1px; }
.sort-toggle { display:inline-grid; place-items:center; width:18px; height:18px; margin-left:2px; padding:0; border:0; color:#52606c; background:transparent; font-size:.86rem; font-weight:900; line-height:1; vertical-align:middle; }.sort-toggle:hover,.sort-toggle:focus-visible { color:#123c52; outline:2px solid #74a9bd; outline-offset:1px; }
.fixture-cell { min-width:53px; color:#172029; font-weight:800; line-height:1.1; }
.fixture-cell small { display:block; margin-top:2px; font-size:.63rem; font-weight:700; opacity:.75; }
.blank-cell { background:repeating-linear-gradient(-45deg,#fafafa,#fafafa 4px,#f2f4f5 4px,#f2f4f5 5px); }
@media (max-width:640px) { .app-shell { padding-top:12px; } .toolbar { align-items:stretch; gap:8px; } .gameweek-range { width:100%; } .fixture-grid th.team-heading { min-width:138px; } .team-cell { padding-left:10px !important; } .team-cell span { max-width:95px; } }