/* AMBERRY · интерфейс приложения
 *
 * Правила, которые тут держатся:
 *   · поверхности стеклянные, а не плоские заливки: фон под ними
 *     живой, и плоский прямоугольник поверх него выглядит дырой;
 *   · неон только на том, что нажимают, иначе светится всё и не
 *     светится ничего;
 *   · ничего не обрезается: у таб-бара своя высота под круглую
 *     кнопку, у сеток `minmax(0,1fr)`, у листов `min-width:0`;
 *   · движение дешёвое: только transform и opacity, без анимации
 *     размеров и теней в покое.
 */

:root{
  --fon:#0B0A0D;
  --fon2:#15121A;
  --стекло:rgba(255,255,255,.055);
  --стекло2:rgba(255,255,255,.09);
  --кромка:rgba(255,255,255,.1);
  --кромка2:rgba(255,255,255,.17);
  --неон:#FF1D8E;
  --неон2:#B5119B;
  --свет:#FF4FA8;
  --текст:#F6F2F8;
  --тихо:#A79FB0;
  --тише:#7E7787;
  --r-s:14px;
  --r-m:20px;
  --r-l:26px;
  --верх:env(safe-area-inset-top,0px);
  --низ-от:env(safe-area-inset-bottom,0px);
  --шапка-в:58px;
  --низ-в:72px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{ margin:0; padding:0; background:var(--fon); color:var(--текст); }
body{
  font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",
       Roboto,Inter,system-ui,sans-serif;
  min-height:100dvh; overflow-x:hidden;
  padding-bottom:calc(var(--низ-в) + var(--низ-от));
}
h1,h2,h3{ margin:0; letter-spacing:-.02em; }
h2{ font-size:18px; font-weight:800; margin:22px 0 10px; }
p{ margin:0 0 12px; }
a{ color:var(--свет); text-decoration:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
img,video{ display:block; max-width:100%; }

.зн{ width:22px; height:22px; flex:none; }
.зн.большая{ width:30px; height:30px; }

/* ---------- живой фон ----------
 * Три пятна, каждое со своим сроком и своей траекторией: совпадающие
 * периоды дают заметный «пульс» всей страницы.
 */
#фон{
  position:fixed; inset:-18% -18% -18% -18%; z-index:-3; pointer-events:none;
  background:
    radial-gradient(44% 34% at 16% 10%, rgba(255,29,142,.34), transparent 68%),
    radial-gradient(40% 32% at 88% 22%, rgba(150,22,195,.3), transparent 70%),
    radial-gradient(56% 40% at 50% 94%, rgba(255,60,130,.24), transparent 72%),
    radial-gradient(30% 24% at 78% 62%, rgba(90,30,210,.2), transparent 70%),
    var(--fon);
  animation:дышать 26s ease-in-out infinite alternate;
}
#фон::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(28% 22% at 70% 58%, rgba(255,80,170,.18), transparent 68%),
    radial-gradient(24% 20% at 22% 74%, rgba(120,40,200,.18), transparent 70%);
  animation:плыть 34s ease-in-out infinite alternate;
}
@keyframes дышать{
  from{ transform:translate3d(-1.5%,-1%,0) scale(1.02); }
  to{ transform:translate3d(2%,1.5%,0) scale(1.07); }
}
@keyframes плыть{
  from{ transform:translate3d(3%,2%,0); opacity:.75; }
  to{ transform:translate3d(-3%,-2%,0); opacity:1; }
}

/* Зерно: ровные градиенты на телефоне идут полосами, шум их разбивает. */
#зерно{
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='ш'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23ш)' opacity='.6'/></svg>");
}

@media (prefers-reduced-motion: reduce){
  #фон,#фон::after{ animation:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- шапка ---------- */
.шапка{
  position:fixed; top:0; left:0; right:0; z-index:40;
  padding-top:var(--верх);
  background:linear-gradient(180deg, rgba(11,10,13,.92), rgba(11,10,13,.55) 70%,
                             transparent);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  transition:background .25s, box-shadow .25s;
}
.шапка.плотная{
  background:rgba(11,10,13,.93);
  box-shadow:0 1px 0 rgba(255,255,255,.07), 0 12px 30px rgba(0,0,0,.5);
}
.шапка-внутри{
  display:flex; align-items:center; gap:10px;
  height:var(--шапка-в); max-width:1180px; margin:0 auto; padding:0 14px;
}
.знак{ display:flex; align-items:center; gap:9px; min-width:0; }
.знак img{
  width:34px; height:34px; object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(255,29,142,.55));
}
.знак .имя{
  font-weight:900; font-size:17px; letter-spacing:.14em; white-space:nowrap;
}
.знак .имя b{ color:var(--неон); font-weight:900; }
.растяжка{ flex:1; }

.скачать{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:999px; font-size:13px; font-weight:700;
  background:var(--стекло); border:1px solid var(--кромка);
  backdrop-filter:blur(8px); transition:transform .18s, border-color .18s;
}
.скачать .зн{ width:17px; height:17px; }
.скачать:active{ transform:scale(.95); }
.скачать.нет{ display:none; }

.кошель{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px 7px 10px; border-radius:999px;
  font-weight:800; font-size:14px;
  background:linear-gradient(135deg, rgba(255,29,142,.2), rgba(181,17,155,.14));
  border:1px solid rgba(255,29,142,.42);
  box-shadow:0 0 18px rgba(255,29,142,.2) inset;
}
.кошель .зн{ width:17px; height:17px; color:var(--свет); }

/* ---------- корпус и листы ---------- */
#корпус{
  max-width:1180px; margin:0 auto; min-width:0;
  padding:calc(var(--верх) + var(--шапка-в) + 10px) 14px 20px;
}
#корпус.сгероем{ padding-top:calc(var(--верх) + var(--шапка-в)); }
.лист{ display:none; min-width:0; }
.лист.жив{ display:block; animation:явиться .34s ease both; }
@keyframes явиться{
  from{ opacity:0; transform:translate3d(0,14px,0); }
  to{ opacity:1; transform:none; }
}
.титул{ font-size:27px; font-weight:900; margin:4px 0 6px; }
.подпись{ color:var(--тихо); font-size:14px; max-width:46em; }

/* ---------- герой ----------
 * Заставка показывается ЦЕЛИКОМ: своё соотношение и `contain`, то
 * есть обрезки нет ни при какой ширине. Текст лежит под кадром, в
 * полосе затемнения, которая вырастает из кадра в фон страницы.
 */
