:root {
  color-scheme: dark;
  --bg: #101218;
  --panel: rgba(255, 255, 255, 0.08);
  --panel-strong: rgba(255, 255, 255, 0.13);
  --line: rgba(255, 255, 255, 0.18);
  --line-soft: rgba(255, 255, 255, 0.1);
  --text: #f6f5f0;
  --muted: rgba(246, 245, 240, 0.68);
  --faint: rgba(246, 245, 240, 0.42);
  --teal: #65dfc8;
  --coral: #ff8d86;
  --gold: #e7bc6f;
  --green: #7ee09e;
  --rose: #ef91b7;
  --ink: #171922;
  --paper: #f6f3ea;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    linear-gradient(135deg, rgba(101, 223, 200, 0.08), transparent 30%),
    linear-gradient(235deg, rgba(255, 141, 134, 0.08), transparent 34%),
    #0e1016;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  display: flex;
  justify-content: center;
  color: var(--text);
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.phone-shell {
  position: relative;
  width: min(100vw, 430px);
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 20% 10%, rgba(231, 188, 111, 0.12), transparent 23%),
    radial-gradient(circle at 90% 42%, rgba(101, 223, 200, 0.11), transparent 26%),
    var(--bg);
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.package-loading {
  min-height: calc(100vh - 48px);
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 30px 22px;
  text-align: center;
}

.package-loading span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.package-loading h2,
.package-loading p {
  margin: 0;
}

.package-loading p {
  color: var(--muted);
  line-height: 1.7;
}

.package-loading button {
  width: 100%;
  margin-top: 10px;
}

.result-more-test-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.result-more-test-list button {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  text-align: left;
}

.result-more-test-list button span {
  color: var(--faint);
  font-size: 10px;
}

.result-more-test-list button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-more-test-list button i {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--gold);
  font-size: 24px;
  font-style: normal;
}

.runtime-embed {
  background: var(--bg);
}

.runtime-embed .phone-shell {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  border: 0;
}

.runtime-embed .phone-shell::before,
.runtime-embed .phone-shell::after,
.runtime-embed .floating-back {
  display: none;
}

.phone-shell::before,
.phone-shell::after {
  content: "";
  position: fixed;
  left: 50%;
  top: -760px;
  z-index: 0;
  width: min(100vw, 430px);
  height: 1520px;
  pointer-events: none;
  background-repeat: repeat-y;
  background-size: 430px 760px;
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
}

.phone-shell::before {
  opacity: 0.92;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(255, 255, 255, 0.95) 0 1px, transparent 1.4px),
    radial-gradient(circle at 24% 4%, rgba(255, 255, 255, 0.75) 0 1px, transparent 1.4px),
    radial-gradient(circle at 44% 10%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 73% 3%, rgba(255, 255, 255, 0.76) 0 1px, transparent 1.4px),
    radial-gradient(circle at 88% 15%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 14% 31%, rgba(255, 255, 255, 0.8) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.88) 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 36%, rgba(255, 255, 255, 0.86) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 95% 30%, rgba(255, 255, 255, 0.78) 0 1px, transparent 1.4px),
    radial-gradient(circle at 7% 56%, rgba(255, 255, 255, 0.86) 0 1px, transparent 1.5px),
    radial-gradient(circle at 27% 61%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.4px),
    radial-gradient(circle at 49% 52%, rgba(255, 255, 255, 0.95) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 76% 58%, rgba(255, 255, 255, 0.78) 0 1px, transparent 1.4px),
    radial-gradient(circle at 92% 69%, rgba(255, 255, 255, 0.9) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 18% 83%, rgba(255, 255, 255, 0.88) 0 1px, transparent 1.5px),
    radial-gradient(circle at 41% 90%, rgba(255, 255, 255, 0.74) 0 1px, transparent 1.4px),
    radial-gradient(circle at 67% 81%, rgba(255, 255, 255, 0.95) 0 1.3px, transparent 1.8px),
    radial-gradient(circle at 84% 94%, rgba(255, 255, 255, 0.78) 0 1px, transparent 1.4px);
  animation: particle-rise 18s linear infinite;
}

.phone-shell::after {
  opacity: 0.58;
  background-image:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.92) 0 1.6px, transparent 2px),
    radial-gradient(circle at 58% 8%, rgba(255, 255, 255, 0.68) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 83% 22%, rgba(255, 255, 255, 0.84) 0 1.8px, transparent 2.2px),
    radial-gradient(circle at 31% 44%, rgba(255, 255, 255, 0.64) 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 71% 51%, rgba(255, 255, 255, 0.78) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 12% 74%, rgba(255, 255, 255, 0.7) 0 1.5px, transparent 1.9px),
    radial-gradient(circle at 52% 86%, rgba(255, 255, 255, 0.86) 0 1.8px, transparent 2.3px),
    radial-gradient(circle at 93% 78%, rgba(255, 255, 255, 0.62) 0 1.2px, transparent 1.7px);
  animation: particle-rise-slow 28s linear infinite;
}

@keyframes particle-rise {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(-50%, -760px, 0);
  }
}

@keyframes particle-rise-slow {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(-50%, -760px, 0);
  }
}

.view {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 16px 14px 92px;
}

.view.no-tabs {
  padding-bottom: 28px;
}

.floating-back {
  position: fixed;
  top: 14px;
  left: max(14px, calc(50% - 201px));
  z-index: 50;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.94);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
    rgba(24, 26, 32, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 12px 26px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(14px) saturate(1.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.16);
  font-size: 30px;
  line-height: 1;
}

.floating-back:active {
  transform: scale(0.96);
}

.floating-back + .hero-panel,
.floating-back + .quiz-head,
.floating-back + .report-cover {
  margin-top: 54px;
}

.floating-back + .test-intro-scene {
  margin-top: 54px;
}

.floating-back + .quiz-scene {
  margin-top: 54px;
}

.floating-back + .tool-detail-shell,
.floating-back + .contract-page,
.floating-back + .contract-result,
.floating-back + .tool-placeholder-page,
.floating-back + .share-card-stage {
  margin-top: 54px;
}

.tool-detail-shell {
  display: grid;
  gap: 14px;
  justify-items: center;
}

.tool-back-row {
  width: fit-content;
  min-height: 36px;
  margin: 0 0 10px;
  padding: 0 12px 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 247, 237, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(14px) saturate(1.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.14);
}

.tool-back-row span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 22px;
  line-height: 1;
}

.tool-back-row strong {
  font-size: 12px;
  font-weight: 900;
}

.test-intro-scene {
  position: relative;
  overflow: hidden;
  margin: 0 -6px 76px;
  padding: 14px 10px 18px;
  display: grid;
  gap: 10px;
  min-height: var(--intro-preview-scene-height, 620px);
  border-radius: var(--intro-preview-scene-radius, 20px);
  isolation: isolate;
  background: var(--intro-preview-scene);
  border: var(--intro-preview-scene-border-width, 1px) solid var(--intro-preview-scene-border, rgba(255, 255, 255, 0.12));
  backdrop-filter: blur(var(--intro-preview-scene-blur, 0px)) saturate(1.12);
  -webkit-backdrop-filter: blur(var(--intro-preview-scene-blur, 0px)) saturate(1.12);
  box-shadow: var(--intro-preview-scene-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 34px rgba(0, 0, 0, 0.3));
  background-size: cover;
  background-position: center;
}

.test-intro-scene::before {
  display: none;
}

.test-intro-scene::after {
  display: none;
}

.test-intro-scene > :not(.uploaded-bg-layer):not(.card-sheen-layer) {
  position: relative;
  z-index: 4;
}

.intro-preview-card,
.intro-preview-art {
  position: relative;
  overflow: hidden;
  opacity: var(--intro-preview-card-opacity, 1);
  isolation: isolate;
  border: var(--intro-preview-card-border-width, 1px) solid var(--intro-preview-card-border);
  border-radius: var(--intro-preview-card-radius, 8px);
  background: var(--intro-preview-card);
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(var(--intro-preview-card-blur, 10px)) saturate(1.14);
  -webkit-backdrop-filter: blur(var(--intro-preview-card-blur, 10px)) saturate(1.14);
  box-shadow: var(--intro-preview-card-shadow, none);
}

.intro-preview-card::before,
.intro-preview-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: var(--intro-preview-card-dim, 0.48);
  background:
    linear-gradient(90deg, rgba(8, 9, 13, 0.62) 0%, rgba(8, 9, 13, 0.32) 47%, rgba(8, 9, 13, 0.48) 100%),
    linear-gradient(180deg, rgba(8, 9, 13, 0.18), rgba(8, 9, 13, 0.56) 55%, rgba(8, 9, 13, 0.72));
  pointer-events: none;
}

.intro-preview-card > :not(.uploaded-bg-layer):not(.card-sheen-layer),
.intro-preview-art > :not(.uploaded-bg-layer):not(.card-sheen-layer) {
  position: relative;
  z-index: 4;
}

.intro-preview-card:last-of-type {
  opacity: var(--intro-preview-overview-opacity, var(--intro-preview-card-opacity, 1));
  border-color: var(--intro-preview-overview-border, var(--intro-preview-card-border));
  border-width: var(--intro-preview-overview-border-width, var(--intro-preview-card-border-width, 1px));
  border-radius: var(--intro-preview-overview-radius, var(--intro-preview-card-radius, 8px));
  background: var(--intro-preview-overview, var(--intro-preview-card));
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(var(--intro-preview-overview-blur, var(--intro-preview-card-blur, 10px))) saturate(1.14);
  -webkit-backdrop-filter: blur(var(--intro-preview-overview-blur, var(--intro-preview-card-blur, 10px))) saturate(1.14);
  box-shadow: var(--intro-preview-overview-shadow, var(--intro-preview-card-shadow, none));
}

.intro-preview-card:last-of-type::before {
  opacity: var(--intro-preview-overview-dim, var(--intro-preview-card-dim, 0.48));
}

.intro-preview-card {
  min-height: var(--intro-preview-card-height, 132px);
  padding: 16px;
  display: grid;
  align-content: center;
  gap: 8px;
}

.intro-preview-card h3 {
  margin: 0;
  color: #fffdf8;
  font-size: 22px;
}

.intro-preview-card p {
  margin: 0;
  color: rgba(246, 245, 240, 0.72);
  line-height: 1.55;
}

.intro-preview-art {
  opacity: var(--intro-preview-art-opacity, var(--intro-preview-card-opacity, 1));
  height: var(--intro-preview-art-height, 208px);
  border-color: var(--intro-preview-art-border, var(--intro-preview-card-border));
  border-width: var(--intro-preview-art-border-width, var(--intro-preview-card-border-width, 1px));
  border-radius: var(--intro-preview-art-radius, var(--intro-preview-card-radius, 8px));
  background: var(--intro-preview-art);
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(var(--intro-preview-art-blur, var(--intro-preview-card-blur, 10px))) saturate(1.14);
  -webkit-backdrop-filter: blur(var(--intro-preview-art-blur, var(--intro-preview-card-blur, 10px))) saturate(1.14);
  box-shadow: var(--intro-preview-art-shadow, var(--intro-preview-card-shadow, none));
}

.intro-preview-art::before {
  opacity: var(--intro-preview-art-dim, var(--intro-preview-card-dim, 0.48));
}

.intro-preview-section-title {
  margin: 2px 2px 0;
}

.intro-preview-section-title h4 {
  margin: 0;
  color: #fffdf8;
  font-size: 17px;
  line-height: 1.25;
}

.intro-preview-section-title p {
  margin: 4px 0 0;
  color: rgba(246, 245, 240, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.intro-preview-art-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 12px;
  color: #fffdf8;
  background: transparent;
}

.intro-preview-art-caption strong {
  display: block;
  margin-top: 3px;
  font-size: 16px;
  line-height: 1.2;
}

.intro-preview-art-caption p {
  margin: 4px 0 0;
  color: rgba(255, 248, 235, 0.74);
  font-size: 11px;
  line-height: 1.42;
}

.intro-capsule-slots {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.mini-label {
  color: rgba(246, 245, 240, 0.82);
  font-size: 12px;
  font-weight: 800;
}

.admin-preview-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 48%, rgba(225, 166, 83, 0.34), transparent 24%),
    linear-gradient(90deg, rgba(8, 9, 13, 0.62), rgba(8, 9, 13, 0.16), rgba(8, 9, 13, 0.52));
}

.art-rings {
  position: absolute;
  right: 20%;
  top: 18%;
  width: 124px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(224, 179, 102, 0.22);
  box-shadow:
    0 0 0 18px rgba(224, 179, 102, 0.08),
    0 0 0 38px rgba(224, 179, 102, 0.06);
}

.art-person {
  position: absolute;
  right: 27%;
  bottom: -18px;
  width: 54px;
  height: 98px;
  border-radius: 30px 30px 8px 8px;
  background: linear-gradient(180deg, #0d1017, #151a24);
  box-shadow: 0 -22px 42px rgba(0, 0, 0, 0.4);
}

.art-line {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(224, 179, 102, 0.44), transparent);
  transform: rotate(-8deg);
}

.art-bars {
  position: absolute;
  top: 28%;
  width: 16px;
  height: 72px;
  border-left: 4px solid rgba(224, 179, 102, 0.32);
  border-right: 4px solid rgba(224, 179, 102, 0.32);
}

.art-bars.left { left: 10%; }
.art-bars.right { right: 8%; }

.art-star {
  position: absolute;
  color: rgba(246, 245, 240, 0.52);
  font-size: 22px;
}

.art-star.one { left: 28%; top: 22%; }
.art-star.two { right: 28%; top: 15%; }

.test-intro-scene .section-title {
  margin-left: 2px;
  margin-right: 2px;
}

.quiz-scene {
  position: relative;
  overflow: hidden;
  margin: 0 -6px 82px;
  padding: 14px 10px 18px;
  border-radius: 18px;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)),
    rgba(21, 24, 31, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.2);
}

.quiz-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 84% 18%, rgba(101, 223, 200, 0.16), transparent 26%),
    linear-gradient(180deg, rgba(10, 12, 18, 0.12), rgba(10, 12, 18, 0.62));
  backdrop-filter: blur(12px) saturate(1.06);
  -webkit-backdrop-filter: blur(12px) saturate(1.06);
}

.quiz-scene-bg {
  position: absolute;
  inset: -50px -90px;
  z-index: -2;
  opacity: 0.34;
  filter: blur(20px) saturate(0.86);
  transform: scale(1.12);
}

.quiz-scene-bg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.quiz-scene .quiz-head {
  margin-top: 0;
}

