@import url("https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.css");

.gtp2-root { direction: rtl; font-family: Vazirmatn, Vazir, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.gtp2-root * { box-sizing: border-box; }

.gtp2-shell{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px;
}

.gtp2-shell[data-anim]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}
.gtp2-shell[data-anim].is-in{ opacity: 1; transform: translateY(0); }

.gtp2-hero{
  padding: 18px 18px 8px;
}
.gtp2-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  background: rgba(99,102,241,.12);
  color:#3730a3;
  font-weight:700;
  font-size: 12px;
}
.gtp2-hero h1{ margin:10px 0 6px; font-size: 28px; line-height: 1.25; }
.gtp2-hero p{ margin:0; color:#4b5563; }

.gtp2-card{
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(17,24,39,.06);
  padding: 18px;
  margin-top: 14px;
}

.gtp2-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.gtp2-span2{ grid-column: span 2; }

.gtp2-field label{
  display:block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  color:#111827;
}
.gtp2-field input{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border:1px solid rgba(17,24,39,.16);
  outline:none;
  font-size: 14px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.gtp2-field input:focus{
  border-color: rgba(99,102,241,.55);
  box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}
.gtp2-hint{ margin-top:6px; color:#6b7280; font-size: 12px; }

.gtp2-actions{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
}

.gtp2-btn{
  border:1px solid rgba(17,24,39,.14);
  background:#fff;
  color:#111827;
  padding: 11px 14px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.gtp2-btn:active{ transform: translateY(1px); }
.gtp2-btn:disabled{ opacity:.55; cursor:not-allowed; }
.gtp2-btn-primary{
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  color:#fff;
  box-shadow: 0 14px 26px rgba(99,102,241,.24);
}
.gtp2-btn-ghost{
  background: rgba(17,24,39,.04);
}
.gtp2-btn-ico{ margin-right:10px; font-weight: 900; }
.gtp2-btn.is-loading{ position: relative; }
.gtp2-btn.is-loading::after{
  content:"";
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7);
  border-top-color: rgba(255,255,255,.15);
  display:inline-block;
  margin-right: 10px;
  animation: gtp2spin .7s linear infinite;
  vertical-align: -2px;
}
@keyframes gtp2spin { to { transform: rotate(360deg); } }

.gtp2-msg{ color:#b91c1c; font-weight: 700; }
.gtp2-footnote{
  display:flex; gap: 12px; flex-wrap: wrap;
  color:#6b7280; font-size: 12px;
  padding: 10px 4px;
}

.gtp2-quizTop{ margin-top: 6px; }
.gtp2-progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(17,24,39,.08);
  overflow: hidden;
}
.gtp2-progressBar{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, #22c55e, #6366f1, #f59e0b);
  transition: width .25s ease;
}
.gtp2-quizMeta{
  display:flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; gap: 10px; flex-wrap: wrap;
}
.gtp2-quizTitle{ font-weight: 900; font-size: 14px; }
.gtp2-quizSub{ color:#6b7280; font-size: 12px; }

.gtp2-question{ padding: 20px; }
.gtp2-qText{ font-size: 18px; font-weight: 900; color:#111827; line-height: 1.6; }
.gtp2-options{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}
.gtp2-opt{
  border:1px solid rgba(17,24,39,.12);
  border-radius: 14px;
  padding: 12px 10px;
  background:#fff;
  cursor:pointer;
  display:flex; flex-direction: column; gap: 8px;
  align-items:center;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
  min-height: 64px;
}
.gtp2-opt:hover{
  border-color: rgba(99,102,241,.4);
  box-shadow: 0 10px 22px rgba(17,24,39,.08);
  transform: translateY(-1px);
}
.gtp2-optLabel{ font-weight: 900; font-size: 12px; color:#111827; }
.gtp2-optDot{
  width: 10px; height: 10px; border-radius: 99px;
  background: rgba(99,102,241,.25);
}
.gtp2-opt.picked{
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 10px 22px rgba(34,197,94,.12);
  transform: scale(.99);
}
.gtp2-nav{
  display:flex; justify-content: space-between; gap: 10px;
  margin-top: 12px;
}

.gtp2-resultHeader{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 2px 4px;
}
.gtp2-resultHeader h2{ margin: 8px 0 6px; font-size: 24px; }
.gtp2-resultHeader p{ margin: 0; color:#4b5563; }
.gtp2-top3{ display:flex; gap:10px; flex-wrap: wrap; }
.gtp2-topChip{
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.18);
  border-radius: 16px;
  padding: 10px 12px;
  display:flex; gap: 10px; align-items: center;
  min-width: 220px;
}
.gtp2-rank{
  width: 30px; height: 30px; border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight: 900;
}
.gtp2-topName{ font-weight: 900; }
.gtp2-topVal{ color:#6b7280; font-size: 12px; font-weight: 800; }

.gtp2-reportMeta{
  display:flex; gap: 12px; flex-wrap: wrap;
  color:#111827;
  font-weight: 800;
  margin-bottom: 8px;
}
.gtp2-reportIntro{ color:#374151; line-height: 1.9; }

.gtp2-chartWrap{
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed rgba(17,24,39,.18);
  border-radius: 16px;
  background: rgba(17,24,39,.02);
}
.gtp2-chartTitle{ font-weight: 900; margin-bottom: 10px; }

.gtp2-scoreGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.gtp2-scoreCard{
  border:1px solid rgba(17,24,39,.1);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}
.gtp2-scoreHead{
  display:flex; justify-content: space-between; gap: 10px; align-items: baseline;
}
.gtp2-scoreName{ font-weight: 1000; }
.gtp2-scoreNum{ color:#6b7280; font-weight: 900; font-size: 12px; }

.gtp2-meter{
  height: 10px;
  border-radius: 999px;
  background: rgba(17,24,39,.08);
  overflow: hidden;
  margin-top: 10px;
}
.gtp2-meter span{
  display:block; height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, #22c55e, #6366f1, #f59e0b);
}
.gtp2-detail p{ margin: 10px 0 0; color:#374151; line-height: 1.85; font-size: 13px; }

.gtp2-actionsResult{ margin-top: 12px; }
@media (max-width: 860px){
  .gtp2-grid{ grid-template-columns: 1fr; }
  .gtp2-span2{ grid-column: span 1; }
  .gtp2-options{ grid-template-columns: 1fr; }
  .gtp2-scoreGrid{ grid-template-columns: 1fr; }
  .gtp2-topChip{ min-width: 100%; }
  .gtp2-hero h1{ font-size: 24px; }
  .gtp2-qText{ font-size: 16px; }
}