/* Native portal presentation for the diagnostic test. */
html
{
  background: var(--color-background);
}

body
{
  min-height: 100vh;
  color: var(--color-white);
  background: radial-gradient(circle at 48% -8%, var(--color-mint-soft), transparent 34rem), linear-gradient(155deg, var(--color-background) 0%, var(--color-background) 52%, var(--palette-2ce5d87145) 100%);
}

.portal-test-page
{
  min-height: 100svh;
}

.portal-test-page .portal-header
{
  position: sticky;
  top: 0;
}

.portal-test-main
{
  width: min(100% - 48px, 1080px);
  margin: 0 auto;
  padding: clamp(28px, 5vh, 58px) 0 56px;
}

/* Remove the visual effect of a page embedded inside another page. */
.portal-test-card, .portal-test-card .app-shell
{
  width: 100%;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: var(--color-white);
  background: transparent;
  box-shadow: none;
}

.portal-test-card .app-logo, .portal-test-card .app-footer
{
  display: none !important;
}

.portal-test-card .screen
{
  width: 100%;
  min-height: 0;
}

.portal-test-card .center-wrap, .portal-test-card .quiz-wrap
{
  width: 100%;
  max-width: none;
}

/* Start screen */
.portal-test-card .screen-start
{
  align-items: stretch;
}

.portal-test-card .start-wrap
{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.portal-test-card .hero
{
  width:100%;
  max-width:1220px;
  margin:0 auto;
  padding:0;
}

.portal-test-card .hero-text
{
  width: 100%;
}

.portal-test-card .hero-label, .portal-test-card .eyebrow
{
  margin: 0 0 16px;
  color: var(--color-cyan);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.test-hero-title
{
  margin: 0;
  color: var(--color-white);
  font-size: clamp(38px, 4.4vw, 52px) !important;
  line-height: 1;
  letter-spacing: .01em;
}

.test-hero-title span
{
  color: var(--color-gold);
  font-weight: 300;
}

.portal-test-card .hero-content
{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);
  align-items:stretch;
  gap:24px;
  max-width:1060px;
  margin:34px auto 0;
}

.portal-test-card .hero-description,.portal-test-card .hero-image
{
  height:340px;
}

.portal-test-card .hero-description, .portal-test-card .hero-image
{
  min-height: 300px;
  border: 1px solid var(--color-mint-soft);
  border-radius: 26px;
  background: linear-gradient(145deg, var(--color-blue-dark), var(--color-surface-dark));
}

.portal-test-card .hero-description
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 32px;
  color: var(--color-white-74);
  font-size: 17px;
  line-height: 1.55;
}

.portal-test-card .hero-description p
{
  margin: 0 0 14px;
}

.portal-test-card .hero-description p:last-child
{
  margin-bottom: 0;
}

.portal-test-card .hero-highlight
{
  color: var(--color-white);
}

.portal-test-card .hero-image
{
  overflow: hidden;
}

.portal-test-card .hero-image img
{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  max-height: none;
  object-fit: cover;
}

.portal-test-card .hero-meta
{
  margin: 24px 0 18px;
  color: var(--color-silver-muted);
  font-size: 15px;
  text-align: center;
}

/* Quiz screen */
.portal-test-card .screen-quiz
{
  align-items: flex-start;
  padding: 0;
}

.portal-test-card .quiz-wrap
{
  padding: 0;
}

.portal-test-card .progress-head
{
  margin-bottom: 24px;
}

.portal-test-card .top-row
{
  margin-bottom: 16px;
}

.portal-test-card .question-block-badge
{
  border-color: var(--color-mint-soft);
  background: var(--color-cyan-05);
  color: var(--color-cyan);
}

.portal-test-card .progress-count
{
  color: var(--color-silver-muted);
}

.portal-test-card .progress-line
{
  background: var(--color-white-50);
}

.portal-test-card .progress-line-fill
{
  background: linear-gradient(90deg, var(--color-cyan), var(--color-gold));
}

.portal-test-card .question-title
{
  max-width: 900px;
  margin: 28px 0 30px;
  color: var(--color-white);
  font-size: clamp(40px, 5vw, 62px);
  line-height: 1.02;
  letter-spacing: -.05em;
}

