.tpt-ck-page {
  padding: 2rem 1rem 4rem;
}

.tpt-ck-shell {
  max-width: 720px;
  margin: 0 auto;
}

.tpt-ck-app h1 {
  margin-bottom: 0.5rem;
}

.tpt-ck-error {
  background: #fdecea;
  border: 1px solid #f5c2c0;
  color: #7a1f1a;
  padding: 0.75rem 1rem;
  border-radius: 6px;
}

.tpt-ck-steps {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tpt-ck-step {
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  background: #fff;
}

.tpt-ck-step.is-done {
  border-color: var(--tp-success-text);
  background: #f3fbf3;
}

.tpt-ck-step__check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  cursor: pointer;
}

.tpt-ck-step__instructions {
  margin: 0.5rem 0 0.75rem;
  color: #4a4a4a;
}

.tpt-ck-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 6px;
}

.tpt-ck-video-link {
  display: inline-block;
  margin-top: 0.5rem;
}

.tpt-ck-photo-section {
  border-top: 1px solid #e2e2e2;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.tpt-ck-photo-section img {
  display: block;
  max-width: 100%;
  margin: 1rem 0;
  border-radius: 6px;
}

.tpt-ck-button {
  background: var(--tp-navy-2);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
}

.tpt-ck-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.tpt-ck-button--secondary {
  background: transparent;
  color: var(--tp-navy-2);
  border: 1px solid var(--tp-navy-2);
  margin-top: 0.75rem;
}

.tpt-ck-verdict {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: #fff4e5;
  border: 1px solid #f0c987;
  color: #7a4b00;
}

.tpt-ck-passed {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: #eafaf0;
  border: 1px solid #a7e3bd;
  color: var(--tp-success-text);
}