/* Ai Reels — мини-апп. Приёмка и витрина внутри Telegram. Язык оформления — Аура, тот же, что у лендинга и админки: стеклянные острова на светлом ауро-фоне, Unbounded 300 в заголовках, Manrope в тексте, один акцент #7c5cff. Приложение и сайт должны узнаваться как одна вещь. ⚠️ Верстается от 390 px и вверх. Мини-апп открывается только на телефоне — монитора у него не бывает вовсе, и «сначала десктоп» здесь означало бы проверять то, чего никто не увидит. Тёмная тема — не отдельная вёрстка, а переопределение токенов: Telegram сообщает `colorScheme`, скрипт вешает `data-тема="тёмная"` на . */ @font-face{font-family:Manrope;src:url(шрифты/manrope-cyrillic-400-normal.woff2)format("woff2");font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Manrope;src:url(шрифты/manrope-latin-400-normal.woff2)format("woff2");font-weight:400;font-display:swap} @font-face{font-family:Manrope;src:url(шрифты/manrope-cyrillic-600-normal.woff2)format("woff2");font-weight:600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Manrope;src:url(шрифты/manrope-latin-600-normal.woff2)format("woff2");font-weight:600;font-display:swap} @font-face{font-family:Manrope;src:url(шрифты/manrope-cyrillic-700-normal.woff2)format("woff2");font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Manrope;src:url(шрифты/manrope-latin-700-normal.woff2)format("woff2");font-weight:700;font-display:swap} @font-face{font-family:Unbounded;src:url(шрифты/unbounded-cyrillic-300-normal.woff2)format("woff2");font-weight:300;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:Unbounded;src:url(шрифты/unbounded-latin-300-normal.woff2)format("woff2");font-weight:300;font-display:swap} :root{ --чернила:#241a3d; --чернила2:#6f6790; --чернила3:#9a95b4; --акцент:#7c5cff; --акцент2:#4fb6ff; --фон:#f4f2fb; --стекло:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.68)); --грань:1px solid rgba(255,255,255,.92); --волос:rgba(20,22,38,.08); --мягкая:rgba(124,92,255,.10); --тень:0 18px 40px -22px rgba(36,26,61,.36); --тень-низа:0 -14px 34px -20px rgba(36,26,61,.34); --поле:16px; --низ-высота:62px; --радиус:22px; /* ── щит: сколько сверху и снизу занято чужим ────────────────────────── Приложение рисует от самого верха окна, а Telegram кладёт поверх него ДВЕ полосы: системную строку телефона (время, батарея) и свою панель («Назад», «Закрыть», три точки). Одного `env()` мало — в вебвью Telegram на Android он равен нулю, и шапка уезжала под панель (владелец 31.08.2026: «интерфейс плохо адаптирован, обрезается»). Три источника, берётся наибольший: env(...) — системная строка там, где она видна вебвью (iOS Safari, PWA); --tg-*-safe-area-inset-* — ставит сам telegram-web-app.js, Bot API 8.0+; системная строка и панель Telegram считаются отдельно, поэтому складываются; --щит-тг-* — то же из JS-полей, если клиент отдаёт поля, но переменных не поставил. ⚠️ Всё под `var(…, 0px)`: в браузере и в старых клиентах Telegram ни одного из источников нет, щит равен нулю и вид не меняется. */ --щит-верх:max( env(safe-area-inset-top,0px), calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)), var(--щит-тг-верх,0px)); --щит-низ:max( env(safe-area-inset-bottom,0px), calc(var(--tg-safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px)), var(--щит-тг-низ,0px)); } html[data-тема="тёмная"]{ --чернила:#efecff; --чернила2:#b0a8cf; --чернила3:#8a83a8; --фон:#14111f; --стекло:linear-gradient(160deg,rgba(48,42,72,.92),rgba(34,29,54,.74)); --грань:1px solid rgba(255,255,255,.10); --волос:rgba(255,255,255,.10); --мягкая:rgba(124,92,255,.20); --тень:0 18px 40px -22px rgba(0,0,0,.7); --тень-низа:0 -14px 34px -20px rgba(0,0,0,.72); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:Manrope,system-ui,-apple-system,sans-serif;font-size:16px; line-height:1.5;color:var(--чернила);background:var(--фон); -webkit-font-smoothing:antialiased; padding:0 var(--поле) calc(var(--низ-высота) + var(--щит-низ) + 36px); } img,video{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} textarea{font:inherit} code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px} [hidden]{display:none!important} ::selection{background:rgba(124,92,255,.24)} :focus-visible{outline:2px solid var(--акцент);outline-offset:2px;border-radius:12px} /* ── ауро-фон ─────────────────────────────────────────────────────────── Контейнер с `overflow:hidden`: пятна шире экрана, и без этого страница получала бы горизонтальную прокрутку — ровно то, что запрещено. */ .аврора{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none; background:radial-gradient(120% 80% at 50% -10%,#fbf8ff 0%,#eef2fe 48%,#fdf0f7 100%)} html[data-тема="тёмная"] .аврора{ background:radial-gradient(120% 80% at 50% -10%,#221c38 0%,#161327 52%,#1b1226 100%)} .аврора i{position:absolute;display:block;border-radius:50%;filter:blur(64px);opacity:.55} .аврора .а1{width:78vw;height:78vw;left:-24vw;top:-26vw; background:radial-gradient(circle,rgba(155,123,255,.55),transparent 68%)} .аврора .а2{width:66vw;height:66vw;right:-22vw;top:26vh; background:radial-gradient(circle,rgba(79,182,255,.46),transparent 68%)} .аврора .а3{width:70vw;height:70vw;left:8vw;bottom:-30vw; background:radial-gradient(circle,rgba(255,138,205,.38),transparent 68%)} /* ── шапка ──────────────────────────────────────────────────────────── */ .шапка{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:calc(var(--щит-верх) + 12px) 0 12px;position:sticky;top:0;z-index:5; background:linear-gradient(var(--фон) 62%,transparent)} .знак{font-family:Unbounded,Manrope,sans-serif;font-weight:300;font-size:19px; letter-spacing:-.03em} .пилюля{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px; background:var(--мягкая);border:1px solid var(--волос);font-size:14px;font-weight:600; color:var(--акцент);white-space:nowrap} html[data-тема="тёмная"] .пилюля{color:#c3b1ff} /* ── типографика ────────────────────────────────────────────────────── */ h1{font-family:Unbounded,Manrope,sans-serif;font-weight:300;letter-spacing:-.03em; font-size:23px;line-height:1.16;margin:2px 0 8px} h2{font-family:Unbounded,Manrope,sans-serif;font-weight:300;letter-spacing:-.02em; font-size:18px;line-height:1.2;margin-bottom:4px} h2.раздел{margin:22px 0 10px} .под{color:var(--чернила2);font-size:13.5px} .мелко{color:var(--чернила3);font-size:12.5px;line-height:1.45;margin-top:10px} /* ── острова ────────────────────────────────────────────────────────── */ .остров{background:var(--стекло);border:var(--грань);border-radius:var(--радиус); box-shadow:var(--тень);backdrop-filter:blur(12px);padding:16px} .блок{margin-bottom:12px;position:relative} /* ⚠️ На экране заказа над вкладками стоит ещё и панель с кнопкой. Без этого запаса подсказка про списание кредита пряталась под ней — на снимке видно, в разметке нет. */ #экран-заказ{padding-bottom:86px} .номер{position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%; background:var(--мягкая);color:var(--акцент);font-size:12px;font-weight:700; display:grid;place-items:center} html[data-тема="тёмная"] .номер{color:#c3b1ff} .как{margin:18px 0 14px} .шаги{margin:10px 0 0 18px;font-size:14.5px;color:var(--чернила2)} .шаги li{margin-bottom:6px} .шаги b{color:var(--чернила);font-weight:600} /* ── витрина: предпросмотр вместо тумблеров ─────────────────────────── */ .лента{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; margin:12px calc(-1 * var(--поле)) 0;padding:2px var(--поле) 10px; scrollbar-width:none} .лента::-webkit-scrollbar{display:none} .работа{flex:0 0 62vw;max-width:260px;scroll-snap-align:center} .рамка{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden; background:#0e0b18;box-shadow:var(--тень);border:var(--грань)} .рамка video{width:100%;height:100%;object-fit:cover} .работа h3{font-size:14.5px;font-weight:600;margin-top:9px;letter-spacing:-.01em} .работа p{font-size:12.5px;color:var(--чернила3);line-height:1.35} .звук{position:absolute;right:8px;bottom:8px;width:32px;height:32px;border-radius:50%; background:rgba(12,10,22,.55);color:#fff;display:grid;place-items:center;font-size:14px; backdrop-filter:blur(6px)} /* ── кнопки ─────────────────────────────────────────────────────────── */ .главная{display:block;width:100%;padding:15px 18px;border-radius:16px;color:#fff; background:linear-gradient(135deg,#9b7bff,#6a4bff);font-weight:700;font-size:16px; box-shadow:0 14px 30px -16px rgba(106,75,255,.9);letter-spacing:-.01em} .главная[disabled]{opacity:.45;box-shadow:none} .вторая{display:block;width:100%;padding:12px 16px;border-radius:14px;margin-top:10px; background:var(--мягкая);color:var(--акцент);font-weight:600;font-size:14.5px} html[data-тема="тёмная"] .вторая{color:#c3b1ff} .мелкая{padding:8px 12px;border-radius:11px;background:var(--мягкая);color:var(--акцент); font-size:13px;font-weight:600;white-space:nowrap} html[data-тема="тёмная"] .мелкая{color:#c3b1ff} /* ── приём файлов ───────────────────────────────────────────────────── */ .приём{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px; padding:18px;border-radius:16px;border:1.5px dashed rgba(124,92,255,.45); background:var(--мягкая);color:var(--акцент);font-weight:600;font-size:15px; cursor:pointer;min-height:64px} html[data-тема="тёмная"] .приём{color:#c3b1ff} .приём-значок{font-size:20px;line-height:1} .файлы{list-style:none;margin-top:10px;display:grid;gap:7px} .файлы li{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:12px; background:var(--мягкая);font-size:13.5px} .файлы .имя{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .файлы .вес{color:var(--чернила3);font-size:12px;white-space:nowrap} .файлы .убрать{width:26px;height:26px;border-radius:50%;background:rgba(255,90,120,.14); color:#e0496b;font-size:15px;line-height:1;flex:none} .полоса{margin-top:12px;height:26px;border-radius:999px;background:var(--мягкая); position:relative;overflow:hidden} .полоса i{position:absolute;inset:0;width:0;border-radius:999px; background:linear-gradient(135deg,#9b7bff,#4fb6ff);transition:width .18s linear} .полоса span{position:absolute;inset:0;display:grid;place-items:center;font-size:12px; font-weight:600;color:var(--чернила)} /* ── выбор длины и пауз ─────────────────────────────────────────────── */ .выбор{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px} .фишка{padding:11px 12px;border-radius:14px;border:1px solid var(--волос); background:var(--мягкая);text-align:left;line-height:1.25;min-height:56px} .фишка b{display:block;font-size:14px;font-weight:600} .фишка small{display:block;font-size:11.5px;color:var(--чернила3);margin-top:2px} .фишка.выбрана{border-color:var(--акцент);background:rgba(124,92,255,.16); box-shadow:0 0 0 1px var(--акцент) inset} .фишка .цена{color:var(--акцент);font-weight:700} html[data-тема="тёмная"] .фишка .цена{color:#c3b1ff} textarea{width:100%;margin-top:12px;padding:12px;border-radius:14px; border:1px solid var(--волос);background:rgba(255,255,255,.6);color:var(--чернила); font-size:16px;resize:vertical;min-height:84px} html[data-тема="тёмная"] textarea{background:rgba(255,255,255,.06)} textarea::placeholder{color:var(--чернила3)} /* ── мои ролики ─────────────────────────────────────────────────────── */ .заказ{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:10px} .заказ .кто{flex:1;min-width:0} .заказ .кто b{display:block;font-size:15px;font-weight:600} .заказ .кто span{font-size:12.5px;color:var(--чернила3)} .метка{padding:5px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap} .метка.готов{background:rgba(52,199,123,.16);color:#1c8f56} .метка.ждёт,.метка.работе{background:var(--мягкая);color:var(--акцент)} .метка.тихо{background:var(--волос);color:var(--чернила3)} html[data-тема="тёмная"] .метка.готов{color:#6ee7a8} html[data-тема="тёмная"] .метка.ждёт,html[data-тема="тёмная"] .метка.работе{color:#c3b1ff} .пусто{text-align:center;color:var(--чернила3);font-size:14px;padding:34px 10px} /* ── баланс ─────────────────────────────────────────────────────────── */ .счёт{text-align:center;padding:22px 16px} .цифра{font-family:Unbounded,Manrope,sans-serif;font-weight:300;font-size:52px; line-height:1;letter-spacing:-.04em; background:linear-gradient(135deg,#9b7bff,#4fb6ff);-webkit-background-clip:text; background-clip:text;color:transparent} .тарифы{display:grid;gap:8px} .тариф{display:flex;align-items:center;gap:12px;padding:14px 16px;width:100%;text-align:left} .тариф .имя{flex:1;font-weight:600;font-size:15px} .тариф .цена{font-weight:700;color:var(--акцент);white-space:nowrap} html[data-тема="тёмная"] .тариф .цена{color:#c3b1ff} .тариф .выгода{font-size:11.5px;color:var(--чернила3);display:block;font-weight:400} .ссылка-строка{display:flex;align-items:center;gap:8px;margin-top:10px; padding:10px 12px;border-radius:13px;background:var(--мягкая)} .ссылка-строка code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;color:var(--чернила2)} /* ── нижняя кнопка заказа ───────────────────────────────────────────── */ .низ{position:fixed;left:0;right:0;z-index:6; bottom:calc(var(--низ-высота) + var(--щит-низ)); padding:10px var(--поле) 12px;background:var(--стекло);border-top:var(--грань); box-shadow:var(--тень-низа);backdrop-filter:blur(14px)} .низ .мелко{margin-top:7px;text-align:center} /* ── вкладки ────────────────────────────────────────────────────────── */ .вкладки{position:fixed;left:0;right:0;bottom:0;z-index:7;display:grid; grid-template-columns:repeat(4,1fr); padding-bottom:var(--щит-низ); background:var(--стекло);border-top:var(--грань);backdrop-filter:blur(14px)} .вкладки button{height:var(--низ-высота);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600; color:var(--чернила3)} .вкладки i{font-style:normal;font-size:17px;line-height:1} .вкладки .выбрана{color:var(--акцент)} html[data-тема="тёмная"] .вкладки .выбрана{color:#c3b1ff} /* ── всплывающее сообщение ──────────────────────────────────────────── */ .сообщение{position:fixed;left:var(--поле);right:var(--поле);z-index:9; bottom:calc(var(--низ-высота) + var(--щит-низ) + 76px); padding:13px 16px;border-radius:15px;background:rgba(36,26,61,.94);color:#fff; font-size:14px;line-height:1.35;box-shadow:var(--тень);text-align:center} .сообщение.беда{background:#b7263f} /* ── экран пошире: планшет и Telegram Desktop ───────────────────────── */ @media (min-width:640px){ body{max-width:640px;margin:0 auto;padding-left:24px;padding-right:24px} h1{font-size:32px} .работа{flex-basis:200px} .низ,.вкладки{max-width:640px;left:50%;transform:translateX(-50%)} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}