/* ─────────── ДИЗАЙН-ТОКЕНЫ (крутить дизайн здесь) ─────────── */
  :root{
    --bg:        #0e0d18;
    --surface:   #191730;
    --surface-2: #241f42;
    --stroke:    rgba(255,255,255,.08);
    --text:      #fdfdff;
    --muted:     #9a98b6;
    --accent-a:  #8b5cf6;
    --accent-b:  #ec4899;
    --accent-c:  #22d3ee;   /* доп. акцент для волны */
    --radius:    20px;
    --radius-sm: 13px;
    --display: "Unbounded", -apple-system, sans-serif;
    --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  html, body{ height:100%; }
  body{
    margin:0; font-family:var(--font); color:var(--text);
    background:
      radial-gradient(1200px 600px at 15% -10%, #2c1c56 0%, transparent 55%),
      radial-gradient(1000px 520px at 115% 5%, #45143a 0%, transparent 50%),
      var(--bg);
  }

  /* контейнер приложения на весь webview (без рамки-телефона) */
  .phone{
    width:100%; max-width:520px; height:100%; margin:0 auto;
    background:transparent; position:relative; display:flex; flex-direction:column; overflow:hidden;
  }

  .viewport{flex:1 1 auto; overflow-y:auto; position:relative}
  .viewport::-webkit-scrollbar{width:0}

  .screen{display:none; padding:20px 18px 30px; min-height:100%}
  .screen.active{display:block}
  .screen.in-right{animation:slideR .32s cubic-bezier(.2,.7,.3,1)}
  .screen.in-left{animation:slideL .32s cubic-bezier(.2,.7,.3,1)}
  @keyframes slideR{from{opacity:0; transform:translateX(28px)} to{opacity:1; transform:none}}
  @keyframes slideL{from{opacity:0; transform:translateX(-28px)} to{opacity:1; transform:none}}

  h1{font-family:var(--display); font-size:27px; font-weight:800; margin:2px 0 4px; letter-spacing:-.5px}
  h2{font-family:var(--display); font-size:19px; font-weight:700; margin:0; letter-spacing:-.2px}
  .sub{color:var(--muted); font-size:14px; margin:0 0 22px}
  .label{font-size:12px; color:var(--muted); margin:22px 4px 11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase}

  .topline{display:flex; align-items:center; gap:12px; margin-bottom:16px}
  .back{width:36px; height:36px; border-radius:12px; background:var(--surface);
    display:flex; align-items:center; justify-content:center; font-size:19px; cursor:pointer; border:1px solid var(--stroke)}
  .topline h2{flex:1}

  /* ── степпер ── */
  .steps{display:flex; gap:7px; margin:0 0 6px}
  .steps .seg{flex:1; height:5px; border-radius:4px; background:var(--surface-2); transition:.4s}
  .steps .seg.on{background:linear-gradient(90deg,var(--accent-a),var(--accent-b))}
  .stepcap{font-size:12px; color:var(--muted); margin:0 2px 20px; font-weight:600}
  .stepcap b{color:var(--text)}

  /* ── главная ── */
  /* динамический баннер идей */
  .hero{
    border-radius:24px; padding:22px; margin-bottom:18px; position:relative; overflow:hidden; cursor:pointer;
    background:linear-gradient(135deg,#7c3aed 0%, #db2777 100%);
    box-shadow:0 18px 44px rgba(124,58,237,.34);
  }
  .hero:active{transform:scale(.99)}
  .hero:after{content:"🎵"; position:absolute; right:-10px; bottom:-20px; font-size:96px; opacity:.14; pointer-events:none}
  .hero-body{transition:opacity .35s; position:relative; z-index:1}
  .hero-body.fade{opacity:0}
  .hero-tag{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#fff;
    background:rgba(255,255,255,.2); padding:5px 12px; border-radius:20px}
  .hero-idea{font-family:var(--display); font-size:19px; font-weight:700; line-height:1.3; color:#fff;
    letter-spacing:-.2px; margin:14px 0 0; min-height:80px}
  .hero-cta{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:14px; font-weight:700; color:#fff; position:relative; z-index:1}
  .hero-cta .arr{font-size:17px}
  .hero-dots{margin-left:auto; display:flex; gap:5px; align-items:center}
  .hero-dots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); transition:.3s}
  .hero-dots i.on{background:#fff; width:16px; border-radius:6px}

  .bigbtn{
    display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:18px;
    border-radius:var(--radius); border:1px solid var(--stroke); background:var(--surface); color:var(--text);
    font-size:16px; font-weight:700; cursor:pointer; margin-bottom:12px; transition:.15s;
  }
  .bigbtn:active{transform:scale(.985)}
  .bigbtn .ic{width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; flex:0 0 auto}
  .grad{background:linear-gradient(135deg,var(--accent-a),var(--accent-b)); box-shadow:0 8px 20px rgba(139,92,246,.4)}
  .bigbtn small{display:block; font-weight:500; color:var(--muted); font-size:13px; margin-top:3px}
  .bigbtn .count{margin-left:auto; background:var(--surface-2); color:var(--muted); font-weight:700;
    padding:3px 10px; border-radius:20px; font-size:13px}

  /* главная кнопка-акцент */
  .bigbtn.primary{background:linear-gradient(135deg,var(--accent-a),var(--accent-b)); border-color:transparent;
    box-shadow:0 16px 34px rgba(139,92,246,.42)}
  .bigbtn.primary .ic{background:rgba(255,255,255,.22)}
  .bigbtn.primary small{color:rgba(255,255,255,.9); font-weight:500}
  .bigbtn .arrow{margin-left:auto; font-size:24px; font-weight:700}

  /* «как это работает» — пояснение, НЕ кнопки */
  .howmini{margin:24px 2px 6px}
  .howmini .cap{font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.6px; text-transform:uppercase; margin-bottom:8px}
  .step-row{display:flex; align-items:center; gap:13px; padding:8px 0}
  .step-row .num{width:27px; height:27px; border-radius:50%; flex:0 0 auto; font-weight:700; font-size:13px; color:#fff;
    display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent-a),var(--accent-b))}
  .step-row .txt{font-size:14.5px; color:#d8d6ea; font-weight:500}

  /* футер с документами/поддержкой */
  .appfoot{margin-top:26px; text-align:center; font-size:12.5px; color:var(--muted); line-height:1.7}
  .appfoot a{color:var(--muted); text-decoration:none}
  .appfoot a:active{color:var(--text)}

  /* экран тарифов (покупка) */
  .buycard{position:relative; background:var(--surface); border:1px solid var(--stroke); border-radius:18px; padding:16px; margin-bottom:13px}
  .buycard.best{box-shadow:0 0 0 2px var(--accent-a) inset; border-color:transparent}
  .bc-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:13px}
  .bc-top b{font-size:16px; font-weight:700; display:block; margin-bottom:2px}
  .bc-top span{font-size:12.5px; color:var(--muted)}
  .bc-price{font-family:var(--display); font-size:20px; font-weight:700; flex:0 0 auto}
  .bc-pay{margin-top:0}
  .bc-badge{position:absolute; top:-9px; left:16px; font-size:10px; color:#fff; font-weight:700;
    background:linear-gradient(135deg,var(--accent-a),var(--accent-b)); border-radius:7px; padding:2px 8px}

  /* верхняя строка главной: приветствие + баланс */
  .home-top{display:flex; align-items:center; justify-content:space-between; margin:2px 2px 16px}
  .greet{color:var(--muted); font-size:14px; font-weight:600}
  .bal-chip{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--text);
    background:var(--surface); border:1px solid var(--stroke); padding:7px 13px; border-radius:20px}
  .bal-chip .n{font-size:17px; font-weight:800; line-height:1; background:linear-gradient(135deg,var(--accent-a),var(--accent-b));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
  .bal-chip.empty{cursor:pointer; border-color:rgba(236,72,153,.5); color:#fff}

  /* чипы */
  .chips{display:flex; flex-wrap:wrap; gap:9px}
  .chip{padding:11px 15px; border-radius:14px; background:var(--surface); border:1px solid var(--stroke);
    font-size:14px; font-weight:600; cursor:pointer; user-select:none; transition:.15s}
  .chip:active{transform:scale(.94)}
  .chip.sel{border-color:transparent; background:linear-gradient(135deg,var(--accent-a),var(--accent-b)); color:#fff;
    box-shadow:0 6px 16px rgba(236,72,153,.35)}

  input.f, textarea.f{width:100%; background:var(--surface); border:1px solid var(--stroke); color:var(--text);
    border-radius:var(--radius-sm); padding:14px 15px; font-size:15px; font-family:inherit; resize:none; outline:none; transition:.15s}
  input.f:focus, textarea.f:focus{border-color:var(--accent-a); box-shadow:0 0 0 3px rgba(139,92,246,.18)}
  textarea.f{min-height:100px; line-height:1.5}
  .hint{font-size:12px; color:var(--muted); margin:8px 3px 0; line-height:1.4}

  .cta{width:100%; padding:17px; border:none; border-radius:16px; color:#fff; font-size:16px; font-weight:800;
    font-family:var(--font); background:linear-gradient(135deg,var(--accent-a),var(--accent-b)); cursor:pointer;
    margin-top:26px; box-shadow:0 14px 30px rgba(139,92,246,.4)}
  .cta:active{transform:translateY(1px)}
  .ghost{width:100%; padding:16px; border-radius:16px; font-size:15px; font-weight:700; cursor:pointer;
    background:var(--surface); color:var(--text); border:1px solid var(--stroke); font-family:var(--font)}
  /* лента кадров мультфильма */
  #clipFrames::-webkit-scrollbar{display:none}
  /* align-items обязателен: по умолчанию flex растягивает картинку на её
     натуральную высоту (768px), и горизонтальный кадр становился вертикальным
     столбиком, обрезанным по бокам */
  #clipFrames{align-items:center}
  /* Размеры задаются из JS в самом элементе: и min() внутри flex, и aspect-ratio
     разбираются не во всех WebView, а если правило отброшено — картинка встаёт
     в натуральные 1376x768 и разносит экран. Центральный кадр крупнее соседних. */
  @keyframes clipShimmer{0%,100%{opacity:.25} 50%{opacity:.5}}
  .clip-ph{background:var(--stroke); animation:clipShimmer 1.8s ease-in-out infinite}
  @keyframes clipDots{0%{content:"."} 33%{content:".."} 66%{content:"..."}}
  .clip-dots::after{content:"."; animation:clipDots 1.2s steps(1) infinite}
  @keyframes clipCaret{0%,49%{opacity:1} 50%,100%{opacity:0}}
  .clip-caret{animation:clipCaret 1s step-end infinite}
  /* Кружок «идёт работа». Мерцания заглушки мало: оно читается как «картинка
     не загрузилась», а не как «идёт работа» — нужен именно вращающийся значок. */
  @keyframes clipSpin{to{transform:rotate(360deg)}}
  .clip-spin{display:inline-block; border-radius:50%; box-sizing:border-box;
    border:2px solid rgba(139,92,246,.25); border-top-color:#8b5cf6;
    animation:clipSpin .8s linear infinite}
  .clip-spin-mid{position:absolute; top:50%; left:50%; margin:-13px 0 0 -13px;
    width:26px; height:26px; border-width:3px}

  .row2{display:flex; gap:10px; margin-top:16px}
  .row2 > *{flex:1; margin-top:0}

  /* текст песни */
  .lyrics{background:var(--surface); border:1px solid var(--stroke); border-radius:var(--radius); padding:20px;
    font-size:14px; line-height:1.75; white-space:pre-line; color:#e9e8f4}
  .lyrics .title{font-family:var(--display); font-size:17px; font-weight:700; color:#fff; display:block; margin-bottom:12px}
  .lyrics .marker{color:var(--accent-b); font-weight:700}

  /* плеер + волна */
  .player{background:var(--surface); border:1px solid var(--stroke); border-radius:var(--radius); padding:18px 16px; margin-top:14px}
  .player .top{display:flex; align-items:center; gap:14px}
  .cover{width:58px; height:58px; border-radius:16px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    font-size:26px; background:linear-gradient(135deg,#7c3aed,#db2777)}
  .player .meta{flex:1; min-width:0}
  .player .meta b{display:block; font-size:16px; font-weight:700}
  .player .meta span{font-size:12px; color:var(--muted)}
  .playbtn{width:48px; height:48px; border-radius:50%; flex:0 0 auto; cursor:pointer; border:none; color:#fff; font-size:17px;
    background:linear-gradient(135deg,var(--accent-a),var(--accent-b)); display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 20px rgba(236,72,153,.4)}

  .wave{position:relative; height:40px; margin-top:16px}
  .wave-base, .wave-fill{position:absolute; top:0; left:0; right:0; height:100%; display:flex; align-items:center; gap:3px}
  .wave-fill{-webkit-clip-path:inset(0 100% 0 0); clip-path:inset(0 100% 0 0)}  /* скрыта, открывается слева-направо */
  .wave-base i{flex:1; background:var(--surface-2); border-radius:3px}
  .wave-fill i{flex:1; background:linear-gradient(180deg,var(--accent-c),var(--accent-a)); border-radius:3px}
  .demo-note{font-size:12px; color:var(--muted); margin:14px 2px 0; line-height:1.45}
  .lock{display:inline-flex; align-items:center; gap:5px; background:var(--surface-2); border-radius:8px; padding:3px 8px; color:#ffd9a8; font-weight:600}

  /* пакеты — вертикальный список (читаемо для 40+) с выгодой */
  .packlist{display:flex; flex-direction:column; gap:11px; margin-top:10px}
  .prow{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--stroke);
    border-radius:16px; padding:15px 16px; cursor:pointer; position:relative; transition:.15s}
  .prow:active{transform:scale(.99)}
  .prow.sel{border-color:transparent; box-shadow:0 0 0 2px var(--accent-a) inset; background:linear-gradient(120deg,var(--surface-2),#311a49)}
  .prow .radio{width:23px; height:23px; border-radius:50%; border:2px solid var(--muted); flex:0 0 auto; position:relative}
  .prow.sel .radio{border-color:var(--accent-b)}
  .prow.sel .radio:after{content:""; position:absolute; inset:4px; border-radius:50%; background:linear-gradient(135deg,var(--accent-a),var(--accent-b))}
  .prow .info{flex:1; min-width:0}
  .prow .info b{font-size:16px; font-weight:700; display:block; margin-bottom:2px}
  .prow .info span{font-size:12.5px; color:var(--muted)}
  .prow .info .savg{color:#34d399; font-weight:700}
  .prow .price{font-family:var(--display); font-size:17px; font-weight:700; flex:0 0 auto}
  .prow .badge{position:absolute; top:-9px; right:14px; font-size:10px; color:#fff; font-weight:700;
    background:linear-gradient(135deg,var(--accent-a),var(--accent-b)); border-radius:7px; padding:2px 8px; white-space:nowrap}

  /* открыть с баланса + разделитель «или» */
  .packs-note{font-size:12.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.5}
  .balance-hint{font-size:12.5px; color:var(--muted); text-align:center; margin-top:9px; font-weight:600}
  .or-sep{display:flex; align-items:center; gap:12px; margin:22px 2px 4px}
  .or-sep:before, .or-sep:after{content:""; flex:1; height:1px; background:var(--stroke)}
  .or-sep span{color:var(--muted); font-size:12px; font-weight:600}

  /* мои песни */
  .songcard{display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--stroke);
    border-radius:var(--radius); padding:12px; margin-bottom:11px}
  .songcard .meta{flex:1; min-width:0}
  .songcard .meta b{font-size:15px; font-weight:700; display:block}
  .songcard .meta span{font-size:12px; color:var(--muted)}
  .iconbtn{width:38px; height:38px; border-radius:12px; background:var(--surface-2); border:none; color:var(--text); font-size:15px; cursor:pointer}
  .iconbtn:active{transform:scale(.92)}

  .songs-head{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.6px;
    text-transform:uppercase;margin:22px 2px 10px}
  .songs-head:first-child{margin-top:4px}
  .songcard.locked{border-color:rgba(139,92,246,.35)}
  .unlock-btn{flex:0 0 100%; margin-top:13px !important; padding:14px !important; font-size:15px !important}
  .songs-note{font-size:12.5px;color:var(--muted);line-height:1.5;margin:2px 2px 4px;text-align:center}

  /* плеер внутри карточки «Мои песни» */
  .songcard{flex-wrap:wrap}
  .sc-player{flex:0 0 100%; display:none; margin-top:12px}
  .songcard.playing .sc-player{display:block}
  .sc-bar{height:6px; border-radius:6px; background:var(--surface-2); cursor:pointer; position:relative}
  .sc-bar > i{display:block; height:100%; width:0; border-radius:6px;
    background:linear-gradient(90deg,var(--accent-a),var(--accent-b))}
  .sc-time{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted);
    margin-top:6px; font-variant-numeric:tabular-nums}

  /* оверлей */
  .overlay{position:fixed; inset:0; background:rgba(8,7,14,.96); backdrop-filter:blur(10px);
    display:none; flex-direction:column; align-items:center; justify-content:center; gap:18px; z-index:60; padding:32px}
  .overlay.show{display:flex; animation:fadeIn .3s}
  @keyframes fadeIn{from{opacity:0} to{opacity:1}}
  .overlay h3{font-family:var(--display); margin:6px 0 0; font-size:19px; font-weight:700; text-align:center}
  .overlay p{margin:0; color:var(--muted); font-size:14px; text-align:center; max-width:260px; line-height:1.5}
  .ldstep{color:#d4d2e6 !important; font-weight:600; min-height:20px}
  .ldnote{font-size:12px !important; color:var(--muted); max-width:250px; margin-top:6px !important}
  .lbar{width:230px; height:7px; border-radius:6px; background:var(--surface-2); overflow:hidden; margin-top:4px}
  .lbar > i{display:block; height:100%; width:0; border-radius:6px;
    background:linear-gradient(90deg,var(--accent-a),var(--accent-b)); transition:width .55s ease}

  /* контент оверлея — строго по центру */
  #ovContent{display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; text-align:center}
  /* эквалайзер загрузки */
  .eq{display:flex; gap:6px; align-items:flex-end; justify-content:center; height:60px}
  .eq i{width:9px; border-radius:5px; background:linear-gradient(180deg,var(--accent-b),var(--accent-a)); animation:eq 1s ease-in-out infinite}
  @keyframes eq{0%,100%{height:16px}50%{height:56px}}

  .checkmark{width:84px; height:84px; border-radius:50%; background:linear-gradient(135deg,#22c55e,#16a34a);
    display:flex; align-items:center; justify-content:center; font-size:42px; box-shadow:0 12px 30px rgba(34,197,94,.4);
    animation:pop .4s cubic-bezier(.2,1.4,.4,1)}
  @keyframes pop{from{transform:scale(0)} to{transform:scale(1)}}

  /* конфетти */
  .confetti{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:40}
  .confetti i{position:absolute; top:-12px; width:9px; height:14px; border-radius:2px; animation:fall linear forwards}
  @keyframes fall{to{transform:translateY(860px) rotate(540deg); opacity:.9}}