.quiz-scene .question-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)),
    rgba(56, 64, 70, 0.42);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.package-preview-page,
.package-quiz-page,
.package-result-page {
  color: var(--pkg-text);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pkg-bg) 92%, white 8%), var(--pkg-bg)),
    var(--pkg-bg);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 20px 48px rgba(15, 12, 24, 0.18);
}

.package-preview-page,
.package-result-page {
  display: grid;
  gap: 14px;
}

.package-preview-hero,
.package-result-hero,
.package-quiz-head,
.package-question-card,
.package-result-card,
.package-preview-stack article,
.package-result-stack article {
  background: var(--pkg-card);
  border: 1px solid var(--pkg-line);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(30, 22, 48, 0.08);
}

.package-preview-hero,
.package-result-hero,
.package-quiz-head,
.package-question-card,
.package-result-card {
  padding: 18px;
}

.package-kicker,
.package-quiz-head span,
.package-result-stack article span {
  color: var(--pkg-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.package-preview-hero h1,
.package-result-hero h1,
.package-quiz-head h1,
.package-question-card h2,
.package-result-stack h2,
.package-result-card h2 {
  margin: 8px 0;
  color: var(--pkg-text);
  letter-spacing: 0;
}

.package-preview-hero p,
.package-result-hero p,
.package-question-card p,
.package-result-stack p {
  margin: 0;
  color: var(--pkg-muted);
  line-height: 1.75;
}

.package-chip-row,
.package-stat-grid,
.package-metric-grid {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.package-chip-row {
  display: flex;
  flex-wrap: wrap;
}

.package-chip-row span {
  padding: 7px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pkg-accent) 12%, white 88%);
  color: var(--pkg-text);
  font-size: 12px;
}

.package-stat-grid,
.package-metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.package-stat-grid article,
.package-metric-grid article {
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: var(--pkg-card-soft);
  border: 1px solid var(--pkg-line);
}

.package-stat-grid strong,
.package-metric-grid strong {
  display: block;
  color: var(--pkg-accent);
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.package-stat-grid span,
.package-metric-grid span,
.package-meter-list span {
  color: var(--pkg-muted);
  font-size: 12px;
}

.package-result-label-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.package-result-label-list article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--pkg-line);
  border-radius: 14px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--pkg-accent) 12%, transparent), transparent),
    var(--pkg-card-soft);
}

.package-result-label-list span {
  display: block;
  color: var(--pkg-accent);
  font-size: 11px;
  font-weight: 900;
}

.package-result-label-list strong {
  display: block;
  margin-top: 5px;
  color: var(--pkg-text);
  font-size: 17px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.package-result-label-list p {
  margin: 7px 0 0;
  color: var(--pkg-muted);
  font-size: 12px;
  line-height: 1.65;
}

.package-preview-media,
.package-result-visual {
  overflow: hidden;
  min-height: 210px;
  border-radius: 20px;
  border: 1px solid var(--pkg-line);
  background: color-mix(in srgb, var(--pkg-accent) 14%, white 86%);
}

.package-preview-media img,
.package-result-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
}

.package-preview-stack,
.package-result-stack {
  display: grid;
  gap: 10px;
}

.package-preview-stack article,
.package-result-stack article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px;
}

.package-preview-stack i,
.package-section-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pkg-accent) 16%, white 84%);
  color: var(--pkg-accent);
  font-style: normal;
  font-weight: 900;
}

.package-quiz-page {
  display: grid;
  gap: 14px;
}

.package-quiz-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.package-quiz-head strong {
  flex: 0 0 auto;
  color: var(--pkg-accent);
}

.package-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pkg-accent) 12%, white 88%);
}

.package-progress i,
.package-meter-list b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pkg-accent), var(--pkg-accent-2));
}

.package-answer-list {
  display: grid;
  gap: 10px;
}

.package-answer-list button {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  color: var(--pkg-text);
  background: var(--pkg-card);
  border: 1px solid var(--pkg-line);
  text-align: left;
}

.package-answer-list button.selected {
  border-color: var(--pkg-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pkg-accent) 18%, transparent);
}

.package-answer-list b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pkg-accent) 14%, white 86%);
  color: var(--pkg-accent);
}

.package-preview-actions,
.package-quiz-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--pkg-line);
  border-radius: 18px;
  background: var(--pkg-card);
}

.package-preview-actions button,
.package-quiz-navigation button {
  min-height: 46px;
}

.package-quiz-navigation {
  grid-template-columns: auto minmax(0, 1fr);
}

.package-quiz-navigation:has(> span:only-child) {
  grid-template-columns: 1fr;
}

.package-quiz-navigation span {
  color: var(--pkg-muted);
  font-size: 12px;
  text-align: right;
}

.package-result-hero {
  display: grid;
  gap: 14px;
}

.package-result-visual {
  min-height: 180px;
  background-repeat: no-repeat;
}

.package-result-mark {
  display: grid;
  place-items: center;
  min-height: 180px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--pkg-accent), var(--pkg-accent-2));
  color: white;
  font-size: 42px;
  font-weight: 900;
}

.package-meter-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.package-meter-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 42px;
  gap: 10px;
  align-items: center;
}

.package-meter-list i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pkg-accent) 12%, white 88%);
}

.brand-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 10px;
}

.brand-row h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1;
}

.brand-row span {
  font-weight: 700;
  color: var(--muted);
  font-size: 13px;
}

.search-row {
  display: grid;
  grid-template-columns: 1fr 54px;
  gap: 8px;
  margin-bottom: 10px;
}

.search {
  width: 100%;
  height: 42px;
  padding: 0 12px 0 38px;
  color: var(--text);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
}

.search-wrap {
  position: relative;
}

.search-wrap::before {
  content: "⌕";
  position: absolute;
  left: 13px;
  top: 8px;
  color: var(--faint);
  font-size: 20px;
  pointer-events: none;
  z-index: 1;
}

.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 28px;
  height: 28px;
  display: none;
  place-items: center;
  color: rgba(246, 245, 240, 0.72);
  background: transparent;
  border-radius: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  line-height: 1;
}

.search-clear.show {
  display: grid;
}

.search-clear:hover {
  background: rgba(255, 255, 255, 0.1);
}

.search-btn {
  height: 42px;
  border-radius: 8px;
  color: #fff7ec;
  font-weight: 800;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)),
    linear-gradient(135deg, rgba(241, 194, 122, 0.72), rgba(223, 143, 89, 0.62));
  border: 1px solid rgba(255, 233, 190, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 10px 22px rgba(223, 143, 89, 0.2);
  backdrop-filter: blur(10px) saturate(1.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.18);
}

.tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 12px;
}

.tab {
  height: 42px;
  color: var(--muted);
  background: transparent;
  border-radius: 8px 8px 0 0;
  font-weight: 800;
  position: relative;
  overflow: hidden;
}

.tab.active {
  color: var(--text);
  background:
    radial-gradient(circle at 50% 100%, rgba(231, 188, 111, 0.22), transparent 58%),
    rgba(255, 255, 255, 0.12);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.3);
}

.tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #fff5dd, #f1c27a, transparent);
  box-shadow: 0 0 14px rgba(241, 194, 122, 0.72);
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
}

.section-title h2 {
  margin: 0;
  font-size: 22px;
}

.section-title p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.count-badge {
  width: 58px;
  height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text);
  border-radius: 50%;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  box-shadow: var(--shadow);
  font-weight: 900;
  line-height: 1;
}

.count-badge small {
  display: block;
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-top: 4px;
  transform: translateY(-1px);
}

.list {
  display: grid;
  gap: 10px;
}

.knowledge-card,
.test-card,
.tool-card,
.panel,
.result-section,
.answer-option,
.hero-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.065)),
    rgba(20, 22, 30, 0.74);
  box-shadow: var(--shadow);
}

.hero-panel.has-link {
  cursor: pointer;
}

.knowledge-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  gap: 10px;
  align-items: center;
  min-height: var(--article-card-height, 94px);
  padding: 10px;
  color: var(--article-card-text, var(--text));
  text-align: left;
  overflow: hidden;
  border: var(--article-card-border-width, 1px) solid var(--article-card-border, var(--line));
  border-radius: var(--article-card-radius, 14px);
  background: var(--article-card-bg);
  box-shadow: var(--article-card-shadow, var(--shadow));
  opacity: var(--article-card-opacity, 1);
  backdrop-filter: blur(var(--article-card-blur, 10px)) saturate(1.16);
  -webkit-backdrop-filter: blur(var(--article-card-blur, 10px)) saturate(1.16);
}

.knowledge-card::before {
  display: none;
  content: "";
  position: absolute;
  top: -18px;
  bottom: -18px;
  left: 64px;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 255, 255, 0.18) 22%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(0, 0, 0, 0.2) 72%,
    transparent
  );
  transform: rotate(15deg);
  transform-origin: center;
}

.knowledge-card::after {
  display: none;
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 28%, rgba(255, 255, 255, 0.1), transparent 26%),
    linear-gradient(105deg, rgba(255, 255, 255, 0.06), transparent 46%);
  pointer-events: none;
}

.knowledge-card > * {
  position: relative;
  z-index: 4;
}

.serial {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 900;
}

.serial::before {
  content: none;
}

