/* =====================================================================
   Клипни — тёмная тема по макету 2026-10: почти чёрный фон, салатовый акцент,
   тёплое оранжевое свечение вокруг Клипыша, крупные скруглённые карточки и кнопки-пилюли.
   Подключается последней, поверх ui.css и app.css: меняет токены и облик компонентов, не разметку.
   ===================================================================== */
:root, :root.dark {
  --bg: #0D0D0E;
  --surface: #161618;
  --surface-2: #1F1F22;
  --ink: #F5F5F3;
  --ink-2: #D9D9D6;
  --muted: #8E8E93;
  --line: rgba(255, 255, 255, .08);
  --hover: #1C1C1F;
  --track: #2A2A2E;
  --accent: #B5E35A;
  --accent-2: #C5EC74;
  --accent-soft: rgba(181, 227, 90, .13);
  --accent-ink: #C9EE7F;
  --on-accent: #11130D;
  --glow: #B5E35A;
  --orange: #FF7A1A;
  --orange-2: #FFA040;
  --orange-soft: rgba(255, 122, 26, .16);
  --card: #0A0A0B;
  --card-2: #161618;
  --card-line: #242427;
  --card-muted: #8E8E93;
  --display: "Onest", system-ui, -apple-system, sans-serif;
  --r: 18px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 40px -18px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

body { background: var(--bg); }
/* тёплое свечение по краям экрана, как на макете */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 40% at 50% -6%, rgba(255, 122, 26, .10), transparent 70%),
              radial-gradient(60% 35% at 100% 105%, rgba(255, 122, 26, .07), transparent 70%); }

/* ---------- типографика ---------- */
.page-title, .big-title, .pf-name, .hh-title, .gate-title { font-family: var(--display); font-weight: 800; letter-spacing: -.025em; }
.page-title { font-size: clamp(1.6rem, 4.6vw, 2rem); margin: 6px 0 4px; }
.page-sub { margin: 0 0 18px; color: var(--muted); }
.big-title { font-size: clamp(1.7rem, 5vw, 2.1rem); }
.sec-title { font-size: 1.12rem; font-weight: 700; margin: 26px 0 12px; display: flex; align-items: center; justify-content: space-between; }
.field-label { font-weight: 600; font-size: .9rem; color: var(--ink); }
.hint { color: var(--muted); }

/* ---------- кнопки ---------- */
.btn, .app .btn { border-radius: 999px; font-weight: 700; background: var(--accent); color: var(--on-accent);
  box-shadow: 0 10px 26px -12px rgba(181, 227, 90, .55); }
