/* ==========================================================================
   CPS Tester — Shared Components
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  padding:14px 26px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:var(--fs-sm);
  line-height:1;
  white-space:nowrap;
  transition:transform var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-fast) var(--ease-out),
             background var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out);
  border:1px solid transparent;
  min-height:48px;
}
.btn:active{transform:scale(0.97);}

.btn--primary{
  background:var(--brand-gradient);
  color:#fff;
  box-shadow:var(--shadow-md);
}
.btn--primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-1px);}

.btn--secondary{
  background:var(--surface-card);
  color:var(--text-primary);
  border-color:var(--surface-border-strong);
}
.btn--secondary:hover{background:var(--surface-card-hover);border-color:var(--color-brand-400);}

.btn--ghost{
  background:transparent;
  color:var(--text-secondary);
  border-color:var(--surface-border);
}
.btn--ghost:hover{color:var(--text-primary);border-color:var(--surface-border-strong);}

.btn--sm{padding:10px 18px;min-height:38px;font-size:var(--fs-xs);}
.btn--lg{padding:18px 34px;min-height:56px;font-size:var(--fs-base);}
.btn--block{width:100%;}
.btn--icon{padding:12px;min-width:48px;}

/* ---------- Cards ---------- */
.card{
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
}
.card--interactive{
  transition:transform var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out);
}
.card--interactive:hover{
  transform:translateY(-3px);
  border-color:var(--surface-border-strong);
  background:var(--surface-card-hover);
}

/* ---------- Test card (grid item) ---------- */
.test-card{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  height:100%;
}
.test-card__icon{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);
  background:var(--brand-gradient-soft);
  color:var(--color-brand-300);
}
.test-card__icon svg{width:24px;height:24px;}
.test-card__title{font-family:var(--font-heading);font-size:var(--fs-lg);font-weight:600;color:var(--text-primary);}
.test-card__desc{color:var(--text-secondary);font-size:var(--fs-sm);flex:1;}
.test-card__meta{display:flex;gap:var(--space-2);flex-wrap:wrap;}
.test-card__cta{
  margin-top:var(--space-2);
  color:var(--color-brand-300);
  font-weight:600;
  font-size:var(--fs-sm);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.test-card__cta svg{width:14px;height:14px;}
.test-card:hover .test-card__cta{color:var(--color-brand-200);}

/* ---------- Badges / pills / chips ---------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  font-size:var(--fs-xs);
  font-weight:600;
  background:var(--surface-raised);
  border:1px solid var(--surface-border);
  color:var(--text-secondary);
}
.badge--brand{background:rgba(var(--color-brand-500-rgb),0.15);color:var(--color-brand-300);border-color:rgba(var(--color-brand-500-rgb),0.3);}
.badge--success{background:rgba(34,197,94,0.15);color:var(--color-success-400);border-color:rgba(34,197,94,0.3);}
.badge--warning{background:rgba(245,158,11,0.15);color:var(--color-warning-400);border-color:rgba(245,158,11,0.3);}
.badge--accent{background:rgba(255,107,61,0.15);color:var(--color-accent-400);border-color:rgba(255,107,61,0.3);}

.level-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:8px 16px 8px 8px;
  border-radius:var(--radius-pill);
  background:var(--surface-raised);
  border:1px solid var(--surface-border-strong);
}
.level-badge__num{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-gradient);
  color:#fff;font-family:var(--font-heading);font-size:var(--fs-xs);font-weight:700;
}
.level-badge__name{font-weight:600;font-size:var(--fs-sm);}

/* ---------- Progress / XP bar ---------- */
.xp-bar{
  height:10px;
  border-radius:var(--radius-pill);
  background:var(--surface-raised);
  overflow:hidden;
  border:1px solid var(--surface-border);
}
.xp-bar__fill{
  height:100%;
  border-radius:var(--radius-pill);
  background:var(--brand-gradient);
  width:0%;
  transition:width var(--duration-slow) var(--ease-out);
}

/* ---------- Section heading ---------- */
.section-head{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  margin-bottom:var(--space-10);
  max-width:640px;
}
.section-head--center{margin-inline:auto;text-align:center;align-items:center;}
.section-head--split{
  flex-direction:row;
  align-items:flex-end;
  justify-content:space-between;
  max-width:none;
}
@media (max-width:640px){
  .section-head--split{flex-direction:column;align-items:flex-start;gap:var(--space-4);}
}

/* ---------- Grid ---------- */
.grid{display:grid;gap:var(--space-6);}
.grid--2{grid-template-columns:repeat(1,1fr);}
.grid--3{grid-template-columns:repeat(1,1fr);}
.grid--4{grid-template-columns:repeat(2,1fr);}
@media (min-width:640px){
  .grid--4{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:768px){
  .grid--2{grid-template-columns:repeat(2,1fr);}
  .grid--3{grid-template-columns:repeat(3,1fr);}
  .grid--4{grid-template-columns:repeat(4,1fr);}
}

/* ---------- FAQ accordion ---------- */
.faq-list{display:flex;flex-direction:column;gap:var(--space-3);}
.faq-item{
  border:1px solid var(--surface-border);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  overflow:hidden;
}
.faq-item__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  padding:var(--space-5);
  text-align:left;
  font-weight:600;
  font-size:var(--fs-base);
}
.faq-item__icon{
  flex-shrink:0;
  width:22px;height:22px;
  transition:transform var(--duration-base) var(--ease-out);
}
.faq-item[data-open="true"] .faq-item__icon{transform:rotate(45deg);}
.faq-item__a{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--duration-slow) var(--ease-out);
  color:var(--text-secondary);
}
.faq-item__a-inner{padding:0 var(--space-5) var(--space-5);}
.faq-item[data-open="true"] .faq-item__a{max-height:600px;}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-size:var(--fs-xs);
  color:var(--text-muted);
  margin-bottom:var(--space-6);
}
.breadcrumbs a{color:var(--text-muted);}
.breadcrumbs a:hover{color:var(--color-brand-300);}
.breadcrumbs__sep{opacity:0.5;}
.breadcrumbs [aria-current="page"]{color:var(--text-secondary);}

