body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;
  background:#0b1220;
  color:#fff;
}

.container{
  max-width:900px;
  margin:40px auto;
  padding:20px;
}

.card{
  background:#121a2e;
  border-radius:16px;
  padding:20px;
  margin-bottom:20px;
  border:1px solid rgba(255,255,255,.08);
}

h1,h2,h3{
  margin:0 0 12px 0;
}

.section-title{
  margin-top:40px;
  font-size:22px;
  opacity:.8;
}

.match{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}

.option{
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.15);
  cursor:pointer;
  transition:.2s;
}

.option:hover{
  background:rgba(255,255,255,.05);
}

.option.selected{
  background:#2f6fff;
  border-color:#2f6fff;
}

button{
  padding:14px 20px;
  border:none;
  border-radius:14px;
  cursor:pointer;
  font-size:16px;
}

.primary{
  background:#2f6fff;
  color:#fff;
}

.danger{
  background:#ff4d5a;
  color:#fff;
}

.input{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.15);
  background:#1b2540;
  color:#fff;
  margin-bottom:12px;
}

.error{
  margin-top:10px;
  padding:10px;
  background:#401b2a;
  border-radius:10px;
  border:1px solid #ff4d5a;
}

.small{
  opacity:.75;
  font-size:14px;
}

.tallyCard{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:12px;
  margin-top:10px;
}

.tallyLine{
  margin-top:8px;
}

.barTrack{
  width:100%;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
  margin-top:6px;
}

.barFill{
  height:100%;
}

.barA{
  background:#2f6fff;
}

.barB{
  background:#ff4d5a;
}