:root {
  --m5-primary:#1E4129;
  --m5-accent:#50C878;
  --m5-accent-soft:rgba(80,200,120,0.16);
  --m5-bg:#f6f7f8;
  --m5-text:#0f172a;
  --m5-text-soft:#6b7280;
  --m5-radius:1.2rem;
  --m5-shadow:0 18px 40px rgba(15,23,42,.12);
  --m5-danger:#dc2626;
  --m5-warn:#f97316;
  --m5-ok:#16a34a;
}

.m5-root {
  max-width:960px;
  margin:0 auto;
  padding:1.5rem;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--m5-text);
}

.m5-root * {
  box-sizing:border-box;
}

.m5-header-eyebrow {
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--m5-text-soft);
}

.m5-header-title {
  font-size:1.8rem;
  margin:.2rem 0 .5rem;
}

.m5-header-sub {
  font-size:1rem;
  color:var(--m5-text-soft);
  max-width:46rem;
  line-height:1.5;
}

.m5-card {
  margin-top:1.5rem;
  background:#fff;
  border-radius:var(--m5-radius);
  padding:1.4rem 1.6rem;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:var(--m5-shadow);
}

.m5-card + .m5-card {
  margin-top:1.2rem;
}

.m5-card-title {
  font-size:1.1rem;
  margin:0 0 .4rem;
}

.m5-card-sub {
  font-size:.92rem;
  color:var(--m5-text-soft);
  margin:0 0 .7rem;
}

.m5-tag {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.18rem .6rem;
  border-radius:999px;
  font-size:.78rem;
  background:#e5e7eb;
  color:#374151;
}

.m5-tag-info {
  background:var(--m5-accent-soft);
  color:var(--m5-primary);
}

.m5-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.1rem;
  margin-top:.8rem;
}

.m5-step-header {
  display:flex;
  justify-content:space-between;
  gap:.6rem;
  align-items:center;
  flex-wrap:wrap;
}

.m5-step-title {
  font-size:1.02rem;
  font-weight:600;
}

.m5-step-pill {
  font-size:.8rem;
  padding:.18rem .6rem;
  border-radius:999px;
  background:#e5e7eb;
  color:#374151;
}

.m5-step-pill-active {
  background:var(--m5-accent-soft);
  color:var(--m5-primary);
  font-weight:600;
}

.m5-steps-bar {
  margin-top:.7rem;
  display:flex;
  gap:.4rem;
}

.m5-step-dot {
  flex:1;
  height:6px;
  border-radius:999px;
  background:#e5e7eb;
  overflow:hidden;
}
.m5-step-dot-inner {
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--m5-primary),var(--m5-accent));
  transition:width .25s ease;
}

.m5-q {
  margin-top:.9rem;
}

.m5-q-label {
  font-size:.92rem;
  font-weight:600;
  margin-bottom:.2rem;
}

.m5-q-hint {
  font-size:.82rem;
  color:var(--m5-text-soft);
  margin-bottom:.3rem;
}

.m5-q-textarea {
  width:100%;
  min-height:110px;
  border-radius:.9rem;
  border:1px solid #d1d5db;
  padding:.7rem .8rem;
  font-size:.95rem;
  resize:vertical;
  background:#f9fafb;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.m5-q-textarea:focus {
  outline:none;
  border-color:var(--m5-accent);
  box-shadow:0 0 0 1px rgba(80,200,120,0.4);
  background:#fff;
}

.m5-q-feedback {
  margin-top:.3rem;
  font-size:.82rem;
  border-radius:.7rem;
  padding:.45rem .6rem;
  display:flex;
  flex-direction:column;
  gap:.18rem;
}

.m5-q-feedback-low {
  background:#fef2f2;
  color:#991b1b;
  border:1px solid #fecaca;
}
.m5-q-feedback-mid {
  background:#fffbeb;
  color:#92400e;
  border:1px solid #fde68a;
}
.m5-q-feedback-high {
  background:#ecfdf5;
  color:#166534;
  border:1px solid #bbf7d0;
}

.m5-dim-grid {
  margin-top:.8rem;
  border-top:1px dashed #e5e7eb;
  padding-top:.7rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:.6rem;
  font-size:.86rem;
}

.m5-dim-item-label {
  font-weight:600;
  margin-bottom:.1rem;
}

.m5-dim-bar-wrap {
  position:relative;
  height:6px;
  border-radius:999px;
  background:#e5e7eb;
  overflow:hidden;
  margin-top:.2rem;
}
.m5-dim-bar {
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--m5-primary),var(--m5-accent));
  transition:width .25s ease;
}

.m5-dim-score {
  font-size:.8rem;
  color:var(--m5-text-soft);
  margin-top:.2rem;
}

.m5-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.2rem;
}

.m5-btn {
  padding:.8rem 1.4rem;
  border-radius:999px;
  border:none;
  font-weight:600;
  cursor:pointer;
  font-size:.95rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  transition:background .18s ease, transform .08s ease, box-shadow .18s ease;
  box-shadow:0 8px 18px rgba(15,23,42,.16);
}
.m5-btn:active {
  transform:translateY(1px);
  box-shadow:0 4px 10px rgba(15,23,42,.18);
}
.m5-btn-primary {
  background:var(--m5-primary);
  color:#fff;
}
.m5-btn-primary:hover {
  background:#16331e;
}
.m5-btn-secondary {
  background:#e5e7eb;
  color:#111827;
}
.m5-btn-secondary:hover {
  background:#d1d5db;
}

.m5-overall-score {
  font-size:1.5rem;
  font-weight:700;
  margin-top:.2rem;
}

.m5-overall-tag {
  display:inline-block;
  padding:.15rem .6rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  margin-top:.25rem;
}
.m5-overall-low {
  background:#fee2e2;
  color:#b91c1c;
}
.m5-overall-mid {
  background:#ffedd5;
  color:#c2410c;
}
.m5-overall-high {
  background:#dcfce7;
  color:#15803d;
}

.m5-inline-hint {
  font-size:.8rem;
  color:var(--m5-text-soft);
  margin-top:.3rem;
}

@media(max-width:768px){
  .m5-root { padding:1rem; }
  .m5-card { padding:1.1rem 1.2rem; }
  .m5-header-title { font-size:1.55rem; }
}