.knowledge-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.home-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin: 0 0 5px;
  padding: 0 7px;
  color: rgba(255, 255, 255, 0.9);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
    color-mix(in srgb, var(--article-accent, #e7bc6f), transparent 74%);
  border: 1px solid color-mix(in srgb, var(--article-accent, #e7bc6f), white 16%);
  border-radius: var(--cap-radius, 999px);
  font-size: 11px;
  font-weight: 900;
}

.card-title strong {
  min-width: 0;
  max-width: 100%;
  font-size: var(--article-card-title-size, 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-title em {
  color: var(--coral);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.card-sub {
  color: var(--faint);
  font-size: 12px;
  font-weight: 700;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-copy {
  margin: 0;
  color: rgba(246, 245, 240, 0.78);
  font-size: 12px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.arrow {
  color: var(--text);
  font-size: 20px;
}

.bottom-tabs {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: min(100vw, 430px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  height: 76px;
  padding: 10px 14px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(18, 16, 24, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 -18px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px) saturate(1.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
  z-index: 20;
}

.bottom-tab {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 44px;
  color: var(--faint);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 800;
  transition:
    transform 160ms ease,
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.bottom-tab span {
  display: block;
  line-height: 1;
  transform: translateY(1px);
}

.bottom-tab:active {
  transform: scale(0.97);
}

.bottom-tab.active {
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 232, 190, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 22px rgba(0, 0, 0, 0.18);
}

.bottom-tab.active::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffe0a0, transparent);
  box-shadow: 0 0 12px rgba(255, 224, 160, 0.5);
}

.hero-panel {
  min-height: var(--tool-hero-height, 152px);
  padding: 18px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  color: #fff7ed;
  opacity: var(--tool-hero-opacity, 1);
  border: var(--tool-hero-border-width, 1px) solid var(--tool-hero-border, rgba(255, 255, 255, 0.14));
  border-radius: var(--tool-hero-radius, 16px);
  background: var(--tool-hero-bg, linear-gradient(135deg, #214f45, #74d6b1));
  box-shadow: var(--tool-hero-shadow, 0 16px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(var(--tool-hero-blur, 10px)) saturate(1.14);
  -webkit-backdrop-filter: blur(var(--tool-hero-blur, 10px)) saturate(1.14);
  isolation: isolate;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.eyebrow {
  display: inline-flex;
  height: 26px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff5dc;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1)),
    linear-gradient(135deg, rgba(255, 224, 160, 0.72), rgba(241, 154, 128, 0.28));
  border: 1px solid rgba(255, 238, 198, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 8px 18px rgba(231, 188, 111, 0.18);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  font-size: 12px;
  font-weight: 900;
}

.hero-panel h2 {
  margin: 14px 0 8px;
  font-size: 23px;
  line-height: 1.2;
  max-width: 280px;
}

.hero-panel p {
  margin: 0 0 14px;
  max-width: 300px;
  color: rgba(246, 245, 240, 0.82);
  line-height: 1.6;
  font-weight: 700;
}

.feature-test-card {
  width: 100%;
  min-height: 438px;
  display: grid;
  grid-template-rows: 304px auto;
  margin-bottom: 16px;
  overflow: hidden;
  text-align: left;
  color: var(--text);
  border-radius: 10px;
  border: 1px solid rgba(162, 130, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(28, 25, 52, 0.94), rgba(21, 19, 35, 0.95)),
    #151323;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.feature-map {
  position: relative;
  min-height: 304px;
  overflow: hidden;
  padding: 28px 24px 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(149, 91, 255, 0.2), transparent 32%),
    radial-gradient(circle at 80% 12%, rgba(101, 223, 200, 0.12), transparent 26%),
    #111329;
}

.feature-map-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.feature-kicker,
.feature-map h2,
.map-label {
  position: relative;
  z-index: 1;
}

.feature-kicker {
  color: rgba(214, 203, 255, 0.78);
  font-size: 12px;
  letter-spacing: 0;
  margin-bottom: 8px;
}

.feature-map h2 {
  margin: 0;
  max-width: 288px;
  font-size: 23px;
  line-height: 1.2;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.42);
}

.map-label {
  position: absolute;
  min-width: 62px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #f5efff;
  background:
    linear-gradient(180deg, rgba(143, 93, 212, 0.42), rgba(69, 43, 119, 0.46)),
    rgba(18, 15, 33, 0.74);
  border: 1px solid rgba(203, 163, 255, 0.34);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  font-size: 12px;
  font-weight: 900;
}

.label-left-top {
  left: 26px;
  top: 124px;
}

.label-left-mid {
  left: 22px;
  top: 174px;
}

.label-left-bottom {
  left: 36px;
  top: 228px;
}

.label-right-top {
  right: 24px;
  top: 124px;
}

.label-right-mid {
  right: 20px;
  top: 174px;
}

.label-right-bottom {
  right: 34px;
  top: 228px;
}

.feature-cta {
  position: relative;
  z-index: 1;
  padding: 16px 24px 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)),
    radial-gradient(circle at 72% 0%, rgba(161, 124, 255, 0.2), transparent 38%),
    rgba(44, 37, 62, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.feature-cta::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #b471ff, #87d9ff, transparent);
}

.feature-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: rgba(246, 245, 240, 0.72);
  font-size: 13px;
  font-weight: 900;
}

.feature-meta span {
  height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: #2c1636;
  background: linear-gradient(135deg, #ffd8ef, #d8c3ff);
  border-radius: 999px;
}

.feature-cta h3 {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.25;
}

.feature-button {
  position: relative;
  overflow: hidden;
  height: 42px;
  width: 100%;
  display: grid;
  place-items: center;
  color: #5b2f77;
  background: linear-gradient(100deg, #ffc7ec, #d5c5ff 48%, #c4f3ff);
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 12px 24px rgba(112, 74, 185, 0.28);
  font-weight: 900;
}

.feature-button::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -42%;
  width: 34%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0.48),
    rgba(255, 255, 255, 0.18),
    transparent
  );
  transform: skewX(-22deg);
  animation: soft-sheen 3.8s ease-in-out infinite;
  pointer-events: none;
}

.feature-button:active {
  transform: scale(0.98);
}

.test-result-note {
  margin: -2px 0 10px;
  color: rgba(246, 245, 240, 0.68);
  font-size: 13px;
  font-weight: 800;
}

.recommend-test-card {
  position: relative;
  min-height: var(--recommend-height, 308px);
  width: 100%;
  overflow: hidden;
  margin: 0 0 16px;
  padding: 28px 26px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: var(--text);
  text-align: center;
  opacity: var(--recommend-opacity, 1);
  border: var(--recommend-border-width, 1px) solid var(--recommend-border, rgba(155, 115, 219, 0.28));
  border-radius: var(--recommend-radius, 8px);
  background: var(--recommend-bg, #2f6f68);
  box-shadow: var(--recommend-shadow, 0 22px 44px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(var(--recommend-blur, 8px)) saturate(1.14);
  -webkit-backdrop-filter: blur(var(--recommend-blur, 8px)) saturate(1.14);
}

.recommend-test-card::before {
  content: none;
}

.recommend-test-card::after {
  content: none;
}

.recommend-kicker,
.recommend-test-card h2,
.recommend-panel {
  position: relative;
  z-index: 2;
}

.recommend-kicker {
  color: color-mix(in srgb, var(--recommend-accent, #d6c4ff), white 22%);
  font-size: 11px;
  line-height: 1;
  text-align: left;
}

.recommend-test-card h2 {
  margin: 12px 0 0;
  color: #fff9ff;
  font-size: 22px;
  line-height: 1.18;
  text-align: left;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.44);
}

.recommend-panel {
  margin: auto -14px 0;
  min-height: var(--recommend-panel-height, 146px);
  flex: 0 0 auto;
  padding: 22px 18px 16px;
  text-align: left;
  opacity: var(--recommend-panel-opacity, 1);
  border: var(--recommend-panel-border-width, 1px) solid var(--recommend-panel-border, rgba(180, 146, 239, 0.32));
  border-radius: var(--recommend-panel-radius, 8px);
  background: var(--recommend-panel-bg, rgba(74, 67, 116, 0.58));
  box-shadow: var(--recommend-panel-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 28px rgba(0, 0, 0, 0.22));
  backdrop-filter: blur(var(--recommend-panel-blur, 8px)) saturate(1.14);
  -webkit-backdrop-filter: blur(var(--recommend-panel-blur, 8px)) saturate(1.14);
}

.recommend-panel-meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(244, 235, 255, 0.72);
  font-size: 13px;
  font-weight: 900;
}

.recommend-panel-meta span {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  color: #fff2ff;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)),
    linear-gradient(135deg, rgba(255, 163, 216, 0.34), rgba(188, 151, 255, 0.2));
  border: 1px solid rgba(255, 218, 246, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px) saturate(1.16);
  -webkit-backdrop-filter: blur(10px) saturate(1.16);
}

.recommend-panel h3 {
  position: relative;
  z-index: 2;
  margin: 16px 0 14px;
  color: #fffaff;
  font-size: 19px;
  line-height: 1.2;
}

.recommend-action {
  position: relative;
  z-index: 2;
  overflow: hidden;
  height: 42px;
  width: 100%;
  display: grid;
  place-items: center;
  color: #7d4c86;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--recommend-accent, #ffd3ef), white 58%), #f3c6e9 48%, #bceeff);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 20px rgba(106, 66, 178, 0.25);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  font-size: 14px;
  font-weight: 950;
}

.recommend-action.text-capsule-shell {
  width: 100% !important;
  height: var(--cap-height, 42px) !important;
}

.recommend-action:not(.text-capsule-shell)::after {
  content: "";
  position: absolute;
  top: -70%;
  bottom: -70%;
  left: -44%;
  width: 34%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0.68),
    rgba(255, 255, 255, 0.24),
    transparent
  );
  transform: skewX(-24deg);
  animation: recommend-sheen 3.2s ease-in-out infinite;
  pointer-events: none;
}

.recommend-action:active {
  transform: scale(0.98);
}

@keyframes recommend-sheen {
  0%,
  42% {
    left: -44%;
  }
  76%,
  100% {
    left: 116%;
  }
}

@keyframes soft-sheen {
  0%,
  46% {
    left: -42%;
  }
  78%,
  100% {
    left: 116%;
  }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: rgba(255, 250, 241, 0.92);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px) saturate(1.16);
  -webkit-backdrop-filter: blur(10px) saturate(1.16);
  font-size: 12px;
  font-weight: 800;
}

.chip.is-selected {
  color: #fff6df;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.1)),
    linear-gradient(135deg, rgba(255, 231, 182, 0.68), rgba(255, 183, 144, 0.42));
  border-color: rgba(255, 239, 205, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 8px 18px rgba(231, 188, 111, 0.2);
}

.chip.is-selected::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.86);
}

.chip.is-selected::after {
  content: "";
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: -36%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
  transform: skewX(-24deg);
  animation: chip-sheen 4.4s ease-in-out infinite;
  pointer-events: none;
}

.capsule {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 1 auto;
  width: var(--cap-width, auto);
  min-width: min(var(--cap-min-width, 0px), 100%);
  max-width: 100%;
  height: var(--cap-height, 26px);
  padding: 0 var(--cap-padding-x, 10px);
  border-radius: var(--cap-radius, 999px);
  color: var(--cap-color);
  background: var(--cap-bg);
  border: var(--cap-border-width, 1px) solid var(--cap-border);
  box-shadow: var(--cap-shadow);
  backdrop-filter: blur(var(--cap-blur, 10px)) saturate(1.16);
  -webkit-backdrop-filter: blur(var(--cap-blur, 10px)) saturate(1.16);
  font-size: var(--cap-font-size, 12px);
  font-weight: var(--cap-font-weight, 900);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.capsule.is-button-preset:hover {
  transform: translateY(calc(var(--cap-hover-lift, 0px) * -1));
}

.capsule.is-button-preset:active {
  transform: translateY(0) scale(var(--cap-press-scale, 1));
}

.capsule.has-dot::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.capsule-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capsule.has-sheen::after {
  content: "";
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: -36%;
  width: var(--cap-sheen-width, 28%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, var(--cap-sheen-opacity, 0.48)), transparent);
  transform: skewX(-24deg);
  animation: chip-sheen var(--cap-sheen-time, 4.4s) ease-in-out infinite;
  pointer-events: none;
}

.text-capsule-shell {
  position: relative;
  width: fit-content;
  width: var(--cap-width, fit-content);
  max-width: 100%;
  min-width: min(var(--cap-min-width, 0px), 100%);
  min-height: var(--cap-height, 26px);
  padding: 3px var(--cap-padding-x, 10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cap-color);
  background: var(--cap-bg);
  border: var(--cap-border-width, 1px) solid var(--cap-border);
  border-radius: var(--cap-radius, 999px);
  box-shadow: var(--cap-shadow);
  backdrop-filter: blur(var(--cap-blur, 10px)) saturate(1.16);
  -webkit-backdrop-filter: blur(var(--cap-blur, 10px)) saturate(1.16);
  line-height: 1.35;
  font-weight: var(--cap-font-weight, 900);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.text-capsule-shell.is-button-preset:hover {
  transform: translateY(calc(var(--cap-hover-lift, 0px) * -1));
}

.text-capsule-shell.is-button-preset:active {
  transform: translateY(0) scale(var(--cap-press-scale, 1));
}

.text-capsule-shell.has-sheen::after {
  content: "";
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: -36%;
  width: var(--cap-sheen-width, 28%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, var(--cap-sheen-opacity, 0.48)), transparent);
  transform: skewX(-24deg);
  animation: chip-sheen var(--cap-sheen-time, 4.4s) ease-in-out infinite;
  pointer-events: none;
}

@keyframes chip-sheen {
  0%,
  58% {
    left: -36%;
  }
  86%,
  100% {
    left: 120%;
  }
}

.test-card {
  position: relative;
  min-height: var(--card-height, 166px);
  opacity: var(--card-opacity, 1);
  overflow: hidden;
  padding: 16px 16px 14px;
  display: grid;
  grid-template-rows: 34px 1fr 34px;
  color: var(--text);
  text-align: left;
  border: var(--card-border-width, 1px) solid var(--card-border-color, rgba(255, 255, 255, 0.16));
  background: var(--accent, #171922);
  background-size: cover;
  background-position: center;
  border-radius: var(--card-radius, 14px);
  backdrop-filter: blur(var(--card-blur, 0px)) saturate(1.14);
  -webkit-backdrop-filter: blur(var(--card-blur, 0px)) saturate(1.14);
  box-shadow: var(--card-shadow, 0 16px 34px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.1));
}

.test-card.is-featured {
  margin-bottom: 16px;
}

.test-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: var(--card-dim, 0.2);
  background:
    linear-gradient(90deg, rgba(8, 9, 13, 0.62) 0%, rgba(8, 9, 13, 0.32) 47%, rgba(8, 9, 13, 0.48) 100%),
    linear-gradient(180deg, rgba(8, 9, 13, 0.18), rgba(8, 9, 13, 0.56) 55%, rgba(8, 9, 13, 0.72));
  pointer-events: none;
}

.test-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 3;
  border-radius: calc(var(--card-radius, 14px) - 1px);
  border: 0;
  pointer-events: none;
}

.uploaded-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background-size: var(--image-size, cover);
  background-position: var(--image-x, 50%) var(--image-y, 50%);
  filter: blur(var(--image-blur, 0px));
  pointer-events: none;
}

.card-sheen-layer {
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: -42%;
  z-index: 3;
  width: 34%;
  transform: skewX(-24deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: image-sheen var(--card-sheen-time, 4.6s) ease-in-out infinite;
  pointer-events: none;
}

@keyframes image-sheen {
  0%,
  58% {
    left: -45%;
  }
  86%,
  100% {
    left: 120%;
  }
}

.test-card-top,
.test-card-main,
.test-card-bottom {
  position: relative;
  z-index: 4;
}

.test-card-top,
.test-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  min-width: 0;
}

.test-label-row {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.test-label-row .capsule {
  max-width: clamp(46px, 30%, 84px);
}

.test-label {
  min-width: 66px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  color: #fff4f0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 900;
}

.test-label-accent {
  min-width: 66px;
  height: 28px;
  padding: 0 10px;
  color: #fff7d7;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06)),
    linear-gradient(135deg, rgba(255, 216, 133, 0.32), rgba(255, 126, 158, 0.22));
  border-color: rgba(255, 224, 166, 0.32);
  font-size: 11px;
}

.test-label i {
  color: #ffd9a1;
  font-style: normal;
  font-size: 11px;
}

.test-issue {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 86px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff7ed;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.52);
}

.test-issue.text-capsule-shell {
  max-width: 86px !important;
}

.test-card-bottom .test-count {
  flex: 1 1 auto;
  max-width: calc(100% - 94px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-card-bottom .test-action {
  flex: 0 0 auto;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-issue:not(.text-capsule-shell) {
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px) saturate(1.14);
  -webkit-backdrop-filter: blur(10px) saturate(1.14);
}

.test-card-main {
  align-self: center;
  display: flex;
  align-items: center;
  max-width: 318px;
  padding-top: 0;
}

.test-card h3 {
  margin: 0;
  color: #fffdf8;
  font-size: 20px;
  line-height: 1.22;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.62);
}

.test-count {
  position: relative;
  min-width: 0;
  color: rgba(255, 248, 235, 0.74);
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.44);
}

.test-count::before {
  content: "";
  width: 5px;
  height: 5px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 50%;
  background: #f3c77e;
  box-shadow: 0 0 12px rgba(243, 199, 126, 0.72);
  vertical-align: 2px;
}

.test-count strong {
  color: #fff6df;
  font-weight: 950;
}

.test-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
}

.tools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.tool-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 124px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  align-content: center;
  gap: 6px 12px;
  text-align: left;
  color: var(--article-card-text, var(--text));
  background: var(--article-card-bg);
  border: var(--article-card-border-width, 1px) solid var(--article-card-border, rgba(255, 255, 255, 0.18));
  border-radius: var(--article-card-radius, 16px);
  box-shadow: var(--article-card-shadow, 0 16px 32px rgba(0, 0, 0, 0.26));
  opacity: var(--article-card-opacity, 1);
  backdrop-filter: blur(var(--article-card-blur, 10px)) saturate(1.16);
  -webkit-backdrop-filter: blur(var(--article-card-blur, 10px)) saturate(1.16);
}

.tool-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: var(--tool-pattern, 0.22);
  pointer-events: none;
}

.tool-card::after {
  content: none;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 38%),
    rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.tool-card > * {
  position: relative;
  z-index: 4;
}

.tool-card .chip {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: fit-content !important;
  max-width: 74px !important;
  min-width: 0 !important;
  min-height: 22px !important;
  padding: 2px 9px !important;
  justify-self: start;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.tool-card-copy {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  padding-top: 0;
  display: grid;
  gap: 4px;
}

.tool-card h3 {
  margin: 0 0 7px;
  font-size: var(--article-card-title-size, 18px);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.46);
}

.tool-card p {
  margin: 0;
  color: rgba(246, 245, 240, 0.82);
  font-size: 12px;
  line-height: 1.55;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  max-width: 42ch;
}

.tool-detail-hero,
.tool-detail-copy,
.tool-entry-card,
.contract-heading,
.contract-form,
.agreement-record,
.contract-result,
.tool-placeholder-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.38)),
    rgba(255, 245, 250, 0.7);
  box-shadow: 0 18px 42px rgba(130, 64, 96, 0.14);
  backdrop-filter: blur(14px) saturate(1.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
}

