:root {
  color-scheme: light dark;
  --bg: #f2f7f6;
  --surface: #ffffff;
  --surface-2: #e8f0ef;
  --text: #142321;
  --muted: #61706e;
  --line: #cedbd9;
  --brand: #0f766e;
  --brand-strong: #0a5c56;
  --open: #a16207;
  --cash: #15803d;
  --paypal: #2563eb;
  --shadow: 0 8px 25px rgb(19 49 45 / 8%);
}

* { box-sizing: border-box; }
html { background: var(--brand-strong); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; }
button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem max(1rem, calc((100% - 62rem) / 2));
  background: linear-gradient(135deg, var(--brand-strong), var(--brand));
  color: white;
}
.eyebrow { margin: 0 0 .2rem; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .78; }
h1 { margin: 0; font-size: clamp(1.55rem, 6vw, 2.2rem); line-height: 1.1; }
.reset { min-height: 44px; padding: .55rem .8rem; border: 1px solid rgb(255 255 255 / 45%); border-radius: .7rem; background: rgb(255 255 255 / 12%); color: white; cursor: pointer; }
main { width: min(100% - 2rem, 62rem); margin: 0 auto; padding: 1rem 0 2rem; }
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-bottom: .85rem; }
.summary-item { padding: .7rem .35rem; border: 1px solid var(--line); border-top: 3px solid; border-radius: .8rem; background: var(--surface); text-align: center; box-shadow: var(--shadow); }
.summary-item strong, .summary-item span { display: block; }
.summary-item strong { font-size: 1.5rem; line-height: 1.1; }
.summary-item span { margin-top: .15rem; color: var(--muted); font-size: .8rem; }
.summary-item.open { border-top-color: var(--open); }
.summary-item.cash { border-top-color: var(--cash); }
.summary-item.paypal { border-top-color: var(--paypal); }
.filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-bottom: 1rem; padding: 3px; border-radius: .75rem; background: var(--surface-2); }
.filters button { min-height: 44px; padding: .45rem .2rem; border: 0; border-radius: .55rem; background: transparent; color: var(--muted); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 2px 7px rgb(0 0 0 / 9%); }
.teams { display: grid; gap: .8rem; }
.team { overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow); }
.team > h2 { margin: 0; padding: .65rem .85rem; border-bottom: 1px solid var(--line); color: var(--brand); font-size: 1rem; }
.team > h2 span { color: var(--muted); font-weight: 500; }
.player { padding: .85rem; }
.player + .player { border-top: 1px solid var(--line); }
.player h3 { margin: 0 0 .6rem; font-size: 1rem; }
.segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: .75rem; background: var(--surface-2); }
.segments button { min-height: 44px; padding: .45rem .15rem; border: 0; border-radius: .55rem; background: transparent; color: var(--muted); cursor: pointer; }
.segments button[aria-pressed="true"] { color: white; font-weight: 750; box-shadow: 0 2px 6px rgb(0 0 0 / 15%); }
.segments [data-status="open"][aria-pressed="true"] { background: var(--open); }
.segments [data-status="cash"][aria-pressed="true"] { background: var(--cash); }
.segments [data-status="paypal"][aria-pressed="true"] { background: var(--paypal); }
.team[hidden], .player[hidden], [hidden] { display: none !important; }
.loading, .empty, footer { color: var(--muted); text-align: center; }
.loading { margin: .4rem 0 1rem; }
.empty { padding: 2rem 1rem; }
.error { margin: 0 0 1rem; padding: .8rem; border: 1px solid #dc2626; border-radius: .75rem; background: #fef2f2; color: #991b1b; }
footer { padding: 0 1rem calc(1.5rem + env(safe-area-inset-bottom)); font-size: .8rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (min-width: 44rem) {
  .teams { grid-template-columns: repeat(2, 1fr); }
  main { padding-top: 1.4rem; }
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #091513; --surface: #10211f; --surface-2: #1a302d; --text: #edf7f5; --muted: #9cafac; --line: #29413e; --brand: #2dd4bf; --brand-strong: #071f1d; --open: #a8650b; --cash: #16733b; --paypal: #245cca; --shadow: 0 8px 25px rgb(0 0 0 / 20%); }
  .error { background: #351414; color: #fecaca; }
}
@media (prefers-reduced-motion: no-preference) {
  button { transition: background-color .15s ease, color .15s ease, transform .1s ease; }
  button:active { transform: scale(.98); }
}