:root { --maxw: 1180px; --pad: 16px; --border: #e5e7eb; --muted:#6b7280; --bg:#ffffff; --bg2:#f9fafb; --brand:#0605d7; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg2); color:#111827; }
header { background: var(--brand); color:#fff; position: static; top:0; z-index:10; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--pad); }
.brandbar { display:flex; gap:12px; align-items:center; }
.brandbar img { height:44px; width:auto; }
h1 { font-size: 18px; margin: 0; font-weight: 800; letter-spacing: 0.2px; }
.subtitle { font-size: 12px; opacity: 0.9; margin-top:2px; }
nav { display:flex; flex-wrap: wrap; gap:10px; padding-top: 10px; }
nav a { text-decoration:none; color:#fff; padding:8px 10px; border:1px solid rgba(255,255,255,0.35); border-radius:10px; background: rgba(255,255,255,0.08); }
nav a.active { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.6); }
main { padding: 18px var(--pad); }
.card { max-width: var(--maxw); margin: 0 auto; background:#fff; border:1px solid var(--border); border-radius: 14px; overflow:hidden; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding: 12px 14px; border-bottom:1px solid var(--border); background: #fff; }
.toolbar input, .toolbar select { padding:8px 10px; border:1px solid var(--border); border-radius:10px; }
.meta { padding: 10px 14px; color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--border); background:#fff; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align:left; vertical-align: top; }
th { user-select:none; cursor:pointer; background:#fff; position: static; top: auto; z-index: 5; }
tbody tr:hover { background: #f9fafb; }
.badge { display:inline-block; padding:2px 8px; font-size:12px; border-radius:999px; border:1px solid var(--border); margin-left:8px; color:#111827; background:#fff; }
.status { display:inline-block; padding:2px 8px; font-size:12px; border-radius:999px; border:1px solid var(--border); margin-left:8px; }
.status.active { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.status.inactive { background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.teamcell { display:flex; align-items:center; gap:10px; }
.teamlogo { width:40px; height:40px; border-radius:6px; border:1px solid var(--border); background:#fff; object-fit:contain; }
.footer { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--pad); color: var(--muted); font-size: 12px; }
small { color: var(--muted); }

.teamcell .teamname{ text-transform: uppercase; letter-spacing: .02em; }