@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&display=swap');

/* ── Токены: дизайн-бриф research/08 + переменные темы Telegram ── */
:root{
  --canvas: var(--tg-theme-bg-color, #F7F5F2);
  --surface: var(--tg-theme-secondary-bg-color, #FFFFFF);
  --ink: var(--tg-theme-text-color, #141118);
  --body: var(--tg-theme-text-color, #4A4650);
  --muted: var(--tg-theme-hint-color, #7C7682);
  --brand: var(--tg-theme-button-color, #FF5A3C);
  --brand-text: var(--tg-theme-button-text-color, #FFFFFF);
  --brand-soft: color-mix(in srgb, var(--brand) 14%, transparent);
  --hairline: color-mix(in srgb, var(--ink) 12%, transparent);
  --hairline-soft: color-mix(in srgb, var(--ink) 7%, transparent);
  --shadow: 0 1px 2px rgba(20,17,24,.04), 0 6px 20px rgba(20,17,24,.05);
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;
  --safe-top: var(--tg-content-safe-area-inset-top, 0px);
  --safe-bottom: var(--tg-content-safe-area-inset-bottom, 0px);
  --tabs-h: 62px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--canvas);color:var(--body);
  font-family:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}

/* ── загрузка ── */
.boot{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.boot-logo{font-size:52px;animation:pop .8s cubic-bezier(.22,1,.36,1) infinite alternate}
@keyframes pop{from{transform:scale(.9) rotate(-4deg)}to{transform:scale(1.08) rotate(4deg)}}
.boot-text{color:var(--muted);font-size:15px}
@media (prefers-reduced-motion:reduce){.boot-logo{animation:none}}

main{padding:calc(var(--safe-top) + 10px) 16px calc(var(--tabs-h) + var(--safe-bottom) + 96px)}
.view{display:block}
[hidden]{display:none !important}

/* ── шапка ── */
.topbar{display:flex;align-items:center;gap:12px;margin:2px 0 14px}
.topbar-title{font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.15}
.topbar-sub{font-size:13.5px;color:var(--muted);margin-top:2px}
.icon-btn{background:var(--surface);border:1px solid var(--hairline);width:42px;height:42px;flex:none;
  border-radius:var(--r-pill);font-size:19px;color:var(--ink);cursor:pointer;box-shadow:var(--shadow)}
.credits{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--r-pill);padding:9px 15px;cursor:pointer;
  font:inherit;font-weight:700;color:var(--ink);box-shadow:var(--shadow);flex:none}
.credits-dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}

.banner{background:color-mix(in srgb, #FFC93C 24%, var(--surface));border:1px solid color-mix(in srgb,#E8A317 40%,transparent);
  color:#7A4B00;border-radius:var(--r-sm);padding:11px 13px;font-size:13px;margin-bottom:14px}

/* ── карточки ── */
.card{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--r-md);
  box-shadow:var(--shadow)}
.block{margin:20px 0}
.block-title{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:9px}

/* ── фото ── */
.photo-card{overflow:hidden;margin-bottom:16px;cursor:pointer;position:relative}
.photo-empty{padding:34px 20px;text-align:center;border:2px dashed var(--hairline);
  border-radius:var(--r-md);margin:6px}
.photo-plus{font-size:34px;line-height:1;color:var(--brand);font-weight:300}
.photo-title{font-weight:700;color:var(--ink);margin-top:8px;font-size:16px}
.photo-hint{font-size:13px;color:var(--muted);margin-top:4px}
.photo-filled{position:relative}
.photo-filled img{width:100%;display:block;max-height:340px;object-fit:cover}
.photo-change{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.62);backdrop-filter:blur(8px);
  color:#fff;border:none;border-radius:var(--r-pill);padding:9px 15px;font:inherit;font-size:13px;
  font-weight:600;cursor:pointer}
.photo-card.is-drag{border-color:var(--brand)}

/* ── поиск ── */
.search-wrap{margin-bottom:12px}
.search{width:100%;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:13px 18px;font:inherit;font-size:15px;color:var(--ink);box-shadow:var(--shadow);appearance:none}

/* ── чипсы категорий ── */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--r-pill);padding:9px 15px;font:inherit;font-size:14px;
  font-weight:600;color:var(--body);cursor:pointer;transition:transform .12s ease-out}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.chip .dot{width:7px;height:7px;border-radius:50%;flex:none}
.chip .n{opacity:.55;font-weight:500;font-size:12.5px}
.count{font-size:13px;color:var(--muted);margin-bottom:10px}

/* ── сетка пресетов ── */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.preset{position:relative;background:var(--surface);border:1px solid var(--hairline-soft);
  border-radius:var(--r-md);padding:14px 12px 13px;text-align:left;cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;gap:9px;min-height:104px;box-shadow:var(--shadow);
  transition:transform .14s cubic-bezier(.22,1,.36,1),border-color .14s}
.preset:active{transform:scale(.965)}
.preset::before{content:'';position:absolute;inset:0;background:var(--tint);opacity:.09;pointer-events:none}
.preset.on{border-color:var(--tint);box-shadow:0 0 0 2px color-mix(in srgb,var(--tint) 32%,transparent),var(--shadow)}
.preset-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:21px;
  background:color-mix(in srgb,var(--tint) 16%,var(--surface));position:relative}
.preset-label{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.25;position:relative}
.preset-check{position:absolute;top:11px;right:11px;width:22px;height:22px;border-radius:50%;
  background:var(--tint);color:#fff;display:none;place-items:center;font-size:13px;z-index:2}
.preset.on .preset-check{display:grid}

/* ── инпуты ── */
textarea,input[type=text],input[type=search],input:not([type]){width:100%;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--r-sm);padding:13px 15px;font:inherit;font-size:15px;
  color:var(--ink);resize:vertical}
textarea::placeholder,input::placeholder{color:var(--muted)}
textarea:focus,input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}

/* ── кнопки ── */
.btn{border:none;border-radius:var(--r-pill);padding:15px 20px;font:inherit;font-size:15.5px;font-weight:700;
  cursor:pointer;min-height:50px;transition:transform .12s ease-out,filter .15s}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--brand);color:var(--brand-text);width:100%}
