*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0d1117; --surface: #161b22; --surface-alt: #1c2333;
  --border: #30363d; --border-light: #21262d;
  --green: #2ea043; --green-bright: #3fb950; --green-dim: #1a7f37;
  --text: #e6edf3; --text-muted: #8b949e; --text-dim: #484f58;
  --accent: #58a6ff; --red: #f85149; --orange: #d29922; --gold: #e3b341;
  --white: #ffffff;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  min-height: 100dvh; -webkit-font-smoothing: antialiased;
}
#root { max-width: 520px; margin: 0 auto; padding: 0 16px 100px; width: 100%; }
@media (min-width: 640px) {
  #root { max-width: 700px; }
}
@media (min-width: 1024px) {
  #root { max-width: 980px; padding: 0 24px 100px; }
}
.grid-list { display: flex; flex-direction: column; }
@media (min-width: 700px) {
  .grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
  .grid-list > div { margin-bottom: 0 !important; }
}
/* Home's competition list switches to a grid earlier than the generic .grid-list (600px vs
   700px) so a 640px-wide screen already shows 2 columns instead of one oversized card. */
.grid-list-home { display: flex; flex-direction: column; }
@media (min-width: 600px) {
  .grid-list-home { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; }
  .grid-list-home > div { margin-bottom: 0 !important; }
}

/* ─── Home toolbar ───────────────────────────────────────────────────────────
   Default (<640px): status toggle, role chips, then search+Find each stack on
   their own row, all left-aligned and compact — never spans the full width.
   640–1024px: status toggle + search/Find share one row (status left, actions
   right); role chips drop to their own row at the same width as the toggle.
   1024px+: everything shares a single row (more room at that width). */
.home-toolbar { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 6px; }
.home-status { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px; width: 100%; }
.home-status button { flex: 1; border: none; font-family: inherit; padding: 9px 20px; cursor: pointer; border-radius: 8px; font-size: 13px; font-weight: 700; background: transparent; color: var(--text-muted); white-space: nowrap; }
.home-status button.on { background: var(--green); color: var(--white); }
.home-status button .n { opacity: 0.7; font-weight: 600; }
.home-roles { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.home-roles::-webkit-scrollbar { display: none; }
.home-role-btn { border: 1px solid var(--border); font-family: inherit; padding: 6px 13px; border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.home-role-btn.on { border-color: var(--green); background: rgba(46,160,67,0.18); color: var(--green-bright); }
.home-actions { display: flex; gap: 8px; align-items: center; }
.home-search { width: 170px; flex: 0 0 170px; }
.home-count-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.home-new-fab {
  position: fixed; right: 20px; bottom: 24px; width: 54px; height: 54px; border-radius: 50%;
  background: var(--green); color: var(--white); border: none; font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20;
  box-shadow: 0 6px 18px rgba(46,160,67,0.45);
}
.home-new-inline { display: none; }
@media (min-width: 640px) {
  .home-toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .home-status { width: 230px; flex: 0 0 230px; order: 1; }
  .home-actions { order: 2; margin-left: auto; }
  .home-search { width: 190px; flex: 0 0 190px; }
  .home-roles { width: 230px; flex: 0 0 230px; order: 3; }
}
@media (min-width: 1024px) {
  .home-roles { order: 2; margin: 0; }
  .home-actions { order: 3; }
  .home-search { width: 220px; flex: 0 0 220px; }
  .home-new-fab { display: none; }
  .home-new-inline { display: inline-flex; }
}
.rankings-grid { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 700px) {
  .rankings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; align-items: stretch; }
  .rankings-grid > div { margin-bottom: 0 !important; }
}
.form-card { max-width: 480px; }
.assign-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) {
  .assign-grid { grid-template-columns: repeat(4, 1fr); }
}
button { cursor: pointer; font-family: var(--font); }
input { font-family: var(--font); }
input:focus { border-color: var(--green) !important; outline: none; }
button:active { opacity: 0.85; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.score-input::-webkit-outer-spin-button, .score-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.score-input { -moz-appearance: textfield; appearance: textfield; }
.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: var(--white); padding: 10px 20px;
  border-radius: 8px; font-size: 13px; font-weight: 600; z-index: 100;
  animation: toast-in 0.3s ease, toast-out 0.3s ease 1.7s forwards;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(-50%) translateY(10px); } }