.btn:hover { background: var(--accent-2); }
.btn .ic { width: 1.15em; height: 1.15em; }
.btn-ghost, .app .btn-ghost { border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-lg { padding: 16px 26px; font-size: 1.02rem; }
.icon-btn { border-radius: 12px; background: var(--surface); border-color: var(--line); }
.link-btn { color: var(--muted); }
.btn-tg { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; padding: 15px 22px;
  background: #2AABEE; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 10px 26px -12px rgba(42, 171, 238, .6); }
.btn-tg .ic { width: 20px; height: 20px; }
.btn-tg:hover { background: #3DB6F2; }

/* ---------- поля и переключатели ---------- */
.input, .textarea, .select { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; color: var(--ink); }
.input:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder, .textarea::placeholder { color: #6B6B70; }
.seg { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button { border-radius: 999px; }
.seg button.on { background: var(--accent); color: var(--on-accent); }
.chips button { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.chips button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- карточки ---------- */
.panel, .group, .pcard, .clip, .pf-stats div, .live-row, .notify-card, .pw-steps, .chatline, .inv-login {
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: none; }
.group.rows { padding: 2px 0; }
.modal { background: rgba(0, 0, 0, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-card, .modal-h { background: #141416; }
.modal-card { border: 1px solid var(--line); border-radius: 24px; }
.toast { background: #1A1A1D; border: 1px solid var(--line); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .8); }

/* ---------- верхняя шапка (сайт) ---------- */
.nav { padding: 14px 24px; }
.nav .mark, .mark { background: var(--accent); color: var(--on-accent); border-radius: 10px; box-shadow: 0 0 18px rgba(181, 227, 90, .35); animation: none; }
.nav-links a.on { color: var(--accent); }

/* ---------- главная: шапка, приветствие, Клипыш на оранжевой орбите ---------- */
.topbar { display: flex; align-items: center; gap: 10px; margin: 8px 0 18px; }
.tb-brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.02em; }
.tb-logo { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(181, 227, 90, .22), transparent 70%); }
.tb-logo svg { width: 40px; height: 40px; }
.tb-beta { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-2); background: var(--orange-soft); border-radius: 999px; padding: 3px 8px; }
.tb-av { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.tb-av .ic { width: 20px; height: 20px; }
body:not(.tg) .topbar { display: none; }                 /* на сайте есть верхнее меню */
/* на телефоне верхнее меню сайта не нужно: внизу вкладки, на главной — своя шапка, как в Mini App */
@media (max-width: 760px) { body:not(.tg) .topbar { display: flex; } body:not(.tg) .nav { display: none; } body:not(.tg) .app { padding-top: 10px; } }
/* источник видео — крупные карточки прямо на фоне, без лишней подложки */
#panelVideo { background: none; border: 0; padding: 0; }

.home-hero { display: grid; gap: 6px; }
.hh-title { font-size: clamp(1.9rem, 7vw, 2.4rem); line-height: 1.1; }
.hh-title em { font-style: normal; color: var(--accent); }
.hh-sub { color: var(--ink-2); opacity: .85; max-width: 30ch; font-size: .98rem; }
.hh-stage { position: relative; height: 230px; display: grid; place-items: center; margin: 4px 0 8px; }
.hh-stage #helloK { position: relative; z-index: 2; width: 170px; height: 170px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
/* свечение вокруг Клипыша — мягкое оранжевое облако без контуров, медленно «дышит» */
.hh-orbit { position: absolute; left: 50%; top: 60%; width: 320px; height: 110px; border-radius: 50%; transform: translate(-50%, -50%) rotate(-10deg);
  background: radial-gradient(closest-side, rgba(255, 122, 26, .55), rgba(255, 122, 26, .18) 60%, transparent);
  filter: blur(18px); animation: hhglow 4.5s ease-in-out infinite; }
.hh-orbit.o2 { width: 200px; height: 200px; top: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 150, 60, .35), transparent); filter: blur(24px); animation-delay: -2.2s; }
@keyframes hhglow { 50% { opacity: .65; } }
.hh-stage::before { content: ""; position: absolute; left: 50%; top: 52%; width: 240px; height: 240px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 26, .22), rgba(255, 122, 26, .05) 55%, transparent 70%); }
.hh-spark { position: absolute; width: 8px; height: 8px; background: var(--orange-2); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: hhspark 2.6s ease-in-out infinite; }
.hh-spark.s1 { left: 18%; top: 22%; } .hh-spark.s2 { right: 20%; top: 14%; width: 11px; height: 11px; animation-delay: .8s; } .hh-spark.s3 { right: 26%; bottom: 18%; animation-delay: 1.5s; background: var(--accent); }
@keyframes hhspark { 50% { transform: scale(.4) rotate(45deg); opacity: .4; } }
.hh-play { position: absolute; z-index: 3; right: calc(50% - 128px); top: 46%; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: #1C1C1F; border: 1px solid rgba(255, 122, 26, .4); color: var(--accent); transform: rotate(8deg); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .7); }
.hh-play .ic { width: 20px; height: 20px; }
.hh-go { margin-top: 2px; }
.hh-go .ic { width: 20px; height: 20px; }
/* на широком экране текст — одним блоком по центру высоты Клипыша, а не растянут по трём строкам сетки */
@media (min-width: 761px) { .home-hero { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 24px; }
  .hh-title { grid-column: 1; grid-row: 2; } .hh-sub { grid-column: 1; grid-row: 3; } .hh-go { grid-column: 1; grid-row: 4; margin-top: 14px; justify-self: start; width: auto; }
  .hh-stage { grid-column: 2; grid-row: 1 / -1; } }

/* фильтр проектов */
.fseg { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; max-width: none; }
.fseg-pill { background: var(--accent); border-radius: 999px; box-shadow: none; }
.fseg button[aria-pressed="true"] { color: var(--on-accent); }
.fseg button[aria-pressed="true"] em { opacity: .8; }

/* карточка проекта */
.pcard { border-radius: 22px; padding: 12px; }
a.pcard:hover { border-color: rgba(181, 227, 90, .35); box-shadow: none; }
.src { background: var(--surface-2); border-radius: 14px; }
.th { border-radius: 12px; }
.tag { background: var(--surface-2); }
.tag.hot { background: var(--accent-soft); color: var(--accent); }
.tag.hot .ic { color: var(--accent); }
.ring .bg { stroke: var(--surface-2); }
/* пустой список проектов — просто текст: Клипыш и кнопка «Новая нарезка» уже есть выше */
.empty-k { padding: 18px 12px 8px; gap: 4px; }
.empty-k svg { display: none; }
.empty-k b { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.empty-k p { margin: 0; font-size: .88rem; }

/* ---------- нижнее меню ---------- */
.tabbar { background: rgba(13, 13, 14, .92); border-top: 1px solid var(--line); align-items: center; padding-top: 10px; }
body.tg .tabbar { background: #111113; }
.tabbar a[data-nav] { color: #7C7C82; font-size: .72rem; }
.tabbar a[data-nav].on { color: var(--accent); }
.tabbar .fab { width: 54px; height: 54px; border-radius: 18px; margin-top: 0; background: var(--accent); color: var(--on-accent);
  box-shadow: 0 0 0 6px rgba(181, 227, 90, .08), 0 10px 26px -8px rgba(181, 227, 90, .6); }

/* ---------- новая нарезка ---------- */
.new-head { display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 12px; margin-bottom: 8px; }
.new-head svg { width: 96px; height: 96px; filter: drop-shadow(0 10px 22px rgba(255, 122, 26, .25)); }
.src-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.src-cards button { position: relative; display: grid; gap: 4px; align-content: start; text-align: left; min-height: 150px; padding: 16px; border-radius: 22px;
  border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.src-cards button:active { transform: scale(.98); }
.src-cards button > .ic:first-child { width: 30px; height: 30px; color: var(--accent); margin-bottom: 10px; }
.src-cards b { font-size: 1.05rem; line-height: 1.2; }
.src-cards small { color: var(--muted); font-size: .8rem; line-height: 1.35; padding-right: 18px; }
.src-cards .sc-go { position: absolute; right: 14px; bottom: 14px; width: 16px; height: 16px; color: var(--muted); }
.src-cards button.on { border-color: var(--accent); background: linear-gradient(160deg, rgba(181, 227, 90, .10), transparent 60%), var(--surface-2);
  box-shadow: 0 0 0 4px rgba(181, 227, 90, .07); }
.src-cards button.on .sc-go { color: var(--accent); }
.plat-h { margin-top: 6px; }
.plats { display: flex; gap: 10px; margin-bottom: 8px; }
/* официальные логотипы площадок (Simple Icons, у Rutube — значок с rutube.ru) в фирменных цветах */
.plats { flex-wrap: wrap; }
.pl { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; color: #fff; }
.pl .ic { width: 26px; height: 26px; }
.pl.yt { background: #fff; color: #FF0000; }
.pl.yt .ic { width: 30px; height: 30px; }
.pl.tw { background: #9146FF; }
.pl.kk { background: #53FC18; color: #000; }
.pl.kk .ic { width: 22px; height: 22px; }
.pl.vk, .pl.ru { background: none; }
.pl.vk .ic, .pl.ru .ic { width: 46px; height: 46px; }
.pl.vk { color: #0077FF; }
.pl.more { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-weight: 800; letter-spacing: .05em; }
/* логотип площадки в строке — его фирменным цветом */
.ic.bi.yt { color: #FF0000; } .ic.bi.tw { color: #A970FF; } .ic.bi.vk { color: #0077FF; } .ic.bi.kk { color: #53FC18; }
.pw-src .ic.bi { width: 18px; height: 18px; }
.ch-list .ic.bi { width: 22px; height: 22px; }
.drop { border: 1.5px dashed rgba(255, 255, 255, .16); border-radius: 20px; background: var(--surface); }
.drop:hover, .drop:focus-visible, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop-ic { color: var(--accent); }
/* четыре режима — сеткой 2×2: «По таймкодам» и «Только субтитры» во втором ряду */
.how .how-subs { grid-column: auto; }
.mode button, .how button, .presets button { border-radius: 18px; background: var(--surface-2); border-color: var(--line); }
.mode button.on, .how button.on, .presets button.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.mode em { background: var(--orange); color: #fff; }
.submit { background: linear-gradient(180deg, transparent, var(--bg) 35%); }
.free-note { color: var(--muted); }
.free-note b { color: var(--ink); }
.chat-note .ic { color: var(--accent); }

/* ---------- экран обработки ---------- */
.pw-bubble { background: var(--surface-2); border-color: var(--line); border-radius: 18px; }
.pw-bubble.hot { border-color: var(--accent); background: var(--accent-soft); }
.pw-lead svg { filter: drop-shadow(0 10px 26px rgba(255, 122, 26, .3)); }
.pw-pct { font-weight: 800; color: var(--accent); }
.pw-bar { height: 10px; background: var(--surface-2); }
.pw-bar i { background: linear-gradient(90deg, #8FC23C, var(--accent)); box-shadow: 0 0 14px rgba(181, 227, 90, .5); }
.pw-steps { padding: 6px; }
.pw-step.on { background: var(--accent-soft); }
.pw-dot { border-color: #3A3A3F; }
.pw-clip { border-radius: 12px; background: var(--surface-2); border-color: rgba(255, 255, 255, .1); }

/* ---------- результаты ---------- */
.res-head .page-title { font-size: clamp(1.5rem, 4.5vw, 1.9rem); }
.clip { border-radius: 22px; }
.clip-media { border-radius: 22px 22px 0 0; }
.clip .pw.top { background: var(--accent); color: var(--on-accent); }
.why span { background: var(--accent-soft); color: var(--accent-ink); }
.pmeter i { background: linear-gradient(90deg, var(--orange), var(--accent)); }
.clip-tools .tool { border-radius: 12px; }
/* «Оценить клип» — широкая кнопка под «Скачать / Править»: на телефоне по ней легко попасть пальцем */
.rate-btn { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; width: 100%;
  min-height: 48px; margin-top: 8px; padding: 8px 12px; border-radius: 14px; border: 1px dashed var(--line);
  background: var(--surface-2); color: var(--ink, #fff); text-align: left; font: inherit; cursor: pointer; }
.rate-btn > span:first-child { font-size: 1.2rem; line-height: 1; }
.rate-btn .rt { display: grid; gap: 1px; min-width: 0; }
.rate-btn b { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.rate-btn small { color: var(--muted); font-size: .74rem; line-height: 1.2; }
.rate-btn b, .rate-btn small { overflow-wrap: anywhere; }
.rate-btn.good { border: 1px solid var(--accent); background: var(--accent-soft); }
.rate-btn.bad { border: 1px solid #E5484D; background: rgba(229, 72, 77, .1); }
.rate-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.rate-pick button { display: grid; justify-items: center; gap: 4px; padding: 18px 8px; min-height: 112px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--surface-2); color: inherit; font: inherit; cursor: pointer; }
.rate-pick .rate-e { font-size: 2rem; line-height: 1; }
.rate-pick b { font-size: 1rem; }
.rate-pick small { color: var(--muted); font-size: .78rem; text-align: center; }
.rate-pick button:active { transform: scale(.97); }
#rateGood.on { border-color: var(--accent); background: var(--accent-soft); }
#rateBad.on { border-color: #E5484D; background: rgba(229, 72, 77, .1); }
/* «Где текст»: ползунки выше/ниже и переключатель заголовка рядом с превью */
.pp-ctl { display: grid; gap: 10px; margin-top: 12px; }
.pp-range { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 4px 10px; font-size: .88rem; }
.pp-range small { grid-column: 2; display: flex; justify-content: space-between; color: var(--muted); font-size: .72rem; }
.pp-range small i { font-style: normal; }
.pp-range input[type=range] { width: 100%; height: 28px; accent-color: var(--accent); touch-action: pan-y; }
.pp-hook { margin: 0; }
/* только на сайте: в мини-приложении человек и так в боте */
body.tg .web-only { display: none !important; }
/* приглашение в группу тестировщиков под роликами */
.tg-group { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 16px;
  padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(83, 182, 245, .35); background: rgba(83, 182, 245, .08);
  color: inherit; text-decoration: none; }
.tg-group .ri { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #2AABEE; color: #fff; }
.tg-group .ri .ic { width: 20px; height: 20px; }
.tg-group .rt { display: grid; gap: 2px; }
.tg-group small { color: var(--muted); font-size: .8rem; }
.tg-group .rc { width: 16px; height: 16px; color: var(--muted); }
/* вебка вручную: кадр исходника и рамка поверх; touch-action — чтобы палец рисовал, а не листал страницу */
.cam-open { margin: 4px 0 10px; }
#camModal { z-index: 60; }            /* поверх редактора — оба .modal, а редактор ниже по странице */
.cam-wrap { position: relative; margin: 10px 0 12px; border-radius: 12px; overflow: hidden; background: #000;
  min-height: 120px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.cam-wrap img { display: block; width: 100%; height: auto; pointer-events: none; }
.cam-rect { position: absolute; border: 2px solid var(--accent); background: rgba(181, 227, 90, .18);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); border-radius: 4px; cursor: move; }
/* ручки рамки: углы — кружки, края — короткие полоски посередине; зона касания больше, чем видно */
.cam-rect i { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.cam-rect i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #0B0D10; }
.cam-rect i[data-h="n"], .cam-rect i[data-h="s"] { left: 50%; cursor: ns-resize; }
.cam-rect i[data-h="w"], .cam-rect i[data-h="e"] { top: 50%; cursor: ew-resize; }
.cam-rect i[data-h="n"]::after, .cam-rect i[data-h="s"]::after { width: 22px; height: 6px; margin: -3px 0 0 -11px; border-radius: 3px; }
.cam-rect i[data-h="w"]::after, .cam-rect i[data-h="e"]::after { width: 6px; height: 22px; margin: -11px 0 0 -3px; border-radius: 3px; }
.cam-rect i[data-h="n"], .cam-rect i[data-h^="n"] { top: 0; }
.cam-rect i[data-h="s"], .cam-rect i[data-h^="s"] { top: 100%; }
.cam-rect i[data-h="w"], .cam-rect i[data-h$="w"] { left: 0; }
.cam-rect i[data-h="e"], .cam-rect i[data-h$="e"] { left: 100%; }
.cam-rect i[data-h="nw"], .cam-rect i[data-h="se"] { cursor: nwse-resize; }
.cam-rect i[data-h="ne"], .cam-rect i[data-h="sw"] { cursor: nesw-resize; }
.cam-load { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
/* на телефоне окно оценки — снизу, как панель */
@media (max-width: 560px) {
  #badModal { align-items: flex-end; padding: 0; }
  #badModal .modal-card { width: 100%; max-width: none; border-radius: 22px 22px 0 0; margin: 0; }
}
.quote { background: rgba(255, 255, 255, .03); border-color: var(--line); }
.chatline-plot .bar { background: #5A5A60; }

/* ---------- где текст в кадре: перетаскиваемые заголовок и субтитры (PosPicker в app.js) ---------- */
.pos-block { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 4px; }
.pos-side { display: grid; gap: 8px; align-content: start; }
.pos-side .seg { justify-self: start; }
.pos-safe { font-size: .78rem; }
.pos-pick { position: relative; width: 150px; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; touch-action: none; user-select: none;
  background: radial-gradient(70% 50% at 50% 40%, rgba(181, 227, 90, .16), transparent 70%), linear-gradient(180deg, #1C1C20, #111113) center / cover no-repeat;
  border: 1px solid var(--line); }
.pos-pick.has-bg { background-size: cover; background-position: center; }
.pos-pick.has-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); pointer-events: none; }
.pos-pick.wide { width: 100%; max-width: 320px; aspect-ratio: 16 / 9; }
.pp-safe { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 6px, transparent 6px 12px); }
.pp-safe.t { top: 0; height: 7%; } .pp-safe.b { bottom: 0; height: 18%; }
.pos-pick.wide .pp-safe { display: none; }
.pp-h, .pp-s { position: absolute; left: 50%; z-index: 2; transform: translate(-50%, -50%); max-width: 88%; cursor: grab; text-align: center;
  line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: box-shadow .15s, scale .15s; }
.pp-h { -webkit-line-clamp: 3; padding: 4px 8px; border-radius: 4px; background: #1F45E0; color: #fff; font: 800 .66rem/1.15 "Montserrat", var(--sans); text-transform: none; }
.pp-s { padding: 2px 6px; border-radius: 6px; color: #fff; font: 800 .7rem/1.2 "Montserrat", var(--sans); text-transform: uppercase;
  text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.pp-s em { font-style: normal; color: #FFD400; }
.pp-h::before, .pp-s::before { content: ""; position: absolute; inset: -6px; }      /* палец попадает легче */
/* ручка размера у текста на кадре: тянуть вправо — крупнее, влево — мельче */
.pp-grip { position: absolute; z-index: 4; width: 26px; height: 26px; margin: -13px 0 0 -4px; border-radius: 50%; display: grid;
  place-items: center; background: var(--accent, #A8CF6A); color: #111; font: 700 13px/1 var(--sans); box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  touch-action: none; cursor: ew-resize; }
.pp-grip::before { content: "↔"; }
.pp-grip::after { content: ""; position: absolute; inset: -10px; }
.pp-grip.drag { scale: 1.15; }
.sc-len { display: grid; gap: 6px; margin-top: 10px; }
.sc-len-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sc-len-btns span { font-size: .8rem; color: var(--muted, var(--ink-2)); margin-left: 4px; }
.sc-len-btns .btn-ghost { min-width: 56px; }
.pp-h:hover, .pp-s:hover, .pp-h:focus-visible, .pp-s:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }
.pp-h.drag, .pp-s.drag { cursor: grabbing; scale: 1.06; outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 420px) { .pos-block { grid-template-columns: 120px minmax(0, 1fr); } .pos-pick { width: 120px; } }

/* ---------- профиль ---------- */
.pf-avatar { background: radial-gradient(closest-side, rgba(255, 122, 26, .22), transparent); }
.pf-name { font-weight: 800; }
.plan-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 16px 0 0; border-radius: 20px; background: var(--surface);
  border: 1px solid rgba(181, 227, 90, .25); }
.plan-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); flex: none; }
.plan-ic .ic { width: 20px; height: 20px; }
.plan-card .rt small { white-space: normal; }
.pf-stats b { color: var(--ink); font-weight: 800; }
.ri { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.row + .row::before { background: var(--line); }
.row:hover { background: var(--hover); }
.rstate.on { background: var(--accent-soft); color: var(--accent); }
/* «Пригласи друга» — оранжевая плашка */
.pts-card { background: linear-gradient(115deg, #FF7A1A, #FF9B3D); border: 0; color: #fff; box-shadow: 0 16px 34px -18px rgba(255, 122, 26, .8); }
.pts-card .rt small, .pts-card .rc { color: rgba(255, 255, 255, .85); }
.pts-coin { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; }
.pts-hero { background: radial-gradient(80% 120% at 0% 0%, rgba(255, 122, 26, .25), transparent 60%), var(--surface); border-color: rgba(255, 122, 26, .3); }
.pts-hero .pts-coin { background: linear-gradient(135deg, #FF7A1A, #FFB056); }
.kpick button { border-color: var(--surface); }

/* ---------- агент ---------- */
.ag-bar { background: var(--bg); }
.ag-av { background: var(--surface); }

/* ---------- вход: модальное окно ---------- */
.login-body .hint { line-height: 1.5; }
.tg-wait { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .86rem; }
.tg-wait i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; animation: spin .8s linear infinite; flex: none; }

/* ---------- закрытая бета: экран как онбординг из макета ---------- */
.gate { position: fixed; inset: 0; z-index: 80; overflow-y: auto; background: #0B0B0C; display: grid; }
body.gated { overflow: hidden; }
body.gated .tabbar, body.gated .nav { display: none !important; }
.gate-in { position: relative; width: min(440px, 100%); margin: 0 auto; padding: calc(22px + max(env(safe-area-inset-top) + var(--tg-content-safe-area-inset-top, 0px), var(--tg-top, 0px))) 22px calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 100%; }
.gate-brand { position: absolute; top: calc(22px + max(env(safe-area-inset-top) + var(--tg-content-safe-area-inset-top, 0px), var(--tg-top, 0px))); left: 22px; display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: 1.25rem; }
.gate-brand .tb-logo, .gate-brand .tb-logo svg { width: 34px; height: 34px; }
.gate-k { position: relative; height: 230px; display: grid; place-items: center; margin-top: 4px; }
/* за Клипышем — только мягкое салатовое свечение, «дышит» */
.gate-k::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(181, 227, 90, .22), rgba(181, 227, 90, .06) 50%, transparent 70%); animation: hhglow 4.5s ease-in-out infinite; }
.gate-k svg { position: relative; width: 190px; height: 190px; }
.gate-title { font-size: clamp(2rem, 8.5vw, 2.5rem); line-height: 1.05; }
.gate-sub { color: var(--ink-2); opacity: .85; font-size: .98rem; line-height: 1.5; }
.gate-step { display: grid; gap: 10px; margin-top: 6px; }
.gate-step .btn { background: var(--accent); color: var(--on-accent); }
.gate-step .btn .ic { width: 20px; height: 20px; }
#gateGo .ic { width: 16px; height: 16px; }
.gate-who { color: var(--accent); font-weight: 600; font-size: .9rem; }
.gate-who:empty { display: none; }
.gate-code { text-align: center; font-family: var(--mono); font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; background: rgba(22, 22, 24, .9); }
.gate-code::placeholder { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: .95rem; }
.gate-why { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 8px; }
.gate-why li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: .92rem; line-height: 1.4; }
.gate-why li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(181, 227, 90, .16); color: var(--accent); font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
#gateJoined { justify-content: center; }
.gate-note { color: var(--muted); font-size: .84rem; text-align: center; }
.gate-note a { color: var(--accent); }
.gate .link-btn { justify-self: center; font-size: .84rem; }
.gate .err { text-align: center; color: #FF8A80; }
.gate-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.gate-dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .25); transition: width .3s, background .3s; }
.gate-dots i.on { width: 26px; background: var(--accent); }
@media (max-height: 700px) { .gate-k { height: 170px; } .gate-k svg { width: 140px; height: 140px; } .gate-k::before { width: 170px; height: 170px; } }
@media (prefers-reduced-motion: reduce) { .hh-spark, .hh-orbit { animation: none; } }

/* оценки друзей по ссылке «Поделиться» (share.py) */
.friends { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 12px; }
.friends-head { font-weight: 600; font-size: .9rem; }
.friends-cm { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }

/* «Текст и стиль» — подписанная кнопка под клипом всегда, и на телефоне (раньше был только значок карандаша) */
.clip .clip-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.clip .clip-actions .btn, .clip .clip-actions .btn-ghost { justify-content: center; min-width: 0; white-space: nowrap; overflow: hidden; }
.clip .clip-actions .edit { grid-column: auto; padding: 8px 10px; }
.clip .clip-actions .edit span { display: inline; overflow: hidden; text-overflow: ellipsis; }
.clip .clip-actions .edit.look { color: var(--accent); border-color: rgba(181, 227, 90, .45); background: var(--accent-soft); font-weight: 700; }
.clip .clip-actions .edit:not(.look) { grid-column: 1 / -1; font-size: .8rem; color: var(--muted); padding: 6px 10px; }
.aa { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 6px; font: 800 .78rem/1 var(--display, inherit);
  color: var(--on-accent, #111); background: var(--accent); letter-spacing: -.02em; }
.edit.look .aa { margin-right: 2px; }

/* подсказка над клипами, пока редактор ни разу не открывали */
.ed-tip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; margin: 4px 0 14px; padding: 12px 12px 12px 14px;
  border-radius: 16px; background: var(--accent-soft); border: 1px solid rgba(181, 227, 90, .35); }
.ed-tip .aa { min-width: 30px; height: 30px; font-size: .95rem; border-radius: 9px; }
.ed-tip p { font-size: .88rem; line-height: 1.45; color: var(--ink-2, var(--ink)); }
.ed-tip p b { color: var(--ink); }
.ed-tip .link-btn { width: 32px; height: 32px; margin: -6px -4px 0 0; font-size: 1rem; }
/* Про-модели лежат — нарезку сделала облегчённая модель */
.llm-note { margin: 4px 0 12px; padding: 10px 14px; border-radius: 14px; font-size: .86rem; line-height: 1.45;
  background: rgba(255, 176, 32, .12); border: 1px solid rgba(255, 176, 32, .4); color: var(--ink); }

/* YouTube и TikTok на экране каналов публикации */
.social-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.social-row .btn-ghost { display: inline-flex; align-items: center; gap: 8px; }
.social-row .btn-ghost[disabled] { opacity: .55; }
.ic.bi.tt, .social-row #ttConnect .ic { color: #fff; }
.soon-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.soon-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 999px;
  border: 1px solid var(--line); font-size: .86rem; font-weight: 600; color: var(--ink); }
.soon-chip .ic { width: 18px; height: 18px; }
.soon-chip small { font-weight: 500; color: var(--muted, var(--ink-2)); }
.soon-chip[data-p="youtube"] .ic { color: #FF0000; } .soon-chip[data-p="instagram"] .ic { color: #E4405F; }
.soon-chip[data-p="tiktok"] .ic { color: #fff; } .soon-chip[data-p="vk"] .ic { color: #0077FF; }
.tgt-kind { font-size: .75rem; color: var(--muted, var(--ink-2)); margin-left: 6px; }

/* «Свежее в Клипни» — один раз после обновления */
.news-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.news-list li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.news-list .ni { font-size: 1.3rem; line-height: 1.2; text-align: center; }
.news-list b { display: block; font-size: .95rem; }
.news-list small { display: block; color: var(--muted, var(--ink-2)); font-size: .84rem; line-height: 1.4; margin-top: 2px; }

/* сколько ещё живут ролики и правка (бета: CLIPS_KEEP_DAYS) */
/* одна короткая метка в строке под заголовком — без плашек и красного: «⏳ ещё 5 ч», пояснение в подсказке */
.keep-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); white-space: nowrap; cursor: help; }
.keep-chip.urgent { color: var(--accent, #B5E35A); background: color-mix(in srgb, var(--accent, #B5E35A) 14%, transparent); }
.tag.soon, .tag.urgent { color: var(--muted, var(--ink-2)); }

/* свой отрезок «откуда резать» */
.range-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.range-row label { display: grid; gap: 4px; }
.range-row span { font-size: .8rem; color: var(--muted, var(--ink-2)); }
.range-row .input.bad { border-color: var(--danger, #e5484d); }

/* чистка звука: паузы, «э-э», запинки (clean.py) */
.clean-pick { display: grid; gap: 8px; margin: 6px 0 10px; }
.clean-h { display: grid; gap: 2px; }
.clean-h small { color: var(--muted, var(--ink-2)); font-size: .8rem; line-height: 1.35; }
.clean-pick .seg, #ed2Clean { flex-wrap: wrap; }

/* «Ещё моменты» из того же видео: без повторов, можно с новым запросом */
.more-box { margin: 0 0 14px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.more-row { display: flex; gap: 8px; }
.more-row input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg, transparent); color: var(--ink); font: inherit; font-size: .92rem; }
.more-row .btn { flex: none; padding: 11px 16px; font-size: .9rem; }
.more-hint { margin: 8px 4px 0; font-size: .78rem; color: var(--ink-3, var(--ink-2, var(--ink))); opacity: .8; }
@media (max-width: 420px) { .more-row { flex-direction: column; } .more-row .btn { width: 100%; } }

/* редактор: стили превью на кадре клипа, вкладка «Текст и стиль» первая */
.ed-styles { margin-bottom: 4px; }
.ed-styles .tpl-frame.ed-sty { background-color: #15151a; background-size: cover; background-position: center; }
.ed-styles .tpl-frame.ed-sty::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .45)); }
.ed-styles .tpl-sub { z-index: 1; bottom: 18%; }
.ed-all { margin-top: 14px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
#edPLook .pos-block { margin-bottom: 14px; }
@media (max-width: 560px) {
  .ed-styles { grid-auto-columns: 84px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x mandatory; }
  .ed-styles .tpl-opt { scroll-snap-align: start; }
  .ed-tabs button { padding-left: 8px; padding-right: 8px; font-size: .86rem; }
}
/* выбор шрифта (редактор и бренд-кит): «Аа» написано самим шрифтом, на телефоне — лента с прокруткой */
.ed-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-bottom: 4px; }
.ed-font { display: grid; justify-items: center; gap: 2px; padding: 8px 6px 7px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); cursor: pointer; min-width: 0; transition: border-color .15s, background .15s; }
.ed-font b { font-size: 1.45rem; line-height: 1.15; font-weight: 700; }
.ed-font span { font-size: .72rem; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-font:hover { border-color: rgba(181, 227, 90, .45); }
.ed-font.on { border-color: var(--accent); background: var(--accent-soft); }
.ed-font.on span { color: var(--ink); }
#edPLook.has-font .tpl-sub, #edPLook.has-font .tpl-sub *, #edPLook.has-font .pp-h, #edPLook.has-font .pp-s { font-family: var(--ed-font), var(--sans) !important; }
@media (max-width: 560px) {
  .ed-fonts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 92px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; }
  .ed-font { scroll-snap-align: start; }
}
/* ---------- подписка ---------- */
a.plan-card { color: inherit; text-decoration: none; }
.plan-card .rc { margin-left: auto; opacity: .5; }
.pl-now { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--surface); margin-bottom: 12px; }
.pl-now .rt small { display: block; color: var(--muted); font-size: .85rem; }
.pl-beta { padding: 12px 16px; border-radius: 16px; margin-bottom: 12px; background: rgba(181, 227, 90, .13); font-size: .9rem; }
.pl-left { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pl-left b { font-size: 2.4rem; line-height: 1; font-weight: 800; }
.pl-left small { width: 100%; color: var(--muted); }
.pl-meter { display: grid; gap: 6px; }
.pl-row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; }
.pl-row span:last-child { color: var(--muted); }
.pl-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pl-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .5s; }
.pl-fast { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 20px; margin-bottom: 12px; border: 1px dashed rgba(255, 255, 255, .15); }
.pl-fast .ic { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--muted); }
.pl-fast small { display: block; color: var(--muted); font-size: .85rem; }
.pl-fast.on { border: 1px solid var(--accent); background: rgba(181, 227, 90, .13); }
.pl-fast.on .ic { color: var(--accent); }
.pl-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pl-plan { display: grid; gap: 6px; padding: 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); }
.pl-plan.hit, .pl-plan.mine { border-color: var(--accent); }
.pl-ph { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pl-ph em { font-style: normal; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent, #11130D); }
.pl-price { font-size: 1.5rem; font-weight: 800; }
.pl-price small { font-size: .85rem; font-weight: 500; color: var(--muted); }
.pl-what { color: var(--muted); font-size: .86rem; }
.pl-plan .btn, .pl-plan .btn-ghost { margin-top: 6px; }

/* предпросмотр готовых клипов на экране нарезки (12.11.2026) */
.pw-clip.ready { cursor: pointer; }
.pw-clip.ready::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-35%, -50%); border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .7)); opacity: .9; }
.pw-clip.ready:hover img, .pw-clip.ready:focus-visible img { filter: brightness(1.15); }
.pw-clip.ready:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-clips-hint { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }
.pv-card { max-width: 400px; }
.pv-body { padding: 14px 16px 18px; display: grid; gap: 12px; }
.pv-body video { width: 100%; max-height: calc(100vh - 260px); aspect-ratio: 9 / 16; border-radius: 14px; background: #000; object-fit: contain; }
.pv-note { margin: 0; font-size: .8rem; color: var(--muted); text-align: center; }