:root {
  --bg: #09070f;
  --bg-soft: #100d18;
  --panel: rgba(21, 17, 31, .88);
  --panel-2: rgba(30, 24, 44, .82);

  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .16);

  --text: #f7f4fb;
  --muted: #aaa3b8;
  --muted-2: #7e778d;

  --accent: #b785ff;
  --accent-2: #8f5de7;
  --accent-soft: rgba(183, 133, 255, .12);

  --good: #9ee6b3;
  --danger: #ff9fba;

  --radius: 22px;
  --radius-small: 14px;

  --shadow:
    0 28px 80px rgba(0, 0, 0, .35);
}


* {
  box-sizing: border-box;
}


html {
  min-height: 100%;
  background: var(--bg);
}


body {
  margin: 0;

  min-height: 100vh;

  color: var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(120, 70, 180, .18),
      transparent 42%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(80, 42, 135, .09),
      transparent 34%
    ),
    var(--bg);
}


button,
input,
textarea {
  font: inherit;
}


button {
  color: inherit;
}


button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline:
    2px solid
    rgba(183, 133, 255, .8);

  outline-offset: 3px;
}


.shell {
  width: min(1180px, calc(100% - 40px));

  margin: 0 auto;

  min-height: 100vh;

  display: flex;
  flex-direction: column;
}


.header {
  min-height: 84px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .055);
}


.brand {
  display: flex;
  align-items: center;
  gap: 11px;

  font-weight: 800;
  letter-spacing: -.02em;
}


.brand-mark {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(183, 133, 255, .36);

  border-radius: 9px;

  color: var(--accent);

  background:
    rgba(183, 133, 255, .08);

  font-size: 13px;
}


.version {
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 500;
}


.main {
  flex: 1;

  display: flex;
  align-items: center;

  padding:
    54px 0
    72px;
}


.intro {
  width: min(790px, 100%);

  margin:
    0 auto;

  text-align: center;
}


.eyebrow {
  margin-bottom: 19px;

  color: var(--accent);

  font-size: 12px;
  font-weight: 800;

  letter-spacing: .16em;
  text-transform: uppercase;
}


h1 {
  margin: 0;

  font-size:
    clamp(46px, 7vw, 88px);

  line-height: .98;

  letter-spacing: -.055em;
}


.intro-copy {
  max-width: 590px;

  margin:
    27px auto
    0;

  color: var(--muted);

  font-size:
    clamp(17px, 2.2vw, 21px);

  line-height: 1.55;
}


.intro-actions {
  margin-top: 38px;

  display: flex;
  justify-content: center;
}


.primary-button,
.secondary-button {
  border: 0;
  border-radius: 999px;

  cursor: pointer;

  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease;
}


.primary-button {
  padding:
    16px 28px;

  color: #140e1c;

  background:
    linear-gradient(
      135deg,
      #cba6ff,
      #a976ee
    );

  font-weight: 800;

  box-shadow:
    0 12px 35px
    rgba(150, 91, 224, .22);
}


.primary-button:hover,
.secondary-button:hover {
  transform:
    translateY(-1px);
}


.secondary-button {
  padding:
    13px 20px;

  color: var(--text);

  background:
    rgba(255, 255, 255, .045);

  border:
    1px solid
    var(--border);
}


.intro-note {
  margin-top: 18px;

  color: var(--muted-2);

  font-size: 13px;
}


.quiz {
  width:
    min(900px, 100%);

  margin:
    0 auto;
}


.progress-row {
  margin-bottom: 19px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  color: var(--muted-2);

  font-size: 12px;
}


.progress-track {
  height: 4px;

  flex: 1;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .07);
}


.progress-bar {
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--accent-2),
      var(--accent)
    );

  transition:
    width .25s ease;
}


.question-card {
  padding:
    clamp(24px, 5vw, 48px);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  background:
    linear-gradient(
      180deg,
      rgba(27, 22, 39, .9),
      rgba(15, 12, 23, .94)
    );

  box-shadow:
    var(--shadow);
}


.question-kicker {
  margin-bottom: 9px;

  color: var(--accent);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .13em;
  text-transform: uppercase;
}


.question-title {
  margin: 0;

  font-size:
    clamp(27px, 4vw, 42px);

  line-height: 1.1;

  letter-spacing: -.035em;
}


.question-description {
  max-width: 690px;

  margin:
    14px 0
    0;

  color: var(--muted);

  font-size: 15px;
  line-height: 1.55;
}


.options {
  margin-top: 32px;

  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 11px;
}


.options.one-column {
  grid-template-columns: 1fr;
}


