:root{
    --card-bg:#ffffff;
    --page-bg:#f6f8fb;
    --brand:#0d6efd;
  }
  body{ background:var(--page-bg); }
  .container-card{ max-width: 960px; margin: 28px auto; }
  .cardish{ background:var(--card-bg); border-radius:16px; box-shadow:0 10px 28px rgba(0,0,0,.06); }
  .q-title{ font-weight:700; font-size:1.15rem; margin-bottom:10px; color:#0b3a75; }
  .q-sub{ color:#6b7280; margin-bottom:14px; font-size:.95rem; }

  /* Answer buttons */
  .opt-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
  .opt-btn{
    border:none; color:#fff; border-radius:12px; padding:14px 14px; font-weight:600;
    display:flex; align-items:center; gap:10px; cursor:pointer; transform:translateY(0);
    transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
    box-shadow: 0 6px 14px rgba(0,0,0,.08);
  }
  .opt-btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.12); }
  .opt-emoji{ font-size:1.2rem; opacity:.95; }
  .question-step{ display:none; }
  .question-step.active{ display:block; animation:fadeIn .20s ease; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

  /* Footer controls */
  .footer-controls{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
  .steps{ display:flex; align-items:center; gap:6px; }
  .dot{ width:9px; height:9px; background:#d1d5db; border-radius:50%; }
  .dot.active{ background:var(--brand); }
  .dot.done{ background:#198754; }

  /* Review */
  .review-table td{ vertical-align:middle; }
  .ai-panel{ background:#eef6ff; border-left:4px solid var(--brand); border-radius:10px; padding:14px; }

  /* KPI badges */
  .badge-row .badge{ font-size:.92rem; padding:.55rem .7rem; }

.opt-btn.active {
  outline: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--brand);
  opacity: 0.85;
}

/* Ensure modal is always centered */
#userInfoModal .modal-dialog {
    margin: auto;
    max-width: 500px; /* keeps it compact on desktop */
    width: 90%;       /* auto-adjust on smaller screens */
}

/* Mobile fix */
@media (max-width: 576px) {
  #userInfoModal .modal-dialog {
      max-width: 95% !important;
      margin: 10px auto;
  }
  #userInfoModal .modal-content {
      padding: 15px;
  }
}