.civic-demo-root{max-width:980px;margin:28px auto;padding:0 16px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;}
.civic-shell{display:block;}
.civic-title{text-align:center;font-size:46px;letter-spacing:-0.02em;margin:10px 0 18px;color:#243391;font-weight:900;}

.civic-head{margin:0 0 14px;}
.civic-head-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 10px;}
.civic-cat{font-weight:900;color:rgba(15,23,42,.65);letter-spacing:.04em;}
.civic-count{font-weight:800;color:rgba(15,23,42,.55);}
.civic-bar{height:10px;border-radius:999px;background:rgba(15,23,42,.08);overflow:hidden;}
.civic-bar-fill{height:100%;border-radius:999px;background:#EA4D80;}

.civic-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  padding:22px;
  box-shadow:0 16px 40px rgba(15,23,42,.08);
}

.civic-lead{text-align:center;color:rgba(15,23,42,.7);margin:0 0 16px;}

.civic-question{font-size:30px;line-height:1.25;margin:10px 0 18px;color:#243391;font-weight:900;}

.civic-choices{display:flex;flex-direction:column;gap:14px;margin-bottom:16px;}

.civic-choice{
  display:flex;align-items:center;gap:14px;
  border-radius:18px;
  padding:18px 18px;
  border:2px solid rgba(15,23,42,.08);
  background:#fff;
  cursor:pointer;
  transition:transform .08s ease,border-color .14s ease,background .14s ease;
  position:relative;
}
.civic-choice:hover{transform:translateY(-1px);border-color:rgba(36,51,145,.22);}

.civic-letter{
  width:38px;height:38px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(15,23,42,.04);
  color:rgba(15,23,42,.55);
  font-weight:900;
  flex:0 0 auto;
}
.civic-text{font-size:18px;font-weight:800;color:#243391;}

.civic-choice input[type="radio"]{
  position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;
}

/* Selected before checking */
.state-selected{border-color:rgba(36,51,145,.35);box-shadow:0 0 0 4px rgba(36,51,145,.08);}

/* After checking */
.state-muted{opacity:.55;}
.state-correct{border-color:rgba(34,197,94,.75);background:rgba(34,197,94,.08);}
.state-wrong{border-color:rgba(239,68,68,.75);background:rgba(239,68,68,.08);}

.civic-feedbackbox{margin-top:16px;}
.civic-feedback-inner{
  border-radius:18px;
  background:rgba(36,51,145,.05);
  padding:18px;
  border:1px solid rgba(36,51,145,.10);
}
.civic-feedback-title{font-size:20px;font-weight:900;color:#243391;margin-bottom:6px;}
.civic-feedback-text{color:rgba(15,23,42,.75);font-size:16px;line-height:1.5;}

.civic-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
.civic-actions.right{justify-content:flex-end;}
.civic-actions.center{justify-content:center;}

.civic-btn{
  border:0;border-radius:14px;
  padding:12px 18px;
  font-weight:900;
  cursor:pointer;
}
.civic-btn.pink{background:#EA4D80;color:#fff;box-shadow:0 12px 22px rgba(234,77,128,.22);}
.civic-btn.ghost{background:rgba(36,51,145,.10);color:#243391;}

.civic-result-top{text-align:center;color:rgba(15,23,42,.75);font-size:18px;margin-bottom:10px;}
.civic-result-row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin:14px 0;}
.civic-donut{width:170px;height:170px;border-radius:999px;position:relative;}
.civic-donut-inner{
  position:absolute;inset:18px;border-radius:999px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:22px;color:#243391;
}
.civic-stats .good{color:#243391;font-weight:800;margin-bottom:6px;}
.civic-stats .bad{color:#EA4D80;font-weight:800;}

/* Smooth transitions */
.civic-anim{transition:transform 260ms ease, opacity 260ms ease;}
.civic-in{opacity:0;transform:translateX(10px);}
.civic-in.civic-ready{opacity:1;transform:translateX(0);}
.civic-out{opacity:0;transform:translateX(-10px);}

/* FORCE hide native radios (Kinsta/theme safe) */
.civic-demo-root .civic-choice input[type="radio"]{
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}