.герой{ position:relative; margin:0 -14px 10px; display:flex; flex-direction:column; }
.герой .кадр{ position:relative; width:100%; line-height:0; background:#07060a; }
.герой video,.герой img.фонкадр{
  width:100%; aspect-ratio:16/9; height:auto;
  max-height:min(62vh,560px); object-fit:contain; margin:0 auto;
}
.герой .кадр::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:64%;
  background:linear-gradient(180deg, rgba(11,10,13,0), rgba(11,10,13,.6) 48%,
                             var(--fon));
  pointer-events:none;
}
.герой .слова{
  position:relative; z-index:1; margin-top:-48px; padding:0 20px 6px;
  background:linear-gradient(180deg, rgba(11,10,13,0), var(--fon) 40%, var(--fon));
}
.герой h1{
  font-size:clamp(26px,7.6vw,38px); font-weight:900; letter-spacing:-.025em;
  margin:0 0 8px; text-shadow:0 2px 24px rgba(0,0,0,.85);
}
.герой h1 em{
  font-style:normal; color:var(--свет);
  text-shadow:0 0 26px rgba(255,29,142,.8);
}
.герой p{
  margin:0 0 16px; color:#D9D2DE; font-size:14.5px; max-width:32em;
  text-shadow:0 1px 10px rgba(0,0,0,.85);
}
.герой .ряд{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- кнопки ----------
 * Иконка на розовой кнопке раньше сливалась с заливкой: она была того
 * же розового семейства. Теперь иконка в кнопке всегда белая и стоит
 * на полупрозрачном кружке, то есть читается на любом фоне кнопки.
 */
.кнопка{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:15px 22px; border-radius:var(--r-s);
  font-weight:800; font-size:15px; color:#fff;
  background:linear-gradient(135deg,var(--неон),var(--неон2));
  box-shadow:0 8px 26px rgba(255,29,142,.34),
             inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .16s, box-shadow .22s, filter .22s;
}
.кнопка .зн{
  width:19px; height:19px; color:#fff; padding:4px; box-sizing:content-box;
  border-radius:50%; background:rgba(255,255,255,.18);
}
/* Блик проходит по кнопке один раз за цикл: постоянное мерцание
 * утомляет, а неподвижная кнопка выглядит картинкой. */
.кнопка::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.4) 46%,
                             transparent 60%);
  transform:translateX(-120%);
  animation:блик 5.5s ease-in-out infinite;
}
@keyframes блик{
  0%,72%{ transform:translateX(-120%); }
  86%,100%{ transform:translateX(120%); }
}
.кнопка:active{ transform:scale(.975); box-shadow:0 4px 16px rgba(255,29,142,.3); }
/* Выключенная кнопка не должна выглядеть «тусклой розовой»: это
 * читается как сломанная. Она становится стеклом, то есть явно
 * другого вида, и видно, что ждут действия. */
.кнопка[disabled]{
  background:var(--стекло); border:1px solid var(--кромка);
  color:var(--тише); box-shadow:none; filter:none; cursor:default;
}
.кнопка[disabled] .зн{ background:rgba(255,255,255,.08); color:var(--тише); }
.кнопка[disabled]::after{ animation:none; }
.кнопка.узкая{ width:auto; }
.кнопка.мелкая{ width:auto; padding:10px 15px; font-size:13.5px; border-radius:11px; }
.кнопка.тихая{
  background:var(--стекло); border:1px solid var(--кромка2);
  box-shadow:none; backdrop-filter:blur(10px);
}
.кнопка.тихая::after{ animation:none; }
.кнопка.тихая .зн{ background:rgba(255,255,255,.1); }

/* ---------- карточки и строки ---------- */
.строки{ display:flex; flex-direction:column; gap:9px; }
.строка{
  position:relative; display:flex; align-items:center; gap:13px;
  width:100%; padding:14px 15px; border-radius:var(--r-m); text-align:left;
  background:var(--стекло); border:1px solid var(--кромка);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  transition:transform .16s, border-color .2s, background .2s;
}
.строка::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 42%);
  pointer-events:none;
}
.строка:active{ transform:scale(.985); background:var(--стекло2); }
.строка .значок{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  border-radius:13px; color:var(--свет);
  background:linear-gradient(135deg, rgba(255,29,142,.2), rgba(181,17,155,.12));
  border:1px solid rgba(255,29,142,.3);
}
/* Название и подпись - две строки, а не одна фраза: разметка даёт
 * `<b>` и `<span>` внутри `.имя`, и без явного блока они слипались в
 * «Create Photo, video or your own prompt». */
.строка .имя{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.строка .имя b{ font-weight:700; font-size:15px; }
.строка .имя span{ color:var(--тише); font-size:12.5px; line-height:1.35; }
.строка .текст{ min-width:0; flex:1; }
.строка .назв{ font-weight:700; font-size:15px; }
.строка .под{ color:var(--тише); font-size:12.5px; margin-top:2px; }
.строка .стрелка{ width:18px; height:18px; color:var(--тише); flex:none; }
.строка .цена{
  display:inline-flex; align-items:center; gap:5px;
  font-weight:800; font-size:14px; color:var(--свет); flex:none;
}
.строка .цена .зн{ width:15px; height:15px; }

.назад{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:12px;
  padding:9px 14px 9px 10px; border-radius:999px; font-size:13.5px; font-weight:700;
  background:var(--стекло); border:1px solid var(--кромка);
}
.назад .зн{ width:17px; height:17px; }
.назад:active{ transform:scale(.96); }

.выбранное{
  display:flex; align-items:center; gap:10px; margin:0 0 14px;
  padding:12px 14px; border-radius:var(--r-m);
  background:linear-gradient(135deg, rgba(255,29,142,.17), rgba(181,17,155,.1));
  border:1px solid rgba(255,29,142,.34);
}
.выбранное .снять{
  margin-left:auto; font-size:13px; color:var(--свет); font-weight:700;
}

/* ---------- сетка работ ---------- */
.сетка{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
}
@media (min-width:620px){ .сетка{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:900px){ .сетка{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1100px){ .сетка{ grid-template-columns:repeat(5,minmax(0,1fr)); } }

.плитка{
  position:relative; min-width:0; aspect-ratio:9/16; overflow:hidden;
  border-radius:var(--r-m); background:var(--fon2);
  border:1px solid var(--кромка);
  transition:transform .2s, border-color .2s;
}
.плитка:active{ transform:scale(.985); }
.плитка img,.плитка video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.плитка .низок{
  position:absolute; left:0; right:0; bottom:0; padding:28px 11px 11px;
  display:flex; align-items:flex-end; gap:8px;
  background:linear-gradient(180deg, transparent, rgba(6,5,8,.88));
}
.плитка .назв{
  font-size:12.5px; font-weight:700; line-height:1.25; flex:1; min-width:0;
  text-shadow:0 1px 8px rgba(0,0,0,.9);
}
.плитка .сделать{
  flex:none; padding:7px 11px; border-radius:999px; font-size:11.5px;
  font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--неон),var(--неон2));
  box-shadow:0 4px 14px rgba(255,29,142,.4);
}
.плитка .метка,
.плитка .бирка{
  position:absolute; top:9px; left:9px; display:inline-flex; align-items:center;
  gap:5px; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:700;
  background:rgba(8,6,10,.64); border:1px solid var(--кромка2);
  backdrop-filter:blur(8px);
}
.плитка .метка .зн,.плитка .бирка .зн{ width:13px; height:13px; }
.плитка .метка svg{ width:13px; height:13px; }
.плитка.скелет{ border-style:dashed; }
.плитка.скелет::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.07) 50%,
                             transparent 80%);
  animation:мерцать 1.5s linear infinite;
}
@keyframes мерцать{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }

