.app{max-width:960px;margin:0 auto;padding:2rem 1rem 4rem}.app__header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:1.5rem}.app__title{margin:0;font-size:1.875rem;color:var(--color-crimson)}.app__count{margin:0;color:var(--color-muted);font-size:.875rem}.search-bar{margin-bottom:1.25rem}.search-bar__input{width:100%;padding:.625rem .875rem;font-size:1rem;border:1px solid var(--color-border);border-radius:.5rem;background-color:var(--color-surface)}.search-bar__input:focus{outline:2px solid var(--color-crimson);outline-offset:1px;border-color:transparent}.roster-table{width:100%;border-collapse:collapse;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;overflow:hidden}.roster-table th{padding:0;text-align:left;background-color:var(--color-crimson)}.roster-table__sort-button{width:100%;padding:.75rem .875rem;font:inherit;font-weight:600;text-align:left;color:#fff;background:none;border:none;cursor:pointer}.roster-table__sort-button:hover{background-color:var(--color-crimson-dark)}.roster-table td{padding:.625rem .875rem;border-top:1px solid var(--color-border);font-size:.9375rem}.roster-table tbody tr:hover{background-color:var(--color-row-hover)}.roster-empty{padding:2rem;text-align:center;color:var(--color-muted);background-color:var(--color-surface);border:1px dashed var(--color-border);border-radius:.5rem}:root{--color-crimson: #9e1b32;--color-crimson-dark: #7c1527;--color-text: #1a1a1a;--color-muted: #6b7280;--color-border: #e5e7eb;--color-row-hover: #faf2f3;--color-surface: #ffffff;--color-bg: #f8f8f8;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--color-text);background-color:var(--color-bg)}*{box-sizing:border-box}body{margin:0;-webkit-font-smoothing:antialiased}