.tool-detail-hero {
  width: min(100%, calc((100vh - 108px) * 9 / 16));
  max-height: calc(100vh - 108px);
  aspect-ratio: 9 / 16;
  min-height: auto;
  padding: 20px 16px 18px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: stretch;
  gap: 16px;
  color: var(--article-card-text, #69314e);
  background: var(--article-card-bg);
  border: var(--article-card-border-width, 1px) solid var(--article-card-border, rgba(255, 255, 255, 0.42));
  border-radius: var(--article-card-radius, 20px);
  box-shadow: var(--article-card-shadow, 0 18px 42px rgba(130, 64, 96, 0.14));
  opacity: var(--article-card-opacity, 1);
  backdrop-filter: blur(var(--article-card-blur, 12px)) saturate(1.18);
  -webkit-backdrop-filter: blur(var(--article-card-blur, 12px)) saturate(1.18);
  overflow-y: auto;
}

.tool-detail-scene {
  width: min(100%, calc((100vh - 108px) * 9 / 16));
  height: min(calc(100vh - 108px), calc((100vw - 32px) * 16 / 9));
  max-height: calc(100vh - 108px);
  aspect-ratio: 9 / 16;
  min-height: 0;
  margin: 0;
  display: block;
  overflow: hidden;
}

.tool-detail-content-shell {
  position: relative;
  z-index: 4;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
}

.tool-detail-scene .tool-detail-info-card,
.tool-detail-scene .tool-entry-card {
  min-height: var(--article-card-height, 96px);
  color: var(--article-card-text, #71365a);
  opacity: var(--article-card-opacity, 1);
  border: var(--article-card-border-width, 1px) solid var(--article-card-border, rgba(255, 255, 255, 0.42));
  border-radius: var(--article-card-radius, 16px);
  background: var(--article-card-bg);
  box-shadow: var(--article-card-shadow, 0 16px 34px rgba(122, 58, 93, 0.14));
  backdrop-filter: blur(var(--article-card-blur, 12px)) saturate(1.16);
  -webkit-backdrop-filter: blur(var(--article-card-blur, 12px)) saturate(1.16);
}

.tool-detail-scene .tool-detail-info-card::before,
.tool-detail-scene .tool-entry-card::before {
  opacity: var(--article-card-dim, 0);
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(8, 9, 13, 0.08), rgba(8, 9, 13, 0.38) 100%),
    linear-gradient(90deg, rgba(8, 9, 13, 0.28), rgba(8, 9, 13, 0.06), rgba(8, 9, 13, 0.22));
}

.tool-detail-scene .tool-detail-info-card {
  padding: 18px 16px 16px;
  align-content: end;
  gap: 7px;
}

.tool-detail-info-card h2 {
  margin: 0;
  color: currentColor;
  font-size: var(--article-card-title-size, 25px);
  line-height: 1.12;
}

.tool-detail-info-card p {
  margin: 0;
  color: color-mix(in srgb, currentColor 76%, transparent);
  font-size: 13px;
  line-height: 1.62;
}

.tool-entry-section-title {
  margin-top: 0;
}

.tool-entry-area {
  min-height: 0;
  align-self: end;
  display: grid;
  grid-template-rows: auto auto;
  gap: 12px;
  transform: translateY(-10px);
}

.tool-detail-scene .tool-entry-list {
  width: 100%;
}

.tool-detail-hero > * {
  position: relative;
  z-index: 4;
}

.tool-detail-copy {
  position: relative;
  z-index: 4;
  width: min(100%, 304px);
  align-self: end;
  padding: 18px;
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: start;
  gap: 4px;
  min-height: var(--article-card-height, 120px);
  color: var(--article-card-text, #71365a);
  border: var(--article-card-border-width, 1px) solid var(--article-card-border, rgba(255, 255, 255, 0.42));
  border-radius: var(--article-card-radius, 18px);
  background: var(--article-card-bg);
  box-shadow: var(--article-card-shadow, 0 16px 34px rgba(122, 58, 93, 0.14));
  opacity: var(--article-card-opacity, 1);
  backdrop-filter: blur(var(--article-card-blur, 14px)) saturate(1.16);
  -webkit-backdrop-filter: blur(var(--article-card-blur, 14px)) saturate(1.16);
}

.tool-detail-copy > :not(.uploaded-bg-layer):not(.card-sheen-layer) {
  position: relative;
  z-index: 4;
}

.tool-detail-copy h2,
.contract-heading h2,
.contract-result h2,
.tool-placeholder-page h2 {
  margin: 0;
  font-size: 25px;
  line-height: 1.12;
  color: #883f68;
}

.tool-detail-copy p,
.contract-heading p,
.contract-result p,
.tool-placeholder-page p {
  margin: 0;
  color: rgba(91, 57, 76, 0.76);
  font-size: 14px;
  line-height: 1.7;
}

.tool-detail-copy .chip {
  width: fit-content !important;
  margin-bottom: 2px;
}

.tool-detail-copy h2,
.tool-detail-copy p {
  width: 100%;
  text-align: left;
}

.tool-info-panel {
  margin-top: 12px;
  padding: 15px;
}

.tool-info-panel span,
.contract-heading span,
.contract-result span,
.tool-placeholder-page span {
  color: #d6619a;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.tool-info-panel h3,
.tool-entry-list h3 {
  margin: 6px 0 8px;
  color: #7b365e;
}

.tool-info-panel p,
.tool-info-grid p {
  margin: 0;
  color: rgba(75, 51, 65, 0.76);
  font-size: 13px;
  line-height: 1.68;
}

.tool-info-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.tool-info-grid > div {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: start;
}

.tool-info-grid strong {
  display: block;
  margin-bottom: 0;
  color: #80375f;
  font-size: 13px;
}

.tool-entry-list {
  position: relative;
  z-index: 4;
  margin-top: 0;
  display: grid;
  gap: 12px;
}

.tool-entry-card {
  width: 100%;
  min-height: var(--article-card-height, 72px);
  padding: 12px 42px 12px 14px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 3px;
  text-align: left;
  color: var(--article-card-text, #71365a);
  background: var(--article-card-bg);
  border: var(--article-card-border-width, 1px) solid var(--article-card-border, rgba(255, 255, 255, 0.44));
  border-radius: var(--article-card-radius, 16px);
  box-shadow: var(--article-card-shadow, 0 16px 34px rgba(122, 58, 93, 0.14));
  opacity: var(--article-card-opacity, 1);
  backdrop-filter: blur(var(--article-card-blur, 12px)) saturate(1.16);
  -webkit-backdrop-filter: blur(var(--article-card-blur, 12px)) saturate(1.16);
}

.tool-entry-card > :not(.uploaded-bg-layer):not(.card-sheen-layer) {
  position: relative;
  z-index: 4;
}

.tool-entry-card strong {
  align-self: end;
  font-size: 14px;
}

.tool-entry-card small {
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: 12px;
  line-height: 1.45;
}

.tool-entry-card i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  color: color-mix(in srgb, currentColor 78%, transparent);
  font-size: 28px;
}

.contract-page {
  display: grid;
  gap: 12px;
}

.contract-heading,
.contract-form,
.contract-result,
.tool-placeholder-page {
  padding: 18px;
}

.contract-form {
  display: grid;
  gap: 12px;
}

.contract-form label {
  display: grid;
  gap: 6px;
  color: #8b486a;
  font-size: 12px;
  font-weight: 850;
}

.contract-form input,
.contract-form textarea {
  width: 100%;
  border: 1px solid rgba(224, 111, 155, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
  padding: 11px 12px;
  color: #5f344d;
  font: inherit;
  resize: vertical;
}

.contract-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.agreement-list {
  display: grid;
  gap: 10px;
}

.agreement-record {
  padding: 15px;
}

.agreement-record small {
  color: rgba(101, 65, 84, 0.56);
  font-size: 11px;
}

.agreement-record h3 {
  margin: 5px 0 8px;
  color: #80375f;
}

.agreement-record p,
.agreement-record li {
  color: rgba(69, 46, 60, 0.8);
  font-size: 13px;
  line-height: 1.68;
}

.agreement-record ol {
  padding-left: 20px;
}

.tarot-spread-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.tarot-mini-card {
  position: relative;
  min-height: 178px;
  padding: 13px 10px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  overflow: hidden;
  text-align: center;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 223, 247, 0.25), transparent 35%),
    linear-gradient(145deg, rgba(74, 45, 90, 0.82), rgba(25, 48, 55, 0.86));
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.tarot-mini-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 13px;
  border: 1px solid rgba(255, 235, 246, 0.22);
  pointer-events: none;
}

.tarot-mini-card span {
  min-height: 23px;
  padding: 4px 8px;
  border-radius: 999px;
  color: rgba(255, 247, 237, 0.82);
  background: rgba(255, 255, 255, 0.12);
  font-size: 10px;
  font-weight: 900;
}

.tarot-mini-card strong {
  color: #fff7ed;
  font-size: 17px;
  line-height: 1.2;
}

.tarot-mini-card small,
.tarot-mini-card p {
  margin: 0;
  color: rgba(246, 245, 240, 0.74);
  font-size: 11px;
  line-height: 1.45;
}

.tarot-mini-card.is-reversed {
  background:
    radial-gradient(circle at 50% 15%, rgba(202, 214, 255, 0.24), transparent 35%),
    linear-gradient(145deg, rgba(51, 43, 86, 0.86), rgba(62, 39, 61, 0.82));
}

.tarot-reading-box {
  grid-column: 1 / -1;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
}

.tarot-reading-box strong {
  display: block;
  margin-bottom: 8px;
  color: #fff7ed;
}

.tarot-reading-box p {
  margin: 0;
  color: rgba(246, 245, 240, 0.8);
  font-size: 13px;
  line-height: 1.75;
}

.contract-result,
.tool-placeholder-page {
  min-height: 420px;
  display: grid;
  align-content: center;
  gap: 12px;
  text-align: center;
}

.tool-empty-state {
  padding: 24px 14px;
  border: 1px dashed rgba(214, 97, 154, 0.32);
  border-radius: 18px;
  color: rgba(101, 65, 84, 0.64);
  text-align: center;
}

.tool-empty-state.is-warn {
  color: #8d3657;
  border-color: rgba(224, 80, 120, 0.34);
  background: rgba(255, 226, 235, 0.34);
}

.result-lookup-page {
  color: #4b3345;
}

.result-lookup-form,
.result-lookup-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(224, 111, 155, 0.2);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 230, 245, 0.42)),
    rgba(255, 255, 255, 0.5);
  box-shadow: 0 14px 30px rgba(128, 55, 95, 0.08);
}

.result-lookup-form label {
  display: grid;
  gap: 7px;
  color: #8b486a;
  font-size: 12px;
  font-weight: 900;
}