.option {
  min-height: 73px;

  padding:
    15px 17px;

  display: flex;
  align-items: center;
  gap: 13px;

  text-align: left;

  cursor: pointer;

  color: var(--text);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-small);

  background:
    rgba(255, 255, 255, .025);

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}


.option:hover {
  transform:
    translateY(-1px);

  border-color:
    var(--border-strong);

  background:
    rgba(255, 255, 255, .045);
}


.option.selected {
  border-color:
    rgba(183, 133, 255, .62);

  background:
    var(--accent-soft);

  box-shadow:
    inset 0 0 0 1px
    rgba(183, 133, 255, .08);
}


.option-emoji {
  width: 34px;

  flex:
    0 0 34px;

  text-align: center;

  font-size: 22px;
}


.option-copy {
  display: block;
}


.option-title {
  display: block;

  font-weight: 750;
}


.option-note {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.35;
}


.chips {
  margin-top: 28px;

  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}


.chip {
  padding:
    10px 14px;

  cursor: pointer;

  color: #dcd6e7;

  border:
    1px solid
    var(--border);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, .025);

  transition:
    background .15s ease,
    border-color .15s ease;
}


.chip.selected {
  color: #fff;

  border-color:
    rgba(183, 133, 255, .55);

  background:
    rgba(183, 133, 255, .13);
}


.limit-note {
  margin-top: 13px;

  color: var(--muted-2);

  font-size: 12px;
}


.question-actions {
  margin-top: 31px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}


.back-button {
  padding: 10px 4px;

  cursor: pointer;

  color: var(--muted);

  border: 0;

  background: transparent;
}


.next-button {
  padding:
    13px 22px;

  cursor: pointer;

  color: #140e1c;

  border: 0;
  border-radius: 999px;

  background:
    #c09bf5;

  font-weight: 800;
}


.next-button:disabled {
  cursor: default;

  opacity: .38;
}


.textarea {
  width: 100%;
  min-height: 126px;

  margin-top: 28px;
  padding: 16px 17px;

  resize: vertical;

  color: var(--text);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-small);

  background:
    rgba(255, 255, 255, .025);
}


.textarea::placeholder {
  color: #716a80;
}


.content-grid {
  margin-top: 28px;

  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;
}


.loading {
  width:
    min(650px, 100%);

  margin:
    0 auto;

  text-align: center;
}


.loader {
  width: 44px;
  height: 44px;

  margin:
    0 auto 24px;

  border:
    3px solid
    rgba(255, 255, 255, .09);

  border-top-color:
    var(--accent);

  border-radius: 50%;

  animation:
    spin .8s linear
    infinite;
}


@keyframes spin {
  to {
    transform:
      rotate(360deg);
  }
}


.results {
  width:
    min(1000px, 100%);

  margin:
    0 auto;
}


.results-head {
  margin-bottom: 24px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}


.results-title {
  margin: 0;

  font-size:
    clamp(31px, 5vw, 52px);

  letter-spacing: -.04em;
}


.results-subtitle {
  margin:
    9px 0
    0;

  color: var(--muted);
}


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


.result-card {
  padding:
    22px;

  border:
    1px solid
    var(--border);

  border-radius:
    18px;

  background:
    rgba(20, 16, 29, .88);
}


.result-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.result-top > div:first-child { min-width: 0; }
.result-title, .result-original, .result-identity { overflow-wrap: anywhere; }