.кадрик{ width:100%; border-radius:var(--r-s); overflow:hidden; }

/* ---------- баннер канала ---------- */
.канал{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  margin:14px 0 4px; padding:14px 15px; border-radius:var(--r-m);
  background:linear-gradient(120deg, rgba(255,29,142,.22), rgba(120,20,170,.16));
  border:1px solid rgba(255,29,142,.36);
  box-shadow:0 10px 30px rgba(255,29,142,.14);
}
.канал::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.2) 50%,
                             transparent 65%);
  transform:translateX(-120%); animation:блик 7s ease-in-out infinite;
}
.канал .значок{
  display:grid; place-items:center; width:40px; height:40px; flex:none;
  border-radius:12px; color:#fff; background:rgba(255,255,255,.14);
}
.канал .метка{
  margin-left:auto; flex:none; padding:7px 12px; border-radius:999px;
  font-weight:800; font-size:13px; color:#fff;
  background:linear-gradient(135deg,var(--неон),var(--неон2));
}
.канал.забрано{ opacity:.62; }
.канал.забрано::after{ animation:none; }

/* ---------- создать ---------- */
.шаги{ display:flex; gap:7px; margin:14px 0 16px; }
.шаг{
  flex:1; height:5px; border-radius:999px; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.07);
  transition:background .3s, box-shadow .3s, border-color .3s;
}
.шаг.готов{
  background:linear-gradient(90deg,var(--неон),var(--свет));
  border-color:transparent;
  box-shadow:0 0 16px rgba(255,29,142,.6);
}
.дроп{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:30px 18px; border-radius:var(--r-l); text-align:center; cursor:pointer;
  background:var(--стекло); border:1.5px dashed var(--кромка2);
  transition:border-color .2s, background .2s;
}
.дроп:active{ background:var(--стекло2); border-color:var(--неон); }
.дроп .зн{ color:var(--свет); }
.дроп b{ font-size:15px; }
.дроп span{ color:var(--тише); font-size:12.5px; }
.превьюшки{ display:flex; gap:9px; flex-wrap:wrap; margin-top:12px; }
.превьюшки img{
  width:72px; height:72px; object-fit:cover; border-radius:13px;
  border:1px solid var(--кромка2);
}

/* ---------- баланс и числа ---------- */
/* ---------- карта счёта ----------
 * Банковская карта читается с одного взгляда: знак, чип, сумма,
 * владелец. Поэтому счёт показан ею, а не серым прямоугольником с
 * числом: число без единицы не говорит, семнадцать чего.
 */