.result-lookup-form input {
  height: 46px;
  border: 1px solid rgba(224, 111, 155, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  padding: 0 13px;
  color: #5f344d;
  font: inherit;
  text-transform: uppercase;
}

.result-lookup-card span {
  width: max-content;
  padding: 5px 9px;
  color: #7d4c86;
  border: 1px solid rgba(224, 111, 155, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  font-weight: 900;
}

.result-lookup-card h3 {
  margin: 0;
  color: #80375f;
  font-size: 22px;
}

.result-lookup-card p,
.result-lookup-card small {
  color: rgba(69, 46, 60, 0.76);
  line-height: 1.65;
}

.result-lookup-card code {
  width: max-content;
  padding: 8px 10px;
  border-radius: 10px;
  color: #55385e;
  background: rgba(255, 255, 255, 0.58);
}

.result-lookup-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.detail-card {
  margin-top: 54px;
  padding: 26px 20px 22px;
  min-height: var(--article-card-height, 458px);
  color: var(--article-card-text, var(--text));
  background: var(--article-card-bg, rgba(20, 22, 30, 0.88));
  border: var(--article-card-border-width, 1px) solid var(--article-card-border, var(--line));
  border-radius: var(--article-card-radius, 12px);
  box-shadow: var(--article-card-shadow, var(--shadow));
  opacity: var(--article-card-opacity, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  backdrop-filter: blur(var(--article-card-blur, 8px)) saturate(1.16);
  -webkit-backdrop-filter: blur(var(--article-card-blur, 8px)) saturate(1.16);
}

.detail-card::after {
  display: none;
  content: "";
  position: absolute;
  right: -30px;
  top: -22px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.article-detail-header {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 9px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(231, 188, 111, 0.2);
}

.detail-card .article-detail-title {
  margin: 0;
  color: var(--article-card-text, var(--text));
  font-size: var(--article-card-title-size, 22px);
  line-height: 1.38;
}

.detail-card .article-detail-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.65;
}

.detail-card p {
  margin: 14px 0;
  line-height: 1.9;
  font-size: 14px;
}

.detail-card > :not(.uploaded-bg-layer):not(.card-sheen-layer) {
  position: relative;
  z-index: 4;
}

.article-body {
  display: grid;
  gap: 0;
  margin: 8px 0 0;
}

.article-body p {
  margin: 6px 0 0;
  color: rgba(246, 245, 240, 0.74);
  font-size: inherit;
  line-height: 1.82;
}

.article-block-heading {
  margin: 26px 0 5px !important;
  padding-left: 10px;
  color: var(--article-card-text, var(--text));
  border-left: 2px solid var(--article-detail-accent, var(--gold));
  font-size: 17px;
  line-height: 1.4;
}

.article-block-heading.align-center {
  text-align: center;
}

.article-block-quote {
  margin: 14px 0;
  padding: 14px 15px;
  color: rgba(246, 245, 240, 0.78);
  border-left: 3px solid var(--article-detail-accent, #ffb58c);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  line-height: 1.8;
}

.article-block-quote cite {
  display: block;
  margin-top: 8px;
  color: var(--faint);
  font-size: 12px;
  font-style: normal;
}

.article-block-callout,
.article-block-list {
  margin: 14px 0;
  padding: 14px;
  border-radius: 12px;
  color: rgba(246, 245, 240, 0.82);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(231, 188, 111, 0.24);
}

.article-block-callout.tone-safe {
  border-color: rgba(101, 223, 200, 0.34);
  background: rgba(222, 255, 248, 0.34);
}

.article-block-callout.tone-danger {
  border-color: rgba(255, 112, 148, 0.34);
  background: rgba(255, 232, 238, 0.38);
}

.article-block-callout strong,
.article-block-list strong {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
}

.article-block-list ul,
.article-block-list ol {
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
}

.article-block-image {
  margin: 16px 0;
}

.article-block-image img,
.article-block-image > div {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.36);
}

.article-block-image.ratio-4-3 img,
.article-block-image.ratio-4-3 > div {
  aspect-ratio: 4 / 3;
}

.article-block-image.ratio-1-1 img,
.article-block-image.ratio-1-1 > div {
  aspect-ratio: 1 / 1;
}

.article-block-image.ratio-3-4 img,
.article-block-image.ratio-3-4 > div {
  aspect-ratio: 3 / 4;
}

.article-block-image figcaption {
  margin-top: 7px;
  color: var(--faint);
  text-align: center;
  font-size: 12px;
}

.article-block-divider {
  width: 100%;
  height: 1px;
  margin: 18px 0;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(231, 188, 111, 0.28), transparent);
}

.article-attention {
  margin-top: 28px;
  padding: 15px 16px;
  color: rgba(246, 245, 240, 0.76);
  border: 1px solid rgba(231, 188, 111, 0.28);
  border-left: 3px solid var(--article-detail-accent, var(--gold));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(231, 188, 111, 0.08), transparent 62%),
    rgba(255, 255, 255, 0.045);
}

.article-attention strong {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 14px;
}

.detail-card .article-attention p {
  margin: 0;
  color: inherit;
  font-size: 13px;
  line-height: 1.78;
  white-space: pre-line;
}

.light-chips .chip {
  color: #6a3f18;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.22)),
    linear-gradient(135deg, rgba(255, 241, 212, 0.78), rgba(255, 220, 169, 0.42));
  border-color: rgba(255, 220, 169, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 8px 18px rgba(190, 131, 72, 0.12);
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, #f0b468, transparent);
  margin: 14px 0;
}

.attention {
  margin-top: 16px;
  padding: 16px;
  border-radius: 8px;
  background: #fff7ee;
  border: 1px solid #f0d4b5;
  color: #474a52;
  line-height: 1.85;
}

.disclaimer {
  margin-top: 20px;
  text-align: center;
  color: #9b9ba2;
  font-size: 12px;
}

.neighbor-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.neighbor {
  min-height: 64px;
  padding: 13px;
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
  border: 1px solid var(--line);
}

.neighbor span {
  display: block;
  color: var(--faint);
  font-size: 12px;
  margin-bottom: 6px;
}

.fixed-actions {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: min(100vw, 430px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 14px 14px;
  background: rgba(22, 19, 28, 0.92);
  border-top: 1px solid var(--line-soft);
  z-index: 20;
}

.fixed-actions.single-action {
  grid-template-columns: minmax(132px, 0.42fr);
  justify-content: start;
  background: linear-gradient(180deg, rgba(22, 19, 28, 0.68), rgba(22, 19, 28, 0.92));
}

.primary-btn,
.secondary-btn {
  height: 46px;
  border-radius: 8px;
  font-weight: 900;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 10px 22px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

.primary-btn {
  color: #fff8ed;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08)),
    linear-gradient(135deg, rgba(242, 203, 125, 0.74), rgba(238, 137, 132, 0.68));
  border-color: rgba(255, 229, 190, 0.42);
}

.secondary-btn {
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.share-card-stage {
  min-height: calc(100vh - 32px);
  width: min(100%, 390px);
  margin-inline: auto;
  padding: 8px 10px 24px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.share-card-stage h2,
.share-card-stage p {
  margin: 0;
}

.share-card-stage h2 {
  color: var(--text);
  font-size: 22px;
  line-height: 1.25;
}

.share-card-stage p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.result-share-canvas {
  width: 100%;
  max-width: min(360px, max(240px, calc((100dvh - 252px) * 0.75)));
  min-width: 0;
  aspect-ratio: 3 / 4;
  justify-self: center;
  border-radius: 18px;
  display: block;
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.share-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.share-card-actions .primary-btn,
.share-card-actions .secondary-btn,
.share-card-copy-button {
  width: 100%;
  min-height: 42px;
}

.share-card-copy-button {
  margin-top: 0;
}

@media (max-width: 360px) {
  .share-card-actions {
    grid-template-columns: 1fr;
  }
}

.version-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 16px;
}

.version-grid.version-count-1 {
  grid-template-columns: 1fr;
}

.version-grid.version-count-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.version-card {
  position: relative;
  overflow: hidden;
  height: 156px;
  padding: 14px;
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    var(--version-bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 24px rgba(0, 0, 0, 0.18);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.version-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.16), transparent 28%),
    linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, 0.08), transparent 58%);
  opacity: 0.5;
  pointer-events: none;
}

.version-card:hover {
  filter: brightness(1.06);
}

.version-card:active {
  transform: scale(0.98);
}

.version-count-1 .version-card {
  height: 166px;
}

.version-count-3 .version-card {
  height: 148px;
  padding: 11px;
}

.version-count-3 .version-card.is-selected {
  padding-top: 11px;
}

.version-card.is-selected {
  transform: translateY(-3px);
  border-color: rgba(255, 228, 176, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 0 0 2px rgba(255, 214, 142, 0.18),
    0 16px 34px rgba(0, 0, 0, 0.3);
}

.version-card.is-selected::before {
  opacity: 0.5;
}

.version-card.is-selected::after {
  content: none;
}

.version-card.is-selected strong::after {
  content: none;
}

@keyframes version-sheen {
  0%,
  54% {
    transform: translateX(-100%);
  }
  84%,
  100% {
    transform: translateX(100%);
  }
}

.version-card strong {
  font-size: 18px;
  margin-bottom: 6px;
}

.version-count-3 .version-card strong {
  font-size: 15px;
  line-height: 1.25;
}

.version-card span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1.45;
}

.version-count-3 .version-card span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 11px;
}

.version-card small {
  width: fit-content;
  margin-top: 9px;
  padding: 4px 8px;
  color: #fff5dc;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08)),
    linear-gradient(135deg, rgba(255, 230, 185, 0.68), rgba(241, 154, 128, 0.32));
  border: 1px solid rgba(255, 239, 205, 0.42);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 8px 16px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(10px) saturate(1.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.18);
  font-size: 11px;
  font-weight: 900;
}

.panel {
  padding: 16px;
  margin: 12px 0;
}

.panel-label {
  color: var(--faint);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.panel h3 {
  margin: 6px 0 10px;
  font-size: 19px;
}

.panel p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
  font-size: 13px;
}

.quiz-head {
  display: grid;
  grid-template-columns: 1fr 86px;
  gap: 10px;
  align-items: center;
  margin: 20px 8px 14px;
}

.timer {
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.12);
  font-weight: 900;
  font-size: 22px;
}

.progress-bar {
  height: 5px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-bar span {
  display: block;
  height: 100%;
  background: var(--teal);
}

.question-card {
  padding: 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--line);
}

.question-card h2 {
  margin: 14px 0 10px;
  font-size: 21px;
  line-height: 1.5;
}

.question-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.answer-list {
  display: grid;
  gap: 12px;
  margin: 14px 0 74px;
}

.answer-option {
  min-height: 58px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  color: #263036;
  background: linear-gradient(145deg, #f4fbf4, #cce0dc);
  text-align: left;
  line-height: 1.55;
  font-weight: 800;
}

.answer-option.selected {
  outline: 3px solid var(--gold);
}

.answer-key {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #17624f;
  background: rgba(255, 255, 255, 0.7);
}

.report-cover {
  margin-top: 14px;
  padding: 24px 18px;
  min-height: 420px;
  color: #172017;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(241, 249, 242, 0.96)),
    #eef8f1;
  border-radius: 8px;
}

.report-cover h1 {
  margin: 12px 0 0;
  font-size: 34px;
  color: #101713;
}

.report-cover h2 {
  margin: 0;
  font-size: 16px;
  color: #38b86d;
}

.mascot {
  height: 206px;
  margin: 18px auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(56, 184, 109, 0.24);
  border-radius: 8px;
  background: linear-gradient(160deg, #f4fff8, #dff3e8);
}

.mascot svg {
  width: 180px;
  height: 180px;
}

.result-section {
  padding: 18px;
  margin-top: 12px;
  color: #151817;
  background: #f8faf7;
}

.result-section h2 {
  margin: 0 0 12px;
  font-size: 24px;
}

.result-section p {
  margin: 0;
  color: #303a35;
  line-height: 1.8;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.metric {
  min-height: 108px;
  padding: 12px;
  border: 1px solid #e2ebe4;
  border-radius: 8px;
  display: grid;
  place-items: center;
  text-align: center;
}

.ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #1f7a4c;
  font-weight: 900;
  background: conic-gradient(#30bd73 var(--score), #ddebe2 0);
  position: relative;
}

.ring::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f8faf7;
}

.ring span {
  position: relative;
  z-index: 1;
}

.metric strong {
  display: block;
  margin-top: 7px;
  color: #121614;
}

.share-box {
  padding: 14px;
  border-radius: 8px;
  background: #e8f8ec;
  border: 1px solid #c7ebd1;
  color: #1f673b;
  font-weight: 800;
  line-height: 1.7;
}

.result-page {
  --result-bg: rgba(22, 24, 32, 0.82);
  --result-card: rgba(255, 255, 255, 0.08);
  --result-line: rgba(255, 255, 255, 0.16);
  --result-text: #f8f5ef;
  --result-muted: rgba(248, 245, 239, 0.68);
  --result-accent: #e7bc6f;
  --result-glow: rgba(231, 188, 111, 0.24);
  --result-ring-hole: #171922;
  min-height: calc(100vh - 28px);
  margin: 54px -4px 0;
  padding-bottom: 18px;
  color: var(--result-text);
}

.result-theme-freshGreen {
  --result-bg: #f4fbf7;
  --result-card: rgba(255, 255, 255, 0.88);
  --result-line: rgba(42, 188, 111, 0.18);
  --result-text: #101915;
  --result-muted: rgba(16, 25, 21, 0.62);
  --result-accent: #2abe70;
  --result-glow: rgba(42, 190, 112, 0.22);
  --result-ring-hole: #f4fbf7;
}

.result-theme-warmReport {
  --result-bg: rgba(70, 38, 45, 0.84);
  --result-card: rgba(255, 255, 255, 0.1);
  --result-line: rgba(255, 189, 177, 0.2);
  --result-accent: #ef8ea3;
  --result-glow: rgba(239, 142, 163, 0.24);
  --result-ring-hole: #47262d;
}

.result-theme-tarotGold {
  --result-bg: #100907;
  --result-card: rgba(54, 31, 22, 0.72);
  --result-line: rgba(220, 182, 120, 0.2);
  --result-accent: #d7ad68;
  --result-glow: rgba(215, 173, 104, 0.22);
  --result-ring-hole: #100907;
}

.result-theme-matrixBlue {
  --result-bg: #071421;
  --result-card: rgba(18, 43, 66, 0.78);
  --result-line: rgba(100, 207, 236, 0.18);
  --result-accent: #70d8f0;
  --result-glow: rgba(112, 216, 240, 0.22);
  --result-ring-hole: #071421;
}

.result-page::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 0;
  z-index: -1;
  width: min(100vw, 430px);
  height: 100vh;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 82% 8%, var(--result-glow), transparent 28%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    var(--result-bg);
  background-size: auto, 36px 36px, 36px 36px, auto;
}

.result-hero,
.result-section {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--result-line);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    var(--result-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(14px) saturate(1.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.14);
}

.result-hero {
  min-height: 420px;
  padding: 22px 18px;
}

.result-kicker,
.section-eyebrow {
  color: var(--result-muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.result-badge {
  position: absolute;
  right: 16px;
  top: 18px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: var(--result-text);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--result-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

.result-prefix {
  margin: 18px 0 0;
  color: var(--result-muted);
  font-weight: 900;
}

.result-hero h1 {
  margin: 8px 0 0;
  color: var(--result-text);
  font-size: 34px;
  line-height: 1.12;
}

.result-hero h2 {
  margin: 4px 0 0;
  color: var(--result-accent);
  font-size: 18px;
}

.result-avatar,
.tarot-frame {
  height: 210px;
  display: grid;
  place-items: center;
  margin: 18px auto;
  border: 1px solid var(--result-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.result-avatar svg {
  width: 180px;
  height: 180px;
}

.tarot-frame {
  height: auto;
  padding: 10px;
  background: rgba(0, 0, 0, 0.22);
}

.tarot-frame svg {
  width: 230px;
  max-width: 100%;
}

.result-hero p,
.result-section p {
  color: var(--result-muted);
  line-height: 1.75;
}

.result-tags,
.match-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.result-tags span,
.match-row span {
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: var(--result-text);
  border: 1px solid var(--result-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  font-size: 12px;
  font-weight: 900;
}

.result-number-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  margin-top: 12px;
  overflow: hidden;
  color: var(--result-text);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(116, 232, 255, 0.18), rgba(255, 111, 202, 0.12)),
    rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 16px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.result-number-card span {
  display: block;
  color: rgba(255, 248, 237, 0.58);
  font-size: 11px;
  font-weight: 900;
}

.result-number-card strong {
  display: block;
  margin-top: 3px;
  color: #fff8ed;
  font-size: 19px;
  letter-spacing: 0.04em;
}

.result-number-card p {
  margin: 5px 0 0;
  color: rgba(255, 248, 237, 0.66);
  font-size: 12px;
  line-height: 1.55;
}

.result-number-card .secondary-btn {
  width: 88px;
  height: 38px;
  border-radius: 12px;
}

.result-number-content,
.result-number-card > .secondary-btn {
  position: relative;
  z-index: 1;
}

.score-number {
  margin: 22px 0 8px;
  color: var(--result-accent);
  font-size: 72px;
  line-height: 1;
  font-weight: 950;
}

.score-number small {
  font-size: 28px;
}

.result-page .result-section {
  padding: 18px;
  margin-top: 12px;
  color: var(--result-text);
}

.result-page .result-section h2 {
  color: var(--result-text);
  font-size: 24px;
}

.result-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 12px;
}

.result-title-row h2 {
  margin: 0;
}

.result-title-row strong {
  min-width: 58px;
  padding: 8px 10px;
  text-align: center;
  border: 1px solid var(--result-line);
  border-radius: 10px;
  color: var(--result-accent);
  background: rgba(255, 255, 255, 0.08);
}

.result-page .metric {
  border-color: var(--result-line);
  background: rgba(255, 255, 255, 0.08);
}

.result-page .ring {
  color: var(--result-accent);
  background: conic-gradient(var(--result-accent) var(--score), rgba(255, 255, 255, 0.12) 0);
}

.result-page .ring::after {
  background: var(--result-ring-hole);
}

.metric small {
  display: block;
  margin-top: 4px;
  color: var(--result-muted);
  font-size: 10px;
  font-weight: 800;
}

.result-bars,
.trait-list,
.code-list {
  display: grid;
  gap: 10px;
}

.result-bar,
.mini-card,
.trait-list > .result-subcard,
.code-list > .result-subcard {
  padding: 13px;
  border: 1px solid var(--result-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}

.result-bar div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 900;
}

.result-bar i {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--result-accent), rgba(255, 255, 255, 0.28));
}

.result-bar p {
  margin-top: 8px;
  font-size: 12px;
}

.radar-chart {
  width: 100%;
  min-height: 260px;
  margin-top: 10px;
  border: 1px solid var(--result-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.radar-chart text {
  fill: var(--result-muted);
  font-size: 8px;
  font-weight: 900;
}

.radar-chart .radar-frame {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1.2;
}

.radar-chart .radar-fill {
  fill: url("#resultRadarFill");
  stroke: rgba(255, 246, 255, 0.88);
  stroke-width: 1.9;
  filter: url("#resultRadarGlow") drop-shadow(0 10px 22px rgba(255, 111, 202, 0.22));
}

.code-list > .result-subcard {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
}

.code-list strong {
  color: var(--result-accent);
  font-size: 34px;
  line-height: 1;
}

.code-list b {
  display: block;
  color: var(--result-text);
  margin-bottom: 4px;
}

.code-list span {
  color: var(--result-muted);
  line-height: 1.65;
}

.trait-list > .result-subcard {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.trait-list i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--result-bg);
  background: var(--result-accent);
  font-style: normal;
  font-weight: 950;
}

.trait-list p,
.mini-card p {
  margin: 0;
}

.mini-card + .mini-card {
  margin-top: 10px;
}

.result-page .share-box {
  color: var(--result-text);
  border-color: var(--result-line);
  background: rgba(255, 255, 255, 0.08);
}

.result-summary-grid,
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.result-summary-grid > .result-subcard,
.compare-card,
.timeline-list > .result-subcard,
.check-list > .result-subcard,
.answer-review-list > .result-subcard {
  padding: 13px;
  border: 1px solid var(--result-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}

.result-summary-grid strong,
.compare-card strong,
.compare-card b {
  display: block;
  color: var(--result-text);
  font-size: 20px;
  line-height: 1.15;
}

.result-summary-grid span,
.compare-card span,
.answer-review-list span {
  color: var(--result-muted);
  font-size: 12px;
  font-weight: 800;
}

.compare-card p {
  margin-top: 8px;
  font-size: 12px;
}

.timeline-list,
.check-list,
.answer-review-list {
  display: grid;
  gap: 10px;
}

.timeline-list > .result-subcard,
.check-list > .result-subcard,
.answer-review-list > .result-subcard {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.timeline-list i,
.check-list span,
.answer-review-list strong {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--result-bg);
  background: var(--result-accent);
  font-style: normal;
  font-weight: 950;
}

.timeline-list strong,
.answer-review-list p {
  margin: 0 0 4px;
  color: var(--result-text);
  font-weight: 900;
}

.timeline-list p,
.check-list p,
.answer-review-list span {
  margin: 0;
}

.timeline-list > .result-subcard .result-subcard-content,
.check-list > .result-subcard .result-subcard-content,
.answer-review-list > .result-subcard .result-subcard-content {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.timeline-list > .result-subcard .result-subcard-content strong,
.check-list > .result-subcard .result-subcard-content span,
.answer-review-list > .result-subcard .result-subcard-content strong {
  grid-column: 1;
}

.timeline-list > .result-subcard .result-subcard-content p,
.check-list > .result-subcard .result-subcard-content p,
.answer-review-list > .result-subcard .result-subcard-content span {
  grid-column: 2;
}

.empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.text-capsule-shell {
  position: relative !important;
  width: var(--cap-width, fit-content) !important;
  max-width: 100% !important;
  min-width: min(var(--cap-min-width, 0px), 100%) !important;
  min-height: var(--cap-height, 26px) !important;
  height: auto !important;
  padding: 3px var(--cap-padding-x, 10px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--cap-bg) !important;
  border: var(--cap-border-width, 1px) solid var(--cap-border) !important;
  border-radius: var(--cap-radius, 999px) !important;
  box-shadow: var(--cap-shadow) !important;
  backdrop-filter: blur(var(--cap-blur, 10px)) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(var(--cap-blur, 10px)) saturate(1.16) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (min-width: 431px) {
  body {
    padding: 0;
  }
}

/* Result component dashboard refresh */
.result-page {
  --result-bg: #050506;
  --result-card: rgba(22, 22, 23, 0.92);
  --result-line: rgba(255, 255, 255, 0.095);
  --result-text: #f6f5f0;
  --result-muted: rgba(246, 245, 240, 0.58);
  --result-accent: #65dfc8;
  --result-hot: #ff5fbd;
  --result-warm: #ffbf3d;
  --result-violet: #7658ff;
  --result-blue: #58a6ff;
  --result-glow: rgba(101, 223, 200, 0.22);
  --result-ring-hole: #101012;
}

.result-theme-freshGreen {
  --result-bg: #050706;
  --result-card: rgba(18, 25, 22, 0.92);
  --result-accent: #65dfc8;
  --result-hot: #5da8ff;
  --result-warm: #ffcf52;
  --result-ring-hole: #111715;
}

.result-theme-warmReport {
  --result-bg: #080507;
  --result-card: rgba(29, 20, 26, 0.92);
  --result-accent: #ff72c8;
  --result-hot: #8b6cff;
  --result-warm: #ffbd4a;
  --result-ring-hole: #151016;
}

.result-theme-tarotGold {
  --result-bg: #070503;
  --result-card: rgba(27, 22, 17, 0.92);
  --result-accent: #ffbf3d;
  --result-hot: #ff6f9f;
  --result-warm: #65dfc8;
  --result-ring-hole: #14100d;
}

.result-theme-matrixBlue {
  --result-bg: #04070c;
  --result-card: rgba(14, 22, 34, 0.92);
  --result-accent: #58a6ff;
  --result-hot: #65dfc8;
  --result-warm: #ffbf3d;
  --result-ring-hole: #0d121a;
}

.result-page::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(180deg, #050506, #090a0d 48%, #050506);
  background-size: 28px 28px, 28px 28px, auto;
}

.result-hero,
.result-page .result-section {
  border-radius: 18px;
  border-color: rgba(255, 255, 255, 0.095);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.028)),
    var(--result-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.32);
}

.result-hero::before,
.result-page .result-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--result-accent), var(--result-hot), transparent);
  opacity: 0.62;
}

.result-page .result-section.result-template-fixed {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: start;
}

.result-template-fixed-content {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: inherit;
  align-content: start;
  gap: 8px;
}

.result-template-fixed-content h2,
.result-template-fixed-content p {
  margin: 0;
}

.result-template-fixed-background {
  z-index: 1;
}

.result-template-fixed-background::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--result-fixed-dim, 0.4);
  background: linear-gradient(180deg, rgba(7, 9, 12, 0.18), rgba(7, 9, 12, 0.92));
}

.result-template-fixed > .card-sheen-layer {
  z-index: 3;
}

.result-template-fixed-button {
  justify-self: stretch;
}

.result-fixed-share-actions {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.result-fixed-share-actions .primary-btn,
.result-fixed-share-actions .secondary-btn {
  width: 100%;
  min-width: 0;
}

.result-hero {
  min-height: 430px;
}

.result-visual-slots {
  display: grid;
  gap: 14px;
}

.result-visual-slot {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  padding: 18px;
  display: grid;
  align-content: end;
  isolation: isolate;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 191, 61, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.03)),
    var(--result-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
}

.result-visual-slot.has-image {
  min-height: 260px;
}

.result-visual-slot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--result-accent), var(--result-warm), transparent);
  opacity: 0.58;
}

