/* ui_test scoped styles */
.fs-test .fs-modern-section { background: linear-gradient(180deg, #f8fafc, #eef2ff); padding: 1.25rem 0; }
.fs-test .fs-modern-container { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
.fs-test .fs-modern-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.25rem 1rem 1.25rem; box-shadow: 0 10px 30px rgba(31,41,55,.06); }
.fs-test .fs-modern-title { margin: 0 0 .5rem; font-size: 1.25rem; line-height: 1.2; font-weight: 800; color: #111827; }
.fs-test .fs-lead { margin: 0 0 .5rem; color: #1f2937; font-size: .98rem; }
.fs-test .fs-dropzone { position: relative; border: 2px dashed #c7d2fe; border-radius: .75rem; background: #f8fafc; transition: background .2s, border-color .2s; }
.fs-test .fs-dropzone:hover { background: #f1f5f9; border-color: #a5b4fc; }
.fs-test .fs-dropzone:focus-within { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.fs-test .fs-dropzone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.fs-test .fs-dropzone-inner { text-align: center; padding: 1.25rem; display: grid; place-items: center; gap: .4rem; }
.fs-test .fs-icon { font-size: 1.9rem; margin-bottom: .1rem; }
.fs-test .fs-tap { color: #1f2937; font-size: 1rem; font-weight: 700; }
.fs-test .fs-subhint { color: #9ca3af; font-size: .8rem; line-height: 1.4; }
.fs-test .fs-dropzone, .fs-test .fs-dropzone-inner { width: 100%; box-sizing: border-box; }
.fs-test #fs-preview-img { display: none; width: 100%; max-width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: .5rem; border: 1px solid #e5e7eb; }
.fs-test .fs-action { margin-top: 1.25rem; display: flex; justify-content: center; }
.fs-test .fs-primary { appearance: none; border: 0; background: #4f46e5; color: #fff; padding: .9rem 1.25rem; border-radius: .8rem; font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px rgba(79,70,229,.28); transition: transform .06s ease, box-shadow .2s ease; width: 100%; max-width: 420px; font-size: 1.1rem; }
.fs-test .fs-primary:hover { box-shadow: 0 8px 18px rgba(79,70,229,.3); }
.fs-test .fs-primary:active { transform: translateY(1px); }
.fs-test .fs-primary:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
/* accessibility */
.fs-test .fs-primary:focus-visible { outline: 3px solid rgba(99,102,241,.35); outline-offset: 2px; }
.fs-test .fs-error { margin-top: 1.25rem; padding: .75rem 1rem; border: 1px solid #fdba74; background: #fff7ed; color: #9a3412; border-radius: .5rem; font-size: .95rem; }
.fs-test .fs-note { margin-top: 1.25rem; color: #6b7280; font-size: .85rem; text-align: center; }
.fs-test .fs-loading { position: fixed; inset: 0; background: rgba(15,23,42,.4); display: none; align-items: center; justify-content: center; z-index: 9999; }
.fs-test .fs-loading-inner { display: grid; place-items: center; gap: .75rem; color: #fff; font-weight: 700; }
.fs-test .fs-spinner { width: 56px; height: 56px; border: 4px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: fs-spin 1s linear infinite; }
@keyframes fs-spin { to { transform: rotate(360deg); } }
@media (max-width: 380px) {
  .fs-test .fs-modern-container { padding: 0 .75rem; }
  .fs-test .fs-primary { font-size: 1.05rem; }
}

/* unified spacing */

.fs-test .fs-unified-container { max-width: 64rem; margin: 0 auto; padding-left: 2rem; padding-right: 2rem; }
.fs-test .fs-section { padding: 3rem 0; }
@media (max-width: 640px) {
  .fs-test .fs-unified-container { padding-left: 1rem; padding-right: 1rem; }
  .fs-test .fs-section { padding: 2.25rem 0; }
}

/* center fix removed: revert to original spacing */
.fs-test .fs-section-card { max-width: 48rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 30px rgba(31,41,55,.06); }

/* testimonials */
.fs-test .testimonials-section { background: #fff; }
.fs-test .testimonials-section { padding: 3rem 0; }
.fs-test .testimonials-section .fs-unified-container { max-width: 64rem; margin: 0 auto; padding-left: 2rem; padding-right: 2rem; box-sizing: border-box; }
.fs-test .testimonials-section .section-title { font-size: 1.75rem; font-weight: 700; text-align: center; margin-bottom: .5rem; }
.fs-test .testimonials-section .section-description { text-align: center; color: #666; margin-bottom: 2rem; }
.fs-test .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.fs-test .testimonial { border: 1px solid #eee; border-radius: .75rem; padding: 1.25rem; background: #fafafa; display: grid; grid-template-columns: 40px 1fr; gap: .75rem; align-items: start; }
.fs-test .testimonial .stars, .fs-test .testimonial .quote, .fs-test .testimonial .author { grid-column: 2; }
.fs-test .avatar { width: 40px; height: 40px; border-radius: 50%; background: #e5e7eb; display: grid; place-items: center; font-size: 1rem; }
.fs-test .testimonial .stars { color: #f59e0b; margin-bottom: .5rem; display: flex; align-items: center; gap: .35rem; }
.fs-test .testimonial .rating-num { color: #6b7280; font-weight: 700; font-size: .9rem; }
.fs-test .testimonial .quote { color: #374151; line-height: 1.7; margin: .25rem 0 .5rem; }
.fs-test .testimonial .author { color: #6b7280; font-size: .875rem; }
@media (max-width: 900px) { .fs-test .testimonials-grid { grid-template-columns: 1fr; } }

/* features */
.fs-test .features-section { background: #fcfcfc; padding: 3rem 0; }
.fs-test .features-section .features-container { max-width: 64rem; margin: 0 auto; padding-left: 2rem; padding-right: 2rem; }
.fs-test .features-section .section-title { font-size: 2rem; font-weight: bold; text-align: center; margin-bottom: 1rem; }
.fs-test .features-section .section-description { color: #666; text-align: center; max-width: 52rem; margin: 0 auto 3rem; }
.fs-test .features-section .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.fs-test .features-section .icon-wrapper { margin-bottom: 1rem; }
.fs-test .features-section .icon-wrapper i { font-size: 1.5rem; color: #667eea; }
.fs-test .features-section .feature h3 { font-size: 1.25rem; font-weight: bold; color: #1a202c; margin-bottom: 0.5rem; text-align: left; }
.fs-test .features-section .feature p { color: #4a5568; font-size: 0.875rem; line-height: 1.5; text-align: left; }
@media (max-width: 768px) {
  .fs-test .features-section .features-grid { grid-template-columns: 1fr; }
  .fs-test .features-section .features-container { padding-left: 1rem; padding-right: 1rem; }
  .fs-test .features-section .section-title { font-size: 1.5rem; }
}

/* ad band */
.fs-test .fs-adband { background:#fff; padding:12px 0; }
.fs-test .fs-adband .adsbygoogle { display:block; width:100%; height:auto !important; }
/* ad placeholders on test pages */
.fs-test .fs-ad-cls { min-height: 0 !important; padding: 0; margin: 12px 0; }
.fs-test .fs-ad-cls .adsbygoogle { display:block; width:100%; height:auto !important; }
.fs-test .fs-ad-cls:empty { display:none; }

/* celebrity */
.fs-test .celebrity-section { background: #fcfcfc; padding: 3rem 0; }
.fs-test .celebrity-section .fs-unified-container { max-width: 64rem; margin: 0 auto; padding-left: 2rem; padding-right: 2rem; }
.fs-test .celebrity-section .section-title { font-size: 1.75rem; font-weight: 700; text-align: center; margin-bottom: .5rem; }
.fs-test .celebrity-section .section-description { text-align: center; color: #666; margin-bottom: 1.5rem; }
.fs-test .celebrity-viewport { --row-h: 72px; --visible: 10; height: calc(var(--row-h) * var(--visible)); overflow: hidden; }
.fs-test .celebrity-track { display: flex; flex-direction: column; gap: .5rem; animation: celebrity-scroll 60s linear infinite; will-change: transform; }
.fs-test .celebrity-row { height: var(--row-h); background: #fff; border: 1px solid #eee; border-radius: .5rem; padding: .6rem .9rem; display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; }
.fs-test .celebrity-main { min-width: 0; }
.fs-test .celebrity-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-test .celebrity-desc { color: #6b7280; font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fs-test .celebrity-score { color: #1f2937; }
.fs-test .celebrity-percentile { color: #6b7280; font-size: .875rem; }
@keyframes celebrity-scroll { 0% { transform: translateY(0); } 100% { transform: translateY(calc(-1 * (var(--row-h) + .5rem) * 30)); } }
@media (max-width: 640px) {
  .fs-test .celebrity-row { grid-template-columns: 1fr; text-align: left; padding: .75rem 1rem; }
  .fs-test .celebrity-viewport { --row-h: 96px; }
  .fs-test .celebrity-name { white-space: normal; }
}

/* FAQ */
.fs-test .faq-section { margin-top: 4rem; }
.fs-test .faq-container { max-width: 48rem; margin: 0 auto; }
.fs-test .faq-title { font-size: 1.875rem; font-weight: 700; text-align: center; margin-bottom: 3rem; }
.fs-test .faq-list { display: flex; flex-direction: column; gap: 1rem; }
.fs-test .faq-item { border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; }
.fs-test .faq-button { width: 100%; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; background: none; border: none; cursor: pointer; text-align: left; transition: background-color 0.2s; }
.fs-test .faq-button:hover { background-color: #f9fafb; }
.fs-test .faq-question { font-size: 1.125rem; font-weight: 500; color: #111827; }
.fs-test .faq-icon { margin-left: 1.5rem; flex-shrink: 0; color: #6b7280; transition: transform 0.2s; }
.fs-test .faq-icon i { transition: transform 0.2s; }
.fs-test .faq-answer { padding: 0 1.5rem 1rem; color: #4b5563; line-height: 1.6; }
@media (max-width: 640px) {
  .fs-test .faq-question { font-size: 1rem; }
  .fs-test .faq-button { padding: 0.875rem 1rem; }
  .fs-test .faq-answer { padding: 0 1rem 0.875rem; }
}
/* articles (CLS) */
.article-image { aspect-ratio: 16/9; width: 100%; height: auto; object-fit: cover; }

/* gradient tokens */
.fs-test { --grad-primary: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 40%, #93c5fd 100%); --accent: #4f46e5; }

/* result page */
.fs-test .result-section {}
.fs-test .result-card { display: grid; }
.fs-test .result-card > * + * { margin-top: 1.5rem; }
.fs-test .hero-result { margin-top: 1.25rem; }
.fs-test .result-metrics { margin-top: 1.25rem; }
.fs-test .result-header { text-align: center; }
.fs-test .result-header h1 { margin: 0; font-size: 1.6rem; font-weight: 800; }
.fs-test .result-badge { display:inline-block; padding:.25rem .6rem; border-radius:9999px; background: var(--grad-primary); color:#fff; font-weight:800; font-size:.8rem; letter-spacing:.04em; }
.fs-test .result-subtitle { color:#6b7280; margin:.35rem 0 .6rem; font-size:.95rem; }
.fs-test .result-preview { display: grid; place-items: center; }
.fs-test .result-preview .frame { width: 100%; max-width: 180px; aspect-ratio: 1/1; border: 1px solid #e5e7eb; border-radius: .9rem; overflow: hidden; background: #fafafa; display: grid; place-items: center; }
.fs-test .result-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px){ .fs-test .result-preview .frame { max-width: 140px; } }

/* replaced by percentile bar */
.fs-test .percentile { margin-top:.25rem; }
.fs-test .percentile-title { text-align:center; color:#6b7280; font-weight:700; margin-bottom:.25rem; }
.fs-test .percentile .track { position:relative; height:12px; border-radius:9999px; background:#eef2ff; overflow:hidden; }
.fs-test .percentile .fill { position:absolute; inset:0; width:0%; background:var(--grad-primary); border-radius:9999px; transition: width .9s cubic-bezier(.22,.61,.36,1); }
.fs-test .percentile .marker { position:absolute; left:-14px; top:-10px; background:#111827; color:#fff; font-size:.7rem; padding:.1rem .35rem; border-radius:.35rem; box-shadow:0 4px 10px rgba(0,0,0,.12); transition:left .9s cubic-bezier(.22,.61,.36,1); }
.fs-test .percentile .marker::after { content:""; position:absolute; left:50%; transform:translateX(-50%); top:18px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid #111827; }

/* metrics redesigned */
.fs-test .result-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.fs-test .metric { background: #fcfcfc; border:1px solid #f1f1f1; padding:.75rem .5rem; border-radius:.75rem; text-align:center; display:grid; justify-items:center; row-gap:.15rem; }
.fs-test .metric .icon { width:38px; height:38px; border-radius:50%; background: var(--grad-primary); color:#fff; display:grid; place-items:center; margin:0 auto .25rem; }
.fs-test .metric .label { color: #6b7280; font-size: .8rem; letter-spacing: .01em; }
.fs-test .metric .value { font-size: 1.45rem; font-weight: 900; color: #111827; }
.fs-test .metric.score .value, .fs-test .metric.deviation .value { font-size: 1.8rem; }
.fs-test .metric .sub { color:#9ca3af; font-size:.75rem; margin-top:.15rem; }
.fs-test .result-metrics .metric + .metric { margin-top: 0; }
@media (max-width: 700px) {
  .fs-test .metric .value { font-size: 1.6rem; }
  .fs-test .metric.score .value, .fs-test .metric.deviation .value { font-size: 1.9rem; }
}
@media (max-width: 480px) { .fs-test .result-metrics { grid-template-columns: 1fr; } }

/* decile stripe */
.fs-test .decile-strip { margin-top:.75rem; }
.fs-test .decile-strip .strip { display:flex; gap:4px; }
.fs-test .decile-strip .decile { flex:1; height:14px; background:#eef2ff; border-radius:6px; }
.fs-test .decile-strip .decile.is-active { background: var(--grad-primary); box-shadow: 0 6px 14px rgba(79,70,229,.18); }
.fs-test .decile-strip .legend { display:flex; justify-content:space-between; color:#9ca3af; font-size:.75rem; margin-top:.25rem; }

/* variants */
.fs-test .percentile-variants { margin-top: .75rem; display:grid; gap:.75rem; }
/* variant B - mini vertical bars */
.fs-test .mini-bars { display:grid; grid-template-columns: repeat(10, 1fr); gap:6px; align-items:end; height:88px; }
.fs-test .mini-bars .bar { height: 42px; background:#e5e7eb; border-radius:4px; }
.fs-test .mini-bars .bar.is-active { background: var(--grad-primary); box-shadow: 0 4px 10px rgba(79,70,229,.18); }
/* variant C - dots */
.fs-test .mini-dots { display:grid; grid-template-columns: repeat(10, 1fr); gap:6px; }
.fs-test .mini-dots .dot { width:10px; height:10px; border-radius:50%; background:#e5e7eb; margin:0 auto; }
.fs-test .mini-dots .dot.is-active { background: #4f46e5; }
/* variant D - ruler */
.fs-test .ruler { position:relative; height:14px; background:#eef2ff; border-radius:9999px; }
.fs-test .ruler .marker { position:absolute; top:-10px; left:calc(var(--pct,0%) - 14px); background:#111827; color:#fff; font-size:.7rem; padding:.1rem .35rem; border-radius:.35rem; box-shadow:0 4px 10px rgba(0,0,0,.12); }
.fs-test .ruler .marker::after { content:""; position:absolute; left:50%; transform:translateX(-50%); top:18px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid #111827; }
/* variant E - thermo */
.fs-test .thermo { height:12px; background:#eef2ff; border-radius:9999px; position:relative; overflow:hidden; }
.fs-test .thermo .fill { position:absolute; inset:0; width:0%; background: var(--grad-primary); transition: width .9s cubic-bezier(.22,.61,.36,1); }

@media (max-width: 640px){
  .fs-test .percentile-variants { gap:.6rem; }
  .fs-test .mini-bars { height:48px; gap:5px; }
}

/* ranking */
.fs-test .result-ranking { display: grid; grid-template-columns: 1fr; }
.fs-test .result-ranking .rank-card + .rank-card { margin-top: 1rem; }
.fs-test .rank-card { background: #fff; border:1px solid #e5e7eb; border-radius: 1rem; padding: 1rem; box-shadow: 0 6px 16px rgba(15,23,42,.06); }
.fs-test .rank-title { font-weight: 800; color: #111827; margin-bottom: .25rem; text-align:left; }
.fs-test .rank-value { display: flex; align-items: baseline; justify-content:flex-start; flex-wrap: wrap; row-gap: .15rem; }
.fs-test .rank-value .rank-num { font-size: 2rem; font-weight: 900; color: #111827; }
.fs-test .rank-value .rank-suffix { margin-left:.2rem; }
.fs-test .rank-total { margin-left:.35rem; color:#6b7280; }
.fs-test .rank-percent { margin-left:.35rem; color:#6b7280; font-size:.9rem; }
.fs-test .rank-bar { margin-top: .5rem; height: 10px; border-radius: 9999px; background: #eef2ff; overflow: hidden; position: relative; }
.fs-test .rank-bar .fill { display:block; height:100%; background: var(--grad-primary); transition: width .9s cubic-bezier(.22,.61,.36,1); width: var(--pct, 0%); }
@media (max-width: 700px) { .fs-test .result-ranking { grid-template-columns: 1fr; } }

/* share */
.fs-test .result-share { text-align: center; }
.fs-test .result-share .share-title { color: #6b7280; margin-bottom: .5rem; font-weight: 700; }
.fs-test .social-share { display: flex; justify-content: center; }
.fs-test .social-share .share-btn + .share-btn { margin-left: .5rem; }
.fs-test .share-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.fs-test .share-btn.twitter { background: linear-gradient(135deg,#1DA1F2,#60a5fa); }
.fs-test .share-btn.line { background: linear-gradient(135deg,#00B900,#34d399); }
.fs-test .share-btn.copy { background: linear-gradient(135deg,#111827,#4b5563); }
.fs-test .share-btn:hover { filter: brightness(.96); }

/* actions */
.fs-test .result-actions { display: flex; justify-content: center; }
.fs-test .result-actions > * + * { margin-left: .75rem; }
.fs-test .result-actions a { text-decoration:none; text-align:center; }
.fs-test .fs-secondary { appearance: none; border: 1px solid #e5e7eb; background: #fff; color: #111827; padding: .8rem 1.1rem; border-radius: .65rem; font-weight: 700; cursor: pointer; }
.fs-test .fs-secondary:hover { background: #f9fafb; }
.fs-test .fs-secondary:focus-visible { outline: 3px solid rgba(99,102,241,.25); outline-offset: 2px; }
.fs-test .result-alert { margin-top: .5rem; padding: .85rem 1rem; border: 1px solid #fbbf24; background: #fffbeb; color: #92400e; border-radius: .5rem; text-align: center; }
/* empty state */
.fs-test .result-empty { margin-top: .5rem; padding: 1rem 1.25rem; border: 1px solid #e5e7eb; background: #fafafa; color: #374151; border-radius: .75rem; }
.fs-test .result-empty .empty-title { font-weight: 800; margin-bottom: .25rem; font-size: 1.05rem; }
.fs-test .result-empty .empty-desc { color: #6b7280; margin: .25rem 0 .5rem; }
.fs-test .result-empty .tip-list { margin: 0; padding-left: 1.1rem; color: #4b5563; line-height: 1.7; }
.fs-test .result-empty .tip-list li { margin: .15rem 0; }

/* normalize spacing around the top widget (applies to ch/en equally) */
.fs-test .facescore-simple-text-widget { margin: 0 auto; }
.fs-test .facescore-simple-text-widget + .fs-ad-cls { margin-top: 12px; }
.fs-test .facescore-simple-text-widget + .fs-ad-cls + .fs-section { padding-top: 2.25rem; }

/* hero: image + score side-by-side */
.fs-test .hero-result { display:grid; grid-template-columns: 1fr; align-items:center; padding: 0; border-radius: 1rem; background: none; position: relative; overflow: hidden; }
.fs-test .hero-result > * + * { margin-top: 1rem; }

/* result-card as grid with no gap, with subtle pattern background */
.fs-test .result-card { position: relative; z-index: 0; background: #fff; display: grid; grid-auto-rows: auto; row-gap: 0; overflow: hidden; }
.fs-test .fs-section-card.result-card { margin: 0 auto; }
/* two round gradient orbs (background only) */
.fs-test .result-card::before { content:""; position:absolute; top:-9rem; left:-9rem; width:20rem; height:20rem; border-radius:50%; pointer-events:none; z-index:0;
  background: radial-gradient(closest-side, rgba(165,180,252,.35), rgba(196,181,253,.24), rgba(147,197,253,.12), transparent 70%);
  filter: blur(32px); opacity:.32;
}
.fs-test .result-card::after { content:""; position:absolute; top:-10rem; right:-10rem; width:22rem; height:22rem; border-radius:50%; pointer-events:none; z-index:0;
  background: radial-gradient(closest-side, rgba(165,180,252,.38), rgba(196,181,253,.26), rgba(147,197,253,.14), transparent 70%);
  filter: blur(34px); opacity:.30; animation: fs-pulse 6s ease-in-out infinite;
}
/* remove hero-result pseudo completely to avoid overlay */
.fs-test .hero-result::before, .fs-test .hero-result::after { content: none !important; }

.fs-test .result-card > * { position: relative; z-index: 1; }

.fs-test .score-block { background: #faf8ff; border:1px solid #e9e2ff; border-radius: 1rem; padding: 1rem; text-align:center; box-shadow: 0 8px 24px rgba(15,23,42,.05), 0 2px 8px rgba(15,23,42,.04); }
.fs-test .score-block .score-label { color:#6b7280; font-weight:700; margin-bottom:.2rem; }
.fs-test .score-block .score-value { font-size: 3.2rem; font-weight:900; line-height:1; color:#111827; letter-spacing:.5px; }
.fs-test .score-block .score-sub { color:#6b7280; margin-top:.15rem; font-weight:700; }
@media (max-width: 640px){
  .fs-test .score-block .score-value { font-size: 2.6rem; }
}

/* horizontal 10-segment bar */
.fs-test .hbar { margin-top:.75rem; }
.fs-test .hbar .segments { display:grid; grid-template-columns: repeat(10, 1fr); gap:6px; }
.fs-test .hbar .seg { height:14px; background:#eef2ff; border-radius:6px; }
.fs-test .hbar .seg.is-active { background: var(--grad-primary); box-shadow: 0 6px 14px rgba(79,70,229,.18); }
.fs-test .hbar .legend { display:flex; justify-content:space-between; color:#9ca3af; font-size:.75rem; margin-top:.25rem; }

/* curve */
.fs-test .graph-container {}
.fs-test .graph-container .curve-title { margin: 0 0 .15rem !important; }
.fs-test .graph-container .curve-desc { margin: 0 0 .65rem; color:#6b7280; font-size:.9rem; }
.fs-test .curve-wrap { position: relative; padding-inline: 0; }
.fs-test .curve-svg { width:100%; height:200px; display:block; }

/* axis placed close to curve bottom */
.fs-test .axis { position: relative; height: 16px; margin-top: 2px; }
.fs-test .axis .ticks { display:grid; grid-template-columns: repeat(11, 1fr); color:#9ca3af; font-size:.7rem; }
.fs-test .axis .rail { height:2px; background:#e5e7eb; position:relative; margin:0; }
.fs-test .axis .rail::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(90deg, transparent, transparent calc(10% - 1px), #e5e7eb 10%); opacity:.8; }

/* horizontal distribution bars */
.fs-test .hbar-bars { display:grid; grid-template-columns: repeat(10, 1fr); gap:6px; align-items:end; height:140px; margin-top:.5rem; position:relative; }
.fs-test .hbar-bars .bar { background:#e5e7eb; border-radius:4px; height: 8px; transition: height .8s cubic-bezier(.22,.61,.36,1), background .2s; }
.fs-test .hbar-bars .bar.is-active { background: var(--grad-primary); box-shadow: 0 6px 14px rgba(79,70,229,.18); }

/* hero decorative blobs */
.fs-test .result-preview .frame { position:relative; }
.fs-test .result-preview .frame::after { content:""; position:absolute; inset:-8%; border-radius:inherit; background: radial-gradient(closest-side, rgba(164,190,255,.12), transparent 70%); pointer-events:none; }
@media (max-width: 640px){
  /* blobs are set on .result-card background; responsive handled naturally */
}

/* you-position label: attach to bar */
.fs-test .curve-wrap { padding-inline: 2%; overflow: visible; }
.fs-test .you-label-svg { display:inline-block; transform: translate(-50%, -110%) scale(0.55); transform-origin: 50% 100%; background:#111827; color:#fff; font-size:.62rem; padding:.12rem .35rem; border-radius:.25rem; box-shadow: 0 6px 14px rgba(0,0,0,.12); white-space: nowrap; line-height:1; }
/* move label outside SVG to avoid non-uniform scaling */
.fs-test .you-label { position:absolute; left: clamp(2%, var(--pos), 98%); top: 18px; transform: translate(-50%, -95%); background:#111827; color:#fff; font-weight:700; font-size: .72rem; padding: .2rem .45rem; border-radius: .35rem; box-shadow: 0 10px 20px rgba(0,0,0,.15); white-space: nowrap; }
.fs-test .you-line-extend { position:absolute; left: clamp(2%, var(--pos), 98%); top: 14px; bottom: 0; width:2px; background:#111827; transform: translateX(-50%); opacity:.9; }

@keyframes fs-pulse {
  0%,100% { transform: scale(1); opacity:.22; }
  50% { transform: scale(1.06); opacity:.28; }
}

/* ===================== Blob gradient demo cards ===================== */
.fs-test .blob-gallery { display:grid; grid-template-columns: repeat(10, 300px); justify-content: start; overflow-x:auto; padding: 8px 0; }
.fs-test .blob-gallery .blob-card + .blob-card { margin-left: 16px; }
.fs-test .blob-card { width:300px; height:300px; border-radius:16px; background:#fff; position:relative; overflow:hidden; box-shadow: 0 8px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05); }
.fs-test .blob-card::after { content:""; position:absolute; inset:0; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxnIG9wYWNpdHk9IjAuMDMiPgogICAgICAgIDxwYXRoIGQ9Ik0yMCAyMEgwVjBIMjBWMjBaTTQwIDQwSDIwVjIwSDQwVjQwWiIgZmlsbD0iYmxhY2siLz4KICAgICAgICA8cGF0aCBkPSJNNDAgMjBIMjBWMEg0MFYyMFpNMjAgNDBIMFYyMEgyMFY0MFoiIGZpbGw9ImJsYWNrIi8+CiAgICA8L2c+Cjwvc3ZnPg=="); opacity:.35; z-index:0; pointer-events:none; mix-blend-mode: multiply; }

/* Variant A: indigo → purple orbs */
.fs-test .blob-a { background:
  radial-gradient(closest-side, rgba(165,180,252,.30), rgba(196,181,253,.20), rgba(147,197,253,.10), transparent 70%) -5rem -5rem / 16rem 16rem no-repeat,
  radial-gradient(closest-side, rgba(196,181,253,.30), rgba(236,72,153,.18), transparent 70%) calc(100% + 6rem) -4rem / 16rem 16rem no-repeat,
  #ffffff; }

/* Variant B: sky → teal orbs */
.fs-test .blob-b { background:
  radial-gradient(closest-side, rgba(125,211,252,.28), rgba(45,212,191,.18), transparent 70%) -6rem 0rem / 17rem 17rem no-repeat,
  radial-gradient(closest-side, rgba(45,212,191,.26), rgba(56,189,248,.16), transparent 70%) calc(100% + 5rem) -6rem / 17rem 17rem no-repeat,
  #ffffff; }

/* Variant C: lavender center glow + side orb */
.fs-test .blob-c { background:
  radial-gradient(closest-side, rgba(196,181,253,.32), rgba(165,180,252,.18), transparent 72%) 50% -4rem / 18rem 18rem no-repeat,
  radial-gradient(closest-side, rgba(147,197,253,.28), rgba(165,180,252,.16), transparent 70%) -6rem 70% / 14rem 14rem no-repeat,
  #ffffff; }

/* Variant D: diagonal band + small orbs */
.fs-test .blob-d { background:
  linear-gradient(135deg, rgba(165,180,252,.18), rgba(196,181,253,.14), rgba(147,197,253,.10)) 0 0 / 100% 100% no-repeat,
  radial-gradient(closest-side, rgba(165,180,252,.28), transparent 70%) 85% -3rem / 12rem 12rem no-repeat,
  radial-gradient(closest-side, rgba(196,181,253,.26), transparent 70%) -4rem 85% / 12rem 12rem no-repeat,
  #ffffff; }

/* Variant E: multi-spot pastel */
.fs-test .blob-e { background:
  radial-gradient(closest-side, rgba(165,180,252,.26), transparent 70%) -5rem -5rem / 12rem 12rem no-repeat,
  radial-gradient(closest-side, rgba(196,181,253,.24), transparent 70%) calc(100% + 4rem) -3rem / 12rem 12rem no-repeat,
  radial-gradient(closest-side, rgba(147,197,253,.20), transparent 70%) -4rem calc(100% + 3rem) / 10rem 10rem no-repeat,
  #ffffff; }

/* Variant F: lavender ring + corner glow */
.fs-test .blob-f { background:
  radial-gradient(circle at 60% 35%, rgba(196,181,253,.32), rgba(196,181,253,.14) 40%, transparent 60%) 0 0 / 100% 100% no-repeat,
  radial-gradient(closest-side, rgba(165,180,252,.28), transparent 70%) -5rem -5rem / 14rem 14rem no-repeat,
  #ffffff; }

/* Variant G: soft band + two small orbs */
.fs-test .blob-g { background:
  linear-gradient(180deg, rgba(221,214,254,.20), rgba(233,213,255,.12), rgba(255,255,255,0)) 0 0 / 100% 100% no-repeat,
  radial-gradient(closest-side, rgba(196,181,253,.26), transparent 70%) calc(100% + 4rem) -4rem / 12rem 12rem no-repeat,
  radial-gradient(closest-side, rgba(165,180,252,.24), transparent 70%) -4rem calc(100% + 4rem) / 12rem 12rem no-repeat,
  #ffffff; }

/* Variant H: center glow + edge haze */
.fs-test .blob-h { background:
  radial-gradient(closest-side, rgba(221,214,254,.35), rgba(196,181,253,.18), transparent 72%) 50% -3rem / 18rem 18rem no-repeat,
  linear-gradient(135deg, rgba(196,181,253,.14), rgba(165,180,252,.10), transparent) 0 0 / 100% 100% no-repeat,
  #ffffff; }

/* Variant I: tri-spot cluster */
.fs-test .blob-i { background:
  radial-gradient(closest-side, rgba(196,181,253,.28), transparent 70%) -5rem -5rem / 12rem 12rem no-repeat,
  radial-gradient(closest-side, rgba(221,214,254,.26), transparent 70%) 6rem 50% / 10rem 10rem no-repeat,
  radial-gradient(closest-side, rgba(165,180,252,.22), transparent 70%) calc(100% + 5rem) -3rem / 12rem 12rem no-repeat,
  #ffffff; }

/* Variant J: diagonal twin orbs */
.fs-test .blob-j { background:
  radial-gradient(closest-side, rgba(221,214,254,.30), rgba(196,181,253,.18), transparent 70%) -6rem 0rem / 16rem 16rem no-repeat,
  radial-gradient(closest-side, rgba(196,181,253,.28), rgba(165,180,252,.16), transparent 70%) calc(100% + 6rem) -6rem / 16rem 16rem no-repeat,
  #ffffff; }

/* Modern (lavender concentric rings, top-right & bottom-left) */
.fs-test .blob-modern { background:
  linear-gradient(180deg, #f8fafc, #ffffff) 0 0 / 100% 100% no-repeat,
  radial-gradient(60% 60% at 115% -15%, rgba(221,214,254,.55), rgba(221,214,254,.18) 60%, transparent 70%) 0 0 / 100% 100% no-repeat,
  radial-gradient(70% 70% at -15% 115%, rgba(236,72,153,.22), rgba(236,72,153,.08) 60%, transparent 70%) 0 0 / 100% 100% no-repeat,
  repeating-radial-gradient(circle at 115% -15%, rgba(221,214,254,.18) 0 12px, rgba(221,214,254,0) 12px 24px) 0 0 / 100% 100% no-repeat,
  repeating-radial-gradient(circle at -15% 115%, rgba(236,72,153,.10) 0 16px, rgba(236,72,153,0) 16px 32px) 0 0 / 100% 100% no-repeat,
  #ffffff; }

/* Rich Header (badge + sublabel with icon) */
.fs-test .result-header { position: relative; text-align:center; padding-top:.25rem; }
.fs-test .result-header .header-badge { display:inline-flex; align-items:center; padding:.28rem .7rem; border-radius:9999px; background: linear-gradient(90deg, #a5b4fc, #c4b5fd, #93c5fd); border: none; color:#ffffff; font-weight:800; font-size:.72rem; letter-spacing:.08em; box-shadow: 0 6px 14px rgba(165,180,252,.25); }
.fs-test .result-header h1 { position: relative; display:block; margin:.4rem 0 0; padding:0; font-size:1.6rem; font-weight:800; color:#111827; }
.fs-test .result-header .header-sub { display:inline-flex; align-items:center; gap:.35rem; margin-top:.25rem; color:#6b7280; font-size:.85rem; }
.fs-test .result-header .header-sub i { color:#a78bfa; }
.fs-test .result-header .header-underline { width:160px; height:3px; background: linear-gradient(90deg, rgba(165,180,252,.0), rgba(165,180,252,.8), rgba(165,180,252,.0)); border-radius:3px; margin:.35rem auto 0; }

/* 新しいユーザーの声セクション - 完全独立したクラス名 */
.fs-test .fs-new-testimonials {
  background: #fff;
  padding: 3rem 0;
}

.fs-test .fs-new-container {
  max-width: 64rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

.fs-test .fs-new-title {
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: .5rem;
  padding: 0 1rem;
}

.fs-test .fs-new-description {
  text-align: center;
  color: #666;
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.fs-test .fs-new-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.fs-test .fs-new-testimonial {
  border: 1px solid #eee;
  border-radius: .75rem;
  padding: 1.25rem;
  background: #fafafa;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: .75rem;
  align-items: start;
}

.fs-test .fs-new-stars,
.fs-test .fs-new-quote,
.fs-test .fs-new-author {
  grid-column: 2;
}

.fs-test .fs-new-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e5e7eb;
  display: grid;
  place-items: center;
  font-size: 1rem;
}

.fs-test .fs-new-stars {
  color: #f59e0b;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.fs-test .fs-new-rating {
  color: #6b7280;
  font-weight: 700;
  font-size: .9rem;
}

.fs-test .fs-new-quote {
  color: #374151;
  line-height: 1.7;
  margin: .25rem 0 .5rem;
}

.fs-test .fs-new-author {
  color: #6b7280;
  font-size: .875rem;
}

/* モバイル対応 */
@media (max-width: 900px) {
  .fs-test .fs-new-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .fs-test .fs-new-container {
    padding: 0 1rem;
  }
}