.card{
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

button{
  background:var(--primary);
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer;
  transition:transform .1s ease, opacity .1s ease;
}

button:hover{
  opacity:.9;
  transform:translateY(-1px);
  background:var(--primary);
}

button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* toggle */

input[type=checkbox].toggle{
  --size:24px;
  --gap:calc(var(--size)*0.075);
  appearance:none;
  cursor:pointer;
  position:relative;
  display:inline-block;
  width:calc(var(--size)*1.62);
  height:var(--size);
  border-radius:var(--size);
  background:#666;
  transition:background-color .2s;
}

input[type=checkbox].toggle::before{
  content:"";
  position:absolute;
  top:50%;
  left:var(--gap);
  width:calc(var(--size)*0.85);
  height:calc(var(--size)*0.85);
  background:#fff;
  border-radius:50%;
  transform:translateY(-50%);
  transition:transform .2s;
}

input[type=checkbox].toggle:checked{
  background:#3d5;
}

input[type=checkbox].toggle:checked::before{
  transform:translate(calc(var(--size)*0.62),-50%);
}

/* bar chart */

.barRow{margin-bottom:22px;}

.barLabel{
  font-size:28px;
  margin-bottom:6px;
}

.barBg{
  background:#333;
  border-radius:8px;
  overflow:hidden;
  height:36px;
}

.barFill{
  height:100%;
  background:linear-gradient(90deg,#4caf50,#81c784);
  width:0%;
  transition:width .6s ease;
}

.barCount{
  font-size:22px;
  margin-top:6px;
  opacity:.8;
}

.resultcard{
  background:#fff;
  border-radius:12px;
  padding:16px;
  margin-bottom:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.icon-btn{
  background:#000000;
}
.topbar-icon{
  fill:currentColor;
}