.result-visual-slot-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
}

.result-visual-slot-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 6, 0.08), rgba(5, 5, 6, 0.74)),
    linear-gradient(90deg, rgba(5, 5, 6, 0.42), transparent 58%);
}

.result-visual-slot-content {
  display: grid;
  gap: 9px;
}

.result-visual-slot h2,
.result-visual-slot p {
  margin: 0;
}

.result-visual-slot h2 {
  color: var(--result-text);
  font-size: 22px;
  line-height: 1.24;
}

.result-visual-slot p {
  color: var(--result-muted);
  font-size: 13px;
  line-height: 1.75;
}

.result-component-image-slot {
  position: relative;
  overflow: hidden;
  min-height: 156px;
  margin: 14px 0;
  padding: 14px;
  display: grid;
  align-content: end;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 191, 61, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 30px rgba(0, 0, 0, 0.2);
}

.result-component-image-slot.has-image {
  min-height: 220px;
}

.result-component-image-slot.is-hero-visual,
.result-component-image-slot.is-score-visual,
.result-component-image-slot.is-tarot-visual {
  min-height: 220px;
  margin: 18px auto;
}

.result-component-image-slot.is-tarot-visual {
  max-width: 230px;
  min-height: 300px;
}

.result-component-image-slot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--result-accent), var(--result-warm), transparent);
  opacity: 0.58;
}

.result-component-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
}

.result-component-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 6, 0.02), rgba(5, 5, 6, 0.74)),
    linear-gradient(90deg, rgba(5, 5, 6, 0.36), transparent 62%);
}

.result-component-image-copy {
  display: grid;
  gap: 6px;
}

.result-component-image-copy span {
  width: fit-content;
  min-height: 22px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: rgba(246, 245, 240, 0.78);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.11);
  font-size: 10px;
  font-weight: 950;
}

.result-component-image-copy strong {
  color: var(--result-text);
  font-size: 18px;
  line-height: 1.22;
}

.result-component-image-copy p {
  margin: 0;
  color: var(--result-muted);
  font-size: 12px;
  line-height: 1.6;
}

.result-kicker,
.section-eyebrow {
  color: rgba(246, 245, 240, 0.5);
}