/* ---------- Steps (How it works) ---------- */
.steps{
  display:grid;
  gap:var(--space-6);
  grid-template-columns:1fr;
  counter-reset:step;
}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,1fr);}}
.step{position:relative;padding-top:64px;}
.step::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;top:0;left:0;
  width:40px;height:40px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-gradient-soft);
  color:var(--color-brand-300);
  font-family:var(--font-heading);font-weight:700;
}
.step__title{margin-top:0;margin-bottom:var(--space-2);}
.step__desc{color:var(--text-secondary);font-size:var(--fs-sm);}

/* ---------- Toast ---------- */
.toast{
  position:fixed;
  bottom:var(--space-6);
  left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--surface-raised);
  border:1px solid var(--surface-border-strong);
  color:var(--text-primary);
  padding:14px 22px;
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-lg);
  font-size:var(--fs-sm);
  font-weight:600;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);
  z-index:var(--z-toast);
}
.toast[data-visible="true"]{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}

/* ---------- Empty / error states ---------- */
.empty-state{
  text-align:center;
  padding:var(--space-16) var(--space-6);
  color:var(--text-secondary);
}
.empty-state__icon{margin:0 auto var(--space-4);width:56px;height:56px;color:var(--text-muted);}

/* ---------- Skeleton loading ---------- */
.skeleton{
  background:linear-gradient(90deg,var(--surface-card) 25%,var(--surface-card-hover) 37%,var(--surface-card) 63%);
  background-size:400% 100%;
  animation:skeleton-loading 1.4s ease infinite;
  border-radius:var(--radius-sm);
}
@keyframes skeleton-loading{0%{background-position:100% 50%;}100%{background-position:0 50%;}}