.personality-page,
.tests-catalog {
  --personality-accent: #F97316;
  --personality-soft: #FFF7ED;
  background:
    radial-gradient(circle at 8% 8%, var(--personality-soft) 0, transparent 26rem),
    #F8FAFC;
  min-height: calc(100vh - 60px);
}

.personality-page [hidden],
.tests-catalog [hidden] { display: none !important; }

.personality-shell {
  width: min(100% - 32px, 1040px);
  margin: 0 auto;
}

.personality-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 22px 0 18px;
  color: #94A3B8;
  font-size: .82rem;
}

.personality-breadcrumb a { color: #64748B; text-decoration: none; }
.personality-breadcrumb a:hover { color: var(--personality-accent); }

.personality-quiz {
  width: min(100%, 760px);
  min-height: 520px;
  margin: 0 auto 50px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 28px;
  box-shadow: 0 18px 55px rgba(30, 41, 59, .1);
}

.personality-start,
.personality-result {
  padding: 52px 56px;
  text-align: center;
}

.personality-start__emoji,
.personality-result__emoji {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 0 auto 22px;
  background: var(--personality-soft);
  border-radius: 34px;
  font-size: 3.7rem;
  transform: rotate(-3deg);
}

.personality-eyebrow,
.personality-result__celebrate {
  margin-bottom: 10px;
  color: var(--personality-accent);
  font-family: 'Nunito', sans-serif;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.personality-start h1,
.tests-catalog__hero h1 {
  margin: 0;
  color: #1E293B;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 900;
  line-height: 1.06;
}

.personality-lead {
  max-width: 600px;
  margin: 20px auto 0;
  color: #64748B;
  font-size: 1.04rem;
  line-height: 1.75;
}

.personality-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 26px 0;
}

.personality-meta span {
  padding: 7px 12px;
  color: #475569;
  background: #F1F5F9;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
}

.personality-primary,
.personality-secondary {
  min-height: 50px;
  padding: 13px 24px;
  border: 0;
  border-radius: 14px;
  font: 800 .96rem 'Inter', sans-serif;
  cursor: pointer;
  transition: transform .16s, box-shadow .16s, opacity .16s;
}

.personality-primary {
  color: #FFFFFF;
  background: var(--personality-accent);
  box-shadow: 0 9px 22px color-mix(in srgb, var(--personality-accent) 28%, transparent);
}

.personality-secondary { color: var(--personality-accent); background: var(--personality-soft); }
.personality-primary:hover, .personality-secondary:hover { transform: translateY(-2px); }
.personality-primary:focus-visible, .personality-secondary:focus-visible, .personality-answer:focus-visible, .personality-back:focus-visible { outline: 3px solid color-mix(in srgb, var(--personality-accent) 30%, transparent); outline-offset: 3px; }

.personality-note {
  margin: 18px 0 0;
  color: #94A3B8;
  font-size: .78rem;
}

.personality-run { padding: 36px 42px 32px; }

.personality-progress { margin-bottom: 42px; }
.personality-progress__labels { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; color: #64748B; font-size: .82rem; font-weight: 700; }
.personality-progress__track { height: 8px; overflow: hidden; background: #E2E8F0; border-radius: 99px; }
.personality-progress__track span { display: block; width: 10%; height: 100%; background: var(--personality-accent); border-radius: inherit; transition: width .25s ease; }

.personality-question { min-width: 0; margin: 0; padding: 0; border: 0; }
.personality-question legend { display: block; width: 100%; margin: 0 0 25px; padding: 0; }
.personality-question__number { display: block; margin-bottom: 7px; color: var(--personality-accent); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.personality-question__text { display: block; color: #1E293B; font-family: 'Nunito', sans-serif; font-size: clamp(1.45rem, 5vw, 2rem); font-weight: 900; line-height: 1.22; }
.personality-answers { display: grid; gap: 11px; }

.personality-answer {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 12px 16px;
  color: #334155;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  font: 600 .94rem/1.4 'Inter', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s;
}

.personality-answer:hover { border-color: var(--personality-accent); background: var(--personality-soft); transform: translateX(3px); }
.personality-answer.is-selected { color: #1E293B; border-color: var(--personality-accent); background: var(--personality-soft); }
.personality-answer__letter { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; color: #64748B; background: #F1F5F9; border-radius: 10px; font-size: .78rem; font-weight: 900; }
.personality-answer.is-selected .personality-answer__letter { color: #FFFFFF; background: var(--personality-accent); }

.personality-run__footer { min-height: 36px; margin-top: 22px; }
.personality-back, .personality-link-button, .personality-restart { padding: 7px 2px; color: #64748B; background: none; border: 0; font: 700 .86rem 'Inter', sans-serif; cursor: pointer; text-decoration: underline; text-decoration-color: #CBD5E1; text-underline-offset: 4px; }
.personality-back:hover, .personality-link-button:hover, .personality-restart:hover { color: var(--personality-accent); }

.personality-result { position: relative; }
.personality-result::before { content: ''; position: absolute; inset: 0 0 auto; height: 9px; background: var(--personality-accent); }
.personality-result__emoji { margin-top: 7px; transform: rotate(3deg); }
.personality-result h2 { margin: 0; color: #1E293B; font-family: 'Nunito', sans-serif; font-size: clamp(2rem, 7vw, 3.1rem); font-weight: 900; line-height: 1.05; }
.personality-result__subtitle { margin: 12px 0 20px; color: var(--personality-accent); font-family: 'Nunito', sans-serif; font-size: 1.2rem; font-weight: 800; }
.personality-result__description { max-width: 590px; margin: 0 auto; color: #475569; line-height: 1.75; }

.personality-result__strengths,
.personality-result__advice { max-width: 590px; margin: 24px auto 0; padding: 20px; border-radius: 17px; text-align: left; }
.personality-result__strengths { background: var(--personality-soft); }
.personality-result__strengths > strong, .personality-result__advice > strong { display: block; margin-bottom: 10px; color: #1E293B; font-size: .86rem; }
.personality-result__strengths > div { display: flex; flex-wrap: wrap; gap: 7px; }
.personality-result__strengths span { padding: 6px 10px; color: var(--personality-accent); background: #FFFFFF; border: 1px solid color-mix(in srgb, var(--personality-accent) 20%, #E2E8F0); border-radius: 999px; font-size: .78rem; font-weight: 700; }
.personality-result__advice { color: #475569; background: #F8FAFC; border: 1px solid #E2E8F0; }
.personality-result__advice p { margin: 0; line-height: 1.65; }
.personality-share-link { max-width: 590px; margin: 26px auto 16px; text-align: left; }
.personality-share-link label { display: block; margin-bottom: 8px; color: #1E293B; font-size: .86rem; font-weight: 800; }
.personality-share-link__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.personality-share-link input { min-width: 0; height: 50px; padding: 0 14px; color: #475569; background: #FFFFFF; border: 1px solid #CBD5E1; font: 500 .9rem 'Inter', sans-serif; }
.personality-share-link input:focus { border-color: var(--personality-accent); outline: 3px solid color-mix(in srgb, var(--personality-accent) 18%, transparent); }
.personality-share-link p { margin: 8px 0 0; color: #94A3B8; font-size: .78rem; }
.personality-restart { margin-top: 13px; }

.personality-info,
.personality-related,
.personality-faq,
.tests-catalog__list { margin: 56px 0; }

.personality-info { padding: 32px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 22px; }
.personality-info h2, .personality-faq h2 { margin: 0 0 15px; color: #1E293B; font-family: 'Nunito', sans-serif; font-size: 1.65rem; font-weight: 900; }
.personality-info p { margin: 0; color: #64748B; line-height: 1.75; }
.personality-info p + p { margin-top: 12px; }
.personality-info__section { margin-top: 28px; padding-top: 26px; border-top: 1px solid #E2E8F0; }
.personality-info__section h3 { margin: 0 0 11px; color: #1E293B; font-family: 'Nunito', sans-serif; font-size: 1.22rem; font-weight: 900; line-height: 1.3; }

.personality-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.personality-section-heading span { color: var(--personality-accent); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.personality-section-heading h2 { margin: 3px 0 0; color: #1E293B; font-family: 'Nunito', sans-serif; font-size: 1.8rem; font-weight: 900; }
.personality-section-heading a { color: #64748B; font-size: .86rem; font-weight: 700; text-decoration: none; }
.personality-section-heading small { color: #94A3B8; font-size: .84rem; }

.personality-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.personality-card-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.personality-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 270px;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
  color: #64748B;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(30, 41, 59, .05);
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.personality-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: var(--card-accent); }
.personality-card:hover { transform: translateY(-4px); border-color: var(--card-accent); box-shadow: 0 13px 32px rgba(30, 41, 59, .1); }
.personality-card__emoji { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 16px; background: var(--card-soft); border-radius: 17px; font-size: 1.85rem; }
.personality-card__time { margin-bottom: 7px; color: #94A3B8; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.personality-card strong,
.personality-card h3 { margin: 0; color: #1E293B; font-family: 'Nunito', sans-serif; font-size: 1.23rem; font-weight: 900; line-height: 1.2; }
.personality-card > span:not(.personality-card__emoji):not(.personality-card__time) { margin-top: 9px; font-size: .84rem; line-height: 1.55; }
.personality-card em { margin-top: auto; padding-top: 18px; color: var(--card-accent); font-size: .84rem; font-style: normal; font-weight: 800; }

.personality-slider { min-width: 0; }
.personality-slider__viewport {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.personality-slider__viewport::-webkit-scrollbar { display: none; }
.personality-slider__viewport:focus-visible { outline: 3px solid color-mix(in srgb, var(--personality-accent) 25%, transparent); outline-offset: 4px; }
.personality-card-grid--slider {
  grid-template-columns: none !important;
  grid-auto-flow: column;
  align-items: stretch;
  width: 100%;
}
[data-slider-columns="2"] .personality-card-grid--slider { grid-auto-columns: calc((100% - 16px) / 2); }
[data-slider-columns="3"] .personality-card-grid--slider { grid-auto-columns: calc((100% - 32px) / 3); }
.personality-card-grid--slider .personality-card { height: 100%; scroll-snap-align: start; }
.personality-slider__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.personality-slider__controls button { display: grid; place-items: center; width: 42px; height: 38px; padding: 0; color: #334155; background: #FFFFFF; border: 1px solid #CBD5E1; font: 800 1rem 'Inter', sans-serif; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.personality-slider__controls button:hover:not(:disabled) { color: var(--personality-accent); border-color: var(--personality-accent); background: var(--personality-soft); }
.personality-slider__controls button:disabled { opacity: .38; cursor: default; }
.personality-slider__controls span { min-width: 58px; color: #64748B; font-size: .8rem; font-weight: 700; text-align: center; }

.personality-faq details { margin-top: 10px; padding: 0 20px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; }
.personality-faq summary { padding: 17px 0; color: #334155; font-weight: 800; cursor: pointer; }
.personality-faq details p { margin: -3px 0 18px; color: #64748B; line-height: 1.65; }

.tests-catalog__hero { padding-bottom: 48px; background: linear-gradient(135deg, #FFFFFF 0%, #FFF7ED 50%, #F5F3FF 100%); border-bottom: 1px solid #E2E8F0; }
.tests-catalog__hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 35px 0 28px; }
.tests-catalog__hero-inner > div:first-child { max-width: 720px; }
.tests-catalog__hero p { max-width: 650px; margin: 20px 0 0; color: #64748B; font-size: 1.06rem; line-height: 1.7; }
.tests-catalog__hero-emoji { display: grid; flex: 0 0 150px; place-items: center; width: 150px; height: 150px; background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.9); border-radius: 42px; box-shadow: 0 14px 35px rgba(30,41,59,.1); font-size: 5rem; transform: rotate(5deg); }
.tests-catalog__about { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 60px 0; }
.tests-catalog__about > div { padding: 25px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 18px; }
.tests-catalog__about-icon { font-size: 1.65rem; }
.tests-catalog__about h2 { margin: 12px 0 6px; color: #1E293B; font-family: 'Nunito', sans-serif; font-size: 1.1rem; font-weight: 900; }
.tests-catalog__about p { margin: 0; color: #64748B; font-size: .87rem; line-height: 1.6; }

.personality-toast { position: fixed; z-index: 1000; left: 50%; bottom: 25px; max-width: calc(100% - 30px); padding: 11px 18px; color: #FFFFFF; background: #1E293B; border-radius: 10px; box-shadow: 0 8px 25px rgba(0,0,0,.2); opacity: 0; transform: translate(-50%, 15px); transition: .2s; }
.personality-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .personality-shell { width: min(100% - 24px, 1040px); }
  .personality-quiz { min-height: 0; border-radius: 22px; }
  .personality-start, .personality-result { padding: 36px 20px; }
  .personality-start__emoji, .personality-result__emoji { width: 90px; height: 90px; border-radius: 27px; font-size: 3rem; }
  .personality-run { padding: 25px 18px 22px; }
  .personality-progress { margin-bottom: 30px; }
  .personality-answer { min-height: 58px; padding: 10px 12px; }
  .personality-info { padding: 24px 20px; }
  .personality-card-grid, .personality-card-grid--catalog { grid-template-columns: 1fr; }
  .personality-card-grid--slider { grid-template-columns: none !important; grid-auto-columns: 100%; }
  .personality-card { min-height: 245px; }
  .personality-share-link__row { grid-template-columns: 1fr; }
  .personality-primary, .personality-secondary { width: 100%; }
  .personality-section-heading { align-items: flex-start; }
  .tests-catalog__hero { padding-bottom: 20px; }
  .tests-catalog__hero-inner { padding-top: 20px; }
  .tests-catalog__hero-emoji { display: none; }
  .tests-catalog__about { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .personality-meta { flex-direction: column; align-items: center; }
  .personality-question__text { font-size: 1.35rem; }
  .personality-answer { font-size: .88rem; }
  .personality-result__strengths, .personality-result__advice { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .personality-primary, .personality-secondary, .personality-answer, .personality-card, .personality-progress__track span { transition: none; }
  .personality-primary:hover, .personality-secondary:hover, .personality-card:hover, .personality-answer:hover { transform: none; }
}

.personality-related .personality-primary {
  background: var(--accent, #F97316);
  color: #fff;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1rem;
  transition: all .2s;
}

.personality-related .personality-primary:hover {
  background: var(--accent-dark, #C2410C);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

body.fun-page .personality-related .personality-primary {
  background: var(--fun-accent);
  color: #fff;
}

body.fun-page .personality-related .personality-primary:hover {
  background: var(--fun-dark);
}