/* Lightweight, modern card + gradient styling */
.hbr-card {
  max-width: 820px;
  margin: 20px auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), #fbfbff);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(30,30,60,0.08);
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #112;
  border: 1px solid rgba(20,20,40,0.03);
}

.hbr-header { padding: 20px 24px; border-bottom: 1px solid rgba(20,20,40,0.04); }
.hbr-header h2 { margin:0 0 6px; font-size:20px; }
.hbr-header p { margin:0; color:#556; font-size:13px; }

.hbr-body { padding: 18px; }
.hbr-progress { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.hbr-progress-bar { flex:1; height:8px; background:#eee; border-radius:8px; overflow:hidden; }
.hbr-progress-fill { height:100%; background: linear-gradient(90deg,#7C4DFF,#3AA1FF); width:0%; transition: width 400ms ease; }
.hbr-progress-text { width:140px; text-align:right; font-size:13px; color:#445; }

.hbr-quiz-container { min-height: 320px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }

.hbr-questions { width:100%; max-width: 900px; display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.hbr-question-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,249,255,0.9));
  border-radius:12px;
  border:1px solid rgba(20,20,40,0.04);
  padding:14px;
  cursor:pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
  display:flex; gap:10px; align-items: flex-start; flex-direction: column;
}
.hbr-question-card:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(30,30,60,0.06); }
.hbr-question-card.active { background: linear-gradient(90deg,#7C4DFF22,#3AA1FF22); box-shadow: 0 12px 30px rgba(60,90,200,0.08); transform: translateY(-6px); }
.hbr-question-card .icon { font-size:26px; width:36px; text-align:center; }
.hbr-question-card .label { font-weight:600; color:#102; }

.hbr-footer { display:flex; justify-content:space-between; gap:12px; margin-top:14px; }
.hbr-btn { background:linear-gradient(90deg,#7C4DFF,#3AA1FF); color:#fff; border:none; padding:10px 16px; border-radius:10px; cursor:pointer; box-shadow: 0 6px 18px rgba(60,80,220,0.12); }
.hbr-btn[disabled], .hbr-btn.disabled { opacity:0.45; cursor:default; box-shadow:none; }

.hbr-result { padding:24px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:space-between; }
.hbr-meter { width:160px; height:160px; }
.hbr-circle { width:160px; height:160px; transform: rotate(-90deg); }
.hbr-circle .hbr-bg { fill:none; stroke:#eef; stroke-width:12; }
.hbr-circle .hbr-fill { fill:none; stroke-width:12; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 900ms cubic-bezier(.2,.9,.2,1); }
.hbr-percent { font-size:18px; fill:#102; transform: rotate(90deg); }

.hbr-result-body { flex:1; min-width:260px; }
.hbr-result-body h3 { margin:6px 0; font-size:20px; }
.hbr-recs a { display:block; color:#2b6cff; text-decoration:none; margin:8px 0; }
.hbr-input { display:block; width:100%; padding:10px; margin:8px 0; border-radius:8px; border:1px solid #e6e9f0; }

@media (max-width:720px){
  .hbr-card { margin:8px; border-radius:10px; }
  .hbr-quiz-container { min-height: 420px; }
  .hbr-questions { grid-template-columns: repeat(2,1fr); }
  .hbr-result { padding:16px; }
}