/* Шрифты лежат на нашем сервере, а не у Google: так IP посетителей не уходят за границу (152-ФЗ). */
@font-face{font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/assets/fonts/manrope-cyrillic.woff2') format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/assets/fonts/manrope-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Unbounded'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/assets/fonts/unbounded-cyrillic.woff2') format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Unbounded'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/assets/fonts/unbounded-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
  :root{
    --paper:#f7f0e2; --surface:#ffffff; --surface-2:#f0e6d2; --border:rgba(40,20,20,.15);
    --ink:#2b1610; --deep:#4a1522; --muted:#8a6f5f; --accent:#e0482f; --accent-2:#ad2f1c;
    --good:#1f8f6b; --good-bg:#e3f2ea; --bad:#c73a4d; --bad-bg:#f6e2e4;
    --info:#8a3aa0; --info-bg:#f2e5f6; --yellow:#eda435; --yellow-ink:#4a2a08;
    --shadow:0 14px 0 rgba(74,21,34,.1);
    color-scheme: light;
  }

  *{box-sizing:border-box}
  body{
    margin:0; background:var(--paper); color:var(--ink); overflow-x:hidden;
    font-family:'Manrope',sans-serif; padding-inline:24px; padding-block:18px;
  }
  h1,h2,h3{font-family:'Unbounded',sans-serif; font-weight:600; margin:0; text-wrap:balance; letter-spacing:-.01em}
  .wrap{max-width:1180px; margin:0 auto}

  .masthead{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:14px; border-bottom:1px solid var(--ink); flex-wrap:wrap}
  .brand{display:flex; align-items:baseline; gap:12px}
  .brand .mark{font-family:'Unbounded'; font-weight:700; font-size:11px; color:var(--muted); letter-spacing:.1em}
  .brand .name{font-family:'Unbounded'; font-weight:600; font-size:15px; letter-spacing:-.01em}
  .badge{font-size:10px; color:var(--muted); padding:0; border:0; font-weight:700; text-transform:uppercase; letter-spacing:.08em; text-align:right; line-height:1.5}

  /* ===== stage: numeral rail + overlapping preview, no dashboard grid ===== */
  .stage{position:relative; padding-top:22px}
  .rail{display:flex; align-items:center; gap:18px; margin-bottom:34px; padding-bottom:22px; border-bottom:1px solid var(--border)}
  .rail-num{font-family:'Unbounded'; font-weight:700; font-size:32px; line-height:1; color:#fff; letter-spacing:-.02em;
    background:var(--accent); width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto}
  .rail-total{font-family:'Unbounded'; font-size:13px; color:var(--muted); flex:0 0 auto}
  .steps{display:flex; flex-direction:row; flex-wrap:wrap; gap:8px 26px; flex:1; justify-content:space-between}
  .step-btn{all:unset; cursor:pointer; font-family:'Manrope'; font-weight:700; font-size:12.5px; color:var(--muted); display:flex; gap:7px; align-items:baseline; white-space:nowrap}
  .step-btn .n{font-family:'Unbounded'; font-size:10.5px}
  .step-btn.active{color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px}
  .step-btn.active .n{color:var(--accent)}
  .step-btn.done .n{color:var(--good)}
  @media (max-width:900px){
    .rail{flex-wrap:wrap}
    .rail-num{width:44px; height:44px; font-size:24px}
    .steps{justify-content:flex-start; gap:6px 18px}
  }

  /* широкий зазор, чтобы телефон-превью не прилипал к тексту */
  .stage-body{display:grid; grid-template-columns:1fr 280px; gap:28px 52px; align-items:start}
  @media (max-width:900px){ .stage-body{grid-template-columns:1fr; gap:20px} }
  .content-col{min-width:0; position:relative}

  .panel{background:transparent; padding:0}
  .panel h2{font-size:32px; margin-bottom:12px; line-height:1.05; max-width:640px}
  .step-marker{font-family:'Unbounded'; font-weight:700; font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:.12em; margin-bottom:8px; display:block}
  .hint{color:var(--muted); font-size:13.5px; font-weight:500; margin-bottom:30px; line-height:1.5; max-width:680px}
  [hidden]{display:none !important}

  label{display:block; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px}
  .field{margin-bottom:18px}
  input[type=text], input[type=email], textarea{width:100%; font-family:'Manrope'; font-weight:600; font-size:14.5px; color:var(--ink); background:var(--surface);
    border:0; border-bottom:2px solid var(--border); border-radius:0; padding:7px 2px; resize:vertical}
  input[type=text]:focus, textarea:focus{outline:none; border-color:var(--accent)}
  textarea{min-height:52px; line-height:1.4}
  .field.big-edit input[type=text]{font-family:'Unbounded'; font-weight:600; font-size:22px; border-bottom:0; padding:4px 0; line-height:1.15}
  .field.big-edit textarea{font-family:'Manrope'; font-style:italic; font-size:15px; border-bottom:0; padding:2px 0; color:var(--muted)}
  .field.big-edit{border-bottom:2px solid var(--border); padding-bottom:12px; margin-bottom:26px}

  /* ===== логотип QuizFeel ===== */
  .who-block{margin:0 0 22px; background:var(--surface); border-left:6px solid var(--row-bg,var(--accent)); border-bottom:1px solid var(--border); padding:18px 18px 16px 20px; animation:whoOpen .35s ease}
  @keyframes whoOpen{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
  .who-block .field{margin:0 !important}
  .who-block label{font-family:'Unbounded'; font-size:16px; font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0; margin-bottom:10px}
  .who-block input[type=text]{font-family:'Unbounded'; font-size:20px; font-weight:600; padding:10px 4px; border-bottom:2px solid var(--row-bg,var(--accent))}
  .who-block .lib-note{margin:8px 0 0 !important}
  .extras{border:1px solid var(--border); background:var(--surface); margin:0 0 22px}
  .extras summary{cursor:pointer; list-style:none; padding:14px 16px; display:flex; align-items:baseline; gap:6px 12px; flex-wrap:wrap}
  .extras summary::-webkit-details-marker{display:none}
  .extras summary span{font-family:'Unbounded'; font-weight:600; font-size:14px}
  .extras summary span::before{content:"+ "; color:var(--accent)}
  .extras[open] summary span::before{content:"− "}
  .extras summary small{font-size:12px; color:var(--muted); font-weight:600}
  .extra-block{padding:4px 16px 18px; border-top:1px solid var(--border)}
  .extra-block h3{font-size:14px; margin:14px 0 4px}
  .trust-list{list-style:none; margin:4px 0 18px; padding:0; display:grid; gap:9px}
  .trust-list li{position:relative; padding-left:26px; font-size:13.5px; line-height:1.45; color:var(--muted)}
  .trust-list li b{color:var(--ink); font-weight:700}
  .trust-list li::before{content:""; position:absolute; left:3px; top:4px; width:11px; height:6px; border-left:2px solid var(--good); border-bottom:2px solid var(--good); transform:rotate(-45deg)}
  /* ===== блок для гостей на финале: промокод ===== */
  .fp-promo{margin-top:30px; padding:22px 20px; border-radius:18px; background:rgba(255,255,255,.1); border:1px dashed rgba(255,255,255,.35); text-align:center}
  .fp-promo-over{display:block; font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--paccent2,#ff5fa2); margin-bottom:6px}
  .fp-promo-title{font-family:'Unbounded'; font-weight:600; font-size:clamp(18px,2.6vw,22px); line-height:1.2; margin-bottom:8px}
  .fp-promo-text{font-size:14px; line-height:1.5; color:rgba(255,255,255,.75); margin:0 auto 14px; max-width:38ch}
  .fp-promo-code{display:inline-flex; flex-direction:column; align-items:center; gap:2px; padding:10px 22px; border-radius:12px; border:2px dashed #fff; background:none; color:#fff; cursor:pointer; font-family:'Manrope'}
  .fp-promo-code b{font-family:'Unbounded'; font-weight:700; font-size:22px; letter-spacing:.08em}
  .fp-promo-code span{font-size:11px; opacity:.7}
  .fp-promo .pbtn{margin-top:16px}
  .promo-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:16px 0 4px}
  .promo-row input{max-width:220px; text-transform:uppercase; letter-spacing:.06em; font-weight:700}
  .promo-row input.ok{border-color:var(--good)}
  .promo-row .btn{padding:9px 16px}
  .promo-msg{font-size:13px; font-weight:700; color:var(--good)}
  .pay-price s{font-size:.55em; color:var(--muted); margin-right:6px; font-weight:600}
  /* ===== телефон: правки после проверки на 390 px ===== */
  .lib-tabs{overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none}
  .lib-tabs::-webkit-scrollbar{display:none}
  .lib-tabs button{flex:0 0 auto; white-space:nowrap}
  @media (max-width:560px){
    .landing .ld-hero .ld-trust{display:block}
    .landing .ld-hero .ld-trust span{display:block; margin:2px 0}
    .landing .ld-hero .ld-trust i{display:none}
    .fp-overlay .fp-stage .ppics{grid-template-columns:1fr 1fr}
    .fp-overlay .fp-stage .pmatch{grid-template-columns:1fr 1fr; gap:8px}
    .fp-overlay .fp-stage .pmatch .popt{font-size:13.5px; padding:12px 10px; gap:8px}
  }
  .consent-row{display:flex; align-items:flex-start; gap:10px; margin:14px 0 6px; font-size:13.5px; font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0; cursor:pointer}
  .consent-row input{width:18px; height:18px; margin-top:1px; accent-color:var(--good); flex:0 0 auto}
  .consent-row a, .consent-note a{color:inherit; text-decoration:underline; text-underline-offset:2px}
  .consent-note{font-size:12.5px; color:var(--muted); margin:0 0 16px 28px; line-height:1.45}
  /* ===== кто делает QuizFeel и подвал ===== */
  .ld-about{max-width:760px; margin:96px auto 0}
  .ld-about-card{display:flex; gap:22px; align-items:flex-start; text-align:left; margin-top:6px; padding:26px; border-radius:22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14)}
  /* Аня в прыжке, вырезана без фона; выпрыгивает за верхний край карточки. Тёплое свечение,
     чтобы тёмное худи не терялось на тёмном фоне */
  .ld-avatar{flex:0 0 auto; width:180px; height:auto; margin-top:-64px;
    filter:drop-shadow(0 0 22px rgba(224,167,46,.35)) drop-shadow(0 18px 24px rgba(0,0,0,.45))}
  .ld-about .ld-about-card{margin-top:80px}   /* место над карточкой, куда выпрыгивает фото */
  @media (max-width:560px){ .ld-avatar{margin-top:-72px} .ld-about .ld-about-card{margin-top:88px} }
  .ld-about-text h3{font-family:'Unbounded'; font-weight:600; font-size:20px; color:#fff; margin:4px 0 10px}
  .ld-about-text p{font-size:15px; line-height:1.55; color:rgba(255,255,255,.75); margin:0 0 16px}
  .ld-tg{display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px; background:#2aabee; color:#fff; font-weight:700; font-size:14px; text-decoration:none}
  .ld-tg:hover{background:#1f95d1}
  /* «Соберу за вас»: заказ квиза у Ани для тех, кто не хочет собирать сам */
  .ld-custom{font-size:15px; line-height:1.55; color:rgba(255,255,255,.85); background:rgba(255,255,255,.07); border-left:3px solid var(--yellow); border-radius:0 10px 10px 0; padding:12px 16px; margin:0 0 16px; text-align:left}
  .ld-about .ld-tg{white-space:nowrap}
  /* MAX первым: Telegram в РФ с 2026 года у многих не открывается */
  .ld-contacts{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
  .ld-tg.ld-max{background:linear-gradient(135deg,#3d7bff,#8a3dff)}
  .ld-tg.ld-max:hover{background:linear-gradient(135deg,#2f6af0,#7a2ff0)}
  .ld-tg.ld-tg-alt{background:none; border:1px solid rgba(255,255,255,.35)}
  .ld-tg.ld-tg-alt:hover{background:rgba(255,255,255,.1)}
  @media (max-width:560px){ .ld-contacts{justify-content:center} }
  .ld-custom b{color:var(--yellow)}
  .ld-about-text .ld-custom-note{font-size:13px; color:rgba(255,255,255,.55); margin:10px 0 0}
  .ld-anchor{font-size:15px; line-height:1.5; color:#fff; margin:0 auto 12px; max-width:48ch}
  .lib-custom{margin:12px 0 0; font-size:13px; line-height:1.5; color:var(--muted); text-align:center}
  .lib-custom a{color:var(--accent); font-weight:700}
  .ld-tg b{font-weight:800}
  .ld-foot{max-width:900px; margin:72px auto 0; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; font-size:12.5px; color:rgba(255,255,255,.5)}
  .ld-foot-links{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px}
  .ld-foot a{color:rgba(255,255,255,.7); text-decoration:underline; text-underline-offset:3px}
  @media (max-width:560px){ .ld-about-card{flex-direction:column; align-items:center; text-align:center; padding:22px 18px} .ld-about{margin-top:64px} }
  /* ===== шаги: три крупные карточки ===== */
  .rail{gap:0; margin-bottom:30px; padding-bottom:0; border-bottom:0}
  .rail-num, .rail-total{display:none}
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; flex:1}
  .step-btn{all:unset; box-sizing:border-box; display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:14px;
    background:var(--surface); border:1.5px solid var(--border); cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s; white-space:normal}
  .step-btn:hover{border-color:var(--ink)}
  .step-btn .n{flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-family:'Unbounded'; font-weight:700; font-size:17px;
    background:var(--surface-2); color:var(--muted)}
  .st-text b{display:block; font-family:'Unbounded'; font-weight:600; font-size:18px; color:var(--ink); line-height:1.1}
  .st-text small{display:block; font-family:'Manrope'; font-size:13px; font-weight:600; color:var(--muted); margin-top:4px}
  .step-btn.active{border-color:var(--accent); box-shadow:0 10px 24px rgba(224,72,47,.16); text-decoration:none; transform:translateY(-2px)}
  .step-btn.active .n{background:var(--accent); color:#fff}
  .step-btn.done .n{background:var(--good); color:#fff}
  .step-btn.done .st-text b{color:var(--muted)}
  @media (max-width:700px){
    .steps{gap:6px}
    .step-btn{flex-direction:column; align-items:flex-start; gap:8px; padding:10px 10px}
    .step-btn .n{width:32px; height:32px; font-size:14px}
    .st-text b{font-size:14px}
    .st-text small{display:none}
  }
  .qf-logo{font-family:'Unbounded'; font-weight:700; font-size:18px; letter-spacing:-.02em; line-height:1}
  .qf-logo b{font-weight:700; color:var(--accent)}
  .brand .name{font-family:'Manrope'; font-weight:600; font-size:12.5px; color:var(--muted); letter-spacing:0}
  .ld-top{display:flex; justify-content:center; padding-top:26px}
  .ld-top .qf-logo{font-size:20px; color:#fff}
  .ld-top .qf-logo b{color:#e0a72e}
  /* ===== заставка перед конструктором ===== */
  .splash{position:fixed; inset:0; z-index:400; display:grid; place-items:center;
    background:radial-gradient(120% 80% at 50% 30%, #7a1443 0%, #2b0f1f 60%, #1c0a14 100%); transition:opacity .45s ease}
  .splash.out{opacity:0}
  .sp-word{font-family:'Unbounded'; font-weight:800; font-size:clamp(56px,15vw,190px); letter-spacing:-.03em; line-height:1; white-space:nowrap}
  .sp-word span{display:inline-block; color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.28);
    animation:spFill .55s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay:calc(var(--i) * .26s + .15s)}
  .sp-word span.gold{--fill:#e0a72e}
  @keyframes spFill{
    0%{transform:translateY(0)}
    45%{transform:translateY(-16%); color:var(--fill,#fff); -webkit-text-stroke-color:transparent}
    100%{transform:translateY(0); color:var(--fill,#fff); -webkit-text-stroke-color:transparent}
  }
  .splash.done .sp-word{animation:spPulse .35s ease}
  @keyframes spPulse{50%{transform:scale(1.04)}}
  @media (prefers-reduced-motion:reduce){ .sp-word span{animation-duration:.01s; animation-delay:0s} }
  /* ===== анимация первого экрана ===== */
  .landing{position:relative; overflow:hidden}
  .landing > :not(.ld-bg){position:relative; z-index:1}
  .ld-bg{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
  .glow{position:absolute; border-radius:50%; background:radial-gradient(circle, var(--c) 0%, transparent 68%); animation:glowDrift 18s ease-in-out infinite alternate}
  .g1{width:620px; height:620px; left:-200px; top:60px; --c:rgba(255,46,147,.28)}
  .g2{width:760px; height:760px; right:-300px; top:-260px; --c:rgba(224,167,46,.2); animation-duration:22s}
  .g3{width:680px; height:680px; left:30%; top:calc(76vh - 300px); --c:rgba(123,47,247,.3); animation-duration:16s}
  @keyframes glowDrift{0%{transform:translate(0,0) scale(1)} 100%{transform:translate(60px,-40px) scale(1.18)}}
  .ld-float{position:absolute; left:var(--x); top:calc(var(--y) * .8vh + 40px); font-family:'Unbounded'; font-weight:800; font-size:var(--sz); line-height:1;
    color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.14); transform:rotate(var(--r));
    animation:floatY var(--d) ease-in-out infinite alternate, ldFade 1.6s ease both}
  @keyframes floatY{0%{translate:0 0; rotate:0deg} 100%{translate:0 -28px; rotate:8deg}}

  .ld-hero .ld-over, .ld-hero .ld-lead, .ld-hero .ld-ctas, .ld-hero .ld-trust, .ld-hero .ld-chevron, .ld-top{animation:ldUp .8s cubic-bezier(.2,.8,.2,1) both}
  .ld-top{animation-delay:0s}
  .ld-hero .ld-over{animation-delay:.15s}
  .ld-hero .ld-lead{animation-delay:.85s}
  .ld-hero .ld-ctas{animation-delay:1.05s}
  .ld-hero .ld-trust{animation-delay:1.25s}
  .ld-hero .ld-chevron{animation-name:ldFade, ldBob; animation-duration:.6s, 2.4s; animation-delay:1.6s, 2.2s; animation-iteration-count:1, infinite; animation-timing-function:ease, ease-in-out}
  .ld-title .w{display:inline-block; animation:ldWord .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(.3s + var(--i) * .12s)}
  @keyframes ldUp{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
  @keyframes ldFade{from{opacity:0} to{opacity:1}}
  @keyframes ldWord{from{opacity:0; transform:translateY(.45em) rotate(3deg); filter:blur(6px)} to{opacity:1; transform:none; filter:none}}

  .rot{position:relative}
  .rot-word{display:inline-block; color:#e0a72e}
  .rot-word.out{animation:rotOut .35s ease-in forwards}
  .rot-word.in{animation:rotIn .45s cubic-bezier(.2,.8,.2,1) both}
  @keyframes rotOut{to{opacity:0; transform:translateY(-.5em); filter:blur(4px)}}
  @keyframes rotIn{from{opacity:0; transform:translateY(.5em); filter:blur(4px)} to{opacity:1; transform:none; filter:none}}

  @media (prefers-reduced-motion:reduce){
    .ld-hero *, .ld-top{animation:none !important}
  }
  @media (max-width:700px){ .ld-float{font-size:calc(var(--sz) * .55)} }
  /* ===== стартовый экран ===== */
  .landing{margin:-18px -24px 0; background:radial-gradient(120% 70% at 50% 0%, #7a1443 0%, #2b0f1f 60%, #1c0a14 100%); color:#fff; padding:0 24px 72px; text-align:center}
  .landing[hidden]{display:none}
  body:has(.landing:not([hidden])){background:#1c0a14}
  .ld-hero{min-height:76vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:64px 0 40px; position:relative}
  .ld-over{display:block; font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#e0a72e; margin-bottom:18px}
  .ld-title{font-family:'Unbounded'; font-weight:700; font-size:clamp(30px,6.4vw,72px); line-height:1.02; letter-spacing:-.02em; margin:0 0 20px; max-width:none}
  .ld-lead{font-size:clamp(16px,1.9vw,19px); line-height:1.5; color:rgba(255,255,255,.78); max-width:44ch; margin:0 0 32px}
  .ld-lead b{color:#fff; font-weight:700}
  .ld-hero .ld-lead{max-width:58ch}   /* короткий лид в две строки, а не узким столбиком */
  .ld-ctas{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
  .ld-btn{font-family:'Unbounded'; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.05em; padding:18px 28px; border-radius:999px; border:1px solid rgba(255,255,255,.4); background:none; color:#fff; cursor:pointer; transition:transform .15s, background .15s}
  .ld-btn:hover{transform:translateY(-2px); background:rgba(255,255,255,.1)}
  .ld-btn.primary{background:#fff; color:#2b0f1f; border-color:#fff}
  .ld-btn.primary:hover{background:#ffe8b8}
  .ld-trust{margin:26px 0 0; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.62); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 12px}
  .ld-trust i{width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.35)}
  .ld-chevron{position:absolute; bottom:6px; left:50%; width:16px; height:16px; margin-left:-8px; border-right:1.5px solid rgba(255,255,255,.7); border-bottom:1.5px solid rgba(255,255,255,.7); transform:rotate(45deg); }
  @keyframes ldBob{0%,100%{translate:0 0} 50%{translate:0 6px}}
  @media (prefers-reduced-motion:reduce){ .ld-chevron{animation:none} }
  .ld-shots{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:760px; margin:0 auto}
  .ld-shots span{aspect-ratio:1; border-radius:16px; background:center/cover no-repeat; box-shadow:0 18px 40px rgba(0,0,0,.35)}
  .ld-shots span:nth-child(odd){transform:rotate(-2.5deg)} .ld-shots span:nth-child(even){transform:rotate(2deg) translateY(10px)}
  .ld-shots-cap{font-size:13px; color:rgba(255,255,255,.55); margin:26px 0 0}
  .ld-demo{max-width:1040px; margin:0 auto; padding-top:56px}
  .ld-h2{font-family:'Unbounded'; font-weight:700; font-size:clamp(26px,4.2vw,46px); line-height:1.05; letter-spacing:-.02em; color:#fff; margin:0 0 12px}
  .ld-sub{font-size:15px; color:rgba(255,255,255,.62); margin:0 auto 40px; max-width:44ch; line-height:1.5}
  .ld-duo{display:flex; align-items:flex-end; justify-content:center; gap:34px; cursor:pointer; user-select:none}
  .ld-ph{flex:0 0 230px; transform-origin:50% 100%; will-change:transform, opacity;
    transform:translateX(calc((1 - var(--p,1)) * -120px)) rotate(calc((1 - var(--p,1)) * -8deg)) scale(calc(.85 + var(--p,1) * .15));
    opacity:calc(.15 + var(--p,1) * .85)}
  .ph-screen{position:relative; height:470px; border:10px solid #0d0a18; border-radius:34px; overflow:hidden; background:#0d0a18; box-shadow:0 30px 60px rgba(0,0,0,.5)}
  .ph-slide{position:absolute; inset:0; padding:22px 14px 16px; color:#fff; display:flex; flex-direction:column; justify-content:center;
    background:radial-gradient(130% 85% at 50% 0%, var(--pbg2) 0%, var(--pbg1) 72%); opacity:0; transition:opacity .6s ease; pointer-events:none}
  .ph-slide.on{opacity:1}
  .ph-slide .pcard{text-align:left}
  .ph-slide .pnum{font-size:38px; margin:2px 0 6px; text-align:center}
  .ph-slide .pq{font-size:13px; margin-bottom:10px; text-align:center}
  .ph-slide .popt{padding:8px 10px; font-size:11.5px; margin-bottom:5px}
  .ph-slide .ptf .popt{min-height:50px; font-size:11px; letter-spacing:0; white-space:nowrap; padding:8px 6px}
  .ph-slide .pfact{font-size:11px; padding:9px 11px; margin:8px 0 0}
  .ph-slide .pfact::before{font-size:8px; margin-bottom:3px}
  .ph-slide .pmeta{font-size:8.5px; margin-bottom:6px}
  .ph-slide .pseg{gap:2px}
  .ph-turn{font-family:'Unbounded'; font-weight:600; font-size:12px; padding-bottom:7px; margin-bottom:9px; border-bottom:1px solid rgba(255,255,255,.2)}
  .ph-turn small{display:block; font-family:'Manrope'; font-size:8px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:2px}
  .ph-pics{display:grid; grid-template-columns:1fr 1fr; gap:6px}
  .ph-pics span{position:relative; aspect-ratio:1; border-radius:9px; background:center/cover no-repeat; border:3px solid transparent}
  .ph-pics span.ok{border-color:#18c07a}
  .ph-pics span.dim{opacity:.4}
  .ph-pics b{position:absolute; top:4px; left:4px; width:16px; height:16px; border-radius:50%; background:rgba(20,10,20,.6); color:#fff; font-family:'Unbounded'; font-size:8px; display:grid; place-items:center}
  .ph-pics span.ok b{background:#18c07a}
  .ph-final{text-align:center}
  .ph-final .lt-score{font-size:52px}
  .ph-final .lt-verdict{font-size:13px}
  .ph-final .lt-board div{font-size:11.5px}
  .ld-tv{position:relative; flex:1 1 auto; max-width:740px; margin:0;
    /* --p от 0 до 1: насколько телевизор «выехал» при прокрутке */
    transform-origin:50% 100%; will-change:transform, opacity;
    transform:perspective(1400px) translateY(calc((1 - var(--p,1)) * 110px)) rotateX(calc((1 - var(--p,1)) * 24deg)) scale(calc(.82 + var(--p,1) * .18));
    opacity:calc(.15 + var(--p,1) * .85)}
  .tv-screen{position:relative; aspect-ratio:16/9; border:12px solid #0d0a18; border-radius:16px; overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,.5); background:#0d0a18}
  .tv-slide{position:absolute; inset:0; padding:22px 30px; color:#fff; display:flex; flex-direction:column; text-align:left;
    background:radial-gradient(120% 90% at 50% 0%, var(--pbg2) 0%, var(--pbg1) 72%); opacity:0; transform:scale(1.02); transition:opacity .6s ease, transform .6s ease; pointer-events:none}
  .tv-slide.on{opacity:1; transform:none}
  .tv-stand{display:block; width:34%; height:14px; margin:0 auto; background:linear-gradient(#0d0a18,#2a2238); border-radius:0 0 10px 10px}
  .tv-top{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:10px}
  .ld-turn{font-family:'Unbounded'; font-weight:600; font-size:15px}
  .ld-turn small{display:block; font-family:'Manrope'; font-size:9px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:3px}
  .tv-count{font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6)}
  .tv-q{display:flex; align-items:center; gap:16px; margin:auto 0 16px}
  .tv-slide > :last-child{margin-bottom:auto}
  .tv-num{font-family:'Unbounded'; font-weight:800; font-size:clamp(34px,5vw,54px); line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.55); flex:0 0 auto}
  .tv-text{font-family:'Unbounded'; font-weight:600; font-size:clamp(15px,2.3vw,24px); line-height:1.2}
  .tv-pics{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
  .tv-pics span{position:relative; aspect-ratio:1; border-radius:10px; background:center/cover no-repeat; border:3px solid transparent}
  .tv-pics span.ok{border-color:#18c07a}
  .tv-pics span.dim{opacity:.4}
  .tv-pics b{position:absolute; top:6px; left:6px; width:20px; height:20px; border-radius:50%; background:rgba(20,10,20,.6); color:#fff; font-family:'Unbounded'; font-size:10px; display:grid; place-items:center}
  .tv-pics span.ok b{background:#18c07a}
  .tv-opts{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .tv-opts .popt{margin:0; font-size:clamp(12px,1.6vw,15px); padding:12px 14px}
  .tv-tf{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .tv-tf .popt{margin:0; justify-content:center; min-height:clamp(54px,9vw,96px); font-family:'Unbounded'; font-weight:600; font-size:clamp(14px,2vw,20px); text-transform:uppercase}
  .tv-slide .pfact{margin:16px 0 auto; font-size:clamp(11.5px,1.5vw,14px); padding:12px 16px}
  .tv-final{margin:auto; text-align:center; width:min(420px,100%)}
  .tv-final .ppill{margin-bottom:6px}
  .lt-score{font-family:'Unbounded'; font-weight:800; font-size:clamp(48px,8vw,86px); line-height:1}
  .lt-score small{font-size:.35em; color:rgba(255,255,255,.55)}
  .lt-verdict{font-family:'Unbounded'; font-weight:600; font-size:clamp(14px,2vw,20px); margin:8px 0 12px}
  .lt-board{text-align:left; border-top:1px solid rgba(255,255,255,.2)}
  .lt-board div{display:grid; grid-template-columns:34px 1fr auto; font-size:clamp(12px,1.5vw,14.5px); font-weight:700; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.2)}
  .lt-board div span:first-child{font-family:'Unbounded'; color:rgba(255,255,255,.5); font-size:.8em}
  .lt-board div.win{color:var(--paccent2)}
  .lt-board div.win span:first-child{color:inherit}
  .tv-nav{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:26px}
  .tv-dots{display:flex; gap:8px}
  .tv-dots button{width:34px; height:5px; border-radius:3px; border:0; padding:0; background:rgba(255,255,255,.25); cursor:pointer; overflow:hidden; position:relative}
  .tv-dots button.on::after{content:""; position:absolute; inset:0; background:#e0a72e; transform-origin:left; animation:tvProg var(--tv-ms,3000ms) linear forwards}
  .ld-demo.paused .tv-dots button.on::after{animation-play-state:paused}
  @keyframes tvProg{from{transform:scaleX(0)} to{transform:scaleX(1)}}
  .tv-cap{margin:0; font-size:13.5px; font-weight:700; color:rgba(255,255,255,.8)}
  .ld-demo .ld-shots-cap{margin-top:14px}
  @media (prefers-reduced-motion:reduce){ .tv-slide{transition:none} .tv-dots button.on::after{animation:none; transform:none} }
  @media (max-width:760px){
    .ld-tv{display:none}
    .ld-ph{flex-basis:260px}
  }
  @media (max-width:700px){
    .tv-screen{aspect-ratio:4/5; border-width:7px}
    .tv-slide{padding:14px}
    .tv-pics{grid-template-columns:1fr 1fr; gap:6px}
    .tv-opts{grid-template-columns:1fr}
    .ld-turn{font-size:12px}
  }
  /* карточки поводов на главной */
  .ld-occ{max-width:1040px; margin:96px auto 0}
  .ld-occ-title{font-family:'Unbounded'; font-weight:600; font-size:clamp(22px,3vw,32px); line-height:1.2; color:#fff; margin:0 0 28px}
  .ld-occ-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; text-align:left}
  .ld-occ-card{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:6px; padding:22px 20px 18px; border-radius:18px;
    border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:#fff; font:inherit; text-align:left; cursor:pointer;
    transition:transform .2s ease, border-color .2s ease, background .2s ease}
  .ld-occ-card::before{content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg,var(--c1),var(--c2))}
  .ld-occ-card:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.09)}
  .ld-occ-card:focus-visible{outline:2px solid #e0a72e; outline-offset:3px}
  .ld-occ-name{font-family:'Unbounded'; font-weight:600; font-size:18px}
  .ld-occ-sub{font-size:13px; color:rgba(255,255,255,.6); line-height:1.4}
  .ld-occ-ex{display:flex; flex-direction:column; gap:6px; margin:10px 0 12px}
  .ld-occ-ex span{font-size:13.5px; line-height:1.4; color:rgba(255,255,255,.85); padding-left:12px; border-left:2px solid var(--c2)}
  .ld-occ-go{margin-top:auto; font-size:13px; font-weight:800; letter-spacing:.04em; color:#e0a72e}
  @media (max-width:900px){ .ld-occ-grid{grid-template-columns:1fr 1fr} }
  /* на телефоне 9 карточек столбиком — это девять экранов, поэтому лента вбок */
  @media (max-width:560px){
    .ld-occ-grid{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin:0 -16px; padding:4px 16px 12px; scrollbar-width:none}
    .ld-occ-grid::-webkit-scrollbar{display:none}
    .ld-occ-card{flex:0 0 82%; scroll-snap-align:center}
    .ld-occ-card:hover{transform:none}
  }
  .ld-occ-hint{display:none; font-size:12.5px; color:rgba(255,255,255,.5); margin:4px 0 0}
  @media (max-width:560px){ .ld-occ-hint{display:block} }
  /* страницы под поиск /kviz/... : тот же тёмный стиль, что у главной */
  .seo .ld-top .qf-logo{text-decoration:none}
  .seo-hero{max-width:820px; margin:0 auto; padding:72px 0 8px}
  .seo-h1{font-family:'Unbounded'; font-weight:700; font-size:clamp(30px,5.4vw,58px); line-height:1.08; color:#fff; margin:0 0 22px}
  .seo-hero .ld-lead{margin-left:auto; margin-right:auto; max-width:58ch}
  .seo a.ld-btn{display:inline-block; text-decoration:none}
  .seo-trust{margin:18px 0 0; font-size:13.5px; color:rgba(255,255,255,.6)}
  .seo-block{max-width:760px; margin:88px auto 0; text-align:left}
  .seo-block .ld-over, .seo-h2{text-align:center}
  .seo-h2{font-family:'Unbounded'; font-weight:600; font-size:clamp(22px,3vw,30px); color:#fff; margin:0 0 24px}
  .seo-qs{list-style:none; counter-reset:q; margin:0; padding:0}
  .seo-qs li{counter-increment:q; position:relative; padding:14px 0 14px 46px; border-top:1px solid rgba(255,255,255,.14); font-size:16px; line-height:1.45; color:#fff}
  .seo-qs li::before{content:counter(q, decimal-leading-zero); position:absolute; left:0; top:15px; font-family:'Unbounded'; font-size:13px; color:#e0a72e}
  .seo-type{display:block; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:3px}
  .seo-note{font-size:14px; line-height:1.55; color:rgba(255,255,255,.65); margin:18px 0 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.14)}
  .seo-links{max-width:760px; margin:88px auto 0}
  .seo-links div{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
  .seo-links a{padding:10px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.25); color:#fff; text-decoration:none; font-size:14px; font-weight:700}
  .seo-links a:hover{background:rgba(255,255,255,.1)}
  .seo .ld-foot a{color:inherit}

  /* частые вопросы на главной */
  .ld-faq{max-width:760px; margin:96px auto 0; text-align:left}
  .ld-faq .ld-over{text-align:center}
  .ld-faq details{border-top:1px solid rgba(255,255,255,.16)}
  .ld-faq details:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
  .ld-faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:18px 2px; font-weight:700; font-size:16px; color:#fff}
  .ld-faq summary::-webkit-details-marker{display:none}
  .ld-faq summary::after{content:"+"; flex:0 0 auto; font-family:'Unbounded'; font-size:20px; color:#e0a72e; transition:transform .2s ease}
  .ld-faq details[open] summary::after{transform:rotate(45deg)}
  .ld-faq summary:focus-visible{outline:2px solid #e0a72e; outline-offset:2px}
  .ld-faq p{margin:0 2px 18px; font-size:15px; line-height:1.55; color:rgba(255,255,255,.72); max-width:62ch}
  .ld-faq a{color:#e0a72e}
  .ld-how{max-width:900px; margin:96px auto 0}
  .ld-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; text-align:left; margin-top:10px}
  .ld-steps div{border-top:1px solid rgba(255,255,255,.2); padding-top:18px}
  .ld-steps b{font-family:'Unbounded'; font-size:13px; color:#e0a72e}
  .ld-steps h3{font-family:'Unbounded'; font-weight:600; font-size:19px; margin:10px 0 8px; color:#fff}
  .ld-steps p{font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.68); margin:0}
  .ld-prices{max-width:760px; margin:96px auto 0}
  .ld-price-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:6px 0 22px}
  .ld-price-row div{border:1px solid rgba(255,255,255,.22); border-radius:18px; padding:22px 14px; display:flex; flex-direction:column; gap:4px}
  .ld-price-row div.hot{background:#fff; color:#2b0f1f; border-color:#fff}
  .ld-price-row b{font-family:'Unbounded'; font-weight:700; font-size:26px}
  .ld-price-row span{font-weight:700; font-size:14.5px}
  .ld-price-row small{font-size:12.5px; opacity:.65}
  .ld-note{font-size:14.5px; color:rgba(255,255,255,.7); margin:0 auto 26px; max-width:46ch; line-height:1.5}
  @media (max-width:700px){
    .landing{margin:-18px -16px 0; padding:0 16px 56px}
    .ld-shots{grid-template-columns:1fr 1fr}
    .ld-steps, .ld-price-row{grid-template-columns:1fr}
    .ld-btn{width:100%}
    .ld-how, .ld-prices{margin-top:64px}
  }
  /* ===== occasion picker — each row is a stated idea, own color on select ===== */
  .theme-grid{display:flex; flex-direction:column; border-top:1px solid var(--border)}
  .theme-card{width:100%; font:inherit; display:grid; grid-template-columns:40px 1fr auto; align-items:baseline; gap:14px; padding:10px 4px; cursor:pointer;
    background:transparent; border:0; border-bottom:1px solid var(--border); transition:background .15s, color .15s; text-align:left; position:relative; overflow:hidden}
  .theme-card .idx{font-family:'Unbounded'; font-weight:600; font-size:13px; color:var(--muted)}
  .theme-card .bar{display:none}
  .theme-card:hover{background:var(--surface-2)}
  .theme-card.sel{background:var(--row-bg,var(--deep)); color:var(--paper)}
  .theme-card.sel .idx{color:var(--yellow)}
  .theme-card.sel .t-sub{color:var(--paper); opacity:.75}
  .theme-swatch{display:none}
  .theme-card .t-name{font-weight:700; font-size:16px; font-family:'Unbounded'; display:block; line-height:1.1}
  .theme-card .t-sub{font-size:11.5px; color:var(--muted); font-weight:600; margin-top:2px; display:block}
  .theme-card .go{font-family:'Unbounded'; font-size:16px; opacity:0; transition:opacity .12s; color:var(--yellow)}
  .theme-card.sel .go{opacity:1}

  .qlist{display:flex; flex-direction:column}
  .qcard{border:0; border-bottom:1px solid var(--border); padding:12px 0}
  .qcard:first-child{border-top:1px solid var(--border)}
  .qcard-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
  .qcard-head .qn{font-family:'Unbounded'; font-weight:600; font-size:12px; color:var(--muted)}
  .icon-btn{border:0; background:none; color:var(--muted); font-size:11.5px; font-weight:700; padding:4px 2px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
  .icon-btn:hover{color:var(--accent)}
  .opts-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin-top:10px}
  .opt-row{display:flex; align-items:center; gap:8px; background:transparent; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:7px 2px}
  .opt-row input[type=text]{border:0; background:none; padding:2px; font-size:13.5px; font-weight:600}
  .opt-row.correct{border-bottom-color:var(--good)}
  .radio{width:16px; height:16px; accent-color:var(--good); flex:0 0 auto}
  .add-q{align-self:flex-start; border:1px solid var(--ink); background:none; color:var(--ink); font-weight:700; font-size:12.5px; padding:10px 16px; border-radius:2px; cursor:pointer; text-align:center; text-transform:uppercase; letter-spacing:.04em}
  .add-q:hover{background:var(--deep); border-color:var(--deep); color:var(--paper)}
  .add-q-row{display:flex; gap:10px; flex-wrap:wrap}
  .add-q-row .add-q{flex:0 0 auto; margin-top:0}

  .qtype-badge{display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:2px 0; margin-left:10px; border-bottom:2px solid currentColor}
  .qtype-badge.test{color:var(--accent)}
  .qtype-badge.tf{color:var(--good)}
  .qtype-badge.match{color:var(--info)}

  .tf-toggle{display:flex; gap:10px; margin-top:6px}
  .tf-btn{flex:1; padding:10px; border-radius:2px; border:1px solid var(--border); background:var(--surface); font-family:'Manrope'; font-weight:700; font-size:13px; cursor:pointer; color:var(--muted)}
  .tf-btn.sel-true{border-color:var(--good); color:var(--good); background:var(--good-bg)}
  .tf-btn.sel-false{border-color:var(--bad); color:var(--bad); background:var(--bad-bg)}

  .qcard.open{background:var(--surface); margin:6px -14px; padding:14px; border:1px solid var(--border); box-shadow:0 8px 24px rgba(74,21,34,.08)}
  .qcard:not(.open){padding:0}
  .qrow{display:grid; grid-template-columns:26px 10px 1fr auto auto; align-items:center; gap:10px; padding:10px 2px; cursor:pointer}
  .qrow:hover{background:var(--surface-2)}
  .qrow-n{font-family:'Unbounded'; font-weight:600; font-size:11.5px; color:var(--muted); text-align:right}
  .qtype-dot{width:8px; height:8px; border-radius:50%; background:var(--accent)}
  .qtype-dot.tf{background:var(--good)} .qtype-dot.match{background:var(--info)}
  .qrow-text{font-weight:600; font-size:13.5px; line-height:1.35; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .qrow-ans{font-size:12px; font-weight:700; color:var(--good); white-space:nowrap; max-width:170px; overflow:hidden; text-overflow:ellipsis}
  .qrow-tools{display:flex; gap:2px; opacity:.35; transition:opacity .15s}
  .qrow:hover .qrow-tools{opacity:1}
  .qrow-btn{border:0; background:none; width:26px; height:26px; border-radius:4px; font-size:13px; font-weight:700; color:var(--muted); cursor:pointer}
  .qrow-btn:hover:not(:disabled){background:var(--paper); color:var(--accent)}
  .qrow-btn:disabled{opacity:.3; cursor:default}
  .done-btn{margin-left:14px; border:1px solid var(--good); background:var(--good); color:#fff; font-family:'Manrope'; font-weight:700; font-size:11.5px; padding:6px 12px; border-radius:2px; cursor:pointer}
  @media (max-width:640px){ .qrow{grid-template-columns:22px 8px 1fr auto} .qrow-ans{display:none} .qrow-tools{opacity:1} }
  .q-legend{display:flex; gap:14px; font-size:11.5px; font-weight:700; color:var(--muted)}
  .q-legend span{display:inline-flex; align-items:center; gap:6px}
  .q-legend .qtype-dot{display:inline-block}
  .qtype-dot.pic{background:var(--yellow)}
  .qtype-badge.pic{color:#b87a10}
  .pic-edit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
  @media (max-width:760px){ .pic-edit-grid{grid-template-columns:1fr 1fr} }
  .pic-edit{border:1px solid var(--border); padding:6px; background:var(--surface)}
  .pic-edit.correct{border-color:var(--good); box-shadow:0 0 0 1px var(--good)}
  .pic-slot{display:grid; place-items:end center; aspect-ratio:1; background:var(--surface-2) center/cover no-repeat; cursor:pointer; margin:0; padding:0 0 8px; text-transform:none; letter-spacing:0}
  .pic-slot span{font-size:11px; font-weight:700; color:var(--ink); background:rgba(255,255,255,.85); padding:4px 8px; border-radius:2px}
  .pic-slot:not([style*="url"]){place-items:center; padding:0; border:1px dashed var(--border)}
  .pic-edit-row{display:flex; align-items:center; gap:6px; margin-top:6px}
  .pic-edit-row input[type=text]{font-size:12.5px; padding:5px 2px}
  .pic-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:4px}
  .pic-thumbs figure{margin:0; font-size:11.5px; color:var(--ink)}
  .pic-thumbs figure span{display:block; aspect-ratio:1; background:var(--surface-2) center/cover; border:2px solid transparent}
  .pic-thumbs figure.correct span{border-color:var(--good)}
  .pic-thumbs figure.correct figcaption{color:var(--good)}
  .pic-thumbs figcaption{margin-top:4px; line-height:1.3}
  .card-label{display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:12px 0 4px}
  .qcard .card-label:first-of-type{margin-top:0}
  .qcard.flash{animation:cardFlash 1.6s ease}
  @keyframes cardFlash{0%,35%{background:color-mix(in srgb, var(--yellow) 28%, transparent)} 100%{background:transparent}}
  .lib-edit-btn{display:inline-block; margin-top:10px; border:0; background:none; padding:0; font-family:'Manrope'; font-weight:700; font-size:12px; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
  .cast-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-bottom:10px; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
  .cast-row select{font-family:'Manrope'; font-weight:700; font-size:13px; color:var(--ink); background:var(--surface-2); border:0; border-bottom:2px solid var(--accent); border-radius:0; padding:5px 6px; max-width:170px; text-transform:none; letter-spacing:0}
  .pair-row{display:flex; gap:8px; align-items:center; margin-bottom:8px}
  .pair-row input{flex:1}
  .pair-arrow{color:var(--muted); font-weight:700; flex:0 0 auto}
  .add-pair{border:1px dashed var(--border); background:none; color:var(--muted); font-size:12px; font-weight:700; padding:8px; border-radius:2px; cursor:pointer; width:100%; font-family:'Manrope'}
  .add-pair:hover{border-color:var(--accent); color:var(--accent)}

  .price-chip{display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap;
    position:sticky; top:0; z-index:5; background:var(--paper); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:10px 18px; margin-bottom:16px}
  .price-chip .amount{font-family:'Unbounded'; font-weight:600; font-size:20px; white-space:nowrap; margin-right:10px}
  .price-chip .count{font-size:11.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.06em}
  .price-hint{font-size:13px; font-weight:700; color:var(--good)}
  .price-hint.warn{color:var(--accent)}
  .price-chip.bump .amount{animation:priceBump .5s ease}
  @keyframes priceBump{0%{color:var(--accent); transform:scale(1.12)} 100%{color:inherit; transform:none}}
  .lib-note{font-size:12px; color:var(--muted); font-weight:600; margin:-4px 0 10px}
  .lib-tabs{display:flex; gap:18px; border-bottom:1px solid var(--border); margin-bottom:4px}
  .lib-tabs button{border:0; border-bottom:2px solid transparent; background:none; font-family:'Manrope'; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:0 0 8px; cursor:pointer}
  .lib-tabs button.active{color:var(--ink); border-bottom-color:var(--accent)}

  .lib-list{display:flex; flex-direction:column; margin-bottom:18px; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    max-height:300px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-right:6px}
  .lib-list .lib-item:last-child{border-bottom:0}
  .lib-tabs .n{font-weight:600; opacity:.6; margin-left:3px}
  .lib-item{border:0; border-bottom:1px solid var(--border); background:transparent}
  .lib-item-head{display:flex; align-items:center; gap:10px; padding:9px 2px; cursor:pointer}
  .lib-item-head .qtext{flex:1; font-weight:600; font-size:13.5px; line-height:1.35}
  .lib-chevron{color:var(--muted); font-size:11px; transition:transform .15s; flex:0 0 auto}
  .lib-item.open .lib-chevron{transform:rotate(180deg)}
  .lib-add-btn{border:1px solid var(--accent); color:var(--accent); background:none; font-family:'Manrope'; font-weight:700; font-size:11px; padding:6px 12px; border-radius:2px; cursor:pointer; flex:0 0 auto; white-space:nowrap; text-transform:uppercase; letter-spacing:.03em}
  .lib-add-btn.added{background:var(--good); border-color:var(--good); color:#fff}
  .lib-detail{display:none; padding:0 2px 16px 26px; font-size:12.5px; color:var(--muted); font-weight:600; line-height:1.5}
  .lib-item.open .lib-detail{display:block}
  .opt-row-ro{padding:6px 0; border-radius:0; background:transparent; border:0; border-bottom:1px solid var(--border); margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--ink)}
  .opt-row-ro.correct{color:var(--good); font-weight:700}

  .tier{display:grid; grid-template-columns:70px 1fr; gap:18px; align-items:start; padding:11px 0; border-bottom:1px solid var(--border)}
  .tier:first-child{border-top:1px solid var(--ink)}
  .tier .range{font-family:'Unbounded'; font-weight:600; font-size:13px; color:var(--accent); padding-top:9px}

  .foot-nav{display:flex; justify-content:space-between; margin-top:32px; padding-top:18px; border-top:1px solid var(--border)}
  .btn{font-family:'Manrope'; font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; padding:11px 22px; border-radius:2px; border:1px solid var(--ink); cursor:pointer; transition:transform .1s, box-shadow .1s; background:none; color:var(--ink)}
  .btn.primary{background:var(--accent); color:var(--paper); border-color:var(--accent); box-shadow:4px 4px 0 var(--deep)}
  .btn.primary:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--deep)}
  .btn.primary:active{transform:translate(0,0); box-shadow:1px 1px 0 var(--deep)}
  .btn.ghost{background:none; color:var(--muted); border-color:var(--border)}
  .btn:disabled{opacity:.35; cursor:default; transform:none; box-shadow:none}

  .pkg-grid{display:grid; grid-template-columns:1fr 1fr 1.15fr; gap:0; border:1px solid var(--ink)}
  @media (max-width:640px){ .pkg-grid{grid-template-columns:1fr} }
  .pkg-card{border:0; border-right:1px solid var(--ink); padding:15px 14px; background:var(--surface); cursor:pointer; position:relative; text-align:left; transition:background .12s}
  .pkg-card:last-child{border-right:0}
  @media (max-width:640px){ .pkg-card{border-right:0; border-bottom:1px solid var(--ink)} }
  .pkg-card:hover{background:var(--surface-2)}
  .pkg-card.sel{background:var(--deep); color:var(--paper)}
  .pkg-card.sel .pkg-cap, .pkg-card.sel .pkg-blurb{color:#cfc8dc}
  .pkg-card.disabled{opacity:.35; cursor:not-allowed}
  .pkg-badge{display:block; background:none; color:var(--accent); font-size:10px; font-weight:700; padding:0 0 10px; text-transform:uppercase; letter-spacing:.06em; border:0}
  .pkg-card.sel .pkg-badge{color:var(--yellow)}
  .pkg-name{font-family:'Unbounded'; font-weight:600; font-size:16px; margin-bottom:6px}
  .pkg-cap{font-size:12px; color:var(--muted); font-weight:600; margin-bottom:14px}
  .pkg-price{font-family:'Unbounded'; font-weight:600; font-size:26px; margin-bottom:10px}
  .pkg-blurb{font-size:12px; color:var(--muted); font-weight:500; line-height:1.4}

  .pay-box{display:flex; justify-content:space-between; align-items:center; background:transparent; border-bottom:1px solid var(--ink); padding:12px 0; margin-bottom:14px}
  .pay-price{font-family:'Unbounded'; font-weight:600; font-size:30px}
  .link-out{display:none; margin-top:16px; background:var(--good-bg); border:1px solid var(--good); border-radius:2px; padding:16px 18px; gap:14px; align-items:center; justify-content:space-between}
  .link-out.show{display:flex}
  .link-out code{font-family:'Unbounded'; font-size:13px; color:var(--good)}
  .config-note{margin-top:24px; font-size:12px; color:var(--muted); background:var(--surface-2); border:0; border-radius:2px; padding:14px 16px; font-family:monospace; white-space:pre-wrap}

  /* ===== предпросмотр: ровная светлая колонка в тон конструктора; ярким остаётся только телефон.
     Раньше была тёмная наклонная плашка с тенью, и Аня заметила, что она похожа на рекламный баннер ===== */
  .preview-object{position:sticky; top:24px; width:100%; z-index:1}
  @media (max-width:900px){
    .preview-object{position:static; width:280px; margin:0 auto 32px}
  }
  .preview-col{display:flex; flex-direction:column; gap:14px; color:var(--ink)}
  .preview-col .cap{font-family:'Unbounded'; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent)}
  .preview-tabs{display:flex; gap:16px; border-bottom:1px solid var(--border); padding-bottom:0}
  .preview-tabs button{border:0; border-bottom:2px solid transparent; background:none; font-family:'Manrope'; font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:0 0 10px; cursor:pointer}
  .preview-tabs button.active{color:var(--ink); border-bottom-color:var(--accent)}
  .phone{background:#0d0a18; border-radius:34px; padding:12px; box-shadow:var(--shadow)}
  .phone-screen{border-radius:24px; overflow:hidden; min-height:430px; display:flex; align-items:center; justify-content:center; padding:24px 16px; color:#fff;
    background:radial-gradient(130% 85% at 50% 0%, var(--pbg2,#7c4dff) 0%, var(--pbg1,#1fb6ff) 72%); transition:background .3s}

  /* ===== экран игры: крупная типографика на цвете темы, без карточек и смайликов ===== */
  .pcard{width:100%; color:#fff; position:relative; text-align:center}
  .ppill{display:block; font-family:'Manrope'; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.18em; color:var(--paccent2,#ff5fa2); margin-bottom:14px}
  .ptitle{font-family:'Unbounded'; font-weight:700; font-size:22px; line-height:1.1; letter-spacing:-.01em; margin-bottom:12px; text-wrap:balance}
  .psub{font-size:12.5px; color:rgba(255,255,255,.72); line-height:1.5; margin:0 auto 18px; max-width:34ch}
  .pnum{font-family:'Unbounded'; font-weight:800; font-size:58px; line-height:.9; letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.6); margin:4px 0 12px}
  .pnum small{font-size:.28em; -webkit-text-stroke:0; color:rgba(255,255,255,.5); letter-spacing:0; margin-left:4px}
  .pq{font-family:'Unbounded'; font-weight:600; font-size:15px; line-height:1.25; margin:0 auto 16px; text-wrap:balance}
  .popt{display:flex; gap:10px; align-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:14px;
    padding:11px 13px; font-family:'Manrope'; font-size:12.5px; font-weight:700; color:#fff; margin-bottom:8px; text-align:left; line-height:1.3}
  .popt .k{font-family:'Unbounded'; font-weight:700; font-size:12px; color:var(--paccent2,#ff5fa2); flex:0 0 auto; min-width:14px}
  .pbtn{display:block; width:100%; text-align:center; background:#fff; color:#1b1430; border:0; font-family:'Unbounded'; font-weight:600; font-size:12px;
    text-transform:uppercase; letter-spacing:.06em; padding:14px 20px; border-radius:999px; margin-top:10px; cursor:pointer}
  .pscore{font-family:'Unbounded'; font-weight:800; font-size:64px; line-height:1; letter-spacing:-.03em; margin:6px 0 10px}
  .pscore small{font-size:.32em; color:rgba(255,255,255,.55); letter-spacing:0}
  .pverdict{font-family:'Unbounded'; font-weight:600; font-size:16px; line-height:1.2; margin:6px 0 8px; text-wrap:balance}
  .preview-note{font-size:11px; color:var(--muted); text-align:center; font-weight:600}

  .pmeta{display:flex; justify-content:space-between; font-size:10px; font-weight:800; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.16em; margin-bottom:10px}
  .pseg{display:flex; gap:4px; margin-bottom:6px}
  .pseg i{flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.18)}
  .pseg i.done{background:var(--paccent2,#ff5fa2)}
  .pseg i.cur{background:#fff}
  .ptf{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .ptf .popt{justify-content:center; font-family:'Unbounded'; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.04em; min-height:64px; margin:0}

  /* ===== полный прогон ===== */
  button.popt{width:100%; cursor:default}
  .popt.clickable{cursor:pointer; transition:background .15s, color .15s, transform .12s}
  .popt.clickable:hover{background:#fff; color:#1b1430; transform:translateY(-2px)}
  .popt.clickable:hover .k{color:var(--paccent,#7c4dff)}
  .popt.selmatch{background:#fff; color:#1b1430}
  .popt.correct{background:#18c07a; border-color:#18c07a; color:#fff}
  .popt.correct .k{color:#fff}
  .popt.wrong{background:#ff4d6d; border-color:#ff4d6d; color:#fff; animation:pShake .35s}
  .popt.wrong .k{color:#fff}
  .popt.dim{opacity:.32}
  @keyframes pShake{0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)}}
  .pfact{display:none; text-align:left; background:rgba(255,255,255,.1); border-left:3px solid var(--paccent2,#ff5fa2); border-radius:0 14px 14px 0; padding:14px 18px; margin:16px 0 4px; font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.92)}
  .pfact::before{content:"А вот как было"; display:block; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--paccent2,#ff5fa2); margin-bottom:6px}
  .pfact.show{display:block; animation:pRise .35s ease}
  @keyframes pRise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

  .fp-overlay{position:fixed; inset:0; z-index:200; display:flex; overflow-y:auto; padding:56px 24px 40px; color:#fff;
    background:radial-gradient(120% 90% at 50% -10%, var(--pbg2,#7c4dff) 0%, var(--pbg1,#1fb6ff) 68%)}
  .fp-close{position:fixed; top:18px; right:20px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:none; color:#fff; font-size:15px; cursor:pointer; display:grid; place-items:center}
  .fp-close:hover{background:#fff; color:#1b1430}
  .fp-stage{width:100%; max-width:640px; margin:auto}
  .fp-stage .ptitle{font-size:clamp(28px,5vw,44px)}
  .fp-stage .psub{font-size:15px; max-width:44ch}
  .fp-stage .pnum{font-size:clamp(80px,14vw,128px); -webkit-text-stroke-width:2px; margin:26px 0 14px}
  .fp-stage .pq{font-size:clamp(20px,3.4vw,30px); margin-bottom:26px}
  .fp-stage .popt{font-size:16px; padding:16px 18px; border-radius:16px}
  .fp-stage .popt .k{font-size:15px}
  .fp-stage .pgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .fp-stage .pgrid .popt{margin:0; min-height:76px}
  .fp-stage .ptf .popt{min-height:120px; font-size:20px}
  .fp-stage .pmatch{display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:left}
  .fp-stage .pbtn{max-width:320px; margin:22px auto 0; font-size:13px; padding:17px 24px; scroll-margin-bottom:24px}
  .fp-stage .pscore{font-size:clamp(96px,18vw,160px)}
  .fp-stage .pverdict{font-size:clamp(20px,3.2vw,28px)}
  .fp-stage .pmeta{font-size:11px}
  @media (max-width:560px){ .fp-stage .pgrid, .fp-stage .pmatch{grid-template-columns:1fr} .fp-overlay{padding:56px 16px 32px} }
  /* ноутбук и телевизор по высоте невысокие: номер вопроса и отступы меньше, чтобы вопрос,
     ответы, пояснение и «Дальше» помещались на один экран */
  @media (min-width:561px) and (max-height:860px){
    .fp-overlay{padding-top:32px; padding-bottom:24px}
    .fp-stage .pnum{font-size:clamp(56px,9vh,84px); margin:10px 0 8px}
    .fp-stage .pq{margin-bottom:18px}
    .fp-stage .pgrid .popt{min-height:60px}
    .fp-stage .pbtn{margin-top:14px}
    .fp-stage .fp-turn-banner{padding-bottom:8px; margin-bottom:10px}
  }

  .ppics-mini{display:grid; grid-template-columns:1fr 1fr; gap:6px}
  .ppics-mini span{aspect-ratio:1; border-radius:10px; background:rgba(255,255,255,.12) center/cover}
  .popt.pic{flex-direction:column; align-items:stretch; gap:8px; padding:6px}
  .fp-stage .pgrid .popt.pic{padding:7px; min-height:0}
  .fp-stage .ppics{max-width:470px; margin:0 auto; gap:10px}
  .fp-stage .ppics + .pfact, .fp-stage .ppics ~ .pbtn{max-width:470px; margin-left:auto; margin-right:auto}
  .fp-stage .pic-cap{font-size:13px}
  .pic-img{display:block; aspect-ratio:1; border-radius:11px; background:rgba(255,255,255,.1) center/cover no-repeat}
  .pic-img{position:relative}
  .pic-k{position:absolute; top:8px; left:8px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:rgba(20,10,20,.55); color:#fff; font-family:'Unbounded'; font-weight:700; font-size:12px; backdrop-filter:blur(4px)}
  .popt.correct .pic-k{background:#18c07a} .popt.wrong .pic-k{background:#ff4d6d}
  .pic-error{margin:6px 0 0; font-size:11.5px; line-height:1.35; font-weight:600; color:var(--bad)}
  .pic-img.empty{display:grid; place-items:center}
  .pic-empty{font-size:12px; font-weight:700; color:rgba(255,255,255,.5); padding:0 12px; text-align:center}
  .pic-edit-letter{font-size:12px; font-weight:700; color:var(--muted)}
  .pic-edit.correct .pic-edit-letter{color:var(--good)}
  .pic-cap{display:flex; gap:8px; align-items:baseline; padding:2px 6px 4px; font-size:14px}
  .pic-cap:has(.k:only-child){justify-content:center}
  .popt.pic.clickable:hover{transform:translateY(-3px)}
  .g-label{display:block; font-size:10.5px; font-weight:800; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.16em; margin:0 0 8px; text-align:left}
  .fp-stage input[type=text]{background:rgba(255,255,255,.08); color:#fff; border:0; border-bottom:2px solid rgba(255,255,255,.3); padding:10px 12px; font-size:15px}
  .fp-stage input[type=text]:focus{border-color:#fff}
  .fp-stage .add-pair{color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.3)}
  .fp-stage .add-pair:hover{color:#fff; border-color:#fff}
  .fp-stage .icon-btn{color:rgba(255,255,255,.7)}
  .fp-setup{text-align:left}
  .fp-setup .ppill, .fp-setup .ptitle, .fp-setup .psub{text-align:center}
  .fp-setup-players{display:flex; flex-direction:column; gap:8px; margin-bottom:10px}
  .fp-player-row{display:flex; gap:8px; align-items:center}
  .fp-player-row input{flex:1}
  .fp-setup-block{margin-top:22px}
  .fp-mode-row{display:flex; gap:0; border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:3px}
  .fp-mode-btn{flex:1; padding:10px; border-radius:999px; border:0; background:none; font-family:'Manrope'; font-weight:800; font-size:13px; cursor:pointer; color:rgba(255,255,255,.75)}
  .fp-mode-btn.sel{background:#fff; color:#1b1430}
  .fp-hint{font-size:12.5px; color:rgba(255,255,255,.6); margin:14px 0 0; line-height:1.5}
  .fp-turn-banner{display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:12px; margin-bottom:16px; text-align:left}
  .fp-turn-banner .who{font-family:'Unbounded'; font-weight:600; font-size:24px; line-height:1.2}
  .fp-turn-banner .who small{display:block; font-family:'Manrope'; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:4px}
  .fp-turn-banner.flash .who{animation:fpFlash .8s ease}
  @keyframes fpFlash{0%{color:var(--paccent2,#ff5fa2); transform:scale(1.06)} 100%{color:#fff; transform:none}}
  .fp-turn-banner .timer{font-family:'Unbounded'; font-weight:700; font-size:18px}
  .fp-turn-chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px}
  .fp-turn-chip{padding:7px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:none; font-family:'Manrope'; font-size:12px; font-weight:800; cursor:pointer; color:#fff}
  .fp-turn-chip.active{background:#fff; color:#1b1430}
  .fp-leaderboard{display:flex; flex-direction:column; margin:18px 0 8px; text-align:left; border-top:1px solid rgba(255,255,255,.2)}
  .fp-lb-row{display:grid; grid-template-columns:44px 1fr auto; align-items:baseline; padding:13px 2px; border-bottom:1px solid rgba(255,255,255,.2); font-weight:700; font-size:16px}
  .fp-lb-rank{font-family:'Unbounded'; font-size:13px; color:rgba(255,255,255,.5)}
  .fp-lb-row.winner{color:var(--paccent2,#ff5fa2)}
  .fp-lb-row.winner .fp-lb-rank{color:inherit}
  .fp-lb-score{font-family:'Unbounded'; font-weight:600}
  .fp-gift{margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.2)}
  .fp-restart{display:block; margin:14px auto 0; background:none; border:0; color:rgba(255,255,255,.7); font-family:'Manrope'; font-weight:700; font-size:13px; text-decoration:underline; text-underline-offset:3px; cursor:pointer}

  /* ===== рабочая версия: почта, ошибки, правка после оплаты, страницы после оплаты ===== */
  .email-field{max-width:340px; margin:18px 0 6px}
  .form-msg{margin:-4px 0 12px; font-size:13.5px; font-weight:700; color:var(--bad); line-height:1.45}
  .form-msg:empty{display:none}
  .form-msg.ok{color:var(--good)}
  .promo-msg.bad{color:var(--bad)}
  .link-btn{border:0; background:none; padding:0; font:inherit; color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
  .edit-only{display:none}
  body.editing .edit-only{display:block}
  body.editing .buy-only{display:none}
  .edit-only .pay-box{gap:16px; flex-wrap:wrap}
  .edit-link{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; background:var(--good-bg); border:1px solid var(--good); padding:14px 16px; margin-bottom:16px}
  .edit-link span{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); width:100%}
  .edit-link a{font-family:'Unbounded'; font-size:14px; color:var(--good); word-break:break-all}
  .upgrade-box{background:var(--info-bg); border:1px solid var(--info); padding:14px 16px; margin-top:4px}
  .upgrade-box p{margin:0 0 12px; font-size:14px; line-height:1.5}
  .edit-missing{padding:40px 0}
  .edit-missing a{color:inherit}
  .fp-promo-code:disabled{cursor:default}

  /* страницы после оплаты: тот же винный фон, что на главной */
  .after{min-height:100vh; margin:-18px -24px; padding:24px 24px 56px; color:#fff;
    background:radial-gradient(120% 70% at 50% 0%, #7a1443 0%, #2b0f1f 60%, #1c0a14 100%)}
  .after .qf-logo{color:#fff; font-size:20px; text-decoration:none; display:inline-block}
  .after .qf-logo b{color:#e0a72e}
  .after-card{max-width:620px; margin:56px auto 0}
  .after-card h1{font-size:clamp(28px,5vw,42px); line-height:1.1; margin-bottom:14px}
  .after-card .lead{font-size:16px; line-height:1.55; color:rgba(255,255,255,.8); margin:0 0 28px}
  .after-card .over{font-family:'Unbounded'; font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#e0a72e; display:block; margin-bottom:12px}
  .after-link{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:18px; padding:18px 20px; margin-bottom:16px}
  .after-link small{display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:8px}
  .after-link code{display:block; font-family:'Unbounded'; font-size:15px; line-height:1.4; word-break:break-all; color:#fff; margin-bottom:14px}
  .after-link p{font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.75); margin:0 0 14px}
  .after-link.secret{border-style:dashed; border-color:#e0a72e}
  .after-row{display:flex; flex-wrap:wrap; gap:10px}
  .after-row .ld-btn{padding:13px 20px; font-size:12px; text-decoration:none; display:inline-block}
  .after a{color:inherit}
  .after .muted{font-size:13.5px; color:rgba(255,255,255,.65); line-height:1.55}
  .after-spin{width:36px; height:36px; border-radius:50%; border:3px solid rgba(255,255,255,.2); border-top-color:#e0a72e; animation:spin 1s linear infinite; margin-bottom:22px}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (max-width:560px){ .after{padding:20px 16px 48px} .after-row .ld-btn{width:100%; text-align:center} }

  /* документы: оферта, политика, согласие */
  .doc{max-width:760px; margin:0 auto; padding-bottom:64px}
  .doc-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px 20px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--ink); margin-bottom:34px}
  .doc-top .qf-logo{color:var(--ink); text-decoration:none}
  .doc-top nav{display:flex; gap:16px; flex-wrap:wrap}
  .doc-top nav a{font-size:13px; font-weight:700; color:var(--muted); text-decoration:none}
  .doc-top nav a:hover{color:var(--ink)}
  .doc h1{font-size:clamp(24px,4.4vw,34px); line-height:1.15; margin-bottom:14px}
  .doc h2{font-size:17px; margin:34px 0 12px}
  .doc p, .doc li{font-size:15px; line-height:1.6; margin:0 0 10px; overflow-wrap:anywhere}
  .doc p.doc-meta{font-size:13px; color:var(--muted); margin:0 0 4px}
  .doc ul{margin:0 0 12px; padding-left:22px}
  .doc a{color:var(--accent-2)}
  .doc mark{background:#fde68a; color:var(--ink); padding:0 3px; border-radius:3px}
  .doc-table{overflow-x:auto; margin:6px 0 14px}
  .doc table{border-collapse:collapse; width:100%; font-size:14px}
  .doc th, .doc td{border:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top; line-height:1.45}
  .doc th{background:var(--surface-2); font-weight:700}
  @media (max-width:560px){ body:has(.doc){padding-inline:16px} }

  /* выбор цвета на первом экране квиза */
  /* выбор цвета квиза под телефоном-превью в конструкторе */
  .pv-colors{text-align:center}
  .pv-colors-row{display:flex; justify-content:center; flex-wrap:wrap; gap:10px; max-width:180px; margin:0 auto}
  .pv-color{width:34px; height:34px; flex:0 0 34px; border-radius:50%; border:2px solid #fff; cursor:pointer; padding:0; transition:transform .15s; box-shadow:0 0 0 1px var(--border)}
  .pv-color:hover{transform:scale(1.12)}
  .pv-color.sel{box-shadow:0 0 0 3px var(--ink)}
  .pv-color:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
  .pv-colors-cap{margin:8px 0 0; font-size:12px; color:var(--muted)}
  .fp-colors{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:34px}
  .fp-color{width:38px; height:38px; border-radius:50%; border:2px solid rgba(255,255,255,.35); cursor:pointer; padding:0; transition:transform .15s}
  .fp-color:hover{transform:scale(1.1)}
  .fp-color.sel{border-color:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.25)}
  .fp-colors-cap{margin:12px 0 0; font-size:12.5px; color:rgba(255,255,255,.65); text-align:center}

  /* вопрос с несколькими верными ответами */
  .fp-multi-hint{margin:-12px 0 18px; font-size:14px; color:rgba(255,255,255,.7); text-align:center}
  .fp-stage .popt.picked{background:rgba(255,255,255,.22); border-color:#fff; box-shadow:0 0 0 2px #fff inset}
  .fp-stage #fpCheck:disabled{opacity:.45; cursor:default}

  /* вопрос с картинками на ноутбуке и телевизоре: 4 в ряд, чтобы не листать */
  @media (min-width:700px){
    .fp-stage:has(.ppics){max-width:1040px}
    .fp-stage:has(.ppics) .pnum{font-size:clamp(56px,8vw,84px); margin:8px 0 6px}
    .fp-stage:has(.ppics) .pq{margin-bottom:18px}
    .fp-stage .ppics{grid-template-columns:repeat(4,1fr); max-width:none}
    .fp-stage .ppics + .pfact, .fp-stage .ppics ~ .pbtn{max-width:640px}
  }

  /* финал: победитель, конфетти, строки по очереди */
  .fp-confetti{position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:300}
  .fp-champ{margin:4px 0 6px; animation:fpPop .7s cubic-bezier(.2,1.4,.4,1) both}
  .fp-crown{width:54px; height:38px; color:#ffd166; display:block; margin:0 auto 6px; filter:drop-shadow(0 4px 12px rgba(255,209,102,.5)); animation:fpCrown 1.2s ease-in-out .5s both}
  .fp-champ-over{display:block; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7)}
  .fp-champ-name{font-family:'Unbounded'; font-weight:800; font-size:clamp(30px,6vw,52px); line-height:1.05; margin-top:6px; text-wrap:balance}
  .fp-champ-sub{margin-top:6px; font-weight:700; color:rgba(255,255,255,.8)}
  .fp-final .pscore{animation:fpPop .6s ease .25s both}
  .fp-final .fp-lb-row{animation:fpRise .5s ease var(--d,1s) both}
  .fp-final .fp-gift{animation:fpRise .7s ease var(--d,1.6s) both}
  .fp-final .fp-gift .pverdict{font-size:clamp(26px,4.4vw,38px)}
  @keyframes fpPop{from{opacity:0; transform:scale(.6)} to{opacity:1; transform:none}}
  @keyframes fpRise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
  @keyframes fpCrown{0%{opacity:0; transform:translateY(-30px) rotate(-12deg)} 60%{opacity:1; transform:translateY(4px) rotate(4deg)} 100%{transform:none}}
  @media (prefers-reduced-motion: reduce){ .fp-final *, .fp-champ, .fp-crown{animation:none !important} }

  /* реклама Ани в квизах на заказ */
  .fp-final .fp-order-promo{animation:fpRise .7s ease var(--d,2.2s) both}
  .fp-tg{display:block; text-decoration:none; text-align:center}
  .fp-soon{margin:16px 0 0; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.75)}
  .fp-soon b{color:#ffd166}

  .fp-order-row{display:flex; align-items:center; gap:22px; text-align:left}
  .fp-order-text{flex:1; min-width:0}
  .fp-order-text .fp-promo-text{text-align:left}
  .fp-qr{margin:0; flex:0 0 150px; text-align:center}
  .fp-qr img{width:150px; height:auto; display:block; border-radius:14px; background:#fff}
  .fp-qr figcaption{margin-top:6px; font-size:11.5px; color:rgba(255,255,255,.7)}
  @media (max-width:560px){ .fp-order-row{flex-direction:column; text-align:center} .fp-order-text .fp-promo-text{text-align:center} }

  /* ===== Шаг «Вопросы»: две карточки «1. Выберите вопросы» и «2. Ваш квиз» (25.09.2026) =====
     Правила со вложенностью .qs-card, чтобы перебить старые .lib-tabs / .lib-list выше по файлу */
  .qs-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px 22px 20px; margin:0 0 22px;
    box-shadow:0 8px 24px rgba(74,21,34,.06)}
  .qs-card.mine{border:2px solid var(--ink)}
  .qs-head{display:flex; gap:14px; align-items:flex-start; margin-bottom:16px}
  .qs-num{flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff;
    font-family:'Unbounded'; font-weight:700; font-size:15px; display:grid; place-items:center}
  .qs-head h3{font-size:19px; line-height:1.25}
  .qs-total{color:var(--accent)}
  .qs-sub{margin:4px 0 0; font-size:13.5px; font-weight:600; color:var(--muted); line-height:1.45}
  .occ-tip{margin:0 0 16px; padding:11px 14px; background:var(--paper); border-left:4px solid var(--yellow); border-radius:0 10px 10px 0;
    font-size:13px; font-weight:600; color:var(--ink); line-height:1.5}

  .qs-card .lib-tabs{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; border:0; margin:0 0 12px; overflow:visible}
  .qs-card .lib-tabs button{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left;
    padding:12px 36px 12px 14px; border:2px solid var(--border); border-radius:12px; background:var(--surface); color:var(--ink);
    text-transform:none; letter-spacing:0; white-space:normal; cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s}
  .qs-card .lib-tabs button b{font-family:'Unbounded'; font-weight:600; font-size:14px; line-height:1.2}
  .qs-card .lib-tabs button small{font-family:'Manrope'; font-size:12px; font-weight:600; color:var(--muted); line-height:1.3}
  .qs-card .lib-tabs .n{position:absolute; top:11px; right:12px; margin:0; opacity:1; font-size:11.5px; font-weight:700; color:var(--muted)}
  .qs-card .lib-tabs button:hover{border-color:var(--ink)}
  .qs-card .lib-tabs button.active{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 8px 18px rgba(224,72,47,.25)}
  .qs-card .lib-tabs button.active small, .qs-card .lib-tabs button.active .n{color:rgba(255,255,255,.88)}

  .lib-box{position:relative; border:1px solid var(--border); border-radius:12px; background:#fffdf9; overflow:hidden}
  .lib-box.has-more::after{content:""; position:absolute; left:0; right:0; bottom:0; height:56px; pointer-events:none;
    background:linear-gradient(rgba(255,253,249,0), #fffdf9 85%)}
  .qs-card .lib-list{max-height:390px; margin:0; border:0; padding:0; scrollbar-width:auto}
  .qs-card .lib-item{border-bottom:1px solid var(--border)}
  .qs-card .lib-item-head{padding:12px 14px; gap:12px}
  .qs-card .lib-item-head:hover, .qs-card .lib-item.open{background:#f8f1e4}
  .qs-card .lib-item-head .qtext{font-size:14.5px}
  .qs-card .lib-detail{padding:0 14px 16px 38px}
  .qs-card .lib-add-btn{font-size:12px; padding:9px 14px; border-radius:10px; border-width:1.5px; background:var(--surface)}
  .qs-card .lib-add-btn:hover:not(.added){background:var(--accent); color:#fff}
  .qs-card .lib-add-btn.added{background:var(--good); border-color:var(--good); color:#fff}
  .lib-more{display:none; margin:8px 0 0; text-align:center; font-size:12.5px; font-weight:700; color:var(--muted)}
  .lib-more::before{content:"↓ "}
  .lib-more.show{display:block}

  .qs-card .q-legend{margin:0 0 10px; flex-wrap:wrap}
  .qs-card .q-legend:empty{display:none}
  .qs-card .qlist{gap:6px}
  .qs-card .qcard, .qs-card .qcard:first-child{border:0}
  .qs-card .qcard:not(.open){background:#fffdf9; border:1px solid var(--border); border-radius:10px}
  .qs-card .qrow{padding:11px 10px; border-radius:10px}
  .qs-card .qrow-text{font-size:14.5px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
  .qs-card .qrow-tools{opacity:1}
  .qs-card .qrow-btn{width:32px; height:32px; font-size:15px; background:var(--paper)}
  .qs-card .qcard.open{margin:6px 0; border-radius:12px; border:2px solid var(--accent)}
  .q-empty{margin:0; padding:22px 18px; border:2px dashed var(--border); border-radius:12px; text-align:center;
    font-size:13.5px; font-weight:600; color:var(--muted); line-height:1.5}
  .add-q-title{margin:20px 0 8px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
  .qs-card .add-q{border:1.5px dashed var(--ink); border-radius:10px; text-transform:none; letter-spacing:0; font-size:13.5px; padding:10px 16px}
  .qs-card .add-q:hover{border-style:solid}

  .price-chip > div:has(.jump-mine){flex:1 1 auto; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 0}
  .jump-mine{margin-left:auto; padding-left:14px !important; border:0; background:none; padding:4px 0; font-family:'Manrope'; font-weight:700; font-size:13px;
    color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
  .added-toast{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:14px;
    max-width:calc(100vw - 32px); padding:12px 12px 12px 18px; border-radius:14px; background:var(--deep); color:#fff;
    font-size:14px; font-weight:700; box-shadow:0 12px 30px rgba(43,22,16,.3); animation:toastIn .25s ease}
  .added-toast[hidden]{display:none}
  .added-toast button{flex:0 0 auto; border:0; border-radius:10px; background:#fff; color:var(--deep); font-family:'Manrope'; font-weight:700;
    font-size:13px; padding:9px 14px; cursor:pointer}
  @keyframes toastIn{from{opacity:0; transform:translate(-50%, 12px)} to{opacity:1; transform:translate(-50%, 0)}}
  @media (prefers-reduced-motion:reduce){ .added-toast{animation:none} }

  @media (max-width:760px){
    .qs-card{padding:18px 14px 16px; border-radius:14px}
    .qs-card .lib-tabs{grid-template-columns:1fr 1fr}
    .qs-head h3{font-size:17px}
    .qs-card .lib-list{max-height:340px}
    .qs-card .lib-item-head{padding:12px 10px; flex-wrap:wrap; row-gap:8px}
    .qs-card .lib-item-head .qtext{flex:1 1 calc(100% - 30px)}
    .qs-card .lib-add-btn{margin-left:22px}
    .qs-card .lib-detail{padding:0 10px 14px 30px}
    .qs-card .qrow{grid-template-columns:22px 8px 1fr; row-gap:6px}
    .qs-card .qrow-tools{grid-column:3; justify-self:end}
    .added-toast{flex-direction:column; align-items:stretch; text-align:center; gap:10px; padding:12px}
  }

  /* ===== Музыкальный вопрос «Угадай мелодию» (27.09.2026) ===== */
  .fp-stage .pplayer{position:relative; display:flex; align-items:center; gap:14px; margin:0 auto 18px; padding:14px 16px 20px;
    background:rgba(255,255,255,.1); border-radius:18px; overflow:hidden}
  .fp-stage .pplayer[hidden]{display:none}
  .fp-stage .pplayer-bar{position:absolute; left:16px; right:16px; bottom:9px; height:4px; border-radius:4px; background:rgba(255,255,255,.18)}
  .fp-stage .pplayer-bar i{display:block; height:100%; width:0; border-radius:4px; background:var(--paccent2,#ff5fa2); transition:width .25s linear}
  .fp-stage .pplay{display:flex; align-items:center; gap:14px; width:100%; border:0; background:none; color:#fff; cursor:pointer;
    font-family:'Unbounded'; font-weight:600; font-size:15px; text-align:left; padding:0}
  .fp-stage .pplay-ico{flex:0 0 auto; position:relative; width:54px; height:54px; border-radius:50%; background:#fff}
  .fp-stage .pplay-ico::after{content:""; position:absolute; left:21px; top:17px; border-style:solid; border-width:10px 0 10px 16px;
    border-color:transparent transparent transparent #1b1430}
  .fp-stage .pplayer.playing .pplay-ico::after{left:19px; top:19px; width:16px; height:16px; border:0; background:#1b1430; border-radius:2px}
  .fp-stage .pplayer.reveal{justify-content:flex-start; animation:pRise .35s ease}
  .fp-stage .preveal-text{flex:1; font-family:'Unbounded'; font-weight:600; font-size:14px; color:#fff}
  .fp-stage .pstop{flex:0 0 auto; border:1px solid rgba(255,255,255,.5); background:none; color:#fff; border-radius:10px; padding:8px 14px;
    font-family:'Manrope'; font-weight:700; font-size:13px; cursor:pointer}
  .fp-stage .preveals{display:flex; flex-direction:column; gap:10px; margin:0 auto 18px}
  .fp-stage .preveals[hidden]{display:none}
  .fp-stage .preveals .pplayer{margin:0}
  .fp-stage .pplayer.reveal:not(.playing) .peq i{opacity:.4}
  .fp-stage .peq{display:flex; align-items:flex-end; gap:3px; height:22px; flex:0 0 auto}
  .fp-stage .peq i{width:4px; height:30%; background:var(--paccent2,#ff5fa2); border-radius:2px}
  .fp-stage .pplayer.playing .peq i{animation:peq .9s ease-in-out infinite}
  .fp-stage .pplayer.playing .peq i:nth-child(2){animation-delay:-.3s} .fp-stage .pplayer.playing .peq i:nth-child(3){animation-delay:-.6s}
  .fp-stage .pplayer.playing .peq i:nth-child(4){animation-delay:-.15s}
  @keyframes peq{0%,100%{height:25%} 50%{height:100%}}
  @media (prefers-reduced-motion:reduce){ .fp-stage .pplayer.playing .peq i{animation:none; height:70%} }