:root {
  --app-ink:#201f26;
  --app-muted:#5d5b66;
  --app-page:#fcf5f1;
  --app-panel:#fff;
  --app-soft:#f1eff5;
  --app-line:#e3dfe8;
  --app-accent:#b4462b;
  --app-accent-soft:#fae6de;
  --app-sidebar:linear-gradient(155deg,#fae0d5,#fff8f4 78%);
  --app-shadow:0 8px 22px #39232b0c;
  --app-font:-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;
  --app-radius:20px;
}
:root[data-theme="dark"] {
  --app-ink:#f5eff0;
  --app-muted:#c5b5ba;
  --app-page:#1d171c;
  --app-panel:#282028;
  --app-soft:#362c36;
  --app-line:#52414b;
  --app-accent:#ff9c80;
  --app-accent-soft:#502e2b;
  --app-sidebar:linear-gradient(155deg,#492d2f,#251d25 78%);
  color-scheme:dark;
}
:where(button,a,input,select,textarea,summary):focus-visible {
  outline:3px solid var(--app-accent);
  outline-offset:2px;
}

:root { --app-on-accent:#fff;--app-team-secondary-soft:var(--app-soft) }
:root[data-appearance="white"],:root[data-appearance="contrast"] {
  color-scheme:light;
  --app-panel:#fff;--app-page:#fff;--app-ink:#201f26;
  --app-muted:#515461;--app-soft:#f5f6f8;--app-line:#d6dbe2;
}
:root[data-appearance="contrast"] {
  --app-ink:#080808;--app-muted:#242424;--app-soft:#fff;--app-line:#656565;
}
.team-color-fields {min-width:0;margin:14px 0;padding:12px;border:1px solid var(--app-line);border-radius:12px}
.team-color-pickers {display:flex;gap:16px;flex-wrap:wrap}
.team-color-pickers[hidden] {display:none}
.team-color-pickers input[type=color] {height:44px;width:100%;min-width:96px;padding:4px;cursor:pointer}

.roster-view-controls {display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.roster-view-controls label {display:flex;align-items:center;gap:6px;margin:0}
.roster-view-controls select {width:auto;margin:0}
.roster-directory {display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.roster-directory[data-layout="list"],.roster-grid[data-layout="list"] {grid-template-columns:minmax(0,1fr)}
.roster-directory article {margin:0;padding:12px}
.roster-directory[data-layout="list"] article {display:flex;justify-content:space-between;gap:12px}
#rosterGrid[data-layout="list"] .player-card {min-height:62px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-right:56px;text-align:left}
#rosterGrid[data-layout="list"] .player-card .avatar {width:40px;height:40px;margin:0}
.roster-school-grade {color:var(--app-muted);font-size:.85rem}