/* =========
  zzoa EQ Test
  - responsive / clean / accessible
========= */

:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;

  --p1:#6d5efc;     /* primary */
  --p2:#8b7dff;
  --good:#10b981;
  --warn:#f59e0b;
  --bad:#ef4444;

  --shadow: 0 10px 25px rgba(17,24,39,.08);
  --radius: 18px;
}

.zzoa-eq-wrap{
  max-width: 860px;
  margin: 0 auto;
  padding: 18px 14px 26px;
  color: var(--text);
}

.eq-hero{
  background: linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  text-align: center;
}

.eq-hero__icons{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom: 6px;
}

.eq-icon-badge{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #f2f1ff;
  border: 1px solid #e9e7ff;
  font-size: 18px;
}

.eq-hero__title{
  margin: 4px 0 4px;
  font-size: 22px;
  letter-spacing: -.3px;
}

.eq-hero__subtitle{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.eq-menu{
  display:flex;
  gap:10px;
  margin: 12px 0 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.eq-menu__btn{
  display:flex;
  align-items:center;
  gap:8px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(17,24,39,.06);
  transition: transform .12s ease, border-color .12s ease;
}

.eq-menu__btn:hover{ transform: translateY(-1px); border-color: #d7dbff; }
.eq-menu__btn:active{ transform: translateY(0); }

.eq-menu__ico{
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: #f2f1ff;
  border: 1px solid #e9e7ff;
}

.eq-menu__ico svg{
  width: 16px; height:16px;
  fill: var(--p1);
}

.eq-menu__txt{
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
}

.eq-share-msg{
  margin: 10px auto 14px;
  max-width: 860px;
}

.eq-share-msg__inner{
  border: 1px solid #e9e7ff;
  background: #fbfbff;
  border-radius: var(--radius);
  padding: 12px 12px;
  box-shadow: 0 10px 20px rgba(109,94,252,.08);
}

.eq-share-msg__title{
  font-weight: 900;
  letter-spacing: -.2px;
  margin-bottom: 4px;
}

.eq-share-msg__desc{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 10px;
}

.eq-share-msg__row{
  display:flex;
  gap:8px;
  align-items:center;
}

.eq-input{
  flex: 1;
  border: 1px solid var(--line);
  background: #fff;
  padding: 10px 10px;
  border-radius: 12px;
  font-size: 13px;
  outline: none;
}

.eq-card{
  margin-top: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 14px 16px;
}

.eq-progress__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.eq-badge{
  background: linear-gradient(90deg, var(--p1), var(--p2));
  color:#fff;
  font-weight: 900;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  letter-spacing: -.2px;
}

.eq-progress__meta{
  display:flex;
  align-items:center;
  gap:8px;
  color: var(--muted);
  font-size: 13px;
}

.eq-meta__dot{ opacity: .6; }

.eq-progress__bar{
  height: 10px;
  background: #eef0ff;
  border: 1px solid #e8eaff;
  border-radius: 999px;
  overflow:hidden;
}

.eq-progress__fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--p1), #9b8dff);
  border-radius: 999px;
  transition: width .25s ease;
}

.eq-question{
  margin-top: 14px;
  border-top: 1px dashed #e9e7ff;
  padding-top: 14px;
}

.eq-qtitle{
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.3px;
  margin: 0 0 10px;
  line-height: 1.35;
}

.eq-qdesc{
  margin: 0 0 14px;
  padding: 12px 12px;
  border-radius: 14px;
  border-left: 4px solid var(--p1);
  background: #fbfbff;
  color: #374151;
  line-height: 1.55;
  font-size: 13px;
}

.eq-choices{
  display:grid;
  gap:10px;
}

.eq-choice{
  display:flex;
  align-items:center;
  gap:10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 12px;
  cursor:pointer;
  background: #fff;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}

.eq-choice:hover{
  border-color:#d7dbff;
  box-shadow: 0 10px 20px rgba(109,94,252,.06);
  transform: translateY(-1px);
}

.eq-choice__dot{
  width: 30px; height: 30px;
  border-radius: 999px;
  background: #f2f1ff;
  border: 1px solid #e9e7ff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: var(--p1);
  flex: 0 0 auto;
}

.eq-choice__label{
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.eq-choice__hint{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}

.eq-choice--selected{
  border-color: rgba(109,94,252,.55);
  background: linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
  box-shadow: 0 10px 22px rgba(109,94,252,.10);
}

.eq-nav{
  display:flex;
  gap:10px;
  justify-content: space-between;
  margin-top: 14px;
}

.eq-btn{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  padding: 12px 12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 900;
  letter-spacing: -.2px;
}

.eq-btn__ico{
  width: 18px; height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.eq-btn__ico svg{ width:18px; height:18px; fill: currentColor; }

.eq-btn--ghost{
  background:#fff;
  color: var(--text);
}

.eq-btn--primary{
  width: 100%;
  justify-content:center;
  background: linear-gradient(90deg, var(--p1), var(--p2));
  border-color: transparent;
  color:#fff;
  box-shadow: 0 12px 26px rgba(109,94,252,.22);
}

.eq-btn[disabled]{
  opacity: .55;
  cursor: not-allowed;
}

.eq-submit{
  margin-top: 14px;
  border-top: 1px dashed #e9e7ff;
  padding-top: 14px;
}

.eq-submit__hint{
  margin: 10px 2px 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.eq-result{
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.eq-result__header{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap:12px;
  flex-wrap: wrap;
}

.eq-result__title{
  font-size: 18px;
  font-weight: 1000;
  margin: 0 0 6px;
}

.eq-result__score{
  display:flex;
  gap:10px;
  align-items:center;
}

.eq-score-badge{
  min-width: 86px;
  text-align:center;
  border-radius: 16px;
  padding: 10px 12px;
  color:#fff;
  font-weight: 1000;
  background: linear-gradient(90deg, var(--p1), var(--p2));
  box-shadow: 0 10px 22px rgba(109,94,252,.18);
}

.eq-score-meta{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.eq-type-card{
  margin-top: 12px;
  border: 1px solid #e9e7ff;
  background: #fbfbff;
  border-radius: var(--radius);
  padding: 12px 12px;
}

.eq-type-card__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  flex-wrap: wrap;
}

.eq-type-name{
  font-size: 16px;
  font-weight: 1000;
  margin: 0;
}

.eq-type-tag{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid #e9e7ff;
  background: #fff;
  color: var(--p1);
}

.eq-type-desc{
  margin: 8px 0 0;
  color: #374151;
  line-height: 1.55;
  font-size: 13px;
}

.eq-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-top: 12px;
}

@media (min-width: 720px){
  .eq-grid{ grid-template-columns: 1fr 1fr; }
}

.eq-mini-card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 12px;
  background: #fff;
}

.eq-mini-card__title{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin: 0 0 10px;
  font-weight: 1000;
}

.eq-mini-pill{
  font-size: 12px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f9fafb;
  color: var(--text);
}

.eq-meter{
  height: 10px;
  border-radius: 999px;
  background: #eef0ff;
  border: 1px solid #e8eaff;
  overflow:hidden;
}

.eq-meter > div{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--p1), #9b8dff);
  border-radius: 999px;
  transition: width .35s ease;
}

.eq-mini-desc{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.eq-bullets{
  margin: 12px 0 0;
  padding-left: 18px;
  color: #374151;
  font-size: 13px;
  line-height: 1.55;
}

.eq-bullets li{ margin: 6px 0; }

.eq-highlight{
  font-weight: 1000;
  color: var(--p1);
}

.eq-alert{
  margin-top: 12px;
  border-radius: var(--radius);
  padding: 12px 12px;
  border: 1px solid var(--line);
  background: #fff;
}

.eq-alert__title{
  margin: 0 0 6px;
  font-weight: 1000;
  display:flex;
  gap:8px;
  align-items:center;
}

.eq-alert__desc{
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.eq-guide{
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 14px 14px;
}

.eq-guide__title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 1000;
  display:flex;
  align-items:center;
  gap:8px;
}

.eq-guide__list{
  margin: 0;
  padding-left: 18px;
  color:#374151;
  line-height: 1.65;
  font-size: 13px;
}

.eq-guide__note{
  margin-top: 12px;
  border-top: 1px dashed #e9e7ff;
  padding-top: 12px;
  display:flex;
  justify-content: space-between;
  gap:10px;
  flex-wrap: wrap;
}

.eq-note__title{
  font-weight: 1000;
}

.eq-note__desc{
  color: var(--muted);
  font-size: 13px;
}

.eq-footer{
  margin-top: 16px;
  text-align:center;
  color: #9ca3af;
  font-size: 12px;
  padding: 10px 0 4px;
}

.eq-loading{
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
  z-index: 9999;
}

.eq-loading__card{
  width: min(420px, 92vw);
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid rgba(229,231,235,.8);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  padding: 16px 16px;
  text-align:center;
}

.eq-loading__icons{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom: 10px;
}

.eq-loading__emoji{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #f2f1ff;
  border: 1px solid #e9e7ff;
  font-size: 22px;
}

.eq-loading__title{
  font-weight: 1000;
  font-size: 18px;
  margin: 0 0 6px;
}

.eq-loading__sub{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.eq-dots{
  display:flex;
  justify-content:center;
  gap:6px;
}
.eq-dots span{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--p1);
  opacity: .25;
  animation: dot 1.2s infinite;
}
.eq-dots span:nth-child(2){ animation-delay: .15s; }
.eq-dots span:nth-child(3){ animation-delay: .3s; }

@keyframes dot{
  0%,100%{ transform: translateY(0); opacity: .25; }
  50%{ transform: translateY(-4px); opacity: .9; }
}