:root { --bg:#f6f7fb; --card:#ffffff; --ink:#18202a; --muted:#637083; --line:#dce2ea; --good:#e9f7ef; --bad:#fdecea; --accent:#1f6feb; }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.topbar { display:flex; align-items:center; gap:1rem; padding:0.9rem 1.2rem; background:#101828; color:white; position:sticky; top:0; z-index:2; }
.topbar a { color:white; } .topbar nav { display:flex; gap:.8rem; flex:1; } .brand { font-weight:800; font-size:1.1rem; }
.container { max-width:1200px; margin:0 auto; padding:1.5rem; }
.hero, .card, .form-card, table { background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.hero { padding:2rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; }
.card { padding:1rem; } .card.ok { border-color:#90d4aa; } .card.needs { border-color:#f0b4ac; }
.small-cards { grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); margin-bottom:1rem; }
.button, button { display:inline-block; border:0; background:var(--accent); color:white; padding:.7rem 1rem; border-radius:10px; font-weight:700; cursor:pointer; }
.button.secondary { background:#475467; } .actions { display:flex; gap:.7rem; margin:1rem 0; }
.muted { color:var(--muted); } .alert { padding:.75rem 1rem; background:#eef4ff; border:1px solid #c7d7fe; border-radius:10px; margin:1rem 0; }
.alert.success { background:var(--good); border-color:#a6ddb8; } .alert.danger { background:var(--bad); border-color:#f4ada8; }
.form-card { display:grid; gap:.85rem; padding:1rem; margin:1rem 0; } label { display:grid; gap:.25rem; font-weight:650; } input, select, textarea { padding:.65rem; border:1px solid var(--line); border-radius:9px; background:white; }
.check { display:flex; align-items:center; gap:.5rem; font-weight:500; } .check input { width:auto; }
.inline-form { display:flex; gap:1rem; align-items:end; flex-wrap:wrap; margin:1rem 0; }
.layout { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:1.25rem; align-items:start; } aside { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1rem; }
.table-wrap { overflow:auto; border-radius:14px; }
table { width:100%; border-collapse:collapse; overflow:hidden; } th, td { text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--line); white-space:nowrap; } thead th { background:#eef2f7; font-size:.9rem; color:#344054; }
.compact th, .compact td { padding:.5rem .6rem; font-size:.92rem; }
.pick-cell { text-align:center; min-width:54px; } .pick-cell span { display:block; font-size:.75rem; color:var(--muted); }
.good { background:var(--good); } .bad { background:var(--bad); } .pick-cell.correct-pick { background:var(--good) !important; } .pick-cell.incorrect-pick { background:var(--bad) !important; } .pick-cell.pending-pick { background:#fff; } tr.needs td { background:#fff8e8; }
.pill { display:inline-block; padding:.2rem .45rem; border-radius:999px; font-size:.76rem; font-weight:700; }
.status-list { list-style:none; padding:0; display:grid; gap:.6rem; } .status-list li { border:1px solid var(--line); border-radius:10px; padding:.65rem; background:#fff8e8; } .status-list li.done { background:var(--good); }
@media (max-width: 850px) { .layout { grid-template-columns:1fr; } .topbar { flex-wrap:wrap; } }

.spacer { flex: 1; }
.user-chip { background:#344054; color:#fff; padding:.25rem .5rem; border-radius:999px; font-size:.85rem; }
textarea { font-family: inherit; }
.schedule-pick-table td { vertical-align: middle; }
.team-choice { display:flex; align-items:center; gap:.45rem; padding:.45rem .55rem; border:1px solid var(--line); border-radius:10px; background:white; cursor:pointer; min-width:180px; }
.team-choice:hover { border-color:var(--accent); box-shadow:0 0 0 2px rgba(31,111,235,.08); }
.team-choice input { width:auto; margin:0; }
.team-choice.selected { border-color:var(--accent); background:#eef4ff; }
.team-choice.disabled { color:var(--muted); background:#f2f4f7; cursor:not-allowed; opacity:.65; }
.team-choice.disabled:hover { border-color:var(--line); box-shadow:none; }
.team-choice-code { font-weight:800; min-width:2.5rem; }
.team-choice-name { font-size:.88rem; white-space:normal; line-height:1.2; }
.team-choice small { display:block; font-size:.72rem; color:#9a3412; margin-left:auto; }
button:disabled { background:#98a2b3; cursor:not-allowed; }

.hidden-pick { background:#f2f4f7 !important; color:var(--muted); font-style:italic; }
.hidden-label { font-size:.78rem; color:var(--muted); }
.usage-table td, .usage-table th { white-space:normal; }

.narrow { max-width: 560px; }