.result-badge,
.result-tags span,
.match-row span {
  color: rgba(246, 245, 240, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(135deg, rgba(101, 223, 200, 0.13), rgba(255, 95, 189, 0.08)),
    rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.result-avatar,
.tarot-frame {
  border-radius: 18px;
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(160deg, rgba(101, 223, 200, 0.12), rgba(255, 95, 189, 0.08)),
    rgba(255, 255, 255, 0.045);
}

.score-hero .score-number {
  width: 184px;
  height: 184px;
  margin: 24px auto 14px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--result-text);
  background:
    radial-gradient(circle at center, var(--result-ring-hole) 0 54%, transparent 55%),
    conic-gradient(from 220deg, var(--result-accent), var(--result-hot), var(--result-warm), rgba(255, 255, 255, 0.12) 78%, rgba(255, 255, 255, 0.09) 100%);
  box-shadow:
    0 0 34px rgba(101, 223, 200, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 56px;
}

.score-hero .score-number small {
  font-size: 20px;
}

.result-title-row strong,
.result-summary-grid > .result-subcard,
.compare-card,
.timeline-list > .result-subcard,
.check-list > .result-subcard,
.answer-review-list > .result-subcard,
.result-bar,
.mini-card,
.trait-list > .result-subcard,
.code-list > .result-subcard,
.result-page .share-box,
.result-page .metric {
  border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.105);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 12px 28px rgba(0, 0, 0, 0.18);
}

.result-subcard {
  position: relative;
  display: block;
  min-height: var(--article-card-height, 76px);
  padding: 13px;
  overflow: hidden;
  border: var(--article-card-border-width, 1px) solid var(--article-card-border, rgba(255, 255, 255, 0.105));
  border-radius: var(--article-card-radius, 16px);
  color: var(--article-card-text, var(--result-text));
  background: var(--article-card-bg);
  box-shadow: var(--article-card-shadow);
  opacity: var(--article-card-opacity, 1);
  backdrop-filter: blur(var(--article-card-blur, 10px)) saturate(1.12);
  -webkit-backdrop-filter: blur(var(--article-card-blur, 10px)) saturate(1.12);
}

.result-subcard > :not(.result-subcard-image-layer):not(.result-subcard-sheen-layer) {
  position: relative;
  z-index: 1;
}

.result-subcard-content {
  display: block;
  width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

.result-subcard-content > * {
  min-width: 0;
}

.result-subcard-image-layer,
.result-subcard-sheen-layer {
  position: absolute;
  pointer-events: none;
  inset: 0;
}

.result-subcard-image-layer {
  z-index: 0;
  background-repeat: no-repeat;
}

.result-subcard-sheen-layer {
  z-index: 2;
  transform: translateX(-130%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  animation: result-subcard-sheen var(--card-sheen-time, 4.6s) ease-in-out infinite;
}

@keyframes result-subcard-sheen {
  0%,
  58% {
    transform: translateX(-130%) skewX(-20deg);
  }
  100% {
    transform: translateX(130%) skewX(-20deg);
  }
}

.metric-grid {
  gap: 12px;
}

.result-page .metric {
  min-height: 150px;
}

.result-page .metric .result-subcard-content {
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
}

.result-page .ring {
  width: 84px;
  height: 84px;
  color: var(--result-text);
  background:
    conic-gradient(from 218deg, var(--result-accent) calc(var(--score) * .45), var(--result-blue) calc(var(--score) * .72), var(--result-hot) var(--score), rgba(255, 255, 255, 0.11) 0);
  box-shadow: 0 0 26px rgba(101, 223, 200, 0.11);
}

.result-page .ring::after {
  width: 58px;
  height: 58px;
  background: var(--result-ring-hole);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.result-bar {
  position: relative;
  overflow: hidden;
}

.result-wave-chart {
  width: 100%;
  min-height: 132px;
  margin: 4px 0 12px;
  padding: 10px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 18px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(145deg, rgba(101, 223, 200, 0.075), rgba(255, 95, 189, 0.045)),
    rgba(0, 0, 0, 0.18);
  background-size: 24px 24px, 24px 24px, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 12px 28px rgba(0, 0, 0, 0.18);
}

.result-wave-chart polyline {
  filter: drop-shadow(0 0 8px rgba(101, 223, 200, 0.2));
}

.result-bar::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  top: 48px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
}

.result-bar i {
  position: relative;
  z-index: 1;
  height: 8px;
  background: linear-gradient(90deg, var(--result-warm), var(--result-hot), var(--result-accent), var(--result-blue));
  box-shadow: 0 0 18px rgba(101, 223, 200, 0.16);
}

.radar-chart {
  min-height: 290px;
  border-radius: 18px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    rgba(0, 0, 0, 0.18);
  background-size: 18px 18px, 18px 18px, auto;
}

.code-list strong {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #15100b;
  background: linear-gradient(135deg, var(--result-warm), var(--result-hot));
  font-size: 24px;
}

.code-list .result-subcard-content {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.code-list .result-subcard-content span {
  display: grid;
  gap: 4px;
  color: var(--result-muted);
  line-height: 1.5;
}

.code-list .result-subcard-content b {
  color: var(--result-text);
}

.trait-list i,
.timeline-list i,
.check-list span,
.answer-review-list strong {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  border-radius: 10px;
  color: #09090a;
  background: linear-gradient(135deg, var(--result-warm), var(--result-hot), var(--result-accent));
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.trait-list .result-subcard-content,
.timeline-list .result-subcard-content,
.check-list .result-subcard-content,
.answer-review-list .result-subcard-content {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.trait-list .result-subcard-content p,
.timeline-list .result-subcard-content p,
.check-list .result-subcard-content p,
.answer-review-list .result-subcard-content p {
  margin: 0;
  color: var(--result-muted);
  line-height: 1.65;
}

.timeline-list .result-subcard-content strong,
.answer-review-list .result-subcard-content span {
  display: block;
  color: var(--result-text);
  font-weight: 900;
}

.timeline-list .result-subcard-content strong {
  grid-column: 2;
}

.timeline-list .result-subcard-content p,
.answer-review-list .result-subcard-content span {
  grid-column: 2;
}

.result-summary-grid strong,
.compare-card strong,
.compare-card b {
  color: var(--result-text);
}

.result-page .share-box {
  color: rgba(246, 245, 240, 0.9);
  background:
    linear-gradient(135deg, rgba(255, 191, 61, 0.16), rgba(255, 95, 189, 0.12), rgba(101, 223, 200, 0.1)),
    rgba(0, 0, 0, 0.16);
}

.result-page .result-subcard {
  display: block;
  border: var(--article-card-border-width, 1px) solid var(--article-card-border, rgba(255, 255, 255, 0.105));
  border-radius: var(--article-card-radius, 16px);
  color: var(--article-card-text, var(--result-text));
  background: var(--article-card-bg);
  box-shadow: var(--article-card-shadow);
}

.result-page .code-list .result-subcard,
.result-page .trait-list .result-subcard,
.result-page .timeline-list .result-subcard,
.result-page .check-list .result-subcard,
.result-page .answer-review-list .result-subcard,
.result-page .result-summary-grid .result-subcard,
.result-page .compare-grid .result-subcard {
  display: block;
  grid-template-columns: none;
  align-items: initial;
  gap: 0;
}

.result-page .result-subcard-content {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.result-summary-grid .result-subcard-content,
.compare-grid .result-subcard-content {
  display: grid;
  align-content: center;
  gap: 4px;
}

.result-summary-grid .result-subcard-content strong,
.compare-grid .result-subcard-content strong,
.compare-grid .result-subcard-content b {
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.result-summary-grid .result-subcard-content span,
.compare-grid .result-subcard-content span,
.match-row .result-subcard-content,
.result-page .share-box .result-subcard-content,
.trait-list .result-subcard-content p,
.timeline-list .result-subcard-content p,
.check-list .result-subcard-content p,
.answer-review-list .result-subcard-content p {
  min-width: 0;
  overflow-wrap: break-word;
  line-height: 1.6;
}

.result-page .result-bar .result-subcard-content {
  display: block;
  margin: 0;
}

.result-page .result-bar .result-subcard-content > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 10px;
}

.result-page .result-bar .result-subcard-content > div strong,
.result-page .result-bar .result-subcard-content > div span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.match-row .result-subcard-content,
.result-page .share-box .result-subcard-content {
  line-height: 1.6;
  overflow-wrap: break-word;
}

.relationship-pattern-card,
.type-archive-card,
.preference-map,
.consent-board,
.script-paper,
.meme-poster-card {
  position: relative;
  display: grid;
  gap: 12px;
}

.relationship-pattern-card > p,
.communication-script-section > p,
.meme-poster-card > p {
  margin: 0;
  color: var(--result-muted);
  line-height: 1.72;
}

.pattern-orbit {
  display: grid;
  gap: 10px;
}

.pattern-node {
  min-height: 96px;
}

.pattern-node .result-subcard-content {
  display: grid;
  gap: 4px;
}

.pattern-node small,
.preference-pin span,
.archive-body span,
.meme-poster-card > span {
  width: fit-content;
  min-height: 22px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: rgba(255, 244, 220, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  font-size: 10px;
  font-weight: 950;
}

.pattern-node strong,
.archive-body strong,
.preference-pin strong,
.consent-item strong,
.script-line strong,
.script-avoid strong {
  color: var(--result-text);
  line-height: 1.28;
}

.relationship-pattern-card blockquote {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--result-accent);
  border-radius: 14px;
  color: rgba(246, 245, 240, 0.82);
  background: rgba(101, 223, 200, 0.075);
  line-height: 1.65;
}

.type-archive-card {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026)),
    rgba(0, 0, 0, 0.12);
}

.archive-stamp {
  width: fit-content;
  min-height: 34px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 191, 61, 0.32);
  border-radius: 12px;
  color: var(--result-warm);
  background: rgba(255, 191, 61, 0.07);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
}

.archive-body {
  display: grid;
  gap: 8px;
}

.archive-body strong {
  font-size: 28px;
}

.archive-body p,
.archive-note p,
.preference-pin p,
.consent-item p,
.script-line p,
.script-avoid p {
  margin: 0;
  color: var(--result-muted);
  line-height: 1.62;
}

.archive-notes {
  display: grid;
  gap: 10px;
}

.archive-note .result-subcard-content {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.archive-note b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #11100d;
  background: linear-gradient(135deg, var(--result-warm), var(--result-hot));
  font-size: 12px;
}

.preference-map {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preference-pin {
  min-height: 126px;
}

.preference-pin .result-subcard-content {
  display: grid;
  align-content: start;
  gap: 7px;
}

.preference-pin strong {
  font-size: 20px;
}

.pin-1,
.pin-4 {
  transform: translateY(8px);
}

.pin-2,
.pin-5 {
  transform: translateY(-2px);
}

.consent-board {
  gap: 10px;
}

.consent-item .result-subcard-content {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
}

.consent-item i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  grid-row: span 2;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--result-accent), var(--result-blue));
  box-shadow: 0 0 18px rgba(101, 223, 200, 0.16);
}

.consent-item i::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(8, 10, 16, 0.92);
}

.consent-item .status-stop {
  background: linear-gradient(135deg, var(--result-hot), #ff8d86);
}

.consent-item .status-ask {
  background: linear-gradient(135deg, var(--result-warm), var(--result-hot));
}

.consent-item p {
  grid-column: 2;
}

.script-paper {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 20px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.038) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.13);
  background-size: 100% 30px, auto, auto;
}

.script-line .result-subcard-content {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 6px 10px;
}

.script-line b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  grid-row: span 2;
  border-radius: 999px;
  color: #11100d;
  background: linear-gradient(135deg, var(--result-blue), var(--result-accent));
}

.script-line p {
  grid-column: 2;
}

.script-avoid {
  border-color: rgba(255, 141, 134, 0.24);
}

.meme-poster-card {
  min-height: 360px;
  align-content: end;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 191, 61, 0.22), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(255, 95, 189, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(101, 223, 200, 0.14), rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 44px rgba(0, 0, 0, 0.22);
}

.meme-poster-card h2 {
  font-size: 34px;
  line-height: 1.08;
}

.meme-poster-card .result-component-image-slot {
  position: absolute;
  inset: 0;
  min-height: 100%;
  border: 0;
  border-radius: inherit;
  opacity: 0.32;
}

.meme-poster-card > :not(.result-component-image-slot) {
  position: relative;
  z-index: 1;
}

.result-blueprint-kink-preference-report-v1 {
  --kink-bg: #090605;
  --kink-paper: #120d0b;
  --kink-card: #0f0b0a;
  --kink-ink: #f5e4c4;
  --kink-muted: rgba(245, 228, 196, 0.64);
  --kink-soft: #1a1110;
  --kink-line: rgba(185, 144, 72, 0.24);
  --kink-purple: #b99048;
  --kink-pink: #d6b36e;
  --kink-blue: #8f6b36;
  --kink-green: #9f7a42;
  --kink-warn: #d8a84f;
  --result-text: var(--kink-ink);
  --result-muted: var(--kink-muted);
  --result-card: var(--kink-card);
  --result-line: var(--kink-line);
  margin: 54px -4px 0;
  padding: 0 10px 22px;
  color: var(--kink-ink);
}

.result-blueprint-kink-preference-report-v1::before {
  background:
    radial-gradient(circle at 50% 3%, rgba(185, 144, 72, 0.17), transparent 28%),
    radial-gradient(circle at 12% 26%, rgba(86, 28, 23, 0.28), transparent 32%),
    linear-gradient(rgba(185, 144, 72, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 144, 72, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, #050403 0%, #100908 48%, #080504 100%);
  background-size: auto, auto, 24px 24px, 24px 24px, auto;
}

.result-blueprint-kink-preference-report-v1 .result-number-card,
.result-blueprint-kink-preference-report-v1 .result-template-cta,
.result-blueprint-kink-preference-report-v1 .result-template-note,
.result-blueprint-kink-preference-report-v1 .result-template-contact {
  color: var(--kink-ink);
  border-color: var(--kink-line);
  background:
    linear-gradient(135deg, rgba(185, 144, 72, 0.1), rgba(41, 20, 17, 0.88)),
    var(--kink-card);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
}

.result-blueprint-kink-preference-report-v1 .result-number-card span,
.result-blueprint-kink-preference-report-v1 .result-number-card p,
.result-blueprint-kink-preference-report-v1 .result-template-cta p,
.result-blueprint-kink-preference-report-v1 .result-template-note p,
.result-blueprint-kink-preference-report-v1 .result-template-contact p {
  color: var(--kink-muted);
}

.result-blueprint-kink-preference-report-v1 .result-number-card strong,
.result-blueprint-kink-preference-report-v1 .result-template-cta h2,
.result-blueprint-kink-preference-report-v1 .result-template-note h2,
.result-blueprint-kink-preference-report-v1 .result-template-contact h2 {
  color: var(--kink-ink);
}

.kink-report {
  display: grid;
  gap: 12px;
  padding-top: 12px;
}

.standard-report {
  display: grid;
  gap: 12px;
  padding-top: 12px;
}

.standard-report-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--kink-line);
  border-radius: 8px;
  color: var(--kink-ink);
  background:
    radial-gradient(circle at 86% 18%, rgba(56, 189, 248, 0.2), transparent 34%),
    linear-gradient(145deg, #fff, #f4effb);
  box-shadow: 0 14px 30px rgba(65, 43, 96, 0.13);
}

.standard-report-copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.standard-report-copy h1 {
  margin: 0;
  color: var(--kink-ink);
  font-size: 28px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.standard-report-copy p,
.standard-report-summary p {
  margin: 0;
  color: var(--kink-muted);
  line-height: 1.72;
}

.standard-report-visual {
  min-height: 144px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--kink-line);
  border-radius: 8px;
  background: #fff;
}

.standard-report-visual svg {
  width: 112px;
  height: 112px;
}

.standard-report-summary {
  display: grid;
  gap: 12px;
}

.kink-hero,
.kink-report-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--kink-line);
  border-radius: 8px;
  background: var(--kink-card);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34);
}

.kink-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px;
  gap: 12px;
  padding: 14px;
  background:
    radial-gradient(circle at 83% 16%, rgba(185, 144, 72, 0.3), transparent 34%),
    radial-gradient(circle at 20% 90%, rgba(80, 26, 24, 0.38), transparent 46%),
    linear-gradient(145deg, #110b09, #24110f 62%, #0a0605 100%);
  color: var(--kink-ink);
}

.kink-hero-copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.kink-mini-label,
.kink-section-head span {
  width: fit-content;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(185, 144, 72, 0.26);
  border-radius: 999px;
  background: rgba(185, 144, 72, 0.08);
  color: #d6b36e;
  font-size: 10px;
  font-weight: 950;
}

.kink-hero .kink-mini-label {
  color: #f0d48e;
  border-color: rgba(185, 144, 72, 0.36);
  background: rgba(185, 144, 72, 0.1);
}

.kink-hero h1 {
  margin: 0;
  color: #f7e7c7;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.kink-hero p {
  margin: 0;
  color: rgba(247, 231, 199, 0.72);
  font-size: 12px;
  line-height: 1.65;
}

.kink-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kink-hero-tags span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #f3d58c;
  border: 1px solid rgba(185, 144, 72, 0.28);
  background: rgba(185, 144, 72, 0.11);
  font-size: 10px;
  font-weight: 900;
}

.kink-hero-visual {
  min-width: 0;
  min-height: 156px;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid rgba(185, 144, 72, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(185, 144, 72, 0.16), rgba(255, 255, 255, 0.03)),
    rgba(8, 5, 4, 0.82);
}

.kink-hero-image,
.kink-hero-mascot {
  width: 100%;
  height: 100%;
  min-height: 156px;
  background-repeat: no-repeat;
}

.kink-hero-mascot {
  display: grid;
  place-items: center;
}

.kink-hero-mascot svg {
  width: 120px;
  height: 120px;
}

.kink-hero-summary,
.kink-stat-grid {
  grid-column: 1 / -1;
}

.kink-hero-summary {
  padding: 12px;
  border-radius: 8px;
  color: var(--kink-ink);
  border: 1px solid rgba(185, 144, 72, 0.18);
  background: rgba(8, 5, 4, 0.72);
}

.kink-hero-summary strong {
  display: block;
  color: var(--kink-ink);
  font-size: 15px;
}

.kink-hero-summary p {
  margin-top: 6px;
  color: var(--kink-muted);
}

.kink-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.kink-stat-grid article,
.kink-contrast-grid article,
.kink-map-grid article,
.kink-badge,
.kink-consent-list article,
.kink-script-list article,
.kink-action-steps article,
.kink-risk-note,
.kink-avoid {
  border: 1px solid var(--kink-line);
  border-radius: 8px;
  background: var(--kink-paper);
}

.kink-stat-grid article {
  padding: 10px;
}

.kink-stat-grid span,
.kink-contrast-grid span,
.kink-map-grid span {
  display: block;
  color: var(--kink-muted);
  font-size: 10px;
  font-weight: 950;
}

.kink-stat-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--kink-purple);
  font-size: 21px;
  line-height: 1.05;
}

.kink-stat-grid p,
.kink-contrast-grid p,
.kink-map-grid p {
  margin: 4px 0 0;
  color: var(--kink-muted);
  font-size: 11px;
  line-height: 1.55;
}

.kink-report-nav {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--kink-line);
  border-radius: 8px;
  background: rgba(8, 5, 4, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.kink-report-nav span {
  min-width: 0;
  min-height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--kink-purple);
  background: rgba(185, 144, 72, 0.11);
  font-size: 10px;
  font-weight: 950;
}