.portal-test-card .answers
{
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Result screen */
body.test-result-mode
{
  min-height: 100%;
  overflow-y: auto;
}

body.test-result-mode .portal-test-main
{
  width: min(100% - 48px, 1080px);
  padding: 40px 0 72px;
}

body.test-result-mode .screen-result
{
  align-items: flex-start;
  padding: 0;
}

body.test-result-mode .score-ring
{
  width: 150px;
  height: 150px;
  margin-bottom: 22px;
}

body.test-result-mode .score-ring-track
{
  stroke: var(--color-white-50);
}

body.test-result-mode .score-ring-progress
{
  stroke: var(--color-mint);
}

body.test-result-mode .score-main, body.test-result-mode .result-title
{
  color: var(--color-white);
}

body.test-result-mode .score-total, body.test-result-mode .result-text, body.test-result-mode .result-list li
{
  color: var(--color-white-74);
}

body.test-result-mode .result-title
{
  max-width: 800px;
  margin: 0 auto 18px;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.02;
}

body.test-result-mode .result-subtitle
{
  width: 100%;
  max-width: none;
  margin: 18px 0 32px;
}

body.test-result-mode .result-body-inner
{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  text-align: left;
}

body.test-result-mode .result-section
{
  min-width: 0;
  padding: 24px 26px;
  border: 1px solid var(--color-mint-soft);
  border-radius: 22px;
  background: linear-gradient(145deg, var(--color-forest), var(--color-surface-dark));
}

body.test-result-mode .result-section-title,
body.test-result-mode .result-lead,
body.test-result-mode .result-text,
body.test-result-mode .result-highlight,
body.test-result-mode .result-list,
body.test-result-mode .result-list li
{
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

body.test-result-mode .result-section:first-child, body.test-result-mode .result-next-step
{
  grid-column: 1 / -1;
}

body.test-result-mode .result-next-step
{
  border-color: var(--color-mint-soft);
  background: linear-gradient(135deg, var(--color-forest), var(--color-surface-dark));
}

body.test-result-mode .result-section-title, body.test-result-mode .result-lead, body.test-result-mode .result-highlight, body.test-result-mode .result-list--quotes li
{
  color: var(--color-white);
}

body.test-result-mode .result-section-title
{
  margin-bottom: 12px;
  font-size: 19px;
}

@media (max-height: 850px)
{
  .portal-test-main
  {
    padding: 22px 0 28px;
  }

  .test-hero-title
  {
    font-size: clamp(38px, 5.3vh, 52px) !important;
  }

  .portal-test-card .hero-content
  {
    margin-top: 22px;
  }

  .portal-test-card .hero-description, .portal-test-card .hero-image, .portal-test-card .hero-image img
  {
    min-height: 230px;
  }

  .portal-test-card .hero-description
  {
    padding: 24px;
    font-size: 15px;
    line-height: 1.42;
  }

  .portal-test-card .hero-description p
  {
    margin-bottom: 8px;
  }

  .portal-test-card .hero-meta
  {
    margin: 14px 0 12px;
  }

  .portal-test-card .question-title
  {
    margin: 18px 0 22px;
    font-size: clamp(34px, 5.5vh, 50px);
  }


  body.test-result-mode .portal-test-main
  {
    padding-top: 18px;
  }

  body.test-result-mode .score-ring
  {
    width: 96px;
    height: 96px;
    margin-bottom: 12px;
  }

  body.test-result-mode .score-main
  {
    font-size: 30px;
  }

  body.test-result-mode .result-title
  {
    font-size: clamp(30px, 4.2vh, 42px);
  }

  body.test-result-mode .result-subtitle
  {
    margin: 10px 0 16px;
  }

  body.test-result-mode .result-section
  {
    padding: 17px 19px;
  }


}

@media (max-width: 900px)
{
  body.test-result-mode .result-body-inner
  {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.test-result-mode .result-section:first-child,
  body.test-result-mode .result-next-step
  {
    grid-column: auto;
  }

  body.test-result-mode .result-section
  {
    width: 100%;
    box-sizing: border-box;
    padding: 18px;
  }
}

@media (max-width: 760px)
{
  .portal-test-main, body.test-result-mode .portal-test-main
  {
    width: min(100% - 24px, 1080px);
    padding: 26px 0 42px;
  }

  .test-hero-title
  {
    font-size: 42px !important;
  }

  .portal-test-card .hero-content
  {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 24px;
    width:100%;
    max-width:none;
  }

  .portal-test-card .hero-description, .portal-test-card .hero-image, .portal-test-card .hero-image img
  {
    min-height: 220px;
  }

  .portal-test-card .hero-description
  {
    width:100%;
    max-width:none;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .portal-test-card .hero-description
  {
    padding: 22px;
    font-size: 15px;
  }

  .portal-test-card .answers
  {
    grid-template-columns: 1fr;
  }
/*
  .portal-test-card .answer-button
  {
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 18px;
  }
    */

  .portal-test-card .question-title
  {
    font-size: 38px;
  }

  body.test-result-mode .result-body-inner
  {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.test-result-mode .result-section:first-child, body.test-result-mode .result-next-step
  {
    grid-column: auto;
  }

  body.test-result-mode .result-section
  {
    padding: 18px;
    border-radius: 18px;
  }

  body.test-result-mode .result-title
  {
    font-size: 38px;
  }


}

/* Center the complete start-screen composition inside the portal. */
.portal-test-card .screen-start .start-wrap
{
  width: min(100%, 1080px);
  margin-inline: auto;
}

.portal-test-card .screen-start .hero-label, .test-hero-title
{
  margin-inline: auto;
  text-align: center;
}

.portal-test-card .screen-start .hero-content
{
  width: min(100%, 860px);
  margin: 34px auto 0;
}

.portal-test-card .screen-start .hero-meta
{
  text-align: center;
}

/* Compact, balanced result layout */
body.test-result-mode .portal-test-main
{
  width: min(100% - 48px, 980px);
  padding: 26px 0 56px;
}

body.test-result-mode .score-ring
{
  width: 112px;
  height: 112px;
  margin: 0 auto 18px;
}

body.test-result-mode .score-main
{
  font-size: 34px;
}

body.test-result-mode .score-total
{
  font-size: 17px;
}

body.test-result-mode .result-title
{
  max-width: 720px;
  margin: 0 auto 14px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -.045em;
}

body.test-result-mode .result-subtitle
{
  margin: 14px 0 22px;
  font-size: 16px;
  line-height: 1.5;
}

body.test-result-mode .result-body-inner
{
  gap: 14px;
}

body.test-result-mode .result-section
{
  padding: 20px 22px;
  border-radius: 18px;
}

body.test-result-mode .result-section-title
{
  margin-bottom: 9px;
  font-size: 17px;
  line-height: 1.3;
}

body.test-result-mode .result-lead, body.test-result-mode .result-text, body.test-result-mode .result-list li, body.test-result-mode .result-highlight
{
  font-size: 15px;
  line-height: 1.5;
}

body.test-result-mode .result-list
{
  margin-top: 8px;
  padding-left: 20px;
}

body.test-result-mode .result-list li + li
{
  margin-top: 7px;
}

body.test-result-mode #retake-btn
{
  font-size: 14px;
}



/* RPG-inspired skill tree result screen */
body.test-result-mode .portal-test-main
{
  width: min(100% - 28px, 1280px);
  padding: 22px 0 54px;
}

body.test-result-mode .portal-test-card, body.test-result-mode .app-shell, body.test-result-mode .screen-result
{
  width: 100%;
}

body.test-result-mode .screen-result
{
  display: none;
}

body.test-result-mode .screen-result.active
{
  display: block;
}

.legend-dot
{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid currentColor;
  box-shadow: 0 0 12px currentColor;
}

.legend-dot.is-open
{
  color: var(--color-mint);
  background: var(--color-mint-soft);
}

.legend-dot.is-current
{
  color: var(--color-gold);
  background: var(--color-gold-40);
}

.legend-dot.is-locked
{
  color: var(--color-muted);
  background: var(--color-teal-48);
  box-shadow: none;
}

.skill-score-card
{
  padding: 20px 26px 18px;
  text-align: center;
}

.skill-score-card .eyebrow
{
  margin: 0 0 8px;
  color: var(--color-gold);
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: .22em;
}

body.test-result-mode .skill-score-card .score-ring
{
  width: 116px;
  height: 116px;
  margin: 0 auto 10px;
}

body.test-result-mode .skill-score-card .score-ring-progress
{
  stroke: var(--color-mint);
}

body.test-result-mode .skill-score-card .score-ring-track
{
  stroke: var(--color-mint-soft);
}

body.test-result-mode .skill-score-card .score-main
{
  font-size: 36px;
  font-family: Georgia, serif;
}

body.test-result-mode .skill-score-card .score-total
{
  font-size: 18px;
}

body.test-result-mode .skill-score-card .result-title
{
  margin: 0 auto;
  max-width: 580px;
  color: var(--color-white);
  font-family: Georgia, serif;
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
}

.skill-tree
{
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding: 0 8px;
}

.skill-branch
{
  min-width: 0;
  text-align: center;
}

.skill-branch.branch-product, .skill-branch.branch-money
{
  --branch-color: var(--color-gold);
}

.skill-branch.branch-content, .skill-branch.branch-psychology
{
  --branch-color: var(--color-mint);
}

.skill-branch-header
{
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.skill-branch-mark
{
  color: var(--branch-color);
  font-size: 30px;
  line-height: 1;
}

.skill-branch-header h3
{
  margin: 0;
  color: var(--branch-color);
  font-family: Georgia, serif;
  font-size: clamp(16px, 1.55vw, 23px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .045em;
}

.skill-branch-score
{
  color: var(--color-white-50);
  font-size: 12px;
}

.skill-path
{
  position: relative;
  display: grid;
  justify-items: center;
  gap: 30px;
  padding: 20px 0 26px;
}

.skill-path::before
{
  content: "";
  position: absolute;
  top: 30px;
  bottom: 36px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(var(--branch-color), var(--color-teal-48));
  box-shadow: 0 0 12px color-mix(in srgb, var(--branch-color) 55%, transparent);
}

.skill-step
{
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 6px;
}

.skill-step:not(:last-child)::after
{
  content: "◆";
  position: absolute;
  bottom: -24px;
  color: var(--color-border-soft);
  font-size: 9px;
}

.skill-step.is-open:not(:last-child)::after
{
  color: var(--color-mint);
}

.skill-step.is-current:not(:last-child)::after
{
  color: var(--color-gold);
}

.skill-node
{
  position: relative;
  width: clamp(68px, 7.4vw, 94px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-teal-48);
  border-radius: 6px;
  color: var(--color-muted);
  background: linear-gradient(145deg, var(--color-surface-dark), var(--color-background));
  box-shadow: inset 0 0 0 5px var(--color-white-50), inset 0 0 22px var(--color-overlay-dark-60), 0 8px 18px var(--color-overlay-dark-20);
  cursor: help;
}

.skill-node::before, .skill-node::after
{
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid currentColor;
  opacity: .45;
}

.skill-node::after
{
  inset: 10px;
  opacity: .16;
}

.skill-node-icon
{
  position: relative;
  z-index: 1;
  font-family: Georgia, serif;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1;
}

.skill-step.is-open .skill-node
{
  color: var(--color-mint);
  border-color: var(--color-mint-60);
  background: radial-gradient(circle, var(--color-teal-48), var(--color-forest) 68%);
  box-shadow: inset 0 0 0 5px var(--color-mint-soft), inset 0 0 28px var(--color-mint-soft), 0 0 20px var(--color-mint-soft);
}

.skill-step.is-current .skill-node
{
  color: var(--color-gold);
  border-color: var(--color-gold-60);
  background: radial-gradient(circle, var(--color-gold-40), var(--color-brown-dark) 70%);
  box-shadow: inset 0 0 0 5px var(--color-border-soft), inset 0 0 28px var(--color-border-soft), 0 0 24px var(--color-gold-40);
}

.skill-level
{
  color: var(--color-beige-82);
  font-family: Georgia, serif;
  font-size: 14px;
}

.skill-step.is-open .skill-level
{
  color: var(--color-mint);
}

.skill-step.is-current .skill-level
{
  color: var(--color-gold);
}

.skill-node[data-tooltip]::selection
{
  background: transparent;
}

.skill-node[data-tooltip]:hover::before, .skill-node[data-tooltip]:focus-visible::before
{
  opacity: .45;
}

.skill-node[data-tooltip]:hover::after, .skill-node[data-tooltip]:focus-visible::after
{
  opacity: .16;
}

.skill-node[data-tooltip] .skill-node-icon::after
{
  content: none;
}

.skill-node[data-tooltip]:hover + .skill-level
{
  color: var(--color-white);
}

.skill-node[data-tooltip]::marker
{
  display: none;
}

.skill-step::before
{
  content: attr(data-empty);
}

.skill-node[data-tooltip]:hover
{
  z-index: 20;
}

.skill-node[data-tooltip]:hover::selection
{
  background: transparent;
}

.skill-node[data-tooltip]:hover ~ *
{
  pointer-events: none;
}

.skill-node[data-tooltip] > span::before
{
  content: none;
}

.skill-node[data-tooltip]:hover::after, .skill-node[data-tooltip]:focus-visible::after
{
  content: attr(data-tooltip);
  position: absolute;
  z-index: 50;
  left: 50%;
  bottom: calc(100% + 14px);
  width: max-content;
  max-width: 250px;
  min-width: 180px;
  inset-inline: auto;
  transform: translateX(-50%);
  padding: 11px 13px;
  border: 1px solid var(--color-gold-60);
  border-radius: 5px;
  color: var(--color-white);
  background: var(--color-background);
  box-shadow: 0 12px 30px var(--color-overlay-dark-20);
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  opacity: 1;
}

/* ===== Skill tree v2: closer to the approved RPG mockup ===== */
body.test-result-mode
{
  background: radial-gradient(circle at 50% 2%, var(--color-mint-soft), transparent 34rem), var(--color-background);
}

body.test-result-mode .portal-test-main
{
  width: min(100% - 24px, 1120px);
  padding: 16px 0 44px;
}

body.test-result-mode .portal-header
{
  display:none;
}

.ornament-corner
{
  position:absolute;
  z-index:3;
  width:28px;
  height:28px;
  border-color:var(--color-cyan);
  opacity:.9;
  pointer-events:none
}

.corner-tl
{
  top:8px;
  left:8px;
  border-top:2px solid;
  border-left:2px solid
}

.corner-tr
{
  top:8px;
  right:8px;
  border-top:2px solid;
  border-right:2px solid
}

.corner-bl
{
  bottom:8px;
  left:8px;
  border-bottom:2px solid;
  border-left:2px solid
}

.corner-br
{
  bottom:8px;
  right:8px;
  border-bottom:2px solid;
  border-right:2px solid
}

.ornament-corner::after
{
  content:"◆";
  position:absolute;
  color:var(--color-cyan);
  font-size:9px;
  line-height:1
}

.corner-tl::after
{
  top:-5px;
  left:-5px
}

.corner-tr::after
{
  top:-5px;
  right:-5px
}

.corner-bl::after
{
  bottom:-5px;
  left:-5px
}

.corner-br::after
{
  bottom:-5px;
  right:-5px
}

.legend-dot
{
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  background:transparent!important
}

.legend-dot::after
{
  content:"✦";
  font-size:9px;
  color:currentColor
}

.skill-score-card
{
  padding:16px 18px 13px;
  min-height:190px
}

.skill-score-card .eyebrow
{
  margin-bottom:5px;
  color:var(--color-gold);
  font-family:Georgia,serif;
  font-size:15px;
  letter-spacing:.12em
}

body.test-result-mode .skill-score-card .score-ring
{
  width:116px;
  height:116px;
  margin:0 auto 2px
}

body.test-result-mode .skill-score-card .score-main
{
  font-size:37px
}

body.test-result-mode .skill-score-card .score-total
{
  font-size:16px;
  color:var(--color-white-74)
}

.score-percent
{
  display:block;
  margin-top:3px;
  color:var(--color-gold);
  font-family:Georgia,serif;
  font-size:14px
}

body.test-result-mode .skill-score-card .result-title
{
  max-width:360px;
  margin:2px auto 0;
  font-family:Georgia,serif;
  font-size:15px;
  line-height:1.25;
  letter-spacing:.01em;
  color:var(--color-beige-82)
}

.skill-tree
{
  position:relative;
  z-index:2;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  padding:0 20px;
}

.skill-tree::before
{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:-37px;
  height:90px;
  background: linear-gradient(90deg,transparent 0 7%,var(--color-mint-60) 7% 7.2%,transparent 7.2% 33%,var(--color-gold-60) 33% 33.2%,transparent 33.2% 66%,var(--color-gold-60) 66% 66.2%,transparent 66.2% 93%,var(--color-gold-60) 93% 93.2%,transparent 93.2%);
  opacity:.75;
  pointer-events:none;
  mask:linear-gradient(to bottom,transparent,black 28%,black)
}

.skill-branch
{
  position:relative;
  padding:0 12px 20px;
  border-left:1px solid var(--color-border-soft)
}

.skill-branch:first-child
{
  border-left:none
}

.skill-branch-header
{
  min-height:118px;
  margin-bottom:7px;
  justify-content:flex-end
}

.skill-branch-mark
{
  font-size:29px;
  margin-bottom:6px
}

.skill-branch-header h3
{
  font-size:20px;
  line-height:1.08;
  letter-spacing:.035em;
}

.skill-branch-score
{
  margin-top:6px;
  font-size:11px
}

.skill-path
{
  gap:0
}

.skill-step
{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-bottom:27px
}

.skill-step:not(:last-child)::after
{
  content:"";
  position:absolute;
  top:92px;
  bottom:-1px;
  left:50%;
  width:3px;
  transform:translateX(-50%);
  background:linear-gradient(var(--branch-color),var(--color-border-soft));
  box-shadow:0 0 8px color-mix(in srgb,var(--branch-color) 65%,transparent);
}

.skill-step:not(:last-child)::before
{
  content:"◆";
  position:absolute;
  z-index:3;
  left:50%;
  bottom:9px;
  transform:translateX(-50%);
  color:var(--branch-color);
  font-size:11px;
}

.skill-node
{
  width:90px;
  height:90px;
  border-radius:0;
  border:2px solid var(--color-silver-muted);
  background:linear-gradient(145deg,var(--color-surface-dark),var(--color-background));
  box-shadow:inset 0 0 0 4px var(--color-overlay-dark-20),inset 0 0 0 6px var(--color-border-soft),0 8px 18px var(--color-overlay-dark-20);
  clip-path:polygon(7% 0,93% 0,100% 7%,100% 93%,93% 100%,7% 100%,0 93%,0 7%);
}

.skill-node::before
{
  inset:8px;
  border:1px solid var(--color-border-soft);
  clip-path:inherit
}

.skill-node::after
{
  inset:13px;
  border:1px solid var(--color-border-soft);
  clip-path:inherit
}

.skill-node-icon
{
  display:grid;
  place-items:center;
  width:54px;
  height:54px
}

.skill-node-icon svg
{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}

.skill-step.is-open .skill-node
{
  color:var(--color-mint);
  border-color:var(--color-mint);
  background:radial-gradient(circle,var(--color-teal-48),var(--color-forest) 68%);
  box-shadow:inset 0 0 0 4px var(--color-surface-dark),inset 0 0 0 6px var(--color-mint-soft),0 0 18px var(--color-mint-60),0 8px 20px var(--color-overlay-dark-20)
}

.skill-step.is-current .skill-node
{
  color:var(--color-gold);
  border-color:var(--color-gold);
  background:radial-gradient(circle,var(--color-gold-40),var(--color-brown-dark) 70%);
  box-shadow:inset 0 0 0 4px var(--color-surface-dark),inset 0 0 0 6px var(--color-border-soft),0 0 20px var(--color-gold-40),0 8px 20px var(--color-overlay-dark-20)
}

.skill-step.is-locked .skill-node
{
  color:var(--color-muted);
  filter:saturate(.35);
  opacity:.82
}

.skill-level
{
  margin-top:7px;
  font-family:Georgia,serif;
  font-size:14px;
  color:var(--branch-color)
}

.skill-step.is-locked .skill-level
{
  color:var(--color-muted)
}

.skill-node[data-tooltip]:hover::after,.skill-node[data-tooltip]:focus-visible::after
{
  content:attr(data-tooltip);
  position:absolute;
  z-index:50;
  left:calc(100% + 14px);
  top:50%;
  transform:translateY(-50%);
  width:max-content;
  max-width:245px;
  min-width:190px;
  inset:auto auto auto calc(100% + 14px);
  padding:13px 15px;
  clip-path:none;
  border:1px solid var(--color-gold-60);
  border-radius:2px;
  background:var(--color-background);
  color:var(--color-white);
  font-family:Arial,sans-serif;
  font-size:12px;
  line-height:1.45;
  text-align:left;
  white-space:normal;
  opacity:1;
  box-shadow:0 12px 30px var(--color-overlay-dark-60),inset 0 0 0 3px var(--color-border-soft)
}

.skill-branch:nth-child(4) .skill-node[data-tooltip]:hover::after,.skill-branch:nth-child(4) .skill-node[data-tooltip]:focus-visible::after
{
  left:auto;
  right:calc(100% + 14px)
}

/* ===== Skill tree v3 — textured game UI ===== */
body.test-result-mode
{
  background: radial-gradient(circle at 50% -10%, var(--color-border-soft), transparent 38rem), var(--color-background);
}

body.test-result-mode .portal-test-main
{
  width: min(100% - 18px, 1180px);
  padding: 10px 0 42px;
}

.skill-result-wrap
{
  padding: 38px 42px 34px;
  border: 0;
  border-radius: 0;
  background-image: linear-gradient(var(--color-surface-dark), var(--color-surface-dark)), url('/static/high-ticket-test/panel_frame.png'), url('/static/high-ticket-test/stone_texture.png');
  background-size: auto, 100% 100%, 620px 620px;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, repeat;
  box-shadow: 0 30px 90px var(--color-surface-dark), inset 0 0 120px var(--color-surface-dark), inset 0 0 24px var(--color-border-soft);
}

.skill-result-wrap::before, .skill-result-wrap::after, .ornament-corner
{
  display:none;
}

.skill-tree
{
  gap: 14px;
  padding: 0 26px;
}

.skill-branch
{
  padding: 0 14px 20px;
  border-left: 1px solid var(--color-border-soft);
}

.skill-branch-header
{
  min-height: 112px;
}

.skill-branch-header h3
{
  font-size: clamp(17px, 1.7vw, 22px);
}

.skill-path
{
  gap: 0;
  padding-top: 22px;
}

.skill-step
{
  padding-bottom: 30px;
}

.skill-step:not(:last-child)::after
{
  top: 102px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--branch-color), color-mix(in srgb,var(--branch-color) 32%,var(--color-background)));
  box-shadow: 0 0 12px color-mix(in srgb,var(--branch-color) 58%,transparent);
}

.skill-step:not(:last-child)::before
{
  bottom: 9px;
}

.skill-node
{
  width: 104px;
  height: 104px;
  border: 0;
  border-radius: 0;
  color: var(--color-muted);
  background-image: url('/static/high-ticket-test/node_frame_locked.png'), radial-gradient(circle at 48% 42%, var(--color-overlay-dark-20), var(--color-background) 68%), url('/static/high-ticket-test/stone_texture.png');
  background-size: 100% 100%, auto, 260px 260px;
  background-position: center;
  background-repeat: no-repeat, no-repeat, repeat;
  box-shadow: 0 13px 24px var(--color-overlay-dark-20);
  overflow: visible;
}

.skill-node::before, .skill-node::after
{
  display:none;
}

.skill-node-icon
{
  font-size: 43px;
  filter: drop-shadow(0 2px 3px var(--color-surface-dark));
}

.skill-step.is-open .skill-node
{
  color: var(--color-mint);
  background-image: url('/static/high-ticket-test/node_frame_teal.png'), radial-gradient(circle at 50% 45%, var(--color-teal-48), var(--color-forest) 65%), url('/static/high-ticket-test/stone_texture.png');
  box-shadow: 0 0 25px var(--color-mint-soft), 0 14px 26px var(--color-overlay-dark-20);
}

.skill-step.is-current .skill-node
{
  color: var(--color-gold);
  background-image: url('/static/high-ticket-test/node_frame_gold.png'), radial-gradient(circle at 50% 45%, var(--color-gold-40), var(--color-brown-dark) 66%), url('/static/high-ticket-test/stone_texture.png');
  box-shadow: 0 0 28px var(--color-gold-40), 0 14px 26px var(--color-overlay-dark-20);
}

.skill-node:hover, .skill-node:focus-visible
{
  transform: translateY(-2px) scale(1.025);
}

.skill-level
{
  margin-top: 3px;
  font-size: 13px;
}

.skill-node[data-tooltip]:hover::after, .skill-node[data-tooltip]:focus-visible::after
{
  display:block;
  content: attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 14px);
  z-index:100;
  width:max-content;
  min-width:190px;
  max-width:260px;
  transform:translateX(-50%);
  padding:13px 15px;
  border:0;
  color:var(--color-white);
  background-image: linear-gradient(var(--color-background),var(--color-background)), url('/static/high-ticket-test/panel_frame.png'), url('/static/high-ticket-test/stone_texture.png');
  background-size:auto,100% 100%,280px 280px;
  background-repeat:no-repeat,no-repeat,repeat;
  box-shadow:0 16px 34px var(--color-surface-dark);
  font-family:Inter,Arial,sans-serif;
  font-size:12px;
  line-height:1.45;
  text-align:left;
  white-space:normal;
}


/* ===== Hotfix: highlighted node frame rendering ===== */
.skill-tree .skill-node
{
  box-sizing: border-box;
  aspect-ratio: auto;
  clip-path: none;
  -webkit-clip-path: none;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  appearance: none;
  -webkit-appearance: none;
  background-origin: border-box;
  background-clip: border-box;
  background-position: 50% 50%, 50% 50%, 50% 50%;
}

.skill-tree .skill-node::before
{
  display: block;
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 0;
  border: 1px solid var(--color-border-soft);
  background: linear-gradient(145deg, var(--color-white-50), var(--color-gold));
  pointer-events: none;
}

.skill-tree .skill-node::after
{
  display: none;
}

.skill-tree .skill-node-icon
{
  position: relative;
  z-index: 2;
}

.skill-tree .skill-step.is-open .skill-node
{
  background-image: url('/static/high-ticket-test/node_frame_teal.png'), radial-gradient(circle at 50% 45%, var(--color-teal-48), var(--color-forest) 66%), url('/static/high-ticket-test/stone_texture.png');
  background-size: contain, 100% 100%, 260px 260px;
  background-repeat: no-repeat, no-repeat, repeat;
}

.skill-tree .skill-step.is-current .skill-node
{
  background-image: url('/static/high-ticket-test/node_frame_gold.png'), radial-gradient(circle at 50% 45%, var(--color-gold-40), var(--color-brown-dark) 66%), url('/static/high-ticket-test/stone_texture.png');
  background-size: contain, 100% 100%, 260px 260px;
  background-repeat: no-repeat, no-repeat, repeat;
}

.skill-tree .skill-step.is-locked .skill-node
{
  background-image: url('/static/high-ticket-test/node_frame_locked.png'), radial-gradient(circle at 48% 42%, var(--color-overlay-dark-20), var(--color-background) 68%), url('/static/high-ticket-test/stone_texture.png');
  background-size: contain, 100% 100%, 260px 260px;
  background-repeat: no-repeat, no-repeat, repeat;
}

/* Tooltip must not reuse the decorative frame pseudo element. */
.skill-tree .skill-node[data-tooltip]:hover::after, .skill-tree .skill-node[data-tooltip]:focus-visible::after
{
  display: block;
  content: attr(data-tooltip);
  position: absolute;
  z-index: 100;
  left: 50%;
  bottom: calc(100% + 14px);
  top: auto;
  right: auto;
  width: max-content;
  min-width: 190px;
  max-width: 260px;
  transform: translateX(-50%);
  padding: 13px 15px;
  border: 1px solid var(--color-gold-60);
  border-radius: 3px;
  color: var(--color-white);
  background: linear-gradient(var(--color-background),var(--color-background)), url('/static/high-ticket-test/stone_texture.png');
  background-size: auto, 280px 280px;
  box-shadow: 0 16px 34px var(--color-surface-dark), inset 0 0 0 3px var(--color-border-soft);
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  opacity: 1;
  pointer-events: none;
}

.skill-tree .skill-branch:nth-child(4) .skill-node[data-tooltip]:hover::after, .skill-tree .skill-branch:nth-child(4) .skill-node[data-tooltip]:focus-visible::after
{
  left: 50%;
  right: auto;
}

/* Use short connectors between nodes instead of one long line through the branch. */
body.test-result-mode .skill-path::before
{
  display: none;
}

body.test-result-mode .skill-step
{
  position: relative;
  padding-bottom: 30px;
}

body.test-result-mode .skill-step:last-child
{
  padding-bottom: 0;
}

body.test-result-mode .skill-step::before
{
  content: none;
}

body.test-result-mode .skill-step:not(:last-child)::before
{
  content: "";
  position: absolute;
  z-index: -1;
  top: 100%;
  left: 50%;
  width: 2px;
  height: 30px;
  transform: translateX(-50%);
  background: linear-gradient( to bottom, color-mix(in srgb, var(--branch-color) 92%, transparent), color-mix(in srgb, var(--branch-color) 42%, var(--color-background)) );
  box-shadow: 0 0 10px color-mix(in srgb, var(--branch-color) 45%, transparent);
}

body.test-result-mode .skill-step.is-open:not(:last-child)::after
{
  color: var(--color-mint);
}

body.test-result-mode .skill-step.is-current:not(:last-child)::after
{
  color: var(--color-gold);
}

/* No orphaned branch lines below the final nodes. */
body.test-result-mode .skill-branch::after, body.test-result-mode .skill-path::after, body.test-result-mode .skill-step:last-child::before, body.test-result-mode .skill-step:last-child::after
{
  content: none;
  display: none;
}

.skill-tree
{
  margin-top: 2px;
}

.skill-result-bottom
{
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 320px);
  gap: 30px;
  align-items: stretch;
  margin: 28px 22px 22px;
  padding: 22px;
  border: 1px solid var(--color-border-soft);
  background: linear-gradient(var(--color-background), var(--color-background)), url('/static/high-ticket-test/stone_texture.png') center / cover;
  box-shadow: inset 0 0 0 8px var(--color-overlay-dark-20), inset 0 0 34px var(--color-overlay-dark-20), 0 12px 34px var(--color-overlay-dark-20);
}

.skill-result-bottom::before, .skill-result-bottom::after
{
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 10px;
  border: 1px solid var(--color-border-soft);
}

.skill-result-bottom::after
{
  inset: 18px;
  border-color: var(--color-mint-soft);
}

.skill-result-bottom .skill-score-card
{
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 230px;
  padding: 20px 28px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.skill-result-bottom .skill-score-card .eyebrow
{
  margin-bottom: 4px;
}

body.test-result-mode .skill-result-bottom .skill-score-card .score-ring
{
  width: 126px;
  height: 126px;
  margin: 2px auto 8px;
}

body.test-result-mode .skill-result-bottom .skill-score-card .result-title
{
  max-width: 720px;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.22;
}

/* Every connector is a separate segment and inherits the state above it. */
.skill-path::before
{
  display: none !important;
}

.skill-step:not(:last-child)::before
{
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 1px);
  width: 2px;
  height: 30px;
  transform: translateX(-50%);
  background: var(--color-teal-48);
  box-shadow: none;
}

.skill-step.is-open:not(:last-child)::before
{
  background: var(--color-mint);
  box-shadow: 0 0 10px var(--color-mint-60);
}

.skill-step.is-current:not(:last-child)::before
{
  background: var(--color-gold);
  box-shadow: 0 0 10px var(--color-gold-60);
}

.skill-step:not(:last-child)::after
{
  z-index: 2;
  bottom: -22px;
}


/* Final bottom composition — two independent compact panels, matching the reference. */
.skill-result-bottom
{
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(380px, 500px) minmax(260px, 1fr);
  align-items: center;
  gap: 28px;
  margin: 68px 34px 30px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.skill-result-bottom::before, .skill-result-bottom::after
{
  display: none;
}

.skill-result-bottom .skill-score-card
{
  grid-column: 2;
  width: 100%;
  min-height: 0;
  padding: 18px 28px 16px;
  border: 1px solid var(--color-border-soft);
  background: linear-gradient(var(--color-surface-dark), var(--color-surface-dark)), url('/static/high-ticket-test/stone_texture.png') center / cover;
  box-shadow: inset 0 0 0 7px var(--color-gold), inset 0 0 30px var(--color-overlay-dark-20), 0 12px 28px var(--color-overlay-dark-20);
}

.skill-result-bottom .skill-score-card::before
{
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border: 1px solid var(--color-border-soft);
}

.skill-result-bottom .skill-score-card .eyebrow
{
  margin: 0 0 2px;
  font-size: 13px;
  letter-spacing: .14em;
}

body.test-result-mode .skill-result-bottom .skill-score-card .score-ring
{
  width: 112px;
  height: 112px;
  margin: 0 auto 2px;
}

body.test-result-mode .skill-result-bottom .skill-score-card .result-title
{
  max-width: 440px;
  margin: 0 auto;
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.22;
}

/* Tail below the last node: same colour as the preceding connector in that branch. */
.skill-step:last-child::before
{
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 1px);
  width: 2px;
  height: 54px;
  transform: translateX(-50%);
  background: var(--color-teal-48);
}

.skill-branch.tail-open .skill-step:last-child::before
{
  background: var(--color-mint);
  box-shadow: 0 0 10px var(--color-mint-60);
}

.skill-branch.tail-current .skill-step:last-child::before
{
  background: var(--color-gold);
  box-shadow: 0 0 10px var(--color-gold-60);
}

.skill-branch.tail-locked .skill-step:last-child::before
{
  background: var(--color-teal-48);
  box-shadow: none;
}


/* ===== Final convergence layout matching the approved mockup ===== */
body.test-result-mode .skill-result-wrap
{
  padding-bottom: 42px;
}

/* No framed card around the result itself. */
body.test-result-mode .skill-result-bottom
{
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: center;
  gap: 48px;
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 0 28px;
}

body.test-result-mode .skill-score-card
{
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

body.test-result-mode .skill-score-card::before
{
  display: none;
}

body.test-result-mode .skill-score-card .score-ring
{
  width: 154px;
  height: 154px;
  margin: 0 auto 10px;
}

body.test-result-mode .skill-score-card .score-main
{
  font-size: 45px;
}

body.test-result-mode .skill-score-card .score-total
{
  font-size: 20px;
}

body.test-result-mode .skill-score-card .result-title
{
  max-width: 620px;
  margin: 0 auto;
  color: var(--color-white);
  font-family: Georgia, serif;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 400;
  line-height: 1.16;
}

/* Four branch lines merge into one line and meet the score circle. */
.skill-convergence
{
  position: relative;
  z-index: 3;
  width: calc(100% - 92px);
  height: 132px;
  margin: -20px auto 0;
  pointer-events: none;
}

.convergence-stem, .convergence-bus, .convergence-drop
{
  position: absolute;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 10px currentColor;
}

.convergence-stem
{
  top: 0;
  width: 3px;
  height: 64px;
  transform: translateX(-50%);
}

.convergence-stem.stem-1
{
  left: 12.5%;
  color: var(--color-mint);
  background: currentColor;
}

.convergence-stem.stem-2
{
  left: 37.5%;
  color: var(--color-gold);
  background: currentColor;
}

.convergence-stem.stem-3
{
  left: 62.5%;
  color: var(--color-gold);
  background: currentColor;
}

.convergence-stem.stem-4
{
  left: 87.5%;
  color: var(--color-mint);
  background: currentColor;
}

.convergence-bus
{
  top: 62px;
  height: 3px;
}

.convergence-bus.bus-1
{
  left: 12.5%;
  width: 25%;
  color: var(--color-mint);
  background: linear-gradient(90deg, var(--color-mint) 0 70%, var(--color-gold) 100%);
}

.convergence-bus.bus-2
{
  left: 37.5%;
  width: 25%;
  color: var(--color-gold);
  background: var(--color-gold);
}

.convergence-bus.bus-3
{
  left: 62.5%;
  width: 25%;
  color: var(--color-mint);
  background: linear-gradient(90deg, var(--color-gold) 0 30%, var(--color-mint) 100%);
}

.convergence-drop
{
  top: 62px;
  left: 50%;
  width: 3px;
  height: 70px;
  transform: translateX(-50%);
  color: var(--color-gold);
  background: currentColor;
}

/* Remove any legacy tails below the final nodes. */
.skill-tree::before, .skill-branch::after, .skill-path::after, .skill-step:last-child::after, .skill-step:last-child::before
{
  display: none !important;
}

/* ===== Precise bottom-result alignment fix ===== */
body.test-result-mode .skill-result-bottom
{
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(220px, 1fr) minmax(360px, 620px) minmax(220px, 1fr);
  gap: 24px;
  padding: 0 64px 10px;
  align-items: start;
}

body.test-result-mode .skill-result-bottom .skill-score-card
{
  grid-column: 2;
  width: 100%;
  justify-self: center;
}

body.test-result-mode .skill-score-card .score-ring
{
  width: 138px;
  height: 138px;
  margin: -2px auto 14px;
}

body.test-result-mode .skill-score-card .score-ring-center
{
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

body.test-result-mode .skill-score-card .score-text
{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  transform: translateY(-1px);
  white-space: nowrap;
}

body.test-result-mode .skill-score-card .score-main
{
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.025em;
}

body.test-result-mode .skill-score-card .score-total
{
  margin-left: 0;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
}

/* The merged line now physically touches the top of the score ring. */
.skill-convergence
{
  height: 148px;
  margin-bottom: -2px;
}

.convergence-drop
{
  height: 88px;
}

/* ===== Two-column final result dashboard ===== */
body.test-result-mode .portal-test-main
{
  width: min(100% - 32px, 1680px);
  padding-top: 24px;
}

body.test-result-mode .skill-result-wrap
{
  padding: 28px 30px 34px;
}

body.test-result-mode .result-dashboard
{
  display: grid;
  grid-template-columns: minmax(300px, 0.58fr) minmax(0, 1.42fr);
  gap: 30px;
  align-items: stretch;
}

body.test-result-mode .result-details-column
{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.test-result-mode .result-details-column .result-body-inner
{
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

body.test-result-mode .result-details-column .result-section
{
  position: relative;
  padding: 19px 22px 18px 62px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--color-background), var(--color-background)), url('/static/high-ticket-test/stone_texture.png') center / 420px 420px repeat;
}

body.test-result-mode .result-details-column .result-section::before
{
  content: "✦";
  position: absolute;
  left: 20px;
  top: 20px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid var(--color-mint-60);
  border-radius: 50%;
  color: var(--color-mint);
  font-size: 13px;
  box-shadow: 0 0 14px var(--color-mint-soft);
}

body.test-result-mode .result-details-column .result-section:nth-child(3)::before, body.test-result-mode .result-details-column .result-next-step::before
{
  content: "!";
  border-color: var(--color-gold-60);
  color: var(--color-gold);
  box-shadow: 0 0 14px var(--color-gold-40);
  font-family: Georgia, serif;
  font-weight: 700;
}

body.test-result-mode .result-details-column .result-next-step::before
{
  content: "♛";
  font-size: 14px;
}

body.test-result-mode .result-details-column .result-section:first-child
{
  padding-top: 25px;
  padding-bottom: 25px;
  border-color: var(--color-gold-40);
}

body.test-result-mode .result-details-column .result-section-title, body.test-result-mode .result-details-column .result-lead
{
  margin: 0 0 10px;
  color: var(--color-white);
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.25;
}

body.test-result-mode .result-details-column .result-lead
{
  margin: 0;
  font-size: 21px;
}

body.test-result-mode .result-details-column .result-text, body.test-result-mode .result-details-column .result-highlight, body.test-result-mode .result-details-column .result-list
{
  margin: 0;
  color: var(--color-white-74);
  font-size: 14px;
  line-height: 1.55;
}

body.test-result-mode .result-details-column .result-list
{
  padding-left: 19px;
}

body.test-result-mode .result-details-column .result-list li + li
{
  margin-top: 5px;
}

body.test-result-mode .result-details-column .result-highlight
{
  color: var(--color-white);
}

body.test-result-mode .result-details-column .result-next-step
{
  margin-top: auto;
  border-color: var(--color-gold);
}

body.test-result-mode .result-skill-column
{
  position: relative;
  min-width: 0;
  padding: 18px 20px 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: 34px;
  background: linear-gradient(145deg, var(--color-overlay-dark-20), var(--color-overlay-dark-20));
  box-shadow: inset 0 0 55px var(--color-overlay-dark-20);
}

body.test-result-mode .result-skill-column .skill-tree
{
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 0;
  margin: 0;
}

body.test-result-mode .result-skill-column .skill-branch
{
  padding-inline: 14px;
}

body.test-result-mode .result-skill-column .skill-branch-header h3
{
  font-size: clamp(15px, 1.18vw, 20px);
}

body.test-result-mode .result-skill-column .skill-node
{
  width: 96px;
  height: 96px;
}

body.test-result-mode .result-skill-column .skill-path
{
  gap: 0;
}

body.test-result-mode .result-skill-column .skill-step
{
  padding-bottom: 24px;
}

body.test-result-mode .result-skill-column .skill-step:not(:last-child)::before
{
  height: 24px;
}

body.test-result-mode .result-skill-column .skill-step:not(:last-child)::after
{
  bottom: -17px;
}

body.test-result-mode .result-skill-column .skill-convergence
{
  width: calc(100% - 74px);
  height: 116px;
  margin: -2px auto 0;
}

body.test-result-mode .result-skill-column .convergence-stem
{
  height: 48px;
}

body.test-result-mode .result-skill-column .convergence-bus
{
  top: 46px;
}

body.test-result-mode .result-skill-column .convergence-drop
{
  top: 46px;
  height: 70px;
}

body.test-result-mode .result-skill-column .skill-result-bottom
{
  grid-template-columns: minmax(130px, 1fr) minmax(280px, 380px) minmax(170px, 1fr);
  gap: 16px;
  padding: 0 16px 8px;
}

body.test-result-mode .result-skill-column .skill-score-card .score-ring
{
  width: 118px;
  height: 118px;
  margin-bottom: 8px;
}

body.test-result-mode .result-skill-column .skill-score-card .result-title
{
  max-width: 390px;
  font-size: clamp(18px, 1.6vw, 25px);
}

@media (max-width: 1320px)
{
  body.test-result-mode .result-dashboard
  {
    grid-template-columns: minmax(280px, .58fr) minmax(0, 1.42fr);
    gap: 20px;
  }

  body.test-result-mode .result-skill-column .skill-node
  {
    width: 86px;
    height: 86px;
  }


}

@media (max-width: 1080px)
{
  body.test-result-mode .result-dashboard
  {
    grid-template-columns: 1fr;
  }

  body.test-result-mode .result-details-column .result-body-inner
  {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.test-result-mode .result-details-column .result-section:first-child,
  body.test-result-mode .result-details-column .result-next-step
  {
    grid-column: auto;
  }


}

/* Keep the portal header visible on the result screen. This rule is scoped
   to this test page and does not alter navigation links elsewhere. */
body.test-result-mode .portal-test-page > .portal-header
{
  display: flex !important;
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

/* INLINE_RESULT_CTA_V2 */
body.test-result-mode .result-details-column .result-next-step .result-inline-cta
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  margin-top: 16px;
  padding: 12px 18px;
  border: 1px solid var(--color-gold);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--color-border-soft), var(--color-border-soft)), url('/static/high-ticket-test/stone_texture.png') center / 360px 360px repeat;
  color: var(--color-white);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 3px var(--color-overlay-dark-20), inset 0 0 18px var(--color-overlay-dark-20), 0 0 16px var(--color-border-soft);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  margin-left: -19px;
}

body.test-result-mode .result-details-column .result-next-step .result-inline-cta:hover, body.test-result-mode .result-details-column .result-next-step .result-inline-cta:focus-visible
{
  color: var(--color-white);
  border-color: var(--color-gold-60);
  box-shadow: inset 0 0 0 3px var(--color-gold), inset 0 0 18px var(--color-overlay-dark-20), 0 0 20px var(--color-border-soft);
  transform: translateY(-1px);
  outline: none;
}

body.test-result-mode .result-details-column .result-next-step .result-inline-cta:active
{
  transform: translateY(0);
}

/* FULL_WIDTH_TELEGRAM_CTA_V3 */
body.test-result-mode .result-details-column .result-next-step .result-inline-cta
{
  width: 100%;
  max-width: none;
  align-self: stretch;
  gap: 14px;
  padding-inline: 22px;
}

body.test-result-mode .result-details-column .result-next-step .result-inline-cta-icon
{
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  color: var(--color-mint);
  filter: drop-shadow(0 0 3px var(--color-mint)) drop-shadow(0 0 10px var(--color-mint-60));
}

body.test-result-mode .result-details-column .result-next-step .result-inline-cta-icon svg
{
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body.test-result-mode .result-details-column .result-next-step .result-inline-cta-icon path:first-child
{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.test-result-mode .result-details-column .result-next-step .result-inline-cta-icon-line
{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}

body.test-result-mode .result-details-column .result-next-step .result-inline-cta-label
{
  min-width: 0;
}

body.test-result-mode .result-details-column .result-next-step .result-inline-cta:hover .result-inline-cta-icon, body.test-result-mode .result-details-column .result-next-step .result-inline-cta:focus-visible .result-inline-cta-icon
{
  color: var(--color-mint);
  filter: drop-shadow(0 0 4px var(--color-mint)) drop-shadow(0 0 14px var(--color-mint-60));
}

body.test-result-mode .result-skill-column .skill-result-bottom .result-library-card
{
  grid-column: 1;
  justify-self: start;
}

body.test-result-mode .result-skill-column .skill-result-bottom #retake-btn
{
  grid-column: 3;
}

/* Skill names: hover/focus on desktop and tap on touch screens. */
.skill-tree .skill-node
{
  cursor: default;
  overflow: visible;
}

.skill-tree .skill-node[data-tooltip]::after
{
  display: block;
  content: attr(data-tooltip);
  position: absolute;
  z-index: 100;
  left: 50%;
  bottom: calc(100% + 12px);
  width: max-content;
  min-width: 150px;
  max-width: 230px;
  box-sizing: border-box;
  transform: translateX(-50%) translateY(4px);
  padding: 10px 13px;
  border: 1px solid var(--color-gold);
  border-radius: 3px;
  color: var(--color-white);
  background: var(--color-background);
  box-shadow: 0 14px 30px var(--color-surface-dark), inset 0 0 0 3px var(--color-border-soft);
  font: 600 13px/1.35 Inter, Arial, sans-serif;
  text-align: center;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.skill-tree .skill-node[data-tooltip]:hover::after, .skill-tree .skill-node[data-tooltip]:focus-visible::after, .skill-tree .skill-node[data-tooltip].is-tooltip-open::after
{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 1024px)
{

  .branch-money {
    border-left: none;
  }
  
  body.test-result-mode .result-skill-column .skill-tree
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 0;
    padding-inline: 10px;
  }

  body.test-result-mode .result-skill-column .skill-branch
  {
    min-width: 0;
    padding-inline: 10px;
  }

  body.test-result-mode .result-skill-column .skill-convergence
  {
    display: none;
  }

  body.test-result-mode .result-skill-column .skill-result-bottom
  {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
    padding-top: 24px;
  }
  /*checked*/
  body.test-result-mode .result-skill-column .skill-result-bottom .result-library-card, body.test-result-mode .result-skill-column .skill-result-bottom .skill-score-card, body.test-result-mode .result-skill-column .skill-result-bottom #retake-btn
  {
    grid-column: 1;
    justify-self: center;
  }


}