:root{
  --ms-primary: #9AD7A7;
}

.ms-survey-box, .ms-results-box{
  font-family: inherit;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px;
  background: rgba(154, 215, 167, 0.10);
}

.ms-survey-privacy{
  border-left: 4px solid var(--ms-primary);
  background: rgba(255,255,255,.75);
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.ms-survey-intro{
  margin-bottom: 12px;
}

.ms-q{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 12px;
  margin: 0 0 10px 0;
}

.ms-hidden{ display:none !important; }

.ms-label{
  display:block;
  font-weight: 700;
  margin-bottom: 6px;
}

.ms-help{
  color: rgba(0,0,0,.65);
  font-size: .92em;
  margin-bottom: 8px;
}

.ms-options{
  display:grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.ms-opt{
  display:flex;
  gap: 10px;
  align-items:flex-start;
}

.ms-other{
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
}

.ms-btn{
  background: var(--ms-primary);
  border: 0;
  color: #093a1d;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
}

.ms-btn:hover{ filter: brightness(0.98); }

.ms-msg{
  margin-top: 10px;
  font-weight: 700;
}
.ms-msg.ok{ color: #0b5d24; }
.ms-msg.err{ color: #9b1c1c; }

.ms-consent{
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.ms-optional{ font-weight: 600; color: rgba(0,0,0,.55); }

.ms-results-head{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ms-results-title{ font-size: 1.2em; font-weight: 900; }
.ms-results-sub{ color: rgba(0,0,0,.65); font-size: .92em; }

.ms-results-kpi{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 120px;
  text-align: center;
}
.ms-kpi-label{ color: rgba(0,0,0,.65); font-weight: 700; font-size: .85em; }
.ms-kpi-value{ font-size: 1.4em; font-weight: 900; }

.ms-results-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Optional: allow 2 columns if explicitly enabled */
.ms-results-grid.ms-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px){
  .ms-results-grid.ms-cols-2{ grid-template-columns: 1fr; }
}


.ms-card{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 12px;
}
.ms-card-title{
  font-weight: 900;
  margin-bottom: 8px;
}
.ms-card-note{
  margin-top: 8px;
  color: rgba(0,0,0,.65);
  font-size: .9em;
}