.kink-report-card {
  padding: 14px;
}

.kink-section-head {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.kink-section-head h2 {
  margin: 0;
  color: var(--kink-ink);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0;
}

.kink-id-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(185, 144, 72, 0.12), rgba(67, 24, 20, 0.12)),
    #0b0706;
}

.kink-id-panel small {
  color: var(--kink-muted);
  font-size: 10px;
  font-weight: 950;
}

.kink-id-panel strong {
  display: block;
  margin-top: 5px;
  color: var(--kink-purple);
  font-size: 22px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.kink-id-panel p,
.kink-script-scenario,
.kink-share-card p {
  margin: 8px 0 0;
  color: var(--kink-muted);
  line-height: 1.72;
}

.kink-id-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.kink-id-metrics span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid rgba(185, 144, 72, 0.18);
  background: rgba(18, 13, 11, 0.92);
  color: var(--kink-muted);
  font-size: 11px;
  font-weight: 800;
}

.kink-id-metrics b {
  color: var(--kink-pink);
  font-size: 17px;
}

.kink-star-map {
  overflow: hidden;
  border: 1px solid var(--kink-line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(185, 144, 72, 0.17), transparent 44%),
    linear-gradient(rgba(185, 144, 72, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 144, 72, 0.06) 1px, transparent 1px),
    linear-gradient(135deg, #100b09, #080504);
  background-size: 20px 20px, 20px 20px, auto;
}

.kink-star-map svg {
  display: block;
  width: 100%;
  height: 210px;
}

.kink-star-axis {
  stroke: rgba(185, 144, 72, 0.22);
  stroke-width: 1;
}

.kink-star-ring {
  fill: none;
  stroke: rgba(185, 144, 72, 0.18);
  stroke-width: 1;
}

.kink-star-fill {
  fill: rgba(185, 144, 72, 0.16);
  stroke: none;
}

.kink-star-line {
  fill: none;
  stroke: url("#kinkStarLine");
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kink-star-map circle {
  fill: #100b09;
  stroke: #f2d18b;
  stroke-width: 2;
}

.kink-contrast-grid,
.kink-map-grid,
.kink-badge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.kink-contrast-grid {
  margin-top: 10px;
}

.kink-contrast-grid article,
.kink-map-grid article {
  padding: 10px;
}

.kink-badge {
  min-height: 132px;
  padding: 10px;
  display: grid;
  align-content: start;
  gap: 6px;
}

.kink-badge i,
.kink-action-steps i {
  width: 34px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #f4dc9d;
  border: 1px solid rgba(185, 144, 72, 0.34);
  background: linear-gradient(135deg, rgba(185, 144, 72, 0.18), rgba(77, 29, 24, 0.42));
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
}

.kink-badge strong,
.kink-map-grid strong {
  color: var(--kink-ink);
  line-height: 1.24;
}

.kink-badge span {
  color: var(--kink-pink);
  font-size: 18px;
  font-weight: 950;
}

.kink-badge p {
  margin: 0;
  color: var(--kink-muted);
  font-size: 11px;
  line-height: 1.5;
}

.kink-dimension-group {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.kink-dimension-group h3 {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--kink-purple);
  border: 1px solid rgba(185, 144, 72, 0.14);
  background: rgba(185, 144, 72, 0.08);
  font-size: 13px;
}

.kink-dimension-row {
  padding: 10px;
  border: 1px solid var(--kink-line);
  border-radius: 8px;
  background: rgba(18, 13, 11, 0.92);
}

.kink-dimension-row > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--kink-ink);
  font-size: 12px;
  font-weight: 950;
}

.kink-dimension-row > div strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.kink-dimension-row > div span {
  color: var(--kink-pink);
}

.kink-dimension-row i {
  display: block;
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(185, 144, 72, 0.13);
}

.kink-dimension-row i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7d5b28, #f2d18b, #9a6f2d);
}

.kink-dimension-row p {
  margin: 7px 0 0;
  color: var(--kink-muted);
  font-size: 11px;
  line-height: 1.55;
}

.kink-map-grid article strong {
  display: block;
  margin-top: 5px;
  font-size: 17px;
}

.kink-consent-list,
.kink-script-list,
.kink-action-steps {
  display: grid;
  gap: 8px;
}

.kink-consent-list article {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
}

.kink-consent-list i {
  min-height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #090605;
  background: var(--kink-purple);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.kink-consent-list .is-go i {
  background: #c9b77b;
}

.kink-consent-list .is-ask i {
  background: #b99048;
}

.kink-consent-list .is-stop i {
  background: #a34a3f;
  color: #fff7e8;
}

.kink-consent-list p,
.kink-risk-note li,
.kink-script-list p,
.kink-action-steps p,
.kink-avoid p {
  margin: 0;
  color: var(--kink-muted);
  line-height: 1.62;
}

.kink-risk-note {
  margin-top: 10px;
  padding: 12px;
}

.kink-risk-note strong,
.kink-avoid strong {
  color: var(--kink-ink);
}

.kink-risk-note ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.kink-script-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
}

.kink-script-list b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #090605;
  background: linear-gradient(135deg, #f2d18b, var(--kink-purple));
}

.kink-script-list strong,
.kink-action-steps strong {
  display: block;
  color: var(--kink-ink);
  line-height: 1.35;
}

.kink-script-list p {
  margin-top: 5px;
}

.kink-avoid {
  margin-top: 10px;
  padding: 12px;
  border-color: rgba(163, 74, 63, 0.28);
  background: rgba(69, 21, 18, 0.28);
}

.kink-action-steps article {
  padding: 10px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px 10px;
}

.kink-action-steps p {
  grid-column: 2;
}

.kink-share-card {
  display: grid;
  gap: 10px;
  background:
    linear-gradient(135deg, rgba(185, 144, 72, 0.12), rgba(68, 24, 19, 0.18)),
    #0f0b0a;
}

.kink-share-card p {
  margin: 0;
}

.kink-share-card .primary-btn,
.kink-share-card .secondary-btn {
  width: 100%;
}

.kink-story-card,
.kink-shadow-card,
.kink-compat-card {
  background:
    radial-gradient(circle at 92% 8%, rgba(185, 144, 72, 0.12), transparent 30%),
    linear-gradient(145deg, rgba(20, 13, 11, 0.96), rgba(9, 6, 5, 0.98));
}

.kink-long-reading {
  display: grid;
  gap: 10px;
}

.kink-long-reading p {
  margin: 0;
  color: var(--kink-muted);
  font-size: 13px;
  line-height: 1.82;
}

.kink-shadow-meter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.kink-shadow-meter span {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(185, 144, 72, 0.18);
  border-radius: 8px;
  color: var(--kink-muted);
  background: rgba(18, 13, 11, 0.9);
  font-size: 11px;
  font-weight: 850;
}

.kink-shadow-meter b {
  color: #f2d18b;
  font-size: 17px;
}

.kink-compat-layout {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.kink-compat-image {
  min-height: 178px;
  border: 1px solid rgba(185, 144, 72, 0.32);
  border-radius: 8px;
  background-repeat: no-repeat;
  background-color: #080504;
}

.kink-compat-layout p {
  margin: 0 0 10px;
  color: var(--kink-muted);
  line-height: 1.72;
}

.themed-report {
  --theme-bg: #f6f8fb;
  --theme-card: #ffffff;
  --theme-ink: #111827;
  --theme-muted: rgba(17, 24, 39, 0.66);
  --theme-line: rgba(17, 24, 39, 0.1);
  --theme-accent: #2563eb;
  --theme-accent-2: #14b8a6;
  display: grid;
  gap: 12px;
  padding-top: 12px;
  color: var(--theme-ink);
}

.result-blueprint-mbti-profile-report-v1 {
  --theme-bg: #061423;
  --theme-card: #0d2134;
  --theme-ink: #e9f8ff;
  --theme-muted: rgba(233, 248, 255, 0.66);
  --theme-line: rgba(80, 190, 235, 0.22);
  --theme-accent: #38bdf8;
  --theme-accent-2: #22c55e;
}

.result-blueprint-attachment-security-report-v1,
.result-blueprint-love-brain-index-report-v1 {
  --theme-bg: #fff1f5;
  --theme-card: #ffffff;
  --theme-ink: #3b1722;
  --theme-muted: rgba(59, 23, 34, 0.64);
  --theme-line: rgba(244, 114, 182, 0.2);
  --theme-accent: #e95086;
  --theme-accent-2: #fb923c;
}

.result-blueprint-stress-stability-report-v1,
.result-blueprint-social-boundary-report-v1 {
  --theme-bg: #eef8fb;
  --theme-card: #ffffff;
  --theme-ink: #102a33;
  --theme-muted: rgba(16, 42, 51, 0.66);
  --theme-line: rgba(14, 116, 144, 0.16);
  --theme-accent: #0e7490;
  --theme-accent-2: #10b981;
}

.result-blueprint-workplace-profile-report-v1 {
  --theme-bg: #f0fbf5;
  --theme-card: #ffffff;
  --theme-ink: #123125;
  --theme-muted: rgba(18, 49, 37, 0.66);
  --theme-line: rgba(34, 197, 94, 0.16);
  --theme-accent: #16a34a;
  --theme-accent-2: #0ea5e9;
}

.result-blueprint-sbti-funny-report-v1 {
  --theme-bg: #101707;
  --theme-card: #8aca10;
  --theme-ink: #172006;
  --theme-muted: rgba(23, 32, 6, 0.7);
  --theme-line: rgba(23, 32, 6, 0.2);
  --theme-accent: #4d7c0f;
  --theme-accent-2: #111827;
}

.result-blueprint-kink-quick-report-v1 {
  --kink-bg: #090605;
  --kink-paper: #120d0b;
  --kink-card: #0f0b0a;
  --kink-ink: #f5e4c4;
  --kink-muted: rgba(245, 228, 196, 0.64);
  --kink-soft: #1a1110;
  --kink-line: rgba(185, 144, 72, 0.24);
  --kink-purple: #b99048;
  --kink-pink: #d6b36e;
  --kink-blue: #8f6b36;
  --kink-green: #9f7a42;
  --kink-warn: #d8a84f;
  --result-text: var(--kink-ink);
  --result-muted: var(--kink-muted);
  --result-card: var(--kink-card);
  --result-line: var(--kink-line);
  margin: 54px -4px 0;
  padding: 0 10px 22px;
  color: var(--kink-ink);
}

.result-blueprint-mbti-profile-report-v1::before,
.result-blueprint-attachment-security-report-v1::before,
.result-blueprint-love-brain-index-report-v1::before,
.result-blueprint-stress-stability-report-v1::before,
.result-blueprint-social-boundary-report-v1::before,
.result-blueprint-workplace-profile-report-v1::before,
.result-blueprint-sbti-funny-report-v1::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    var(--theme-bg);
  background-size: 22px 22px, 22px 22px, auto;
}

.themed-hero,
.themed-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: var(--theme-card);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.themed-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 12px;
  padding: 14px;
  background:
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--theme-accent) 24%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-card) 86%, var(--theme-accent) 14%), var(--theme-card));
}

.themed-hero-copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.themed-kicker,
.themed-section-head span {
  width: fit-content;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 28%, transparent);
  border-radius: 999px;
  color: var(--theme-accent);
  background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
  font-size: 10px;
  font-weight: 950;
}

.themed-hero h1 {
  margin: 0;
  color: var(--theme-ink);
  font-size: 30px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.themed-hero p,
.themed-card p {
  margin: 0;
  color: var(--theme-muted);
  line-height: 1.72;
}

.themed-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.themed-chip-row span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--theme-ink);
  background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
  font-size: 10px;
  font-weight: 900;
}

.themed-hero-mark {
  min-height: 142px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--theme-accent) 20%, transparent), transparent),
    color-mix(in srgb, var(--theme-card) 88%, #fff 12%);
  text-align: center;
}

.themed-hero-mark b {
  display: block;
  color: var(--theme-accent);
  font-size: 34px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.themed-hero-mark span {
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 900;
}

.themed-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.themed-section-head {
  display: grid;
  gap: 8px;
}

.themed-section-head h2 {
  margin: 0;
  color: var(--theme-ink);
  font-size: 20px;
  line-height: 1.28;
}

.themed-snapshot-grid,
.themed-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.themed-snapshot-grid article,
.themed-insight-grid article,
.themed-action-list article,
.themed-meter-row {
  border: 1px solid var(--theme-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--theme-card) 88%, var(--theme-accent) 12%);
}

.themed-snapshot-grid article {
  padding: 10px;
}

.themed-snapshot-grid span {
  display: block;
  color: var(--theme-accent);
  font-size: 10px;
  font-weight: 950;
}

.themed-snapshot-grid p {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.55;
}

.themed-meter-list {
  display: grid;
  gap: 8px;
}

.themed-meter-row {
  padding: 10px;
}

.themed-meter-row > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--theme-ink);
  font-size: 12px;
  font-weight: 950;
}

.themed-meter-row > div strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.themed-meter-row > div span {
  color: var(--theme-accent);
}

.themed-meter-row i {
  display: block;
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-accent) 14%, transparent);
}

.themed-meter-row i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-2));
}

.themed-meter-row p {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.55;
}

.themed-insight-grid article {
  min-height: 132px;
  padding: 10px;
  display: grid;
  align-content: start;
  gap: 6px;
}

.themed-insight-grid i,
.themed-action-list i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--theme-accent), var(--theme-accent-2));
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
}

.themed-insight-grid strong,
.themed-action-list strong {
  color: var(--theme-ink);
  line-height: 1.35;
}

.themed-insight-grid p,
.themed-action-list p {
  font-size: 11px;
  line-height: 1.6;
}

.themed-action-list {
  display: grid;
  gap: 8px;
}

.themed-action-list article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
}

@media (max-width: 420px) {
  .preference-map {
    grid-template-columns: 1fr;
  }

  .pin-1,
  .pin-2,
  .pin-4,
  .pin-5 {
    transform: none;
  }

  .kink-hero {
    grid-template-columns: minmax(0, 1fr) 110px;
  }

  .standard-report-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .kink-stat-grid,
  .kink-contrast-grid,
  .kink-map-grid,
  .kink-badge-grid,
  .kink-shadow-meter,
  .kink-compat-layout,
  .package-result-label-list,
  .themed-hero,
  .themed-snapshot-grid,
  .themed-insight-grid {
    grid-template-columns: 1fr;
  }

  .kink-compat-image {
    min-height: 220px;
  }
}