.btn.primary:disabled{background:color-mix(in srgb,var(--ink) 10%,var(--surface));
  color:var(--muted);transform:none;box-shadow:none}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--hairline);flex:1;font-weight:600}
.btn.small{padding:13px 18px;min-height:48px;flex:none}
.btn.wide{width:100%}
.row{display:flex;gap:9px;align-items:stretch}
.actions{display:flex;flex-direction:column;gap:9px;margin-bottom:8px}
.note{font-size:13px;color:var(--muted);text-align:center;margin-top:14px}

/* ── прогресс ── */
.stage{overflow:hidden;margin-bottom:14px}
/* ── «Было / Стало»: перетаскиваемый слайдер ── */
.ba{position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;
  touch-action:pan-y;background:color-mix(in srgb,var(--ink) 6%,var(--surface))}
.ba img{width:100%;display:block;max-height:min(62vh,560px);object-fit:contain;pointer-events:none}
.ba-before{position:absolute;inset:0;
  clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;margin-left:-1.5px;
  background:#fff;box-shadow:0 0 10px rgba(0,0,0,.45);cursor:ew-resize}
.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;background:#fff;color:#141118;display:grid;place-items:center;
  font-size:16px;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.ba-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);color:#fff;border-radius:var(--r-pill);
  padding:8px 15px;font-size:12.5px;font-weight:600;pointer-events:none;
  animation:fadeOut 3.6s ease forwards}
@keyframes fadeOut{0%,55%{opacity:1}100%{opacity:0}}

/* ── лента последних кадров ── */
.feed{display:flex;gap:10px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.feed::-webkit-scrollbar{display:none}
.feed-card{flex:none;width:136px;background:var(--surface);border:1px solid var(--hairline-soft);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow)}
.feed-card img{width:100%;height:136px;object-fit:cover;display:block;cursor:pointer}
.feed-meta{padding:8px 9px 9px;display:flex;flex-direction:column;gap:7px}
.feed-label{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.feed-actions{display:flex;gap:6px}
.feed-btn{flex:1;background:transparent;border:1px solid var(--hairline);border-radius:9px;padding:7px 0;
  font:inherit;font-size:13px;line-height:1;color:var(--body);cursor:pointer;transition:transform .12s}
.feed-btn:active{transform:scale(.95)}
.feed-btn.on{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 42%,transparent);
  background:var(--brand-soft)}

