/* Frontend with CSS variables for easy theming */
.a24-survey{
  --a24-primary: #006600;
  --a24-text: #222222;
  color: var(--a24-text);
  border:1px solid #eee; padding:16px; border-radius:12px; max-width:720px; margin:16px auto;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.a24-input, .a24-textarea{ width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; }
.a24-input:focus, .a24-textarea:focus{ outline:none; border-color: var(--a24-primary); box-shadow: 0 0 0 3px rgba(0,0,0,0.04); }
.a24-progress{width:100%; height:8px; background:#f2f2f2; border-radius:999px; overflow:hidden; margin-bottom:12px;}
.a24-progress-bar{height:100%; width:0%; transition:width .3s ease; background: var(--a24-primary);}
.a24-question{margin:16px 0; display:none;}
.a24-qtext{font-weight:600; margin-bottom:8px;}
.a24-qopts label{display:block; margin:6px 0;}
.a24-controls{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.a24-controls button{
  background: var(--a24-primary); color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer;
}
.a24-controls button[disabled]{opacity:.5; cursor:not-allowed;}
.a24-next, .a24-submit{margin-left:auto;}
.a24-status{margin-top:10px; font-size:.95em; color: var(--a24-text);}
.a24-msg{padding:12px; background:#fff7e6; border:1px solid #ffe3a4; border-radius:8px;}

.a24-error{color:#b00020; font-size:0.9em; margin-top:6px;}

.a24-result-list{list-style:none; padding:0; margin:8px 0;}
.a24-result-list li{position:relative; background:#f5f5f5; border-radius:8px; margin:6px 0; overflow:hidden; min-height:26px; display:flex; align-items:center;}
.a24-result-list .a24-bar{position:absolute; left:0; top:0; bottom:0; background: var(--a24-primary); opacity:.7;}
.a24-result-list .a24-label{position:relative; padding:6px 10px; display:block; width:100%; color: var(--a24-text);}

.a24-chart-card{background:#fff; border:1px solid #eee; border-radius:12px; padding:12px; margin:12px 0;}
.a24-legend{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.a24-swatch{display:inline-block; width:12px; height:12px; border-radius:3px; border:1px solid rgba(0,0,0,.1);}

@media (max-width:600px){
  .a24-controls{gap:6px;}
  .a24-controls button{flex:1 1 auto;}
}