:root {
  --fs-ink: #101828;
  --fs-muted: #5d6678;
  --fs-line: #dfe5ee;
  --fs-panel: #ffffff;
  --fs-soft: #f5f8fb;
  --fs-purple: #a5b4fc;
  --fs-lavender: #c4b5fd;
  --fs-sky: #93c5fd;
  --fs-accent: #4f46e5;
  --fs-shadow: 0 16px 38px rgba(16, 24, 40, 0.10);
}

body {
  background: var(--fs-soft);
  color: var(--fs-ink);
  max-width: 100%;
  overflow-x: hidden;
}

.facescore-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--fs-line);
}

.facescore-text {
  color: var(--fs-ink) !important;
  font-size: 1.12rem !important;
  letter-spacing: 0;
}

.facescore-brand-title {
  display: block;
  margin: .67em 0;
  font-weight: 700;
}

.facescore-toppage .facescore-simple-text-widget,
.facescore-toppage .facescore-shinndanmain {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.facescore-toppage,
.facescore-toppage .fs-modern-section,
.facescore-toppage .fs-modern-container,
.facescore-toppage .fs-modern-card {
  max-width: 100vw;
  min-width: 0;
  box-sizing: border-box;
}

html,
.facescore-toppage {
  max-width: 100%;
  overflow-x: hidden;
}

.facescore-toppage.fs-test {
  width: 100vw !important;
  max-width: 100vw !important;
}

.fs-test,
.fs {
  --grad-primary: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 50%, #93c5fd 100%);
  --accent: var(--fs-accent);
}

.fs-test .fs-modern-section,
.fs .fs-modern-section {
  min-height: auto;
  display: block;
  padding: 1.25rem 0;
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
}

.fs-test .fs-modern-container,
.fs .fs-modern-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.fs-test .fs-modern-card,
.fs .fs-modern-card {
  width: min(100%, 340px);
  max-width: 100%;
  margin: 0 auto;
  padding: 1.25rem 1rem;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(31, 41, 55, 0.06);
  overflow: hidden;
}

.fs-test .fs-modern-card *,
.fs .fs-modern-card * {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.fs-test .fs-modern-title,
.fs .fs-modern-title {
  color: var(--fs-ink);
  font-size: 1.55rem;
  line-height: 1.2;
}

.fs-test .fs-lead,
.fs .fs-lead {
  color: #344054;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: auto;
}

.fs-test .fs-modern-title,
.fs .fs-modern-title,
.fs-test .fs-tap,
.fs .fs-tap,
.fs-test .fs-subhint,
.fs .fs-subhint {
  overflow-wrap: anywhere;
}

.fs-test .fs-dropzone,
.fs .fs-dropzone {
  border-color: #c7d2fe;
  border-radius: 8px;
  background: #f8fbfc;
}

.fs-test .fs-dropzone:hover,
.fs .fs-dropzone:hover,
.fs-test .fs-dropzone:focus-within,
.fs .fs-dropzone:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.fs-test .fs-icon,
.fs .fs-icon {
  color: var(--fs-accent);
}

.fs-test .fs-primary,
.fs .fs-primary,
.facescore-shinndanchoiceimg {
  border-radius: 8px !important;
  background: var(--grad-primary) !important;
  box-shadow: 0 12px 24px rgba(99, 102, 241, 0.24) !important;
}

.fs-test .fs-primary:hover,
.fs .fs-primary:hover,
.facescore-shinndanchoiceimg:hover {
  filter: brightness(0.98);
}

.fs-test .fs-section-card,
.fs .fs-section-card,
.fs-test .testimonial,
.fs .testimonial,
.fs-test .feature,
.fs .feature,
.article-item,
.rank-card,
.metric,
.score-block,
.facescore-user {
  border-radius: 8px !important;
}

.fs-test .features-section,
.fs .features-section,
.fs-test .testimonials-section,
.fs .testimonials-section,
.fs-test .celebrity-section,
.fs .celebrity-section {
  background: #ffffff !important;
}

.fs-test .feature,
.fs .feature,
.fs-test .testimonial,
.fs .testimonial,
.article-item {
  border: 1px solid var(--fs-line) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.06);
}

.fs-test .features-section .icon-wrapper i,
.fs .features-section .icon-wrapper i {
  color: var(--fs-accent) !important;
}

.facescore-toppage .fs-top-ad,
.facescore-toppage > .fs-ad-cls {
  min-height: 0 !important;
  margin: 12px auto 18px !important;
  padding: 0 !important;
}

.facescore-toppage .fs-top-ad ins.adsbygoogle,
.facescore-toppage > .fs-ad-cls ins.adsbygoogle {
  min-height: 0 !important;
}

.facescore-toppage .fs-top-ad ins.adsbygoogle[data-ad-status="unfilled"],
.facescore-toppage > .fs-ad-cls ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

.facescore-toppage .facescore-container1:first-of-type {
  margin-top: 1.5rem;
}

.fs.fs-result-page .fs-section {
  background: var(--fs-soft);
}

.fs.fs-result-page .fs-section-card.result-card {
  max-width: 46rem;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.fs:not(.fs-result-page) .result-card,
.fs .result-card-bg {
  background: #ffffff !important;
}

.fs .result-card-bg::before,
.fs .result-card-bg::after,
.fs-test .result-card::before,
.fs-test .result-card::after,
.fs .result-preview .frame::after {
  content: none !important;
}

.fs .score-block {
  background: #faf8ff;
  border-color: #e9e2ff;
}

.fs .score-block .score-value {
  color: #111827;
  letter-spacing: 0;
}

@media (min-width: 760px) {
  .fs.fs-result-page .hero-result {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .fs.fs-result-page .score-block {
    max-width: 320px;
    margin: 0;
  }
}

.fs .metric .icon {
  background: var(--grad-primary);
}

.daily-ranking-title,
.monthly-ranking-title {
  background: var(--grad-primary) !important;
  border-radius: 6px !important;
}

.facescore-user {
  border: 1px solid var(--fs-line);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
}

footer {
  border-top: 1px solid var(--fs-line);
  background: #ffffff;
}

.facescore-toppage:not(.fs-test) > .facescore-simple-text-widget {
  margin: 0 auto;
  padding: 1.25rem 16px;
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
}

.facescore-toppage:not(.fs-test) .facescore-shinndanmain {
  width: min(100%, 460px) !important;
  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 18px !important;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(31, 41, 55, 0.06);
  box-sizing: border-box;
}

.facescore-toppage:not(.fs-test) [style*="background:#d1d1e9"] {
  background: var(--fs-soft) !important;
}

.facescore-toppage:not(.fs-test) .article-item {
  border: 1px solid var(--fs-line);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.06);
}

@media (max-width: 640px) {
  .facescore-toppage .facescore-simple-text-widget {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .facescore-toppage .facescore-shinndanmain {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: hidden;
  }

  .fs-test .fs-modern-section,
  .fs .fs-modern-section {
    min-height: auto;
    padding: 1rem 0;
    background: linear-gradient(180deg, #f8fafc, #eef2ff);
  }

  .fs-test .fs-modern-container,
  .fs .fs-modern-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
  }

  .fs-test .fs-modern-card,
  .fs .fs-modern-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.15rem 1rem;
  }

  .fs-test .fs-modern-card > .fs-lead,
  .fs .fs-modern-card > .fs-lead,
  .fs-test .fs-modern-card > .fs-dropzone,
  .fs .fs-modern-card > .fs-dropzone,
  .fs-test .fs-modern-card > .fs-action,
  .fs .fs-modern-card > .fs-action,
  .fs-test .fs-modern-card .fs-primary,
  .fs .fs-modern-card .fs-primary,
  .fs-test .fs-modern-card .fs-note,
  .fs .fs-modern-card .fs-note {
    width: 100% !important;
    max-width: 100% !important;
  }

  .fs-test .fs-modern-title,
  .fs .fs-modern-title {
    font-size: 1.35rem;
  }

}

@media (max-width: 420px) {
  body {
    overflow-x: hidden;
  }

  .facescore-toppage.fs-test {
    overflow-x: hidden;
  }

  .facescore-toppage.fs-test .facescore-simple-text-widget {
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
  }

  .facescore-toppage.fs-test .fs-lead {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .facescore-toppage .facescore-container1,
  .facescore-toppage .facescore-shinndanexample,
  .facescore-toppage .facescore-shinndanexamplediscription,
  .facescore-toppage .facescore-user {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box;
  }

  .facescore-toppage .facescore-user {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }

  .facescore-toppage .facescore-frame5 {
    width: min(300px, calc(100vw - 64px)) !important;
    max-width: calc(100vw - 64px) !important;
    box-sizing: border-box;
  }
}

.facescore-toppage.fs-test > .facescore-simple-text-widget {
  display: contents !important;
  width: auto !important;
  max-width: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.facescore-toppage.fs-test > .facescore-simple-text-widget > .facescore-shinndanmain {
  width: min(420px, calc(100% - 32px)) !important;
  max-width: 420px !important;
  margin: 1rem auto 1.75rem !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.facescore-toppage.fs-test > .facescore-simple-text-widget .fs-modern-section,
.facescore-toppage.fs-test > .facescore-simple-text-widget .fs-modern-container,
.facescore-toppage.fs-test > .facescore-simple-text-widget .fs-modern-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.facescore-toppage .facescore-shinndanexample {
  width: min(390px, calc(100% - 32px)) !important;
  max-width: calc(100% - 32px) !important;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .facescore-toppage.fs-test > .facescore-simple-text-widget > .facescore-shinndanmain {
    width: min(340px, calc(100vw - 32px)) !important;
    margin-left: 16px !important;
    margin-right: auto !important;
  }

  .facescore-toppage .facescore-frame5 {
    width: 280px !important;
    max-width: calc(100vw - 64px) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .facescore-toppage .facescore-shinndanexamplediscription {
    width: min(280px, calc(100vw - 48px)) !important;
    max-width: 280px !important;
    line-height: 1.7;
  }
}