/* ── черновик из бота ── */
.draft-note{display:flex;align-items:center;gap:9px;border-radius:var(--r-sm);padding:11px 13px;
  font-size:13.5px;font-weight:600;margin-bottom:12px;
  background:color-mix(in srgb,#22B573 15%,var(--surface));
  border:1px solid color-mix(in srgb,#22B573 36%,transparent);color:#14663F}
.draft-note button{margin-left:auto;background:none;border:none;font:inherit;font-size:19px;
  line-height:1;color:inherit;cursor:pointer;padding:0 2px}
.progress{padding:56px 24px;display:flex;flex-direction:column;align-items:center;gap:18px}
.spinner{width:46px;height:46px;border-radius:50%;
  border:3.5px solid color-mix(in srgb,var(--ink) 10%,transparent);border-top-color:var(--brand);
  animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}
.progress-bar{width:100%;max-width:280px;height:6px;border-radius:3px;
  background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden}
.progress-fill{height:100%;width:6%;background:var(--brand);border-radius:3px;
  transition:width .8s cubic-bezier(.22,1,.36,1)}
.progress-stage{font-size:14.5px;color:var(--muted);font-weight:600;text-align:center}
.err{background:color-mix(in srgb,#DC2626 9%,var(--surface));border:1px solid color-mix(in srgb,#DC2626 26%,transparent);
  color:#8A1F1F;border-radius:var(--r-sm);padding:13px 15px;font-size:14px;margin-bottom:12px;line-height:1.45}

/* ── альбом ── */
.album{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.album-item{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--hairline-soft);
  box-shadow:var(--shadow);cursor:pointer;aspect-ratio:1;background:var(--surface)}
.album-item img{width:100%;height:100%;object-fit:cover;display:block}
.empty{color:var(--muted);text-align:center;padding:48px 20px;font-size:14.5px}

/* ── баланс ── */
.balance-hero{padding:26px;text-align:center;margin-bottom:20px}
.balance-num{font-size:46px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.04em}
.balance-sub{color:var(--muted);font-size:14px;margin-top:8px}
.packs{display:flex;flex-direction:column;gap:9px}
.pack{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--r-md);padding:16px;
  display:flex;justify-content:space-between;align-items:center;cursor:pointer;color:var(--ink);
  box-shadow:var(--shadow);font-weight:600;transition:transform .12s}
.pack:active{transform:scale(.985)}
.pack-stars{color:var(--brand);font-weight:800}

/* ── липкая кнопка ── */
.cta{position:fixed;left:0;right:0;bottom:calc(var(--tabs-h) + var(--safe-bottom));
  padding:11px 16px;background:linear-gradient(to top,var(--canvas) 62%,transparent);
  display:flex;flex-direction:column;gap:8px;z-index:11}
.cta-info{font-size:13px;color:var(--muted);text-align:center;font-weight:600}
.cta-btn{box-shadow:0 6px 22px color-mix(in srgb,var(--brand) 34%,transparent)}

/* ── вкладки ── */
.tabs{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--surface);border-top:1px solid var(--hairline-soft);
  padding-bottom:var(--safe-bottom);z-index:12;box-shadow:0 -4px 20px rgba(20,17,24,.04)}
.tabs button{background:none;border:none;padding:9px 4px;font:inherit;font-size:11px;font-weight:600;
  color:var(--muted);cursor:pointer;min-height:var(--tabs-h);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;transition:color .15s}
.tabs button span{font-size:20px;line-height:1}
.tabs button.on{color:var(--brand)}

/* ── лайтбокс и тост ── */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:40;display:flex;
  align-items:center;justify-content:center;padding:16px}
.lightbox img{max-width:100%;max-height:88vh;border-radius:var(--r-md)}
#lightboxClose{position:absolute;top:calc(var(--safe-top) + 14px);right:16px;background:rgba(255,255,255,.16);
  color:#fff;border:none;width:42px;height:42px;border-radius:50%;font-size:17px;cursor:pointer}
.toast{position:fixed;left:16px;right:16px;bottom:calc(var(--tabs-h) + var(--safe-bottom) + 92px);
  background:var(--ink);color:var(--canvas);border-radius:var(--r-sm);padding:13px 16px;font-size:14px;
  font-weight:600;text-align:center;z-index:30;box-shadow:0 8px 26px rgba(0,0,0,.24);
  animation:rise .24s cubic-bezier(.22,1,.36,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* скелетон альбома */
.skel{border-radius:var(--r-md);aspect-ratio:1;
  background:linear-gradient(100deg,var(--surface) 30%,color-mix(in srgb,var(--ink) 6%,var(--surface)) 50%,var(--surface) 70%);
  background-size:200% 100%;animation:shimmer 1.3s infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* ── миниатюры нескольких фото ── */
.thumbs{display:flex;gap:8px;padding:10px;overflow-x:auto;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.thumb{position:relative;flex:none;width:84px;height:84px;border-radius:12px;overflow:hidden;
  border:1px solid var(--hairline)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb button{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:none;
  background:rgba(0,0,0,.6);color:#fff;font-size:13px;line-height:1;cursor:pointer}
.thumb-add{flex:none;width:84px;height:84px;border-radius:12px;border:2px dashed var(--hairline);
  background:none;color:var(--muted);font-size:24px;cursor:pointer}

/* ── значок вида пресета ── */
.preset-kind{position:absolute;bottom:10px;right:11px;font-size:11px;font-weight:700;color:var(--tint);
  background:color-mix(in srgb,var(--tint) 14%,var(--surface));border-radius:6px;padding:2px 6px;z-index:2}
.preset-photos{position:absolute;top:11px;left:11px;font-size:11px;font-weight:700;color:var(--muted);z-index:2}

/* ── видео-результат ── */
.result-video{width:100%;display:block;max-height:min(62vh,560px);background:#000}


/* ══════════ виральность: бонус дня, приглашения, оплата ══════════ */
.daily{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:12px 14px;
  border-radius:var(--r-md);border:1px solid color-mix(in srgb,var(--brand) 34%,transparent);
  background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 15%,var(--surface)),
    color-mix(in srgb,var(--brand) 6%,var(--surface)));
  animation:rise .3s cubic-bezier(.22,1,.36,1)}
.daily-icon{font-size:24px;line-height:1;flex:none;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
.daily-body{flex:1;min-width:0}
.daily-title{font-size:14px;font-weight:700}
.daily-sub{font-size:12px;color:var(--muted);margin-top:2px}
.daily.done{border-color:var(--hairline);background:var(--surface);animation:none}
.daily.done .daily-icon{animation:none;filter:grayscale(1);opacity:.6}

.invite{margin:4px 0 14px;padding:16px}
.invite-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.invite-title{font-size:15px;font-weight:750}
.invite-badge{font-size:12px;font-weight:800;color:var(--brand-text);background:var(--brand);
  border-radius:var(--r-pill);padding:4px 10px;flex:none}
.invite-sub{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.invite-track{height:8px;border-radius:var(--r-pill);background:var(--hairline-soft);margin-top:13px;overflow:hidden}
.invite-fill{height:100%;width:0;border-radius:var(--r-pill);background:var(--brand);
  transition:width .5s cubic-bezier(.22,1,.36,1)}
.invite-line{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:7px;font-weight:600}
.invite-link{margin-top:11px}
.invite-link input{width:100%;box-sizing:border-box;background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-sm);padding:11px 13px;font:inherit;font-size:12.5px;color:var(--muted)}
.invite .row{margin-top:11px;flex-direction:column}
.invite .btn{width:100%}
.invite .btn.wide{margin-top:9px}
/* ряд кнопок на экране результата: три кнопки делим по ширине, текст мельче */
.actions .row .btn{font-size:13.5px;padding:14px 8px;min-width:0;white-space:nowrap}
.actions .row{flex-wrap:wrap}

.card-pay{background:var(--surface);border:1px solid var(--hairline-soft);border-radius:var(--r-md);padding:14px}
.card-pay-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-pay-name{font-size:14px;font-weight:650}
.card-pay-tag{font-size:11px;font-weight:800;color:var(--muted);background:var(--hairline-soft);
  border-radius:var(--r-pill);padding:3px 9px;flex:none}
.card-pay-tag.on{color:var(--brand-text);background:var(--brand)}
.card-pay-hint{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.45}
.card-pay-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.card-pay-opt{border:1px solid var(--hairline);border-radius:var(--r-sm);padding:8px 11px;font-size:12.5px;
  font-weight:600;cursor:pointer;background:var(--canvas)}
.card-pay-opt:active{transform:scale(.97)}

/* кнопка-ссылка «скачать» ведёт себя как кнопка */
a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box}