.карта{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  margin:14px 0 18px; padding:16px 18px 14px; min-height:186px;
  border-radius:20px; border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(130% 150% at 8% -10%, rgba(255,29,142,.5), transparent 56%),
    radial-gradient(100% 130% at 108% 112%, rgba(181,17,155,.45), transparent 58%),
    linear-gradient(150deg, #27102a, #140b18 58%, #1d0d21);
  box-shadow:0 18px 44px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.14),
             inset 0 0 0 1px rgba(255,29,142,.12);
}
/* Глянец: узкая светлая полоса поперёк, как блик на пластике. */
.карта .блик{
  position:absolute; inset:-40% -10%; z-index:0; pointer-events:none;
  background:linear-gradient(104deg, transparent 38%,
             rgba(255,255,255,.1) 47%, rgba(255,255,255,.02) 54%, transparent 62%);
}
.карта > *:not(.блик){ position:relative; z-index:1; }
.карта-верх{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.карта-бренд{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Bebas Neue',system-ui,sans-serif;
  font-size:19px; letter-spacing:.08em; line-height:1;
}
.карта-бренд img{ width:21px; height:21px; object-fit:contain; }
.карта-бренд b{ color:#fff; font-weight:400; }
.карта-бренд i{ color:var(--неон); font-style:normal; font-weight:400; }
.карта-вид{
  font-size:9.5px; font-weight:800; letter-spacing:.17em;
  color:rgba(255,255,255,.5);
}
/* Чип: три дорожки на золотой пластине. Мелочь, но без неё карта
 * читается просто прямоугольником. */
.карта .чип{
  display:block; width:38px; height:28px; margin:16px 0 0;
  border-radius:6px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#f3dc9d,#c7a052 48%,#efd79a);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.карта .чип i{
  position:absolute; left:4px; right:4px; height:1px;
  background:rgba(0,0,0,.3);
}
.карта .чип i:nth-child(1){ top:8px; }
.карта .чип i:nth-child(2){ top:14px; }
.карта .чип i:nth-child(3){ top:20px; }
.карта-сумма{
  display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:14px;
}
.карта-сумма b{
  font-size:42px; font-weight:900; letter-spacing:-.03em; line-height:1;
  color:#fff; text-shadow:0 0 30px rgba(255,29,142,.55);
}
.карта-сумма span{
  font-size:14px; font-weight:800; letter-spacing:.04em;
  color:var(--неон);
}
.карта-низ{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px; font-size:11px; font-weight:700; letter-spacing:.08em;
  color:rgba(255,255,255,.55); text-transform:uppercase;
}
.карта-низ span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.числа{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:4px 0 16px; }
@media (min-width:560px){ .числа{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* Разметка карточки это `<b>число</b><span>подпись</span>` без
 * обёрток, поэтому блочность задаётся здесь: иначе выходило
 * «0works» одной строкой. */
.число_карта{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:13px; border-radius:var(--r-s); text-align:center;
  background:var(--стекло); border:1px solid var(--кромка);
}
.число_карта b{ font-size:21px; font-weight:900; line-height:1.1; }
.число_карта span{ color:var(--тише); font-size:11.5px; }
.число_карта .число{ font-size:21px; font-weight:900; }
.число_карта .под{ color:var(--тише); font-size:11.5px; margin-top:2px; }

.пакеты{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (min-width:700px){ .пакеты{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.пакет{
  position:relative; padding:16px 13px; border-radius:var(--r-m); text-align:center;
  background:var(--стекло); border:1px solid var(--кромка);
  transition:transform .16s, border-color .2s;
}
.пакет:active{ transform:scale(.98); }
.пакет .сколько{ font-size:23px; font-weight:900; color:var(--свет); }
.пакет .руб{ color:var(--тихо); font-size:13.5px; margin-top:3px; }
.пакет.хит{
  border-color:rgba(255,29,142,.5);
  box-shadow:0 0 0 1px rgba(255,29,142,.2), 0 10px 28px rgba(255,29,142,.16);
}
.пакет.хит::before{
  content:"TOP"; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  padding:3px 9px; border-radius:999px; font-size:10px; font-weight:900;
  letter-spacing:.08em; color:#fff;
  background:linear-gradient(135deg,var(--неон),var(--неон2));
}

/* ---------- мелочь ---------- */
.пусто{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:34px 18px; text-align:center; color:var(--тише);
  border-radius:var(--r-l); background:var(--стекло);
  border:1px dashed var(--кромка);
}
.пусто .зн{ color:var(--тише); }
.пусто b{ color:var(--текст); font-size:15px; }
.крутилка{
  width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.2);
  border-top-color:var(--свет); animation:вертеть .8s linear infinite;
}
@keyframes вертеть{ to{ transform:rotate(360deg); } }

.языки{ display:inline-flex; gap:4px; padding:3px; border-radius:999px;
        background:var(--стекло); border:1px solid var(--кромка); }
.языки button{
  padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:800;
  color:var(--тише); transition:color .2s, background .2s;
}
.языки button.жив{
  color:#fff; background:linear-gradient(135deg,var(--неон),var(--неон2));
  box-shadow:0 4px 14px rgba(255,29,142,.35);
}

.поле{
  width:100%; padding:15px; border-radius:var(--r-s); text-align:center;
  font-size:21px; font-weight:800; letter-spacing:.42em; color:var(--текст);
  background:rgba(0,0,0,.3); border:1px solid var(--кромка2); outline:none;
}
.поле:focus{ border-color:var(--неон); box-shadow:0 0 0 3px rgba(255,29,142,.17); }

/* ---------- окно входа ---------- */
.шторка{
  position:fixed; inset:0; z-index:60; display:none;
  align-items:center; justify-content:center; padding:18px;
  background:rgba(4,3,6,.72); backdrop-filter:blur(10px);
}
.шторка.жив{ display:flex; animation:явиться .22s ease both; }
.шторка .окно{
  width:100%; max-width:380px; padding:24px 20px; border-radius:var(--r-l);
  background:linear-gradient(170deg,#1A1620,#120F17);
  border:1px solid var(--кромка2);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.шторка h3{ font-size:21px; font-weight:900; margin-bottom:8px; }
.шторка p{ color:var(--тихо); font-size:13.5px; }
.шторка .кнопка{ margin-top:14px; }

.тост{
  position:fixed; left:50%; bottom:calc(var(--низ-в) + var(--низ-от) + 18px);
  transform:translate(-50%,16px); z-index:70; opacity:0; pointer-events:none;
  max-width:88vw; padding:12px 17px; border-radius:999px; text-align:center;
  font-size:13.5px; font-weight:600;
  background:rgba(18,14,22,.96); border:1px solid var(--кромка2);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  transition:opacity .22s, transform .22s;
}
.тост.жив{ opacity:1; transform:translate(-50%,0); }

/* ---------- нижние вкладки ----------
 * Круглая кнопка «Создать» выступает ВВЕРХ за полосу, поэтому у
 * полосы нет `overflow:hidden`, а место под выступ заложено в высоту
 * самой панели. Раньше кнопку резала именно полоса.
 */
.низ{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  padding-bottom:var(--низ-от);
  background:linear-gradient(180deg, rgba(11,10,13,.5), rgba(11,10,13,.97) 42%);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.08);
}
.низ-внутри{
  position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:end; max-width:560px; margin:0 auto; height:var(--низ-в);
  padding:0 6px;
}
.вкладка{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; height:100%; min-width:0; padding:8px 2px 10px;
  color:var(--тише); font-size:10.5px; font-weight:700; letter-spacing:.01em;
  transition:color .2s, transform .18s;
}
.вкладка .зн{ width:23px; height:23px; transition:transform .2s, filter .25s; }
.вкладка span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.вкладка:active{ transform:scale(.94); }
.вкладка.жив{ color:var(--свет); }
.вкладка.жив .зн{ filter:drop-shadow(0 0 10px rgba(255,79,168,.75)); }

/* Кнопка «Создать»: выступает над полосой, место под неё заложено
 * отрицательным margin, а не отрицательным top, чтобы она оставалась
 * в потоке и попадала в палец. */
.вкладка.плюс{ justify-content:flex-end; gap:5px; }
.вкладка.плюс .круг{
  position:relative;
  display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  margin-top:-26px; color:#fff;
  background:linear-gradient(135deg,var(--неон),var(--неон2));
  box-shadow:0 10px 26px rgba(255,29,142,.45),
             0 0 0 5px rgba(11,10,13,.95),
             inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .2s, box-shadow .25s;
}
.вкладка.плюс .круг .зн{ width:26px; height:26px; }
.вкладка.плюс:active .круг{ transform:scale(.92); }
.вкладка.плюс.жив .круг{
  box-shadow:0 10px 30px rgba(255,29,142,.6),
             0 0 0 5px rgba(11,10,13,.95),
             0 0 26px rgba(255,29,142,.5),
             inset 0 1px 0 rgba(255,255,255,.3);
}
/* Ореол под кнопкой: он и подсказывает, что она главная. */
.вкладка.плюс .круг::after{
  content:""; position:absolute; width:74px; height:74px; border-radius:50%;
  top:50%; left:50%; margin:-37px 0 0 -37px;
  background:radial-gradient(circle, rgba(255,29,142,.34), transparent 68%);
  z-index:-1; animation:пульс 3.4s ease-in-out infinite;
}
@keyframes пульс{
  0%,100%{ transform:scale(.9); opacity:.55; }
  50%{ transform:scale(1.06); opacity:.95; }
}

/* Бирка внутри карточки пакета: та же сущность, но стоит в потоке и
 * висит над карточкой, а не поверх картинки. */
.пакет .бирка{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  padding:3px 9px; border-radius:999px; font-size:10px; font-weight:900;
  letter-spacing:.06em; color:#fff; white-space:nowrap;
  background:linear-gradient(135deg,var(--неон),var(--неон2));
  box-shadow:0 4px 12px rgba(255,29,142,.4);
}
/* Если бирку рисует код, собственная псевдо-метка «TOP» не нужна. */
.пакет.хит:has(.бирка)::before{ content:none; }

/* ---------- способы оплаты ----------
 * Показываются ВСЕ, даже неготовые: человек должен видеть, чем тут
 * вообще платят. Про неготовое говорим словами и гасим его, но не
 * прячем - спрятанный способ выглядит как отсутствующий.
 */
.способы{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
  margin:12px 0 4px;
}
@media (min-width:560px){ .способы{ grid-template-columns:repeat(4,1fr); } }
.способ{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:13px 10px; border-radius:var(--r-s); text-align:center;
  background:var(--стекло); border:1px solid var(--кромка);
}
.способ .зн{ width:24px; height:24px; color:var(--свет); }
.способ b{ font-size:12.5px; font-weight:700; line-height:1.25; }
.способ span{ color:var(--тише); font-size:10.5px; line-height:1.3; }
.способ.ждёт{ opacity:.52; }
.способ.ждёт .зн{ color:var(--тише); }

.пакет .закоин{
  display:block; margin-top:3px; color:var(--тише); font-size:10.5px;
}

/* ---------- партнёрка ----------
 * Отдельный вид, а не очередная строка меню: это предложение денег, и
 * оно обязано выделяться из списка кнопок.
 */
.заработок{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  margin:18px 0 6px; padding:16px 15px; border-radius:var(--r-l);
  background:linear-gradient(118deg, rgba(255,186,64,.16),
             rgba(255,29,142,.2) 48%, rgba(120,20,180,.18));
  border:1px solid rgba(255,186,64,.34);
  box-shadow:0 12px 34px rgba(255,120,60,.14);
  transition:transform .18s;
}
.заработок:active{ transform:scale(.985); }
.заработок .свет{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,.22) 50%,
             transparent 64%);
  transform:translateX(-120%); animation:блик 6.5s ease-in-out infinite;
}
.заработок .текст{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.заработок b{ font-size:16px; font-weight:900; letter-spacing:-.01em; }
.заработок .текст span{ color:#D8CFD8; font-size:12.5px; line-height:1.35; }
.заработок .метка{
  margin-left:auto; flex:none; padding:9px 14px; border-radius:999px;
  font-weight:800; font-size:13px; color:#1A1208;
  background:linear-gradient(135deg,#FFD36B,#FF9F43);
  box-shadow:0 6px 18px rgba(255,160,60,.4);
}

/* ---------- мастер создания ----------
 * Ступени чипами, сцены карточками, снимок ложится В ОКНО.
 */
.нет{ display:none; }

/* ЧИПЫ ЕДУТ В РЯД, А НЕ ПЕРЕНОСЯТСЯ. Двенадцать фонов переносом это
 * шесть строк и полэкрана прокрутки ради одного выбора; рядом с
 * прокруткой они занимают одну строку, и до кнопки «Создать» рукой
 * подать. Полоса прокрутки убрана, край подрезан тенью - видно, что
 * ряд продолжается. */
.чипы{
  display:flex; gap:8px; margin:0 0 4px; padding:2px 14px 6px;
  margin-left:-14px; margin-right:-14px;
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  mask-image:linear-gradient(90deg, transparent 0, #000 14px,
             #000 calc(100% - 20px), transparent 100%);
}
.чипы::-webkit-scrollbar{ display:none; }
.чипы .чип{ flex:none; scroll-snap-align:start; }
.чип{
  position:relative; padding:11px 16px; border-radius:999px;
  font-size:14px; font-weight:700; color:var(--тихо);
  background:var(--стекло); border:1px solid var(--кромка);
  transition:transform .16s, color .2s, border-color .2s, background .2s;
}
.чип:active{ transform:scale(.96); }
.чип.жив{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--неон),var(--неон2));
  box-shadow:0 6px 18px rgba(255,29,142,.4);
}

/* Одна колонка на телефоне, две от 520. `auto-fill` с `1fr` тут не
 * годится: ширина трека выходит неопределённой, и все карточки
 * ложатся в одну ячейку друг на друга. */
.сцены{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
}
@media (max-width:359px){ .сцены{ grid-template-columns:minmax(0,1fr); } }
@media (min-width:520px){ .сцены{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:760px){ .сцены{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.сцена{
  position:relative; display:flex; flex-direction:column; gap:2px;
  padding:12px 13px 11px; border-radius:var(--r-m); text-align:left;
  background:var(--стекло); border:1px solid var(--кромка);
  transition:transform .16s, border-color .2s, background .2s;
}
.сцена:active{ transform:scale(.985); }
.сцена b{ font-size:14px; font-weight:700; padding-right:26px; }
.сцена span{ color:var(--тише); font-size:11.5px; line-height:1.3; }
.сцена .цена{
  position:absolute; top:11px; right:11px;
  display:inline-flex; align-items:center; gap:4px;
  color:var(--свет); font-weight:800; font-size:13px;
}
.сцена .цена .зн{ width:14px; height:14px; }
.сцена.жив{
  border-color:rgba(255,29,142,.55);
  background:linear-gradient(135deg, rgba(255,29,142,.16), rgba(181,17,155,.1));
  box-shadow:0 0 0 1px rgba(255,29,142,.25), 0 10px 26px rgba(255,29,142,.16);
}

/* Окна снимков: фото ложится ВНУТРЬ окна, а не лентой под ним - в
 * парной сцене порядок решает всё, и человек должен видеть, какой
 * снимок куда попал. */
/* Число окон задаёт код классом: `auto-fit` с `1fr` схлопывает их в
 * одну ячейку так же, как схлопнул карточки сцен. */
.окна{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px;
       margin:4px 0 6px; }
.окна.два{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.окна.три{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.окно-фото{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; aspect-ratio:4/5; max-height:38vh; padding:14px 12px;
  text-align:center; cursor:pointer;
  border-radius:var(--r-l); background:var(--стекло);
  border:1.5px dashed var(--кромка2);
  transition:border-color .2s, background .2s, transform .16s;
}
.окно-фото:active{ transform:scale(.985); }
.окно-фото .зн{ color:var(--свет); }
.окно-фото b{ font-size:14.5px; }
.окно-фото span{ color:var(--тише); font-size:11.5px; line-height:1.3; }
.окно-фото.полно{ border-style:solid; border-color:rgba(255,29,142,.5); padding:0; }
/* СНИМОК ЦЕЛИКОМ, А НЕ КАДРИРОВАННЫЙ. `cover` срезал вертикали по
 * голове и ногам, и человек не понимал, что приложил. Пустоту по
 * бокам заполняет размытая копия того же снимка. */
.окно-фото img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:contain;
}
.окно-фото .подложка{
  position:absolute; inset:-8%; z-index:0;
  background-size:cover; background-position:center;
  filter:blur(18px) saturate(1.25) brightness(.5);
}
.окно-фото .снять{
  position:absolute; top:8px; right:8px; z-index:3;
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  font-size:17px; line-height:1; color:#fff;
  background:rgba(8,6,10,.72); border:1px solid var(--кромка2);
  backdrop-filter:blur(6px);
}
.окно-фото .роль{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 10px 8px;
  font-size:12px; font-weight:700; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(6,5,8,.85));
}

/* ---------- кабинет ---------- */
.кабинет-шапка{
  display:flex; align-items:center; gap:13px; margin:6px 0 16px;
  padding:16px 15px; border-radius:var(--r-l);
  background:var(--стекло); border:1px solid var(--кромка);
  backdrop-filter:blur(12px);
}
.лицо{
  position:relative; display:grid; place-items:center; flex:none;
  width:58px; height:58px; border-radius:50%; overflow:hidden;
  font-size:23px; font-weight:900; color:#fff;
  background:linear-gradient(135deg,var(--неон),var(--неон2));
  box-shadow:0 0 0 2px rgba(255,29,142,.35), 0 8px 22px rgba(255,29,142,.3);
}
.лицо img{ width:100%; height:100%; object-fit:cover; }
.кабинет-шапка .кто{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.кабинет-шапка .кто b{
  font-family:var(--загл); font-size:17px; font-weight:800;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.кабинет-шапка .кто .подпись{ font-size:12px; }
.кабинет-шапка .монеты{
  margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:999px;
  background:linear-gradient(135deg, rgba(255,29,142,.2), rgba(181,17,155,.14));
  border:1px solid rgba(255,29,142,.4);
}
.кабинет-шапка .монеты b{
  font-family:var(--загл); font-size:17px; font-weight:800; color:var(--свет);
}
.кабинет-шапка .монеты .зн{ width:16px; height:16px; color:var(--свет); }

#кн-работы{ margin:2px 0 10px; }
#кн-работы .имя span{ color:var(--тише); font-size:12.5px; }

/* Кнопки на плитке работы: сохранить и удалить. */
.плитка .низок .значок-кнопка{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  color:#fff; background:rgba(8,6,10,.66); border:1px solid var(--кромка2);
  backdrop-filter:blur(8px); transition:transform .16s, background .2s;
}
.плитка .низок .значок-кнопка .зн{ width:17px; height:17px; }
.плитка .низок .значок-кнопка:active{ transform:scale(.9); }
.плитка .низок .значок-кнопка.опасно{ color:#FF8080; }
.плитка .низок{ gap:7px; justify-content:flex-end; }
.плитка.ждёт{
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:9px;
}
.плитка .пояснение{ font-size:11.5px; color:var(--тише); }

/* ---------- поле своего описания ---------- */
.поле-текста{
  width:100%; padding:14px; border-radius:var(--r-s); resize:vertical;
  font:inherit; font-size:14.5px; line-height:1.45; color:var(--текст);
  background:rgba(0,0,0,.3); border:1px solid var(--кромка2); outline:none;
}
.поле-текста:focus{
  border-color:var(--неон); box-shadow:0 0 0 3px rgba(255,29,142,.16);
}
.поле-текста::placeholder{ color:var(--тише); }

/* ---------- низ мастера ----------
 * Кнопка «Создать» липнет к низу экрана: при длинном списке фонов она
 * уезжала за край, и человек листал обратно вверх, чтобы нажать.
 */
.подсказка-создать{
  margin:0 0 8px; text-align:center; font-size:13px; color:var(--тише);
}
/* В ПОТОКЕ, А НЕ ЛИПКАЯ. Липкий блок поднимается тем выше, чем длиннее
 * страница, и никакой отступ этого не ограничивает: с лентой очереди
 * он стал накрывать выбор фигуры и фона. */
.низ-мастера{ margin-top:14px; }
.низ-мастера .кнопка{ box-shadow:0 10px 30px rgba(255,29,142,.42); }
.кнопка .цена-кн{
  display:inline-flex; align-items:center; gap:4px; margin-left:4px;
  padding:3px 9px; border-radius:999px; font-size:13px;
  background:rgba(255,255,255,.18);
}
.кнопка .цена-кн .зн{
  width:14px; height:14px; padding:0; background:none; border-radius:0;
}

/* Заголовки шагов мастера мельче: их тут четыре, и крупный кегль
 * растягивает экран вдвое. */
#мастер h2, #шаг-фото h2{ font-size:15px; margin:16px 0 8px; }
#мастер h2:first-child{ margin-top:6px; }

/* ---------- компактный мастер ----------
 * Телефон показывает около 700 точек высоты. Прежде до первой кнопки
 * уходило 210 из них (титул, подзаголовок, полоса шагов), а каждая
 * ступень занимала 100 - выбор не влезал на экран ни разу. Числа ниже
 * сняты замером: ступень 74 точки, карточка сцены 62, и весь первый
 * шаг помещается целиком.
 */
.шаги.узко{ margin:10px 0 12px; }
[data-лист="создать"] h2{
  font-size:13px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--тихо); margin:14px 0 7px;
}
[data-лист="создать"] .чип{ padding:9px 14px; font-size:13.5px; }
[data-лист="создать"] .сцена{ padding:9px 11px 10px; gap:1px; }
[data-лист="создать"] .сцена b{ font-size:13.5px; padding-right:24px; }
[data-лист="создать"] .сцена span{ font-size:11px; }
[data-лист="создать"] .сцена .цена{ top:9px; right:10px; font-size:12.5px; }
[data-лист="создать"] .сцены{ gap:7px; }
[data-лист="создать"] .окна{ margin:2px 0 4px; }
/* Окно снимка остаётся крупным: это единственное место, куда человек
 * кладёт своё, и ужимать его ради строки списка нельзя. На пару окон
 * доля ниже - два окна в ряд и так занимают всю ширину. */
/* Потолок в ТОЧКАХ, а не только в долях экрана: на высоком экране
 * четыре пятых ширины дают полтысячи точек под одно окно, и весь
 * выигрыш компактности уходит обратно в прокрутку. */
[data-лист="создать"] .окно-фото{
  aspect-ratio:auto; height:min(30vh, 260px); max-height:none;
}
[data-лист="создать"] .окна.два .окно-фото,
[data-лист="создать"] .окна.три .окно-фото{
  aspect-ratio:auto; height:min(26vh, 210px); max-height:none;
}
/* Со снимком окно выше: вертикальное фото в низкой полосе читается
 * ленточкой. Пустому окну высота не нужна, оно только приглашение. */
[data-лист="создать"] .окно-фото.полно{ height:min(46vh, 400px); }
[data-лист="создать"] .окна.два .окно-фото.полно,
[data-лист="создать"] .окна.три .окно-фото.полно{ height:min(34vh, 300px); }
[data-лист="создать"] #шаг-фото{ padding-bottom:0; }

/* ---------- выбор строкой и шторка снизу ----------
 * Девять карточек сцен занимали пол-экрана и были единственной
 * причиной прокрутки на первом шаге. Строка показывает ВЫБРАННОЕ,
 * а список открывается снизу - там, где палец, а не под шапкой.
 */
.выбор{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 12px; border-radius:var(--r-m); text-align:left;
  background:var(--стекло); border:1px solid var(--кромка);
  transition:border-color .2s, background .2s, transform .16s;
}
.выбор:active{ transform:scale(.99); }
.выбор .тело{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.выбор .что{
  font-size:10.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--тише);
}
/* ДВЕ СТРОКИ ВМЕСТО МНОГОТОЧИЯ. Фонов двенадцать и на двух языках:
 * подрезать каждое имя руками значит однажды забыть, а обрезанное
 * «Фон с рефер…» не называет ничего. */
.выбор .знач{
  font-size:14.5px; font-weight:700; color:var(--свет); line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.выбор .под{
  font-size:11px; color:var(--тише); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.выбор .галка{ width:17px; height:17px; flex:none; color:var(--тише); }
.выбор .цена-стр{
  display:inline-flex; align-items:center; gap:4px; flex:none;
  color:var(--свет); font-weight:800; font-size:13px;
}
.выбор .цена-стр .зн{ width:14px; height:14px; }
.выбор.пустой .знач{ color:var(--тихо); font-weight:600; }
.выбор.жив{
  border-color:rgba(255,29,142,.5);
  background:linear-gradient(135deg, rgba(255,29,142,.13), rgba(181,17,155,.08));
}
.пара-выбора{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px; margin:8px 0 0;
}

/* Шторка снизу: окно во всю ширину, едет из-за нижнего края. */
.шторка.низом{ align-items:flex-end; padding:0; }
.шторка.низом .окно{
  width:100%; max-width:560px; margin:0 auto; max-height:76vh; overflow:auto;
  padding:10px 14px calc(var(--низ-от) + 16px);
  border-radius:22px 22px 0 0; border-bottom:none;
  animation:снизу .24s ease both;
}
@keyframes снизу{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.ручка{
  display:block; width:42px; height:4px; border-radius:999px;
  background:rgba(255,255,255,.22); margin:2px auto 12px;
}
.шторка.низом h3{ margin:0 0 10px; font-size:17px; }
.список{ display:flex; flex-direction:column; gap:7px; }
.строка-списка{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:11px 12px; border-radius:var(--r-m); text-align:left;
  background:var(--стекло); border:1px solid var(--кромка);
}
.строка-списка .тело{ flex:1; min-width:0; }
.строка-списка b{ display:block; font-size:14.5px; font-weight:700; }
.строка-списка span{
  display:block; color:var(--тише); font-size:11.5px; line-height:1.3;
}
.строка-списка .цена-стр{
  display:inline-flex; align-items:center; gap:4px; flex:none;
  color:var(--свет); font-weight:800; font-size:13px;
}
.строка-списка .цена-стр .зн{ width:14px; height:14px; }
.строка-списка.жив{
  border-color:rgba(255,29,142,.55);
  background:linear-gradient(135deg, rgba(255,29,142,.16), rgba(181,17,155,.1));
}

/* ---------- напоминание о недоделанном выборе ---------- */
/* Правило прячущего класса стоит РЯДОМ с блоком: общий `.нет` объявлен
 * выше по файлу, вес у селекторов равный, и побеждает поздний. */
.напоминание.нет{ display:none; }
.напоминание{
  position:fixed; left:10px; right:10px; z-index:55;
  bottom:calc(var(--низ-в) + var(--низ-от) + 10px);
  display:flex; align-items:center; gap:9px;
  padding:9px 10px 9px 14px; border-radius:999px;
  font-size:12.5px; font-weight:600; color:var(--свет);
  background:rgba(22,16,26,.96); border:1px solid rgba(255,29,142,.35);
  box-shadow:0 14px 36px rgba(0,0,0,.5);
  backdrop-filter:blur(12px);
}
.напоминание .текст{
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.напоминание .метка{
  flex:none; padding:7px 13px; border-radius:999px;
  font-size:12.5px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--неон),var(--неон2));
}
.напоминание .снять{
  flex:none; width:24px; height:24px; border-radius:50%;
  font-size:16px; line-height:1; color:var(--тише);
}

/* ---------- работа идёт и готова, в том же окне ---------- */
.итог-кнопки{ display:flex; gap:8px; }
.итог-кнопки .кнопка{ flex:1; }            /* одна кнопка - во всю ширину */
.итог-кнопки #кн-итог-скачать{ flex:.8; }
.итог-кнопки.нет{ display:none; }
.кнопка.второй{
  background:var(--стекло); border:1px solid var(--кромка2);
  box-shadow:none; color:#fff;
}
.кнопка.второй .зн{ background:rgba(255,255,255,.1); }

/* Пока идёт работа, выбор не нужен: человек смотрит на своё фото. */
[data-лист="создать"].занят #мастер,
[data-лист="создать"].занят .пара-выбора,
[data-лист="создать"].занят #подсказка-создать,
[data-лист="создать"].занят #кн-создать{ display:none; }

/* Световая полоса по снимку: она и говорит, что работа идёт. */
.окно-фото.идёт{ border-style:solid; border-color:rgba(255,29,142,.55); }
.окно-фото.идёт::after{
  content:""; position:absolute; left:0; right:0; top:0; height:42%; z-index:3;
  background:linear-gradient(180deg, transparent,
             rgba(255,29,142,.3) 55%, rgba(255,255,255,.22) 72%, transparent);
  animation:скан 2.1s ease-in-out infinite;
}
@keyframes скан{
  0%{ transform:translateY(-110%); } 100%{ transform:translateY(260%); }
}
.окно-фото .ход{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; text-align:center; color:#fff;
  background:rgba(8,6,10,.42); backdrop-filter:blur(2px);
}
/* С россыпью по центру лицо, поэтому подпись уходит вниз, а стекло
 * на весь кадр снимается: кадр и есть то, на что человек смотрит. */
.окно-фото.сточками .ход{
  inset:auto 0 0 0; justify-content:flex-end; gap:7px;
  padding:0 14px 16px; backdrop-filter:none;
  background:linear-gradient(180deg, transparent, rgba(8,6,10,.72) 62%);
}
.окно-фото .ход b{ font-size:14.5px; font-weight:800; }
.окно-фото .ход span{ font-size:11.5px; color:rgba(255,255,255,.7); }
.окно-фото.готово{ border-style:solid; border-color:rgba(255,29,142,.5); }
.окно-фото video{
  position:relative; z-index:1; width:100%; height:100%; object-fit:contain;
}
.окно-фото .беда{
  position:absolute; inset:0; z-index:4; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:#fff; background:rgba(8,6,10,.6);
}

/* ---------- очередь работ ----------
 * Человек ставит до пяти работ разом и уходит куда хочет. Плитка
 * показывает ЕГО снимок: по нему он и узнаёт, которая из пяти это.
 */
.очередь{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
          margin:0 0 10px; padding:2px 0 4px; }
.очередь.нет{ display:none; }
.очередь::-webkit-scrollbar{ display:none; }
.работа-плитка{
  position:relative; flex:none; width:72px; height:90px; overflow:hidden;
  border-radius:var(--r-s); background:var(--стекло);
  border:1px solid var(--кромка);
}
.работа-плитка img, .работа-плитка video{
  width:100%; height:100%; object-fit:cover;
}
.работа-плитка .поверх{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(8,6,10,.52);
}
.работа-плитка.готова{ border-color:rgba(255,29,142,.6); }
.работа-плитка.готова .поверх{ display:none; }
.работа-плитка.беда .поверх{ background:rgba(60,8,8,.6); font-size:18px; }
.работа-плитка .крутилка{ width:20px; height:20px; }

/* Пока весть видна, лист начинается ниже: иначе она закрывает первую
 * строку, а на экране создания это лента очереди. */
body.свесть #корпус{ padding-top:62px; }

/* ---------- весть сверху ----------
 * Стоит под шапкой и видна с ЛЮБОГО листа: работа идёт в фоне, и
 * человеку незачем возвращаться на экран создания, чтобы это узнать.
 */
.весть{
  position:fixed; left:10px; right:10px; z-index:58;
  top:calc(var(--шапка-в, 64px) + 8px);
  display:flex; align-items:center; gap:10px;
  padding:9px 10px 9px 12px; border-radius:999px;
  font-size:12.5px; font-weight:700; color:var(--свет);
  background:rgba(22,16,26,.96); border:1px solid rgba(255,29,142,.35);
  box-shadow:0 14px 36px rgba(0,0,0,.5); backdrop-filter:blur(12px);
}
.весть.нет{ display:none; }
.весть .знак{ display:grid; place-items:center; flex:none;
               width:26px; height:26px; }
.весть .знак img{ width:26px; height:26px; border-radius:7px; object-fit:cover; }
.весть .слова{ flex:1; min-width:0; overflow:hidden;
                text-overflow:ellipsis; white-space:nowrap; }
.весть .снять{ flex:none; width:24px; height:24px; border-radius:50%;
                font-size:16px; line-height:1; color:var(--тише); }
.весть.готово{ border-color:rgba(255,29,142,.6); }

/* ---------- россыпь ----------
 * Снимок распадается на точки и собирается обратно, пока идёт работа.
 * Холст лежит НАД размытой подложкой и ПОД надписью.
 */
.россыпь{ position:absolute; inset:0; z-index:2; width:100%; height:100%; }
.окно-фото.идёт.сточками::after{ content:none; }   /* полосу заменяют точки */
.окно-фото.идёт.сточками img{ opacity:0; }
.ход .полоска{
  position:relative; width:112px; height:3px; border-radius:999px;
  background:rgba(255,255,255,.14); overflow:hidden;
}
/* Бегущий свет, а НЕ проценты: хода работы сервис не сообщает, и
 * нарисованный процент был бы враньём. */
.ход .полоска i{
  position:absolute; top:0; bottom:0; width:42%; border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--неон), transparent);
  animation:бег 1.5s ease-in-out infinite;
}
@keyframes бег{
  0%{ left:-45%; } 100%{ left:100%; }
}

/* ---------- вход в одно нажатие ---------- */
.вход-кнопка{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-top:10px; padding:14px 16px; border-radius:var(--r-m);
  font-size:15px; font-weight:700; cursor:pointer; border:1px solid var(--кромка2);
  background:#fff; color:#1f1f1f;
}
.вход-кнопка svg{ width:21px; height:21px; flex:none; }
.вход-кнопка.телега{ background:#2aabee; color:#fff; border-color:transparent; }
.вход-кнопка.нет{ display:none; }
.гугл-место{ display:flex; justify-content:center; margin-top:10px; }
.гугл-место.нет{ display:none; }
.вход-ждём{ margin-top:12px; text-align:center; font-size:13px;
            color:rgba(255,255,255,.72); }
.вход-ждём.нет{ display:none; }
.вход-низ{ margin-top:14px; text-align:center; font-size:13px; }
.вход-низ a{ color:rgba(255,255,255,.55); }
.вход-код{ margin-top:14px; }
.вход-код.нет{ display:none; }