.answer-review { display: grid; gap: 8px; margin: 22px 0; }
.review-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 15px 18px; color: inherit; text-align: left;
  background: rgba(20,16,29,.88); border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; font: inherit; overflow-wrap: anywhere;
}
.review-row > span:first-child { min-width: 0; }
.review-value { display: block; margin-top: 5px; font-size: .86rem; color: var(--muted); }
.review-edit { flex-shrink: 0; font-size: .8rem; color: #c8a7ff; }
.answer-warning { padding: 14px; border: 1px solid #b98238; border-radius: 10px; color: #f8d49c; line-height: 1.5; }
.rating-report { margin-top: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.rating-report summary { cursor: pointer; font-weight: 650; }
.rating-source-list { padding-left: 20px; margin-bottom: 0; }
.rating-source { margin: 12px 0; line-height: 1.6; overflow-wrap: anywhere; }
.rating-source span, .rating-source a { display: block; font-size: .82rem; }
.rating-source a { color: #c8a7ff; }
.rating-note { font-size: .78rem; color: var(--muted); line-height: 1.5; }
.intro-actions { flex-wrap: wrap; }
.intro-actions > button { overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 480px) {
  .review-row { padding: 12px; gap: 10px; }
  .review-edit { font-size: .72rem; }
  .results .intro-actions { flex-direction: column; align-items: stretch; }
  .results .intro-actions > button { width: 100%; white-space: normal; }
  .result-top .score { max-width: 105px; flex-shrink: 0; }
}


.result-rank {
  color: var(--accent);

  font-size: 12px;
  font-weight: 800;
}


.result-title {
  margin:
    4px 0
    0;

  font-size:
    clamp(22px, 3vw, 29px);

  line-height: 1.1;
}


.result-original {
  margin-top: 5px;

  color: var(--muted-2);

  font-size: 12px;
}


.score {
  min-width: 72px;

  text-align: right;
}


.score-value {
  font-size: 29px;
  font-weight: 850;

  letter-spacing: -.04em;
}


.score-label {
  margin-top: 2px;

  color: var(--muted-2);

  font-size: 10px;
  text-transform: uppercase;
}


.meta-chips {
  margin-top: 16px;

  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}


.meta-chip {
  padding:
    6px 9px;

  color: #c8c1d4;

  border:
    1px solid
    rgba(255, 255, 255, .075);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .022);

  font-size: 11px;
}


.synopsis {
  margin:
    17px 0
    0;

  color: #c3bdcd;

  font-size: 14px;
  line-height: 1.58;
}


.empty {
  padding:
    36px;

  text-align: center;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  background:
    rgba(20, 16, 29, .75);
}


.error {
  color:
    #ffc0d0;
}


.footer {
  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    var(--muted-2);

  font-size: 11px;
}


@media (max-width: 720px) {
  .shell {
    width:
      min(
        100% - 24px,
        1180px
      );
  }


  .header {
    min-height: 68px;
  }


  .main {
    padding:
      30px 0
      48px;

    align-items:
      flex-start;
  }


  .options,
  .content-grid {
    grid-template-columns:
      1fr;
  }


  .question-card {
    padding:
      23px 18px;
  }


  .results-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .result-top {
    gap: 10px;
  }


  .score {
    min-width:
      58px;
  }
}


/* ==========================================================
   TITLE_IDENTITY_STYLES_V126A_FINAL
   ========================================================== */

.result-title-main {
  font-weight:
    700;
}


.result-title-alias {
  margin-left:
    .22em;

  color:
    var(--muted-2);

  font-size:
    .82em;

  font-weight:
    450;
}


.result-original {
  margin-top:
    5px;

  color:
    var(--muted-2);

  font-size:
    13px;

  font-style:
    italic;

  opacity:
    .82;
}


.result-identity {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    6px;

  margin-top:
    9px;

  color:
    var(--text);

  font-size:
    13px;

  font-weight:
    650;

  line-height:
    1.45;
}


.result-identity-separator {
  color:
    var(--muted-2);

  font-weight:
    400;
}


/*
 * Постер появляется только если
 * backend отдал verified poster URL.
 */
.result-card.has-poster {
  display:
    grid;

  grid-template-columns:
    132px
    minmax(0, 1fr);

  column-gap:
    22px;

  align-items:
    start;
}


.result-card.has-poster
> :not(.result-poster-shell) {
  grid-column:
    2;
}


.result-poster-shell {
  grid-column:
    1;

  grid-row:
    1 / span 20;

  width:
    132px;

  aspect-ratio:
    2 / 3;

  overflow:
    hidden;

  border:
    1px solid
    var(--border);

  border-radius:
    14px;

  background:
    rgba(255, 255, 255, .04);
}


.result-poster {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


@media (
  max-width: 640px
) {

  .result-card.has-poster {
    grid-template-columns:
      92px
      minmax(0, 1fr);

    column-gap:
      14px;
  }


  .result-poster-shell {
    width:
      92px;

    border-radius:
      11px;
  }


  .result-title-alias {
    font-size:
      .76em;
  }


  .result-original {
    font-size:
      12px;
  }


  .result-identity {
    margin-top:
      7px;

    font-size:
      12px;
  }
}

/* v1.5.12 — evidence disclosure and accessible analyst link */
.analyst-source-link { display:inline-block; color:#d9baff; text-decoration:underline; text-underline-offset:3px; font-size:.84rem; overflow-wrap:anywhere; margin-top:.35rem; }
.analyst-source-link:hover { color:#ffffff; }
.analyst-source-link:focus-visible { outline:2px solid #ead6ff; outline-offset:3px; border-radius:2px; }
.subgenre-uncertainty, .neutral-profile-note { line-height:1.55; font-size:.88rem; padding:10px 12px; border-left:3px solid #b39bd8; background:rgba(153,115,200,.09); border-radius:3px; }
.neutral-profile-note { margin:16px 0; }