:root {
  /* База — глубокий сине-угольный, без фиолетового */
  --bg: #070a10;
  --bg-2: #0a0e16;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.09);
  --border-2: rgba(255, 255, 255, 0.16);

  /* Акценты — электрик-циан, коралл, изумруд, янтарь */
  --cyan: #00e7d8;
  --cyan-2: #18b6ff;
  --coral: #ff3b66;
  --coral-2: #ff7a59;
  --emerald: #1fd6a3;
  --amber: #ffc24b;
  --red: #ff5470;

  --grad: linear-gradient(120deg, var(--cyan) 0%, var(--cyan-2) 100%);
  --grad-coral: linear-gradient(120deg, var(--coral) 0%, var(--coral-2) 100%);

  --text: #eef2f8;
  --muted: #8b95a7;
  --muted-2: #5d6678;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.7);
  --glow-cyan: 0 0 0 1px rgba(0, 231, 216, 0.25), 0 12px 40px -12px rgba(0, 231, 216, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .brand-mark, b { font-family: 'Space Grotesk', 'Inter', sans-serif; }
svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
input, select, textarea, button { font-family: inherit; font-size: 14px; color: inherit; }
::selection { background: rgba(0, 231, 216, 0.3); }

/* ---------- Фон ---------- */
.bg-mesh { position: fixed; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% -10%, #0d1422 0%, var(--bg) 55%); overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; will-change: transform; }
.b1 { width: 46vw; height: 46vw; background: radial-gradient(circle, var(--cyan), transparent 70%); top: -12vw; left: -8vw; animation: drift1 22s ease-in-out infinite; }
.b2 { width: 40vw; height: 40vw; background: radial-gradient(circle, var(--coral), transparent 70%); bottom: -14vw; right: -6vw; opacity: 0.4; animation: drift2 26s ease-in-out infinite; }
.b3 { width: 34vw; height: 34vw; background: radial-gradient(circle, var(--cyan-2), transparent 70%); top: 40%; left: 55%; opacity: 0.28; animation: drift3 30s ease-in-out infinite; }
.grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%); }
@keyframes drift1 { 50% { transform: translate(8vw, 6vw) scale(1.1); } }
@keyframes drift2 { 50% { transform: translate(-7vw, -5vw) scale(1.12); } }
@keyframes drift3 { 50% { transform: translate(-6vw, 4vw) scale(0.9); } }

/* ---------- Каркас ---------- */
.app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 26px 18px;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border-right: 1px solid var(--border); backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  font-size: 22px; font-weight: 700; color: #04121a; background: var(--grad);
  box-shadow: var(--glow-cyan); position: relative;
}
.brand-mark::after { content: ''; position: absolute; inset: 0; border-radius: 13px; background: var(--grad-coral); mix-blend-mode: screen; opacity: .35; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 16px; letter-spacing: .2px; }
.brand-text span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--muted);
  font-weight: 600; font-size: 14.5px; transition: .2s; position: relative; text-align: left;
}
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item:hover { color: var(--text); background: var(--surface); }
.nav-item.active { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.nav-item.active::before { content: ''; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; border-radius: 4px; background: var(--grad); box-shadow: 0 0 14px var(--cyan); }
.nav-badge { margin-left: auto; background: var(--grad-coral); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; }

.sidebar-foot { margin-top: auto; }
.conn {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 500; transition: .2s;
}
.conn:hover { background: var(--surface-2); color: var(--text); }
.conn .gear { width: 17px; height: 17px; margin-left: auto; opacity: .7; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); flex-shrink: 0; transition: .3s; }
.dot.ok { background: var(--emerald); box-shadow: 0 0 0 4px rgba(31,214,163,.18), 0 0 12px var(--emerald); }
.dot.err { background: var(--red); box-shadow: 0 0 0 4px rgba(255,84,112,.18); }

/* ---------- Основное ---------- */
.main { padding: 28px clamp(18px, 4vw, 44px) 60px; max-width: 1120px; width: 100%; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.topbar h1 { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.5px; }
.topbar p { color: var(--muted); font-size: 14px; margin-top: 3px; }
#connBtnTop { display: none; }

/* ---------- Статистика ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.stat {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(12px);
  transition: .25s; animation: fadeUp .5s both;
}
.stat:hover { transform: translateY(-3px); border-color: var(--border-2); }
.stat-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.stat-ico svg { width: 21px; height: 21px; }
.i-acc { background: rgba(0,231,216,.12); color: var(--cyan); }
.i-queue { background: rgba(24,182,255,.12); color: var(--cyan-2); }
.i-done { background: rgba(31,214,163,.12); color: var(--emerald); }
.i-fail { background: rgba(255,84,112,.12); color: var(--red); }
.stat b { font-size: 24px; display: block; line-height: 1.1; }
.stat span { font-size: 12.5px; color: var(--muted); }

/* ---------- Страницы ---------- */
.page { display: none; animation: fadeUp .45s both; }
.page.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Карточки ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; backdrop-filter: blur(14px); box-shadow: var(--shadow);
}
.form-card { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Поля ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.hint-inline { font-weight: 400; color: var(--muted-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

input:not([type=checkbox]), select, textarea {
  width: 100%; padding: 13px 15px; background: rgba(0,0,0,.25); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); transition: .2s; outline: none;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,231,216,.15); background: rgba(0,0,0,.35); }
textarea { resize: vertical; min-height: 70px; line-height: 1.55; }
.counter { margin-left: auto; font-weight: 500; color: var(--muted-2); font-size: 12px; }
.hint { font-size: 12px; color: var(--muted-2); line-height: 1.5; }
.hint code { background: rgba(0,231,216,.12); color: var(--cyan); padding: 1px 6px; border-radius: 5px; font-size: 12px; }

.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select-wrap .chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
input[type="datetime-local"] { color-scheme: dark; }

/* ---------- Drag & drop ---------- */
.dropzone {
  display: block; border: 1.5px dashed var(--border-2); border-radius: var(--radius); padding: 26px;
  cursor: pointer; transition: .25s; background: rgba(0,0,0,.18); text-align: center;
}
.dropzone:hover { border-color: var(--cyan); background: rgba(0,231,216,.05); }
.dropzone.drag { border-color: var(--cyan); background: rgba(0,231,216,.1); box-shadow: var(--glow-cyan); transform: scale(1.005); }
.dz-empty { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--muted); }
.dz-empty svg { width: 40px; height: 40px; color: var(--cyan); margin-bottom: 6px; }
.dz-empty b { color: var(--text); font-size: 16px; }
.dz-empty span { font-size: 12.5px; }
.dz-filled { display: flex; align-items: center; gap: 16px; text-align: left; }
.dz-filled video { width: 92px; height: 120px; object-fit: cover; border-radius: 12px; background: #000; flex-shrink: 0; border: 1px solid var(--border); }
.dz-meta { flex: 1; min-width: 0; }
.dz-meta b { display: block; font-size: 15px; word-break: break-all; }
.dz-meta span { font-size: 13px; color: var(--muted); }

/* ---------- Segmented ---------- */
.segmented { display: flex; gap: 4px; padding: 4px; background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.seg { flex: 1; padding: 9px; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 9px; font-weight: 600; transition: .2s; }
.seg:hover { color: var(--text); }
.seg.active { color: #04121a; background: var(--grad); box-shadow: 0 4px 14px -4px var(--cyan); }

/* ---------- Switches ---------- */
.switches { display: flex; flex-wrap: wrap; gap: 18px; }
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; color: var(--text); user-select: none; }
.switch input { display: none; }
.switch i { width: 42px; height: 24px; border-radius: 20px; background: rgba(255,255,255,.12); position: relative; transition: .25s; flex-shrink: 0; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .25s; }
.switch input:checked + i { background: var(--grad); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch.sm i { width: 36px; height: 20px; }
.switch.sm i::after { width: 14px; height: 14px; }
.switch.sm input:checked + i::after { transform: translateX(16px); }
.switch.sm span { font-size: 13px; color: var(--muted); }

/* ---------- Кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; transition: .2s; white-space: nowrap; }
.btn.primary { background: var(--grad); color: #04121a; box-shadow: 0 8px 24px -8px var(--cyan); }
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px var(--cyan); }
.btn.lg { padding: 15px; font-size: 15.5px; }
.btn.ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--border-2); }
.btn.danger { background: rgba(255,84,112,.14); color: var(--red); border-color: rgba(255,84,112,.3); }
.btn.danger:hover { background: rgba(255,84,112,.22); }
.btn.tiny { padding: 7px 13px; font-size: 12.5px; }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none !important; }
.icon-btn { width: 42px; height: 42px; padding: 0; border-radius: 12px; }
.icon-btn svg { width: 19px; height: 19px; }

.spinner { width: 17px; height: 17px; border: 2.4px solid rgba(4,18,26,.35); border-top-color: #04121a; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Disclosure (добавить аккаунт) ---------- */
.disclosure { width: 100%; display: flex; align-items: center; gap: 12px; background: transparent; border: none; cursor: pointer; color: var(--text); font-weight: 600; font-size: 15px; }
.disclosure > svg:first-child { width: 22px; height: 22px; color: var(--cyan); }
.disclosure .chev { width: 18px; height: 18px; margin-left: auto; color: var(--muted); transition: .25s; }
.disclosure[aria-expanded="true"] .chev { transform: rotate(180deg); }
.acc-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }

/* ---------- Сетка аккаунтов ---------- */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; }
.acc-card { display: flex; flex-direction: column; gap: 14px; }
.acc-top { display: flex; align-items: center; gap: 13px; }
.avatar { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; font-weight: 700; color: #04121a; background: var(--grad); flex-shrink: 0; }
.acc-info { min-width: 0; }
.acc-info b { display: block; font-size: 16px; }
.acc-info span { font-size: 13px; color: var(--muted); }
.acc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-actions .btn { flex: 1; }

/* ---------- Тулбар задач ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 8px 15px; border-radius: 30px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-weight: 600; font-size: 13px; transition: .2s; }
.chip:hover { color: var(--text); border-color: var(--border-2); }
.chip.active { color: #04121a; background: var(--grad); border-color: transparent; }

/* ---------- Список задач ---------- */
.job-list { display: flex; flex-direction: column; gap: 12px; }
.job { display: flex; gap: 16px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(12px); transition: .2s; animation: fadeUp .4s both; }
.job:hover { border-color: var(--border-2); }
.job-accent { width: 4px; border-radius: 4px; flex-shrink: 0; background: var(--muted-2); }
.job.s-done .job-accent { background: var(--emerald); }
.job.s-processing .job-accent { background: var(--grad); }
.job.s-failed .job-accent { background: var(--red); }
.job.s-pending .job-accent { background: var(--amber); }
.job-body { flex: 1; min-width: 0; }
.job-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15.5px; margin-bottom: 5px; }
.job-title .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-meta { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.job-meta .err { color: var(--red); width: 100%; }
.job-meta a { color: var(--cyan); text-decoration: none; }
.job-meta a:hover { text-decoration: underline; }
.job-actions { display: flex; gap: 7px; flex-shrink: 0; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; max-width: 230px; }

/* ---------- Статус-бейджи ---------- */
.badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 30px; text-transform: uppercase; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 6px; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-pending, .b-unknown { background: rgba(255,194,75,.14); color: var(--amber); }
.b-processing { background: rgba(0,231,216,.14); color: var(--cyan); }
.b-processing::before { animation: pulse 1.1s infinite; }
.b-done, .b-active { background: rgba(31,214,163,.14); color: var(--emerald); }
.b-failed, .b-expired { background: rgba(255,84,112,.14); color: var(--red); }
.b-banned { background: rgba(255,84,112,.22); color: var(--red); font-weight: 600; }
.b-canceled { background: rgba(255,255,255,.08); color: var(--muted); }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.5); } }

/* ---------- Пусто ---------- */
.empty { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty svg { width: 52px; height: 52px; color: var(--muted-2); margin-bottom: 12px; opacity: .6; }
.empty b { display: block; font-size: 16px; color: var(--text); margin-bottom: 4px; }

/* ---------- Модалки ---------- */
.modal { position: fixed; inset: 0; background: rgba(4,7,12,.7); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100; animation: fadeIn .2s; }
.modal.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } }
.modal-card { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 22px; width: min(760px, 100%); max-height: 84vh; overflow: auto; box-shadow: var(--shadow); animation: pop .25s; display: flex; flex-direction: column; gap: 16px; }
.modal-card.sm { width: min(420px, 100%); }
@keyframes pop { from { transform: scale(.95) translateY(10px); opacity: 0; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { font-size: 19px; }
.terminal { background: #04070d; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; color: #aeb8c8; max-height: 60vh; overflow: auto; }

/* ---------- Тосты ---------- */
.toasts { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 200; max-width: calc(100vw - 40px); }
.toast { display: flex; align-items: center; gap: 11px; padding: 13px 17px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--border-2); box-shadow: var(--shadow); font-size: 14px; font-weight: 500; animation: toastIn .3s cubic-bezier(.2,.9,.3,1.4); min-width: 240px; }
.toast.out { animation: toastOut .3s forwards; }
.toast .ti { width: 22px; height: 22px; flex-shrink: 0; }
.toast.ok .ti { color: var(--emerald); }
.toast.err .ti { color: var(--red); }
.toast.info .ti { color: var(--cyan); }
@keyframes toastIn { from { transform: translateX(120%); opacity: 0; } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }

.gen-intro p { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; max-width: 720px; }
.kie-banner { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 14px; background: rgba(255,194,75,.1); border: 1px solid rgba(255,194,75,.3); color: var(--amber); }
.kie-banner code { background: rgba(0,0,0,.3); padding: 1px 6px; border-radius: 5px; }
.kie-tasks { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,194,75,.25); }
.kie-tasks ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
.kie-tasks li { font-size: 13px; opacity: .85; display: flex; align-items: baseline; gap: 7px; }
.kie-tasks small { opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 13px; margin-bottom: 24px; }
.model-card { text-align: left; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: .22s; position: relative; overflow: hidden; }
.model-card:hover { transform: translateY(-3px); border-color: var(--border-2); }
.model-card.active { border-color: var(--cyan); box-shadow: var(--glow-cyan); background: rgba(0,231,216,.06); }
.model-card.active::before { content: ''; position: absolute; inset: 0; background: var(--grad); opacity: .04; pointer-events: none; }
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mc-name { font-family: 'Space Grotesk'; font-weight: 600; font-size: 16px; }
.mc-badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 3px 8px; border-radius: 20px; background: rgba(0,231,216,.14); color: var(--cyan); white-space: nowrap; }
.mc-fam { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 1px; }
.mc-desc { font-size: 12.8px; color: var(--muted); line-height: 1.5; margin: 8px 0; }
.mc-modes { display: flex; gap: 6px; }
.mc-mode { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--surface-2); color: var(--muted); }

.studio { animation: fadeUp .45s both; margin-bottom: 28px; }
.studio-back { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); padding: 9px 16px; border-radius: 30px; cursor: pointer; font-weight: 600; font-size: 13.5px; margin-bottom: 18px; transition: .2s; }
.studio-back:hover { color: var(--text); border-color: var(--border-2); transform: translateX(-3px); }
.studio-back svg { width: 16px; height: 16px; }
.studio-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 24px 26px; border-radius: var(--radius); border: 1px solid var(--border-2); background: linear-gradient(120deg, rgba(0,231,216,.15), rgba(24,182,255,.05) 45%, rgba(255,59,102,.09)); margin-bottom: 18px; box-shadow: var(--shadow); }
.studio-hero::after { content: ''; position: absolute; right: -50px; top: -50px; width: 220px; height: 220px; background: radial-gradient(circle, var(--cyan), transparent 70%); opacity: .16; filter: blur(24px); }
.studio-hero .avatar { width: 64px; height: 64px; border-radius: 18px; font-size: 30px; flex-shrink: 0; }
.sh-info { flex: 1; min-width: 0; position: relative; }
.sh-fam { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--cyan); font-weight: 700; }
.studio-hero h2 { font-size: 26px; letter-spacing: -.5px; margin: 2px 0 6px; }
.studio-hero p { color: var(--muted); font-size: 14px; max-width: 660px; }
.studio-hero .mc-badge { position: relative; align-self: flex-start; }
.studio-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; align-items: start; }
.studio-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 18px; backdrop-filter: blur(12px); }
.studio-col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-2); font-family: 'Inter'; font-weight: 700; display: flex; align-items: center; gap: 9px; margin-bottom: -2px; }
.studio-col h3::before { content: ''; width: 16px; height: 2px; border-radius: 2px; background: var(--grad); }
.studio-grid { grid-template-columns: 1.15fr .85fr; }
.studio-left { display: flex; flex-direction: column; gap: 16px; }
.studio-prompt textarea, .studio-col textarea { min-height: 120px; font-size: 15px; }
.studio-generate .btn { width: 100%; box-shadow: 0 10px 30px -8px var(--cyan), 0 0 0 1px rgba(0,231,216,.2); }

.studio-preview { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; align-self: start; }
.phone { display: flex; justify-content: center; }
.phone-frame { width: min(230px, 70%); aspect-ratio: 9 / 16; border-radius: 26px; border: 1px solid var(--border-2); background: linear-gradient(165deg, #0e1726, #04070d 70%); position: relative; overflow: hidden; display: grid; place-items: center; transition: aspect-ratio .35s cubic-bezier(.4,0,.2,1); box-shadow: var(--shadow), inset 0 0 0 5px rgba(0,0,0,.5); }
.phone-frame img, .phone-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.phone-glow { position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 0%, rgba(0,231,216,.22), transparent 55%), radial-gradient(100% 60% at 50% 100%, rgba(255,59,102,.14), transparent 55%); pointer-events: none; }
.phone-spark { position: absolute; font-size: 40px; color: var(--cyan); opacity: .5; animation: floaty 3.5s ease-in-out infinite; text-shadow: 0 0 24px var(--cyan); }
.phone-frame.has-img .phone-spark, .phone-frame.has-img .phone-label { display: none; }
@keyframes floaty { 50% { transform: translateY(-8px) scale(1.08); opacity: .8; } }
.phone-label { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-family: 'Space Grotesk'; font-weight: 600; color: var(--muted); font-size: 13px; text-shadow: 0 2px 10px #000; }
.sum-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.sum-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-2); font-weight: 700; margin-bottom: 11px; }
.preview-summary { display: flex; flex-wrap: wrap; gap: 7px; }
.sum-chip { font-size: 12px; padding: 5px 11px; border-radius: 30px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-weight: 500; }

.pillset { display: flex; flex-wrap: wrap; gap: 7px; }
.pill { padding: 8px 14px; border-radius: 30px; background: rgba(0,0,0,.25); border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-weight: 600; font-size: 13px; transition: .18s; }
.pill:hover { color: var(--text); border-color: var(--border-2); }
.pill.active { color: #04121a; background: var(--grad); border-color: transparent; box-shadow: 0 4px 14px -4px var(--cyan); }
.ratioset { display: flex; flex-wrap: wrap; gap: 9px; }
.ratio-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; padding: 11px 12px 9px; min-width: 60px; min-height: 62px; border-radius: 13px; background: rgba(0,0,0,.25); border: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: .18s; }
.ratio-tile:hover { border-color: var(--border-2); color: var(--text); }
.ratio-tile.active { border-color: var(--cyan); background: rgba(0,231,216,.08); color: var(--text); box-shadow: var(--glow-cyan); }
.ratio-box { background: var(--grad); border-radius: 3px; display: block; opacity: .85; }
.ratio-tile b { font-size: 11.5px; font-weight: 600; }
.range-out { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 54px; text-align: right; color: var(--cyan); font-size: 15px; }
.dz-ico { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; color: var(--cyan); }
.img-drop.drag { border-color: var(--cyan); background: rgba(0,231,216,.1); }

.field-desc { font-size: 12px; color: var(--muted-2); line-height: 1.45; }
.range-wrap { display: flex; align-items: center; gap: 12px; }
.range-wrap output { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 38px; text-align: right; color: var(--cyan); }
input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; padding: 0; border: none; border-radius: 10px; background: rgba(255,255,255,.12); cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); cursor: pointer; }
.img-field { display: flex; flex-direction: column; gap: 10px; }
.img-drop { border: 1.5px dashed var(--border-2); border-radius: var(--radius-sm); padding: 18px; text-align: center; cursor: pointer; transition: .2s; color: var(--muted); }
.img-drop:hover { border-color: var(--cyan); color: var(--text); }
.img-drop.has { padding: 0; border-style: solid; overflow: hidden; }
.img-drop img { width: 100%; max-height: 200px; object-fit: cover; display: block; }

.sec-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 16px; }
.sec-title { font-size: 20px; }
.gen-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
#libGallery { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 13px; }
.gen-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; animation: fadeUp .4s both; }
.gen-media { aspect-ratio: 9/16; background: #04070d; display: grid; place-items: center; position: relative; overflow: hidden; }
.gen-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.gen-spin { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); padding: 20px; text-align: center; }
.gen-spin .ring { width: 46px; height: 46px; border: 3px solid rgba(0,231,216,.2); border-top-color: var(--cyan); border-radius: 50%; animation: spin 1s linear infinite; }
.gen-spin small { font-size: 12px; }
.gen-body { padding: 13px 15px; display: flex; flex-direction: column; gap: 9px; }
.gen-body .gb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gen-body .gb-top > b { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.gen-body .gb-top > .badge { flex: 0 0 auto; white-space: nowrap; }
.gen-body b { font-size: 14.5px; }
.gen-body .gb-prompt { font-size: 12.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.progress { height: 6px; border-radius: 10px; background: rgba(255,255,255,.1); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--grad); border-radius: 10px; transition: width .5s; }
.gen-card .gc-actions { display: flex; gap: 7px; padding: 0 15px 14px; flex-wrap: wrap; }
.gen-card .gc-actions .btn { flex: 1; min-width: 90px; }

/* ---------- Сценарии ---------- */
.scn-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 16px; backdrop-filter: blur(12px); animation: fadeUp .4s both; }
.scn-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.scn-num { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-family: 'Space Grotesk'; font-weight: 700; color: #04121a; background: var(--grad); flex-shrink: 0; }
.scn-step-head h3 { font-size: 17px; }
.scn-step-head p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.scn-ai-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.scn-ai-row .field { flex: 1; min-width: 200px; margin: 0; }

.scn-model-row { display: flex; gap: 10px; flex-wrap: wrap; }
.scn-model-chip { display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 30px; background: rgba(0,0,0,.25); border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-weight: 600; font-size: 13px; transition: .18s; }
.scn-model-chip:hover { color: var(--text); border-color: var(--border-2); }
.scn-model-chip.active { color: #04121a; background: var(--grad); border-color: transparent; }

.scn-timeline { display: flex; flex-direction: column; gap: 12px; }
.scn-scene { display: flex; gap: 14px; padding: 16px; border-radius: var(--radius); background: rgba(0,0,0,.22); border: 1px solid var(--border); position: relative; animation: fadeUp .3s both; }
.scn-scene-idx { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-family: 'Space Grotesk'; font-weight: 700; font-size: 14px; background: var(--surface-2); color: var(--cyan); flex-shrink: 0; }
.scn-scene-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.scn-scene-body textarea { min-height: 64px; }
.scn-scene-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.scn-scene-row .range-wrap { flex: 1; min-width: 160px; }
.scn-scene-img { width: 64px; height: 84px; border-radius: 10px; object-fit: cover; background: #000; border: 1px solid var(--border); cursor: pointer; flex-shrink: 0; }
.scn-scene-imgbtn { width: 64px; height: 84px; border-radius: 10px; border: 1.5px dashed var(--border-2); display: grid; place-items: center; cursor: pointer; color: var(--muted); flex-shrink: 0; transition: .2s; }
.scn-scene-imgbtn:hover { border-color: var(--cyan); color: var(--cyan); }
.scn-scene-imgbtn svg { width: 22px; height: 22px; }
.scn-scene-ctl { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.scn-scene-ctl button { width: 30px; height: 30px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.scn-scene-ctl button:hover { color: var(--text); border-color: var(--border-2); }
.scn-scene-ctl button svg { width: 15px; height: 15px; }
.scn-scene-status { position: absolute; top: 12px; right: 14px; }
.scn-add { width: 100%; padding: 13px; border-radius: var(--radius-sm); border: 1.5px dashed var(--border-2); background: transparent; color: var(--muted); cursor: pointer; font-weight: 600; transition: .2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.scn-add:hover { border-color: var(--cyan); color: var(--cyan); }
.scn-add svg { width: 18px; height: 18px; }

.trans-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 11px 8px; min-width: 76px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: .18s; font-size: 12px; font-weight: 600; }
.trans-tile:hover { color: var(--text); border-color: var(--border-2); }
.trans-tile.active { border-color: var(--cyan); background: rgba(0,231,216,.08); color: var(--text); box-shadow: var(--glow-cyan); }
.trans-tile .tt-anim { width: 30px; height: 20px; border-radius: 4px; background: var(--grad); opacity: .8; }

.scn-final { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.scn-final .phone-frame { width: min(260px, 80%); }
.scn-final-side { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 12px; }
.scn-scene-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.scn-thumb { width: 48px; height: 64px; border-radius: 8px; object-fit: cover; background: #04070d; border: 1px solid var(--border); }

.scn-card-foot { display: flex; gap: 7px; padding: 0 15px 14px; flex-wrap: wrap; }
.scn-card-foot .btn { flex: 1; min-width: 84px; }
.scn-actions-bar { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Субтитры ---------- */
.sub-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sub-preset { text-align: left; padding: 14px; border-radius: var(--radius-sm); background: rgba(0,0,0,.25); border: 1px solid var(--border); cursor: pointer; transition: .18s; }
.sub-preset:hover { border-color: var(--border-2); }
.sub-preset.active { border-color: var(--cyan); background: rgba(0,231,216,.07); box-shadow: var(--glow-cyan); }
.sp-demo { font-family: 'Space Grotesk'; font-weight: 700; font-size: 17px; margin-bottom: 7px; -webkit-text-stroke: 2px #000; letter-spacing: .5px; }
.sp-pop { color: #fff; }
.sp-karaoke .a { color: #FFE23A; } .sp-karaoke .b { color: #fff; }
.sp-neon .a { color: #FF3B66; } .sp-neon .b { color: #19E6FF; text-shadow: 0 0 8px #19E6FF; }
.sp-minimal { color: #fff; font-weight: 500; -webkit-text-stroke: 0; opacity: .9; }
.sub-preset .sp-name { font-size: 13px; font-weight: 600; color: var(--text); }
.sub-preset .sp-desc { font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-top: 3px; }
.sub-src-drop { border: 1.5px dashed var(--border-2); border-radius: var(--radius-sm); padding: 24px; text-align: center; cursor: pointer; color: var(--muted); transition: .2s; }
.sub-src-drop:hover { border-color: var(--cyan); color: var(--text); }
.sub-src-drop.has { border-style: solid; color: var(--text); }
.sub-src-drop svg { width: 30px; height: 30px; color: var(--cyan); margin-bottom: 6px; }

/* ---------- Мастер создания ---------- */
.master { display: grid; grid-template-columns: 232px 1fr; gap: 26px; align-items: start; animation: fadeUp .45s both; }
.master-spine { display: flex; flex-direction: column; gap: 0; position: sticky; top: 20px; }
.mspine-step { display: flex; align-items: center; gap: 13px; padding: 7px 0; background: none; border: none; cursor: pointer; text-align: left; color: var(--muted); transition: .2s; }
.mspine-step:disabled { opacity: .4; cursor: default; }
.mspine-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: 'Space Grotesk'; font-weight: 700; font-size: 15px; flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); transition: .25s; }
.mspine-step.active .mspine-dot { background: var(--grad); color: #04121a; border-color: transparent; box-shadow: 0 0 0 5px rgba(0,231,216,.14), 0 0 18px -2px var(--cyan); }
.mspine-step.done .mspine-dot { background: rgba(31,214,163,.16); color: var(--emerald); border-color: transparent; }
.mspine-txt { display: flex; flex-direction: column; line-height: 1.25; }
.mspine-txt b { font-family: 'Space Grotesk'; font-size: 14.5px; color: var(--muted); }
.mspine-step.active .mspine-txt b { color: var(--text); }
.mspine-step.done .mspine-txt b { color: var(--text); }
.mspine-txt span { font-size: 11.5px; color: var(--muted-2); }
.mspine-line { width: 2px; height: 16px; margin-left: 16px; background: var(--border); border-radius: 2px; }
.mspine-step.done + .mspine-line { background: linear-gradient(var(--emerald), var(--cyan)); }

.master-body { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
.master-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.m-title { font-size: 23px; letter-spacing: -.4px; margin-bottom: 2px; }
.master-nav { display: flex; gap: 12px; margin-top: 8px; }
.master-nav .btn.primary { flex: 1; }
.master-stagewrap { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.master-stagewrap .phone-frame { width: 100%; max-width: 300px; }
.m-stage-ring { display: grid; place-items: center; }
.m-stage-ring .ring { width: 50px; height: 50px; border: 3px solid rgba(0,231,216,.2); border-top-color: var(--cyan); border-radius: 50%; animation: spin 1s linear infinite; }
.m-stage-cap { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }

.m-chars { display: flex; gap: 10px; flex-wrap: wrap; }
.m-char { width: 84px; padding: 0; border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.25); border: 1px solid var(--border); cursor: pointer; transition: .18s; display: flex; flex-direction: column; }
.m-char:hover { border-color: var(--border-2); }
.m-char.active { border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.m-char img { width: 84px; height: 84px; object-fit: cover; }
.m-char-none { width: 84px; height: 84px; display: grid; place-items: center; color: var(--muted); font-size: 22px; background: var(--surface-2); }
.m-char b { font-size: 11px; padding: 6px 4px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-ai-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.m-models, .scn-model-row { display: flex; gap: 8px; flex-wrap: wrap; }
.m-genstatus { margin-bottom: 6px; }
.m-scenerow { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }

@media (max-width: 880px) {
  .master { grid-template-columns: 1fr; gap: 16px; }
  .master-spine { position: static; flex-direction: row; overflow-x: auto; gap: 0; padding-bottom: 8px; }
  .mspine-txt span { display: none; }
  .mspine-line { width: 14px; height: 2px; margin: 0; align-self: center; }
  .master-body { grid-template-columns: 1fr; }
  .master-stagewrap { position: static; order: -1; }
  .master-stagewrap .phone-frame { max-width: 220px; }
}

/* ---------- Студия-рейл ---------- */
.studio-rail { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.srail { padding: 10px 18px; border-radius: 30px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-weight: 600; font-size: 14px; transition: .18s; white-space: nowrap; }
.srail:hover { color: var(--text); border-color: var(--border-2); }
.srail.active { color: #04121a; background: var(--grad); border-color: transparent; box-shadow: 0 6px 18px -6px var(--cyan); }

/* ---------- Библиотека: превью + детали ---------- */
.lib-thumb { cursor: pointer; }
.lib-lost .lib-thumb { cursor: default; }
.lib-lost-note { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 14px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 9px, transparent 9px 18px); }
.lib-lost-note b { font-size: 13px; color: var(--muted); }
.lib-lost-note small { font-size: 11px; color: var(--muted); opacity: .75; line-height: 1.35; }
.lib-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(4,7,12,.5); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; opacity: .85; transition: .2s; pointer-events: none; }
.lib-play svg { width: 22px; height: 22px; fill: #fff; stroke: none; margin-left: 2px; }
.lib-thumb:hover .lib-play { opacity: 1; transform: translate(-50%, -50%) scale(1.1); background: var(--grad); }
.lib-frag { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: rgba(4,7,12,.7); color: var(--cyan); backdrop-filter: blur(4px); }
.lib-detail { display: flex; gap: 22px; flex-wrap: wrap; }
.lib-detail-main { flex-shrink: 0; }
.lib-detail-main .phone-frame { width: 260px; }
.lib-detail-side { flex: 1; min-width: 240px; }
.lib-detail-side h3 { font-size: 19px; font-family: 'Space Grotesk'; }
.lib-frags { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 14px; }
.lib-frag-card { position: relative; border-radius: 12px; overflow: hidden; background: #04070d; aspect-ratio: 9/16; }
.lib-frag-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lib-frag-n { position: absolute; bottom: 6px; left: 6px; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; background: rgba(4,7,12,.7); color: #fff; }
#libModal .modal-card { width: min(820px, 100%); }

/* ---------- Персонажи ---------- */
.ch-card { display: flex; flex-direction: column; gap: 12px; padding: 0; overflow: hidden; }
.ch-img { aspect-ratio: 3/4; background: #04070d; display: grid; place-items: center; max-height: 280px; overflow: hidden; }
.ch-img img { width: 100%; height: 100%; object-fit: cover; }
.ch-info { padding: 0 16px; }
.ch-info b { font-size: 16px; font-family: 'Space Grotesk'; }
.ch-info p { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.ch-card .acc-actions { padding: 0 16px 16px; }

/* ---------- Нижняя навигация (моб.) ---------- */
.tabbar { display: none; }

/* ---------- Адаптив ---------- */
@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  #connBtnTop { display: inline-flex; }
  .main { padding: 20px 16px calc(86px + env(safe-area-inset-bottom)); }
  .topbar { margin-bottom: 20px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 11px; }
  .stat { padding: 14px; }
  .stat b { font-size: 21px; }
  .grid-2 { grid-template-columns: 1fr; gap: 16px; }
  .studio-grid { grid-template-columns: 1fr; }
  .studio-hero { flex-wrap: wrap; gap: 14px; padding: 18px; }
  .studio-hero h2 { font-size: 22px; }
  .cards-grid { grid-template-columns: 1fr; }
  .job { flex-wrap: wrap; }
  .job-actions { max-width: none; width: 100%; justify-content: flex-start; margin-top: 4px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    background: rgba(10,14,22,.85); backdrop-filter: blur(20px); border-top: 1px solid var(--border);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .tabbar-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 600; border-radius: 12px; transition: .2s; }
  .tabbar-item svg { width: 22px; height: 22px; }
  .studio-rail { overflow-x: auto; flex-wrap: nowrap; }
  .tabbar-item.active { color: var(--cyan); }
  .toasts { top: auto; bottom: calc(86px + env(safe-area-inset-bottom)); right: 12px; left: 12px; }
  .toast { min-width: 0; }
}
@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .dz-filled { flex-direction: column; align-items: stretch; text-align: center; }
  .dz-filled video { width: 100%; height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  *, .blob { animation: none !important; transition: none !important; }
}

/* ---------- Монтаж (CapCut-редактор) ---------- */
.ed-prompt { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; }
.ed-sec { font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-top: 6px; }
.ed-select { width: 100%; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; }
.ed-switch { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.ed-switch input { width: 17px; height: 17px; accent-color: var(--cyan); }
.segmented.sm { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.segmented.sm .seg { flex: 1; border: none; background: transparent; color: var(--muted); padding: 8px 6px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 12px; transition: .15s; }
.segmented.sm .seg.active { background: var(--grad); color: #04121a; }
#edPreview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; background: transparent; }

@media (max-width: 880px) {
}

.studio-tools { display: flex; justify-content: flex-end; margin-bottom: 12px; }

/* ---------- Футбол-студия ---------- */
.main:has(#football.page.active) { max-width: 1500px; }
#football.page.active { display: flex; flex-direction: column; height: calc(100vh - 150px); }
.fbs-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; flex-shrink: 0; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.fbs-controls .ed-select, .fbs-controls input { width: auto; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; }
.fbs-controls .ed-select:focus, .fbs-controls input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,231,216,.15); }
#fbsSeason { width: 122px; }
#fbsDate { width: 148px; }
#fbsPreset { width: 130px; }
#fbsProxy { flex: 1; min-width: 200px; }
.fbs-body { flex: 1; display: grid; grid-template-columns: 240px 1.05fr 1.25fr; gap: 0; min-height: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: rgba(255,255,255,.02); }
.fbs-rail { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.fbs-search { margin: 12px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.fbs-leagues { overflow-y: auto; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.fbs-league { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; text-align: left; transition: .15s; }
.fbs-league:hover { background: var(--surface); color: var(--text); }
.fbs-league.active { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.fbs-league img { width: 22px; height: 22px; object-fit: contain; }
.fbs-league span { flex: 1; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbs-league small { color: var(--muted-2); font-size: 11px; }
.fbs-ini { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: 6px; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.fbs-mid { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.fbs-mid-head { padding: 14px 16px 8px; font-family: 'Space Grotesk'; font-weight: 700; font-size: 15px; }
.fbs-matches { overflow-y: auto; padding: 4px 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.fbs-match { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: .15s; }
.fbs-match:hover { border-color: var(--border-2); }
.fbs-match.active { border-color: var(--cyan); box-shadow: 0 0 14px -5px var(--cyan); }
.fbs-team { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fbs-team.a { flex-direction: row-reverse; text-align: right; }
.fbs-team img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.fbs-team b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbs-score { text-align: center; font-family: 'Space Grotesk'; font-weight: 700; font-size: 16px; display: flex; flex-direction: column; }
.fbs-score small { font-family: 'Inter'; font-weight: 400; font-size: 9.5px; color: var(--muted-2); }
.fbs-cut { position: absolute; top: 4px; right: 4px; border: none; background: rgba(0,231,216,.15); border-radius: 6px; cursor: pointer; font-size: 13px; padding: 2px 6px; }
.fbs-cut:hover { background: var(--cyan); }
.fbs-detail { overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: 14px 16px; gap: 12px; min-width: 0; }
.fbs-empty-detail { color: var(--muted); padding: 30px 10px; text-align: center; }
.fbs-d-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fbs-d-teams { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.fbs-d-teams img { width: 30px; height: 30px; object-fit: contain; }
.fbs-d-score { font-family: 'Space Grotesk'; font-size: 22px; font-weight: 800; color: var(--cyan); }
.fbs-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; flex-shrink: 0; max-width: 100%; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.fbs-tabs::-webkit-scrollbar { display: none; }
.fbs-tabs.scrollable { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.fbs-tab { flex: 0 0 auto; white-space: nowrap; border: none; background: transparent; color: var(--muted); padding: 9px 12px; cursor: pointer; font-weight: 600; font-size: 12.5px; position: relative; transition: color .15s; }
.fbs-tab:hover { color: var(--text); }
.fbs-tab.active { color: var(--text); }
.fbs-tab.active::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2.5px; border-radius: 3px; background: var(--grad); }
.fbs-tabbody { display: flex; flex-direction: column; gap: 10px; }
.fbs-clip { border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--border); }
.fbs-clip iframe { width: 100%; aspect-ratio: 16/9; display: block; border: 0; }
.fbs-clip-t { padding: 7px 10px; font-size: 12px; color: var(--muted); }
.fbs-hl-main { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #0a0e16; border: 1px solid var(--border); }
.fbs-hl-main iframe { width: 100%; height: 100%; border: 0; display: block; }
.fbs-hl-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: #0a0e16; display: block; }
.fbs-hl-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fbs-hl-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 62px; height: 62px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; padding-left: 4px; backdrop-filter: blur(4px); border: 2px solid rgba(255,255,255,.85); transition: .15s; }
.fbs-hl-poster:hover .fbs-hl-play { background: var(--cyan); color: #04121a; border-color: var(--cyan); transform: translate(-50%,-50%) scale(1.08); }
.fbs-hl-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 14px 12px; color: #fff; font-size: 13px; font-weight: 600; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.fbs-hl-note { font-size: 11.5px; color: var(--amber); background: rgba(255,194,75,.07); border: 1px solid rgba(255,194,75,.2); border-radius: 10px; padding: 8px 11px; line-height: 1.45; }
.fbs-hl-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); font-weight: 700; }
.fbs-hl-list { display: flex; flex-direction: column; gap: 6px; }
.fbs-hl-row { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; text-align: left; transition: .15s; }
.fbs-hl-row:hover { background: var(--surface-2); border-color: var(--border-2); }
.fbs-hl-row.active { border-color: var(--cyan); }
.fbs-hl-row img { width: 68px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.fbs-hl-noimg { width: 68px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: 6px; color: var(--muted); flex-shrink: 0; }
.fbs-hl-rt { font-size: 12px; color: var(--text); font-weight: 500; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fbs-goal { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.fbs-min { font-family: 'Space Grotesk'; font-weight: 700; color: var(--cyan); min-width: 34px; }
.fbs-assist { color: var(--muted-2); font-size: 12px; }
.fbs-gteam { margin-left: auto; color: var(--muted); font-size: 12px; }
.fbs-stat-head { display: grid; grid-template-columns: 1fr 1.4fr 1fr; text-align: center; font-weight: 700; font-size: 12.5px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.fbs-stat { display: grid; grid-template-columns: 1fr 1.4fr 1fr; align-items: center; text-align: center; padding: 6px 0; font-size: 13px; }
.fbs-stat i { color: var(--muted); font-style: normal; font-size: 11.5px; }
.fbs-stat span { font-family: 'Space Grotesk'; font-weight: 700; font-variant-numeric: tabular-nums; }
.fbs-table { display: flex; flex-direction: column; margin-bottom: 12px; }
.fbs-tr { display: grid; grid-template-columns: 26px 1fr 30px 36px 34px; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12.5px; border-bottom: 1px solid rgba(255,255,255,.04); }
.fbs-th { color: var(--muted-2); font-weight: 700; font-size: 11px; }
.fbs-tt { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fbs-tt img { width: 18px; height: 18px; object-fit: contain; }
.fbs-jobs-wrap { margin-top: auto; border-top: 1px solid var(--border); padding-top: 12px; }
.fbs-jobs-h { font-family: 'Space Grotesk'; font-weight: 700; font-size: 13px; margin-bottom: 8px; color: var(--muted); }
.fbs-jobs { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 980px) {
  .fbs-body { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .fbs-rail { flex-direction: row; border-right: none; border-bottom: 1px solid var(--border); overflow-x: auto; }
  .fbs-leagues { flex-direction: row; }
  .fbs-top-right input { width: 110px; }
}

.ed-cap-colors { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ed-cap-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; transition: .15s; }
.ed-cap-color:hover { transform: scale(1.1); }
.ed-cap-color.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
.ed-cap-color.auto { background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.fbs-create { position: relative; flex-shrink: 0; margin-left: auto; }
.fbs-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; background: #0d1521; border: 1px solid var(--border-2); border-radius: 16px; padding: 8px; min-width: 282px; box-shadow: 0 24px 60px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.3); backdrop-filter: blur(24px); display: flex; flex-direction: column; gap: 3px; transform-origin: top right; animation: fbMenuIn .16s cubic-bezier(.2,.8,.2,1); }
@keyframes fbMenuIn { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }
.fbs-menu.hidden { display: none; }
.fbs-menu-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: transparent; border: none; color: var(--text); cursor: pointer; font-size: 14px; font-weight: 600; text-align: left; transition: .12s; }
.fbs-menu-item:hover:not([disabled]) { background: var(--surface-2); }
.fbs-menu-item[disabled] { opacity: .4; cursor: not-allowed; }
.fbs-menu-item span:first-child { font-size: 18px; width: 24px; text-align: center; }
.fbs-menu-item small { margin-left: auto; color: var(--muted-2); font-weight: 500; }
.fbs-lineups { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fbs-lineup { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.fbs-lu-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fbs-lu-h b { font-size: 14px; }
.fbs-form { margin-left: auto; font-size: 12px; color: var(--cyan); font-weight: 700; background: rgba(0,231,216,.1); padding: 3px 10px; border-radius: 100px; }
.fbs-lu-p { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); }
.fbs-num { width: 26px; text-align: center; color: var(--muted-2); font-weight: 700; font-size: 12px; }
.fbs-forms { display: flex; flex-direction: column; gap: 14px; }
.fbs-form-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; }
.fbs-pills { display: flex; gap: 8px; }
.fbs-pill { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #06120e; }
.fbs-pill.w { background: var(--green, #1fd6a3); }
.fbs-pill.d { background: var(--gold, #ffd23a); }
.fbs-pill.l { background: var(--coral); }
.fbs-pred { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

.fbs-ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.fbs-chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; padding: 6px 4px; }
.fbs-ap-row { display: flex; gap: 14px; margin-top: 12px; }
.fbs-ap-row label { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.fbs-ap-row input { padding: 9px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
#fbApModal .modal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 18px; }
#fbApModal .modal-h .x { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; }
#fbApModal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
@keyframes edFxShake { 0%{transform:translate(0,0)} 20%{transform:translate(-0.7%,0.5%)} 40%{transform:translate(0.6%,-0.6%)} 60%{transform:translate(-0.5%,-0.4%)} 80%{transform:translate(0.5%,0.6%)} 100%{transform:translate(0,0)} }
@keyframes edMoZin { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes edMoZout { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes edMoPr { from { transform: scale(1.14) translateX(2.6%); } to { transform: scale(1.14) translateX(-2.6%); } }
@keyframes edMoPl { from { transform: scale(1.14) translateX(-2.6%); } to { transform: scale(1.14) translateX(2.6%); } }
@keyframes edMoPu { from { transform: scale(1.14) translateY(2.6%); } to { transform: scale(1.14) translateY(-2.6%); } }
@keyframes edMoPd { from { transform: scale(1.14) translateY(-2.6%); } to { transform: scale(1.14) translateY(2.6%); } }
@keyframes edMoKb { from { transform: scale(1) translate(0,0); } to { transform: scale(1.16) translate(-2%,-1.4%); } }
@keyframes edtFade { 0%{opacity:0} 16%{opacity:1} 84%{opacity:1} 100%{opacity:0} }
@keyframes edtBounce { 0%{opacity:0;transform:scale(.4)} 22%{opacity:1;transform:scale(1.13)} 34%{transform:scale(.97)} 42%{transform:scale(1)} 88%{opacity:1;transform:scale(1)} 100%{opacity:0} }
@keyframes edtSlide { 0%{opacity:0;transform:translateY(64px)} 20%{opacity:1;transform:translateY(0)} 86%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(0)} }
@keyframes edtGlitch { 0%{transform:translate(0,0)} 25%{transform:translate(-2px,1px)} 50%{transform:translate(2px,-1px)} 75%{transform:translate(-1px,-1px)} 100%{transform:translate(0,0)} }
@keyframes edtNeon { 0%,100%{opacity:1} 46%{opacity:.74} 50%{opacity:1} 54%{opacity:.82} }
@keyframes edtType { 0%{clip-path: inset(0 100% 0 0)} 68%{clip-path: inset(0 0 0 0)} 100%{clip-path: inset(0 0 0 0)} }

/* ══════════════ АВТОПИЛОТ 2.0 ══════════════ */
.ap2-hero { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 26px 28px; border: 1px solid rgba(0,231,216,0.22); border-radius: var(--radius); background: linear-gradient(115deg, rgba(0,231,216,0.10), rgba(24,182,255,0.05) 45%, rgba(255,59,102,0.04)), var(--surface); margin-bottom: 20px; overflow: hidden; }
.ap2-hero::after { content: ''; position: absolute; top: -60%; right: -8%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(0,231,216,0.16), transparent 65%); pointer-events: none; }
.ap2-hero-orb { font-size: 44px; width: 78px; height: 78px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(0,231,216,0.18), rgba(24,182,255,0.10)); border: 1px solid rgba(0,231,216,0.35); box-shadow: 0 0 34px -6px rgba(0,231,216,0.5); animation: apOrb 4s ease-in-out infinite; }
@keyframes apOrb { 50% { transform: translateY(-5px); box-shadow: 0 14px 44px -8px rgba(0,231,216,0.55); } }
.ap2-hero-main h2 { font-size: 22px; margin-bottom: 6px; }
.ap2-hero-main p { color: var(--muted); font-size: 13.5px; max-width: 640px; line-height: 1.55; }
.ap2-hero-stats { display: flex; gap: 22px; padding-right: 8px; }
.ap2-bignum { text-align: center; }
.ap2-bignum b { font-family: 'Space Grotesk'; font-size: 26px; display: block; line-height: 1.1; }
.ap2-bignum b i { font-style: normal; font-size: 15px; color: var(--muted-2); }
.ap2-bignum span { font-size: 11px; color: var(--muted); }
.ap2-new { white-space: nowrap; box-shadow: 0 0 0 1px rgba(0,231,216,0.25), 0 14px 40px -10px rgba(0,231,216,0.45); }
@media (max-width: 1100px) { .ap2-hero { grid-template-columns: 1fr; text-align: left; } .ap2-hero-stats { flex-wrap: wrap; gap: 16px; } }

.ap2-how { display: flex; align-items: stretch; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.ap2-how-step { flex: 1; min-width: 170px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 18px 16px; display: flex; flex-direction: column; gap: 7px; }
.ap2-how-ico { font-size: 26px; }
.ap2-how-step b { font-size: 14px; }
.ap2-how-step span { font-size: 12px; color: var(--muted); line-height: 1.5; }
.ap2-how-arrow { align-self: center; color: var(--cyan); font-size: 20px; opacity: 0.6; }

.ap2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 16px; }
@media (max-width: 980px) { .ap2-grid { grid-template-columns: 1fr; } }
.ap2-card { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 18px; display: flex; flex-direction: column; gap: 14px; transition: .25s; }
.ap2-card.on { border-color: rgba(0,231,216,0.4); box-shadow: 0 0 0 1px rgba(0,231,216,0.14), 0 20px 55px -22px rgba(0,231,216,0.35); background: linear-gradient(160deg, rgba(0,231,216,0.05), transparent 40%), var(--surface); }
.ap2-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ap2-card-title { display: flex; gap: 11px; align-items: flex-start; min-width: 0; }
.ap2-status-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.18); margin-top: 6px; flex: none; }
.ap2-status-dot.live { background: var(--emerald); box-shadow: 0 0 0 0 rgba(31,214,163,0.5); animation: apPulse 1.8s infinite; }
.ap2-card-title b { font-size: 16px; font-family: 'Space Grotesk'; display: block; }
.ap2-card-title span { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }
@keyframes apPulse { 70% { box-shadow: 0 0 0 9px rgba(31,214,163,0); } 100% { box-shadow: 0 0 0 0 rgba(31,214,163,0); } }
.ap-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 0 rgba(31,214,163,0.6); animation: apPulse 1.8s infinite; flex: none; display: inline-block; }

/* схема конвейера */
.ap2-flow { display: flex; align-items: center; gap: 0; padding: 12px 10px; border: 1px solid var(--border); border-radius: 14px; background: rgba(0,0,0,0.18); overflow-x: auto; }
.ap2-node { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 62px; flex: none; }
.ap2-node-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; background: rgba(0,231,216,0.10); border: 1px solid rgba(0,231,216,0.35); box-shadow: 0 4px 14px -4px rgba(0,231,216,0.3); }
.ap2-node span { font-size: 9.5px; color: var(--muted); max-width: 74px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap2-node.off .ap2-node-ico { background: rgba(255,255,255,0.03); border: 1px dashed rgba(255,255,255,0.14); box-shadow: none; filter: grayscale(1); opacity: 0.45; }
.ap2-node.off span { color: var(--muted-2); text-decoration: line-through; }
.ap2-flow-line { flex: 1; min-width: 12px; height: 2px; background: linear-gradient(90deg, rgba(0,231,216,0.5), rgba(24,182,255,0.35)); border-radius: 2px; margin: 0 3px 16px; }

.ap2-schedule { display: flex; flex-direction: column; gap: 7px; }
.ap2-slots { display: flex; gap: 6px; flex-wrap: wrap; }
.ap2-slot { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 8px; background: rgba(24,182,255,0.10); border: 1px solid rgba(24,182,255,0.28); color: var(--text); }
.ap2-nextline { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.ap2-nextline b { color: var(--cyan); }
.ap2-nextline.off { color: var(--muted-2); }

.ap2-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ap2-tile { border-radius: 12px; padding: 9px 6px; text-align: center; border: 1px solid var(--border); background: rgba(255,255,255,0.03); }
.ap2-tile b { font-family: 'Space Grotesk'; font-size: 19px; display: block; line-height: 1.1; }
.ap2-tile span { font-size: 10px; color: var(--muted); }
.ap2-tile.t-done b { color: var(--emerald); }
.ap2-tile.t-queue b { color: var(--cyan-2); }
.ap2-tile.t-work b { color: var(--amber); }
.ap2-tile.t-fail b { color: var(--red); }

.ap2-actions { display: flex; gap: 8px; align-items: center; }
.ap2-actions .btn.primary { flex: 1; }
.icon-btn.danger-hover:hover { color: var(--red); border-color: rgba(255,84,112,0.4); }

.ap2-items { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--border); padding-top: 12px; }
.ap2-item { display: flex; align-items: center; gap: 11px; font-size: 12px; padding: 9px 11px; border-radius: 11px; background: rgba(255,255,255,0.03); border-left: 3px solid rgba(255,255,255,0.10); }
.ap2-item.s-done { border-left-color: var(--emerald); }
.ap2-item.s-active { border-left-color: var(--cyan-2); }
.ap2-item.s-processing { border-left-color: var(--amber); }
.ap2-item.s-failed { border-left-color: var(--red); }
.ap2-item-ico { font-size: 17px; flex: none; }
.ap2-item-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.ap2-item-body b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.ap2-item-body span { color: var(--muted-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* модалка */
.ap2-modal { width: min(860px, 100%); }
.ap2-modal-foot { display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 14px; }
.ap-form { display: flex; flex-direction: column; gap: 14px; }
.ap2-sec { display: flex; align-items: center; gap: 11px; margin-top: 8px; padding-top: 14px; border-top: 1px dashed var(--border); }
.ap2-sec-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 16px; background: rgba(0,231,216,0.10); border: 1px solid rgba(0,231,216,0.3); flex: none; }
.ap2-sec b { font-size: 14px; display: block; }
.ap2-sec span { font-size: 11.5px; color: var(--muted); }
.ap-two { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.ap-two .field { flex: 1; min-width: 140px; margin: 0; }
.ap-times { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ap-time { display: inline-flex; align-items: center; gap: 4px; background: rgba(24,182,255,0.08); border: 1px solid rgba(24,182,255,0.3); border-radius: 10px; padding: 5px 7px; }
.ap-time input { background: transparent; border: none; color: var(--text); font-size: 13px; font-weight: 600; }
.ap-time button { background: none; border: none; color: var(--muted-2); cursor: pointer; font-size: 12px; }
.ap-time button:hover { color: var(--red); }
.ap2-chars { display: flex; gap: 9px; flex-wrap: wrap; }
.ap2-char { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 12px; }
.ap2-char img, .ap2-char-none { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; border: 2px solid var(--border); display: grid; place-items: center; color: var(--muted-2); font-size: 18px; background: var(--surface); transition: .15s; }
.ap2-char span { font-size: 10.5px; color: var(--muted); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap2-char.active img, .ap2-char.active .ap2-char-none { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0,231,216,0.25), 0 6px 18px -6px rgba(0,231,216,0.5); }
.ap2-char:hover img, .ap2-char:hover .ap2-char-none { border-color: rgba(0,231,216,0.5); }
.ap-preview { border: 1px solid rgba(0,231,216,0.3); background: rgba(0,231,216,0.05); border-radius: 14px; padding: 15px 16px; margin-top: 10px; font-size: 13px; display: flex; flex-direction: column; gap: 9px; }
.ap-preview-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-preview-head b { font-size: 15px; font-family: 'Space Grotesk'; }
.ap-preview p { color: var(--muted); }
.ap2-brief { display: flex; gap: 6px; flex-wrap: wrap; }
.ap2-brief span { font-size: 10.5px; padding: 3px 9px; border-radius: 20px; background: rgba(157,123,255,0.12); border: 1px solid rgba(157,123,255,0.3); color: #c9b8ff; }
.ap-prev-scene { display: flex; gap: 8px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.ap-prev-scene i { color: var(--cyan); font-style: normal; flex: none; }

/* мастер: ниши, тонкие настройки, озвучка */
.m-niches { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.m-niche { padding: 5px 11px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 12px; cursor: pointer; transition: .15s; }
.m-niche:hover { color: var(--cyan); border-color: rgba(0,231,216,0.4); }
.m-extra-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255,255,255,0.02); padding: 0; margin-top: 6px; }
.m-extra-wrap summary { cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: 13px; color: var(--text); list-style: none; }
.m-extra-wrap summary::-webkit-details-marker { display: none; }
.m-extra-wrap summary:hover { color: var(--cyan); }
.m-extra { padding: 4px 14px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.m-extra .field { margin: 0; }
.m-extra .field textarea { min-height: 54px; }
.m-vo-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
@media (max-width: 720px) { .m-extra { grid-template-columns: 1fr; } .ap-hero { flex-direction: column; align-items: flex-start; } }

/* ═══════════════════════ ПРЕМИУМ-МОДАЛКИ ═══════════════════════ */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(130% 100% at 50% -10%, rgba(0,231,216,.07), transparent 55%),
    rgba(3,5,9,.74);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  animation: mdFade .22s ease;
}
.modal.hidden { display: none; }
@keyframes mdFade { from { opacity: 0; } }

.modal-card {
  position: relative;
  width: min(760px, 100%);
  max-height: min(90vh, 900px);
  display: flex; flex-direction: column; gap: 15px;
  padding: 24px 26px 26px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(22,29,45,.97), rgba(11,15,24,.98));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 44px 130px -34px rgba(0,0,0,.88),
    0 0 0 1px rgba(0,231,216,.05),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden auto;
  animation: mdPop .38s cubic-bezier(.16,1,.3,1);
}
.modal-card::before {
  content: ''; position: absolute; left: 26px; right: 26px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--cyan-2), transparent);
  opacity: .85;
}
@keyframes mdPop { from { opacity: 0; transform: translateY(18px) scale(.965); } }
.modal-card.sm { width: min(440px, 100%); }
#libModal .modal-card { width: min(860px, 100%); }

.modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.modal-head::before {
  content: ''; width: 4px; align-self: stretch; min-height: 24px; flex: none;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--cyan), var(--cyan-2));
  box-shadow: 0 0 14px rgba(0,231,216,.55);
}
.modal-head h3 { flex: 1; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }

.modal-head > button, .modal-head > .icon-btn {
  width: 34px; height: 34px; flex: none; padding: 0;
  border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  color: var(--muted); cursor: pointer; font-size: 14px;
  transition: transform .2s cubic-bezier(.2,1.4,.4,1), background .16s, color .16s, border-color .16s;
}
.modal-head > button:hover, .modal-head > .icon-btn:hover {
  background: rgba(255,84,112,.15); border-color: rgba(255,84,112,.42);
  color: var(--red); transform: rotate(90deg);
}
.modal-head > button svg, .modal-head > .icon-btn svg { width: 16px; height: 16px; }

/* fbAp: старый заголовок .modal-h */
.modal-h { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; font-size: 19px; font-weight: 700; }
.modal-h::before {
  content: ''; width: 4px; align-self: stretch; min-height: 22px; flex: none; border-radius: 3px;
  background: linear-gradient(180deg, var(--cyan), var(--cyan-2)); box-shadow: 0 0 14px rgba(0,231,216,.55);
}
.modal-h b { flex: 1; }
.modal-h .x {
  width: 32px; height: 32px; border-radius: 9px; font-size: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); color: var(--muted);
  cursor: pointer; transition: .18s;
}
.modal-h .x:hover { background: rgba(255,84,112,.15); border-color: rgba(255,84,112,.42); color: var(--red); transform: rotate(90deg); }

/* красивый скролл внутри */
.modal-card::-webkit-scrollbar { width: 10px; }
.modal-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
.modal-card::-webkit-scrollbar-thumb:hover { background: rgba(0,231,216,.35); background-clip: content-box; }

/* адаптив: на мобилке — нижний лист во весь экран */
@media (max-width: 560px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal-card, .modal-card.sm, #libModal .modal-card {
    width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
    animation: mdSheet .32s cubic-bezier(.16,1,.3,1);
  }
  .modal-card::before { left: 18px; right: 18px; }
  @keyframes mdSheet { from { transform: translateY(100%); } }
  .modal-head h3, .modal-h { font-size: 18px; }
}
/* сохранить крупную ширину у автопилот-модалки */
.modal-card.ap2-modal { width: min(880px, 100%); }

/* ===== Факты (студия) ===== */
/* ══════════════ Facts studio — premium control panel ══════════════ */
.main:has(#facts.page.active) { max-width: 1440px; }
#facts.page.active { display: flex; flex-direction: column; height: calc(100vh - 150px); }
.fas-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); gap: 18px; min-height: 0; }
.fas-build { overflow-y: auto; padding-right: 12px; display: flex; flex-direction: column; gap: 14px; }
.fas-build::-webkit-scrollbar, .fas-jobs::-webkit-scrollbar { width: 9px; }
.fas-build::-webkit-scrollbar-thumb, .fas-jobs::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.fas-build::-webkit-scrollbar-thumb:hover, .fas-jobs::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); background-clip: padding-box; }

/* step card — the signature: contained glass panels with a gradient number chip */
.fas-step {
  position: relative; padding: 18px 20px 20px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  border: 1px solid var(--border); box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, var(--shadow);
}
.fas-step::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent 8%, rgba(0,231,216,.35), rgba(24,182,255,.2) 60%, transparent 92%);
}
.fas-steph { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fas-steph h3 { flex: 1; margin: 0; font-family: 'Space Grotesk'; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.fas-n {
  width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--grad); color: #04121a;
  display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk'; font-size: 14px; font-weight: 800;
  box-shadow: 0 5px 16px -5px var(--cyan);
}
.fas-mini {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 600; transition: .15s; white-space: nowrap;
}
.fas-mini:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-2); }
.fas-mini svg { width: 15px; height: 15px; }
.fas-mini input { display: none; }

/* topic tiles */
.fas-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.fas-topic {
  display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 13px; font-weight: 600; transition: .16s;
}
.fas-topic:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); transform: translateY(-1px); }
.fas-topic.active { color: var(--text); border-color: var(--cyan); background: rgba(0,231,216,.08); box-shadow: 0 0 0 1px var(--cyan), 0 10px 24px -14px var(--cyan); }
.fas-te { display: inline-flex; width: 20px; height: 20px; flex: none; color: var(--cyan); }

/* inputs */
.fas-input, .fas-custom, .fas-title, .fas-fact-t, .fas-fact-d, .fas-emoji {
  background: rgba(0,0,0,.24); border: 1px solid var(--border); color: var(--text);
  border-radius: 11px; padding: 12px 14px; font-size: 14px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.fas-input, .fas-custom, .fas-title, .fas-fact-t, .fas-fact-d { width: 100%; }
.fas-input:focus, .fas-custom:focus, .fas-title:focus, .fas-fact-t:focus, .fas-fact-d:focus, .fas-emoji:focus,
.fas-field select:focus, .fas-field input:focus, .fas-vis:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,231,216,.14); background: rgba(0,231,216,.04);
}
.fas-custom { margin-top: 12px; }

/* field + premium select with custom chevron */
.fas-field { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.fas-field.grow { display: flex; }
.fas-field > span { flex: none; }
.fas-field select, .fas-field input {
  appearance: none; -webkit-appearance: none; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 11px 34px 11px 13px; border: 1px solid var(--border); border-radius: 11px; background: rgba(0,0,0,.24);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px; transition: border-color .15s, box-shadow .15s;
}
.fas-field input { cursor: text; padding-right: 13px; background-image: none; }
.fas-field.grow select, .fas-field.grow input { flex: 1; width: 100%; }
.fas-field select:hover, .fas-field input:hover { border-color: var(--border-2); }

/* segmented control */
.fas-seg { display: inline-flex; background: rgba(0,0,0,.28); border: 1px solid var(--border); border-radius: 12px; padding: 4px; gap: 3px; }
.fas-seg button { display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent; color: var(--muted); padding: 9px 15px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 13px; transition: .16s; }
.fas-seg button svg { width: 15px; height: 15px; }
.fas-seg button:hover { color: var(--text); }
.fas-seg button.active { background: var(--surface-2); color: var(--text); box-shadow: 0 3px 10px -5px rgba(0,0,0,.7); }
.fas-seg-lg { display: flex; width: 100%; }
.fas-seg-lg button { flex: 1; justify-content: center; padding: 13px; font-size: 13.5px; }
.fas-seg-lg button.active { background: rgba(0,231,216,.1); color: var(--text); box-shadow: inset 0 0 0 1px rgba(0,231,216,.45); }

/* chips */
.fas-chipset { display: flex; gap: 7px; flex-wrap: wrap; }
.fas-chip { padding: 8px 14px; border-radius: 100px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-weight: 600; font-size: 12.5px; transition: .15s; }
.fas-chip:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-2); }
.fas-chip.active { color: var(--text); border-color: var(--cyan); background: rgba(0,231,216,.1); box-shadow: 0 0 0 1px rgba(0,231,216,.5); }

/* custom toggle switch */
.fas-switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); user-select: none; }
.fas-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fas-tog { position: relative; width: 44px; height: 25px; flex: none; border-radius: 100px; background: rgba(255,255,255,.11); border: 1px solid var(--border); transition: .2s; }
.fas-tog::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #c3ccda; box-shadow: 0 2px 6px rgba(0,0,0,.45); transition: transform .2s cubic-bezier(.4,0,.2,1), background .2s; }
.fas-switch input:checked + .fas-tog, .fa-ap-switch input:checked + .fas-tog { background: var(--grad); border-color: transparent; box-shadow: 0 0 16px -5px var(--cyan); }
.fas-switch input:checked + .fas-tog::after, .fa-ap-switch input:checked + .fas-tog::after { transform: translateX(19px); background: #04121a; }
.fas-switch input:focus-visible + .fas-tog, .fa-ap-switch input:focus-visible + .fas-tog { box-shadow: 0 0 0 3px rgba(0,231,216,.28); }
.fas-switch-l { display: inline-flex; align-items: center; gap: 7px; }
.fas-switch-l svg { width: 16px; height: 16px; color: var(--cyan); }

/* rows + helpers */
.fas-settings, .fas-rowline { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.fas-rowline + .fas-rowline, .fas-settings + .fas-settings, .fas-seg + .fas-note, .fas-engine .fas-settings + .fas-note { margin-top: 12px; }
.fas-engine .fas-settings, .fas-engine .fas-rowline, .fas-engine .fas-note { margin-top: 12px; }
.fas-engine .fas-settings:first-child { margin-top: 0; }
.fas-sub { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.fas-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted-2); }
.fas-note { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 10px 0 0; display: flex; gap: 7px; align-items: flex-start; }
.fas-note svg { width: 15px; height: 15px; flex: none; color: var(--cyan); margin-top: 1px; }
.fas-row2 { display: flex; gap: 12px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.fas-gen { flex: 1; min-width: 180px; }
.fas-field.grow { flex: 1; min-width: 180px; }

/* generated-facts preview */
.fas-preview { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.fas-hint { color: var(--muted); font-size: 13px; line-height: 1.65; background: rgba(0,0,0,.2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.fas-hint b { color: var(--text); }
.fas-loading { display: flex; align-items: center; gap: 12px; color: var(--muted); padding: 24px; justify-content: center; font-size: 14px; }
.fas-prev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fas-title { flex: 1; padding: 12px 15px; font-size: 15px; font-weight: 700; font-family: 'Space Grotesk'; }
.fas-src { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 8px 12px; border-radius: 100px; white-space: nowrap; }
.fas-src svg { width: 14px; height: 14px; }
.fas-src.ai { color: var(--cyan); border-color: rgba(0,231,216,.35); background: rgba(0,231,216,.08); }
.fas-facts { display: flex; flex-direction: column; gap: 8px; }
.fas-fact-wrap { display: flex; flex-direction: column; gap: 6px; }
.fas-fact { display: flex; align-items: center; gap: 8px; }
.fas-fact .fas-emoji { width: 52px; flex: none; text-align: center; padding: 11px 4px; font-size: 19px; }
.fas-fact-t, .fas-fact-d { min-width: 0; }
.fas-fact-main { flex: 1 1 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fas-fact-t { font-weight: 600; }
.fas-fact-d { color: var(--muted); font-size: 12.5px; padding: 9px 13px; }
.fas-fact-del, .fas-vis-btn { width: 36px; height: 36px; flex: none; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: .15s; }
.fas-fact-del svg, .fas-vis-btn svg { width: 15px; height: 15px; }
.fas-fact-del:hover { color: var(--coral); border-color: var(--coral); }
.fas-vis-btn { opacity: .6; }
.fas-vis-btn:hover { opacity: 1; color: var(--text); border-color: var(--border-2); }
.fas-vis-btn.has { opacity: 1; color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px -4px var(--cyan); }
.fas-vis { width: 100%; min-height: 72px; padding: 11px 13px; border-radius: 11px; background: rgba(0,231,216,.05); border: 1px dashed rgba(0,231,216,.35); color: var(--text); font-size: 12.5px; line-height: 1.5; resize: vertical; }
.fas-vis:focus { border-style: solid; }
.fas-prev-actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; }

/* sound chip */
.fas-music { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cyan); background: rgba(0,231,216,.08); border: 1px solid rgba(0,231,216,.25); padding: 7px 12px; border-radius: 100px; }
.fas-music svg { width: 14px; height: 14px; }
.fas-x { border: none; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; padding: 2px; }
.fas-x svg { width: 13px; height: 13px; }
.fas-x:hover { color: var(--coral); }

/* job progress (job cards) */
.fas-poster { display: block; width: auto; height: auto; max-width: 100%; max-height: 340px; object-fit: contain; border-radius: 12px; background: #000; margin: 8px auto 4px; }
.fas-prog { height: 5px; border-radius: 5px; background: var(--surface-2); overflow: hidden; margin: 8px 0 2px; }
.fas-prog i { display: block; height: 100%; border-radius: 5px; background: var(--grad); transition: width .6s; }

/* build CTA */
.fas-cta { width: 100%; margin: 2px 0 22px; padding: 16px; font-size: 15px; }

/* jobs side panel */
.fas-side { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); overflow: hidden; }
.fas-side-h { display: flex; align-items: center; gap: 9px; padding: 16px 18px; font-family: 'Space Grotesk'; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--border); flex: none; }
.fas-side-h svg { width: 17px; height: 17px; color: var(--cyan); }
.fas-jobs { overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 1000px) {
  #facts.page.active { height: auto; }
  .fas-body { grid-template-columns: 1fr; }
  .fas-topics { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .fas-topic, .fas-tog::after, .fas-chip, .fas-seg button, .fas-mini { transition: none; }
  .fas-topic:hover { transform: none; }
}

/* facts autopilot modal — scoped premium */
.fas-modal-sec { font-family: 'Space Grotesk'; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); margin: 18px 0 10px; }

/* ═══ Аналитика: обзор всех аккаунтов ═══ */
.an-title { font-family: 'Space Grotesk'; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; }
.an-title i { font-style: normal; color: var(--muted-2); font-weight: 500; font-size: 13px; }
.an-title svg { width: 17px; height: 17px; color: var(--cyan); }
.an-queue { display: flex; align-items: center; gap: 13px; padding: 12px 15px; border-radius: 14px; background: rgba(0,231,216,.07); border: 1px solid rgba(0,231,216,.25); margin-bottom: 14px; }
.an-queue.paused { background: rgba(255,59,102,.08); border-color: rgba(255,59,102,.3); color: var(--coral); font-size: 12.5px; font-weight: 600; }
.an-queue.paused svg { width: 16px; height: 16px; flex: none; }
.an-queue.paused .btn { margin-left: auto; }
.an-queue-t { display: grid; gap: 2px; min-width: 190px; }
.an-queue-t b { font-size: 13px; }
.an-queue-t span { font-size: 11.5px; color: var(--muted-2); }
.an-queue-bar { flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; }
.an-queue-bar i { display: block; height: 100%; background: var(--grad); border-radius: 999px; transition: width .3s; }
.an-warn { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: 12px; background: rgba(255,177,58,.08); border: 1px solid rgba(255,177,58,.28); color: var(--amber); font-size: 12.5px; font-weight: 600; margin-bottom: 14px; }
.an-warn svg { width: 16px; height: 16px; flex: none; }

.an-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; margin-top: 16px; }
.an-c { position: relative; display: grid; gap: 10px; text-align: left; padding: 15px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer; font: inherit; transition: .16s; }
.an-c:hover { border-color: var(--border-2); transform: translateY(-2px); background: var(--surface-2); }
.an-c.empty { opacity: .82; }
.an-c.skip { opacity: .6; }
.an-c.warn { border-color: rgba(255,177,58,.35); }
.an-c-h { display: flex; align-items: center; gap: 10px; }
.an-c-av { width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center; font-family: 'Space Grotesk'; font-size: 12px; font-weight: 700; background: rgba(0,231,216,.14); color: var(--cyan); }
.an-c-n { display: grid; gap: 1px; min-width: 0; }
.an-c-n b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-c-n i { font-style: normal; font-size: 11px; color: var(--muted-2); }
.an-c-n i.bad { color: var(--amber); }
.an-c-badge { margin-left: auto; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(0,231,216,.12); color: var(--cyan); flex: none; }
.an-c-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.an-c-stat b { display: block; font-family: 'Space Grotesk'; font-size: 18px; line-height: 1.15; }
.an-c-stat span { font-size: 10px; color: var(--muted-2); }
.an-c-delta { font-size: 11.5px; color: var(--muted-2); }
.an-c-delta i { font-style: normal; font-weight: 700; }
.an-c-delta i.up { color: var(--emerald); }
.an-c-delta i.down { color: var(--coral); }
.an-c-note { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; line-height: 1.45; color: var(--muted-2); }
.an-c-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.an-c-note.bad { color: var(--amber); }
.an-c-note.warn { color: var(--amber); font-weight: 600; }
.an-c-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--muted-2); padding-top: 9px; border-top: 1px solid var(--border); }
.an-c-foot svg { width: 12px; height: 12px; vertical-align: -2px; }
.an-c-refresh { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--muted-2); opacity: 0; transition: .14s; }
.an-c-refresh svg { width: 13px; height: 13px; }
.an-c:hover .an-c-refresh { opacity: 1; }
.an-c-refresh:hover { color: var(--cyan); border-color: var(--cyan); }

/* ═══ Библиотека готовых роликов ═══ */
.lib2 { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: .16s; }
.lib2:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: 0 16px 34px -22px rgba(0,0,0,.9); }
.lib2.lost { opacity: .7; }
.lib2-thumb { position: relative; aspect-ratio: 9/16; background: #04070d; cursor: pointer; overflow: hidden; }
.lib2-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lib2-thumb::after { content: ''; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(180deg, transparent, rgba(2,6,12,.85)); pointer-events: none; }
.lib2-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.9); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(4,7,12,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); opacity: 0; transition: .18s; }
.lib2-play svg { width: 19px; height: 19px; fill: #fff; stroke: none; margin-left: 2px; }
.lib2-thumb:hover .lib2-play { opacity: 1; transform: translate(-50%,-50%) scale(1); background: var(--grad); border-color: transparent; }
.lib2-kind { position: absolute; top: 9px; left: 9px; z-index: 1; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(4,7,12,.72); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.14); color: var(--cyan); }
.lib2-frag { position: absolute; top: 9px; right: 9px; z-index: 1; font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(4,7,12,.72); backdrop-filter: blur(6px); color: var(--muted); }
.lib2-lost { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 14px; text-align: center; }
.lib2-lost b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--coral); }
.lib2-lost b svg { width: 15px; height: 15px; }
.lib2-lost small { font-size: 11px; color: var(--muted-2); line-height: 1.45; }
.lib2-body { padding: 11px 12px 12px; display: grid; gap: 9px; }
/* Заголовок переносим по словам: overflow-wrap:anywhere рвал «Солнечны/й свет». */
.lib2-title { font-size: 13px; font-weight: 600; line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: normal; overflow-wrap: break-word; }
.lib2-pub { width: 100%; justify-content: center; }
.lib2-acts { display: flex; gap: 6px; }
.lib2-ic { flex: 1; display: grid; place-items: center; height: 30px; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: .14s; text-decoration: none; }
.lib2-ic svg { width: 15px; height: 15px; }
.lib2-ic:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-2); }
.lib2-ic.danger:hover { color: var(--coral); border-color: rgba(255,59,102,.45); background: rgba(255,59,102,.10); }

/* ═══ Студия фактов: конструктор + липкий итог ═══ */
.fas2 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.fas2-main { display: grid; gap: 14px; min-width: 0; }
.fas2-side { position: sticky; top: 18px; }
.fas2-side-in { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; display: grid; gap: 13px; }
.fas2-side-h { display: flex; align-items: center; gap: 8px; font-family: 'Space Grotesk'; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); }
.fas2-side-h svg { width: 15px; height: 15px; color: var(--cyan); }

/* превью ролика 9:16 в палитре выбранной темы */
.fas2-phone { position: relative; aspect-ratio: 9/16; max-height: 360px; margin: 0 auto; width: 100%; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(165deg, var(--p1), var(--p2)); box-shadow: 0 20px 46px -20px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.04); }
.fas2-phone-glow { position: absolute; inset: -35% -25% auto -25%; height: 78%; background: radial-gradient(circle at 50% 38%, var(--pa), transparent 60%); opacity: .32; }
.fas2-phone-film { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px); }
.fas2-ph-notch { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 46px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.22); }
.fas2-phone-in { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: 20px 13px 12px; }

.fas2-ph-top { display: flex; align-items: center; gap: 7px; }
.fas2-ph-emoji { font-size: 17px; }
.fas2-ph-title { font-family: 'Space Grotesk'; font-weight: 700; font-size: 12px; color: #fff; line-height: 1.25; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.fas2-ph-clips { margin-left: auto; font-size: 8.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: rgba(0,0,0,.4); color: rgba(255,255,255,.75); backdrop-filter: blur(4px); }

.fas2-ph-facts { display: grid; align-content: center; gap: 9px; padding: 0 6px; }
.fas2-ph-fact { font-family: 'Space Grotesk'; font-weight: 700; font-size: 14.5px; line-height: 1.35; color: #fff; text-align: center; text-shadow: 0 3px 16px rgba(0,0,0,.8); }
.fas2-ph-fact.dim { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.5); text-shadow: none; }
.fas2-ph-more { justify-self: center; font-size: 9.5px; color: var(--pa); font-weight: 700; }

.fas2-ph-skel { display: grid; align-content: center; justify-items: center; gap: 8px; padding: 0 14px; }
.fas2-ph-skel i { display: block; height: 9px; border-radius: 5px; background: rgba(255,255,255,.09); }
.fas2-ph-skel span { margin-top: 6px; font-size: 10.5px; color: rgba(255,255,255,.4); text-align: center; line-height: 1.45; }

.fas2-ph-bottom { display: grid; gap: 8px; }
.fas2-ph-cap { display: flex; justify-content: center; gap: 4px; }
.fas2-ph-cap i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.3); width: 22px; }
.fas2-ph-cap i.w { width: 40px; background: var(--pa); box-shadow: 0 0 12px var(--pa); }
.fas2-ph-user { display: grid; gap: 2px; padding-right: 34px; }
.fas2-ph-user b { font-size: 11px; color: #fff; }
.fas2-ph-user span { display: flex; align-items: center; gap: 4px; font-size: 9px; color: rgba(255,255,255,.55); }
.fas2-ph-user svg { width: 10px; height: 10px; }

.fas2-ph-rail { position: absolute; right: 9px; bottom: 44px; display: grid; gap: 11px; }
.fas2-ph-rail span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.32); backdrop-filter: blur(4px); }
.fas2-ph-rail svg { width: 13px; height: 13px; color: rgba(255,255,255,.8); }
.fas2-phone-wm { position: absolute; right: 42px; bottom: 14px; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); }

.fas2-kvs { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.fas2-kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 11px; background: var(--bg-2); font-size: 11.5px; }
.fas2-kv span { color: var(--muted-2); }
.fas2-kv b { font-weight: 600; text-align: right; display: flex; align-items: center; gap: 5px; }
.fas2-kv b svg { width: 13px; height: 13px; color: var(--cyan); }
.fas2-price { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 11px 12px; border-radius: 12px; background: rgba(0,231,216,.07); border: 1px solid rgba(0,231,216,.22); }
.fas2-price.low { background: rgba(255,59,102,.08); border-color: rgba(255,59,102,.3); }
.fas2-price b { display: block; font-family: 'Space Grotesk'; font-size: 15px; }
.fas2-price span { font-size: 10px; color: var(--muted-2); }
.fas2-warn { font-size: 11px; color: var(--coral); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.fas2-warn svg { width: 14px; height: 14px; }
.fas2-cta { width: 100%; justify-content: center; }
.fas2-cta.off { opacity: .55; }
.fas2-hint { font-size: 10.5px; color: var(--muted-2); text-align: center; }
.fas2-prefs { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 8px; font-size: 10.5px; color: var(--muted-2); }
.fas2-prefs svg { width: 11px; height: 11px; opacity: .7; }
.fas2-prefs button { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
.fas2-prefs button:hover { color: var(--txt); }

.fas2-jobs { margin-top: 20px; }
.fas2-jobs-h { display: flex; align-items: center; gap: 8px; font-family: 'Space Grotesk'; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); margin-bottom: 12px; }
.fas2-jobs-h svg { width: 15px; height: 15px; color: var(--cyan); }
.fas-vol { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.fas-vol .fas-lbl b { color: var(--cyan); font-family: 'Space Grotesk'; }
.fas-vol input[type=range] { width: 100%; margin: 8px 0 4px; accent-color: var(--cyan); }
.fas-vol-marks { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted-2); }
.fas-note.warn { color: var(--amber); font-weight: 600; }

.fas-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.fas-st { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.fas-st svg { width: 13px; height: 13px; }
.fas-st.busy { color: var(--text); border-color: rgba(0,231,216,.4); background: rgba(0,231,216,.08); }
.fas-st.idle { color: var(--muted-2); }
.fas-st.idle svg { color: var(--emerald); }
.fas-st.on { color: var(--text); border-color: rgba(0,231,216,.28); }
.fas-st.on svg { color: var(--cyan); }
.fas-st.off svg { color: var(--muted-2); }
.fas-st.num { margin-left: auto; color: var(--muted-2); background: none; border: none; padding-right: 0; }
.fas-st.link { cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--cyan); border-color: rgba(0,231,216,.32); }
.fas-st.link:hover { background: rgba(0,231,216,.1); }
.fas-st .tr-spin { width: 12px; height: 12px; }

.fas2-jobs .fas-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; max-height: none; overflow: visible; }

/* счётчик запаса на плитке темы */
.fas-topic-l { flex: 1; text-align: left; }
.fas-topic-n { font-family: 'Space Grotesk'; font-weight: 700; font-size: 11.5px; color: var(--cyan); opacity: .85; }
.fas-topic-n.low { color: var(--coral); }

@media (max-width: 1180px) {
  .fas2 { grid-template-columns: 1fr; }
  .fas2-side { position: static; }
  .fas2-phone { max-width: 260px; }
}

/* ═══ Автопилот фактов ═══ */
.modal-card.fa-ap-modal { width: min(1020px, 100%); padding: 0; }
.fa-ap-modal .modal-h { padding: 20px 24px 0; }
.fa-ap-modal #faApBody { padding: 16px 24px 4px; }
.fa-ap-foot { position: sticky; bottom: 0; margin: 0; padding: 14px 24px 18px; background: var(--bg-2); border-top: 1px solid var(--border); box-shadow: 0 -14px 24px -12px rgba(0,0,0,.75); }

/* шапка-рубильник со сводкой */
.fa-ap-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); transition: .2s; }
.fa-ap-hero.on { border-color: rgba(0,231,216,.42); background: linear-gradient(135deg, rgba(0,231,216,.10), rgba(0,231,216,.02)); }
.fa-ap-power { display: flex; align-items: center; gap: 13px; cursor: pointer; }
.fa-ap-power input { position: absolute; opacity: 0; pointer-events: none; }
.fa-ap-power-dot { width: 44px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid var(--border-2); position: relative; flex: none; transition: .2s; }
.fa-ap-power-dot::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: .2s; }
.fa-ap-hero.on .fa-ap-power-dot { background: rgba(0,231,216,.28); border-color: var(--cyan); }
.fa-ap-hero.on .fa-ap-power-dot::after { transform: translateX(18px); background: var(--cyan); box-shadow: 0 0 12px rgba(0,231,216,.7); }
.fa-ap-power-t b { display: block; font-size: 14.5px; }
.fa-ap-power-t i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.fa-ap-stats { display: flex; gap: 20px; }
.fa-ap-stat { text-align: center; min-width: 74px; }
.fa-ap-stat b { font-family: 'Space Grotesk'; font-size: 22px; display: block; line-height: 1.15; }
.fa-ap-stat span { font-size: 10.5px; color: var(--muted); }
.fa-ap-alarm { grid-column: 1/-1; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--coral); background: rgba(255,59,102,.09); border: 1px solid rgba(255,59,102,.3); border-radius: 10px; padding: 9px 12px; }
.fa-ap-alarm.soft { color: var(--muted); background: rgba(255,255,255,.04); border-color: var(--border); font-weight: 500; }
.fa-ap-alarm svg { width: 15px; height: 15px; flex: none; }

/* две колонки */
.fa-ap-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
.fa-ap-col { display: grid; gap: 14px; align-content: start; }
.fa-ap-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px; }
.fa-ap-card h4 { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; }
.fa-ap-card h4 svg { width: 16px; height: 16px; color: var(--cyan); }
.fa-ap-h-note { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--muted-2); }
.fa-ap-note { font-size: 11.5px; color: var(--muted-2); line-height: 1.55; margin-top: 10px; }
.fa-ap-sub { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); margin: 16px 0 -2px; padding-top: 13px; border-top: 1px solid var(--border); }
.fa-ap-note.warn { color: var(--coral); }
.fa-ap-note b { color: var(--text); }
.fa-ap-row2 { display: flex; gap: 10px; }
.fa-ap-row2 label { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); }
.fa-ap-row2 input { width: 100%; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.24); border: 1px solid var(--border); color: var(--text); font: 600 15px 'Space Grotesk', sans-serif; }
.fa-ap-row2 input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,231,216,.14); }
.fa-ap-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.fa-ap-chips .fas-chip.ghost { margin-left: auto; opacity: .8; }

/* плитки тем с полосой запаса */
.fa-ap-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.fa-ap-topic { display: grid; gap: 5px; text-align: left; padding: 8px 10px; border-radius: 11px; background: rgba(0,0,0,.18); border: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: .15s; font: inherit; }
.fa-ap-topic:hover { border-color: var(--border-2); background: rgba(255,255,255,.05); }
.fa-ap-topic.on { border-color: var(--cyan); background: rgba(0,231,216,.09); color: var(--text); }
.fa-ap-topic-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fa-ap-topic-n { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-ap-topic-n svg { width: 14px; height: 14px; }
.fa-ap-topic-left { font-family: 'Space Grotesk'; font-weight: 700; font-size: 13px; color: var(--cyan); }
.fa-ap-topic-left.low { color: var(--coral); }
.fa-ap-bar { display: block; height: 3px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.fa-ap-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), rgba(0,231,216,.35)); }
.fa-ap-topic-sub { font-size: 10.5px; color: var(--muted-2); }

/* сводка ролика */
.fa-ap-kvs { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.fa-ap-kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--bg-2); font-size: 12px; }
.fa-ap-kv span { color: var(--muted-2); }
.fa-ap-kv b { font-weight: 600; text-align: right; display: flex; align-items: center; gap: 6px; }
.fa-ap-kv b svg { width: 14px; height: 14px; color: var(--cyan); }
.fa-ap-take { margin-top: 12px; }

/* публикация */
.fa-ap-switch { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
.fa-ap-switch input { position: absolute; opacity: 0; pointer-events: none; }
.fa-ap-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 4px; }
.fa-ap-mode { text-align: left; padding: 10px 12px; border-radius: 11px; background: rgba(0,0,0,.18); border: 1px solid var(--border); cursor: pointer; transition: .15s; font: inherit; color: var(--muted); }
.fa-ap-mode:hover { border-color: var(--border-2); }
.fa-ap-mode.on { border-color: var(--cyan); background: rgba(0,231,216,.09); color: var(--text); }
.fa-ap-mode b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.fa-ap-mode span { font-size: 10.5px; color: var(--muted-2); line-height: 1.4; display: block; }
.fa-ap-acc-h { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); font-weight: 700; }
.fa-ap-accs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; max-height: 190px; overflow-y: auto; padding-right: 2px; }
.fa-ap-acc { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; background: rgba(0,0,0,.18); border: 1px solid var(--border); cursor: pointer; transition: .15s; font: inherit; color: var(--muted); text-align: left; }
.fa-ap-acc:hover { border-color: var(--border-2); }
.fa-ap-acc.on { border-color: var(--cyan); background: rgba(0,231,216,.09); color: var(--text); }
.fa-ap-acc-av { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: rgba(255,255,255,.07); color: var(--muted); }
.fa-ap-acc.on .fa-ap-acc-av { background: rgba(0,231,216,.2); color: var(--cyan); }
.fa-ap-acc-n { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-ap-acc-n i { font-style: normal; display: block; font-size: 10px; color: var(--muted-2); font-weight: 500; }
.fa-ap-acc-c, .fa-ap-acc-b { margin-left: auto; flex: none; display: grid; place-items: center; }
.fa-ap-acc-c svg { width: 15px; height: 15px; color: var(--cyan); }
.fa-ap-acc-b svg { width: 15px; height: 15px; color: var(--coral); }
.fa-ap-log { display: grid; gap: 4px; font-size: 11.5px; color: var(--muted-2); }
.fa-ap-log span { color: var(--muted); margin-right: 6px; }

/* автопилоты разделов на вкладке «Автопилот» */
.ap2-pilots-box { margin-top: 18px; }
.ap2-pilots-h { display: flex; align-items: center; gap: 9px; font-family: 'Space Grotesk'; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); margin-bottom: 11px; }
.ap2-pilots-h svg { width: 15px; height: 15px; color: var(--cyan); }
.ap2-pilots-h span { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11.5px; opacity: .85; }
.ap2-pilots { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.ap2-pilot { display: grid; gap: 7px; text-align: left; padding: 15px 17px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: .16s; font: inherit; color: var(--muted); }
.ap2-pilot:hover { border-color: rgba(0,231,216,.4); background: var(--surface-2); transform: translateY(-1px); }
.ap2-pilot.on { border-color: rgba(0,231,216,.42); background: linear-gradient(135deg, rgba(0,231,216,.09), transparent); }
.ap2-pilot-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.ap2-pilot-h svg { width: 17px; height: 17px; color: var(--cyan); }
.ap2-pilot-h .badge { margin-left: auto; }
.ap2-pilot-d { font-size: 11.5px; line-height: 1.5; color: var(--muted-2); }
.ap2-pilot-a { font-size: 11.5px; font-weight: 700; color: var(--cyan); }
.ap2-pilot-pulse { display: grid; gap: 7px; }
.ap2-pp-row { display: flex; align-items: baseline; gap: 8px; }
.ap2-pp-row b { font-family: 'Space Grotesk'; font-size: 17px; color: var(--text); }
.ap2-pp-row i { font-style: normal; font-size: 11px; color: var(--muted-2); }
.ap2-pp-last { font-size: 10.5px; color: var(--muted-2); padding-top: 6px; border-top: 1px solid var(--border); }
.ap2-hint { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; line-height: 1.55; color: var(--muted-2); background: rgba(0,231,216,.06); border: 1px solid rgba(0,231,216,.22); border-radius: 11px; padding: 10px 13px; margin-top: 10px; }
.ap2-hint svg { width: 15px; height: 15px; color: var(--cyan); flex: none; margin-top: 1px; }
.ap2-hint b { color: var(--text); }
.linkish { background: none; border: none; padding: 0; font: inherit; color: var(--cyan); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 860px) {
  .fa-ap-cols { grid-template-columns: 1fr; }
  .fa-ap-hero { grid-template-columns: 1fr; }
  .fa-ap-stats { flex-wrap: wrap; gap: 14px; }
  .fa-ap-topics { grid-template-columns: repeat(2, 1fr); }
  .fa-ap-accs, .fa-ap-modes { grid-template-columns: 1fr; }
}
.fas-modal-sw { margin: 6px 0 2px; }
.fas-modal .fbs-ap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fas-modal .fbs-chk { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s; }
.fas-modal .fbs-chk:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-2); }
.fas-modal .fbs-chk svg { width: 16px; height: 16px; color: var(--cyan); flex: none; }
.fas-modal .fbs-chk input { width: 16px; height: 16px; accent-color: var(--cyan); flex: none; }
.fas-modal .fbs-chk:has(input:checked) { color: var(--text); border-color: var(--cyan); background: rgba(0,231,216,.08); box-shadow: 0 0 0 1px rgba(0,231,216,.4); }
.fas-modal .select-wrap { position: relative; margin-top: 4px; }
.fas-modal .select-wrap select {
  width: 100%; padding: 12px 34px 12px 14px; border-radius: 11px; background: rgba(0,0,0,.24); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; font-weight: 600; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
}
.fas-modal .select-wrap .chev { display: none; }
.fas-modal .fbs-ap-row { display: flex; gap: 10px; margin-top: 12px; }
.fas-modal .fbs-ap-row label { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); }
.fas-modal .fbs-ap-row input { width: 100%; padding: 11px 13px; border-radius: 11px; background: rgba(0,0,0,.24); border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 600; }
.fas-modal .fbs-ap-row input:focus, .fas-modal .select-wrap select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,231,216,.14); }
.fas-modal .modal-actions { margin-top: 20px; }

@media (max-width: 700px) {
}

/* --- прокси, лимиты аккаунтов, правила автопубликации --- */
.acc-proxy { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.acc-proxy > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.acc-proxy select, .acc-proxy input { flex: 1; min-width: 0; padding: 6px 9px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 12px; }
.acc-proxy select:focus, .acc-proxy input:focus { outline: none; border-color: var(--cyan); }
.log-pre { max-height: 50vh; overflow: auto; white-space: pre-wrap; font-size: 12px; line-height: 1.5; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.set-rules { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.set-rule { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--surface-2); transition: border-color .2s, background .2s; }
.set-rule.on { border-color: rgba(0,231,216,.35); background: rgba(0,231,216,.05); }
.set-rule-body { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.set-rule-body .field label { font-size: 11.5px; }
.stat-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; }
.stat-label { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; }
.stat-value { font-family: 'Space Grotesk', sans-serif; font-size: 26px; line-height: 1.1; color: var(--text); }
.stat-tile.tone-warn .stat-value { color: var(--coral); }
.row-end { display: flex; justify-content: flex-end; margin-top: 14px; }
.acc-card .acc-info { min-width: 0; flex: 1 1 auto; }
.acc-card .acc-info b,
.acc-card .acc-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-card .acc-top .badge { flex: 0 0 auto; white-space: nowrap; align-self: flex-start; margin-top: 2px; }
.acc-card .acc-top .avatar { flex: 0 0 auto; }

/* ══════════════ ГЛАВНАЯ: пульт из плиток ══════════════ */
.home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.h-tile {
  --accent: var(--cyan);
  --accent-soft: rgba(0, 231, 216, 0.14);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 18px;
  min-height: 178px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(155deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  backdrop-filter: blur(14px);
  color: var(--text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .28s cubic-bezier(.16,1,.3,1), border-color .28s, box-shadow .28s;
}
.h-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), var(--accent-soft), transparent 65%);
  transition: opacity .3s;
}
.h-tile::after {
  content: '';
  position: absolute;
  left: 20px; right: 20px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .5;
}
.h-tile:hover, .h-tile:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.9), 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
  outline: none;
}
.h-tile:hover::before, .h-tile:focus-visible::before { opacity: 1; }
.h-tile:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }

.h-tile.a-cyan { --accent: var(--cyan); --accent-soft: rgba(0,231,216,.16); }
.h-tile.a-violet { --accent: #9d7bff; --accent-soft: rgba(157,123,255,.16); }
.h-tile.a-emerald { --accent: var(--emerald); --accent-soft: rgba(31,214,163,.16); }
.h-tile.a-amber { --accent: var(--amber); --accent-soft: rgba(255,194,75,.15); }
.h-tile.a-coral { --accent: var(--coral); --accent-soft: rgba(255,59,102,.15); }

.h-tile.s-hero { grid-column: span 2; grid-row: span 2; min-height: 320px; padding: 26px 26px 24px; }
.h-tile.s-wide { grid-column: span 2; }

.h-ico {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--accent);
  flex: none;
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s;
}
.h-tile:hover .h-ico { transform: scale(1.06) rotate(-3deg); box-shadow: 0 0 26px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
.h-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.h-tile.s-hero .h-ico { width: 54px; height: 54px; border-radius: 16px; }
.h-tile.s-hero .h-ico svg { width: 27px; height: 27px; }

.h-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.h-title { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.h-tile.s-hero .h-title { font-size: 26px; }
.h-desc { font-size: 12.8px; line-height: 1.55; color: var(--muted); }
.h-tile.s-hero .h-desc { font-size: 14px; max-width: 44ch; }

.h-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: auto; }
.h-stat { display: flex; flex-direction: column; gap: 1px; }
.h-stat b { font-family: 'Space Grotesk', sans-serif; font-size: 19px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.h-tile.s-hero .h-stat b { font-size: 27px; }
.h-stat span { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.h-stat.hot b { color: var(--accent); }
.h-stat.hot b::after {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; vertical-align: middle;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
  animation: hPulse 2s infinite;
}
.h-stat.warn b { color: var(--coral); }
@keyframes hPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.h-alert {
  font-size: 11.5px; line-height: 1.45; color: var(--amber);
  background: rgba(255,194,75,.09);
  border: 1px solid rgba(255,194,75,.22);
  border-radius: 10px; padding: 7px 10px;
}
.h-arrow {
  position: absolute; right: 18px; top: 22px;
  width: 18px; height: 18px; fill: none; stroke: var(--muted-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .25s, transform .25s, stroke .25s;
}
.h-tile:hover .h-arrow, .h-tile:focus-visible .h-arrow { opacity: 1; transform: translateX(0); stroke: var(--accent); }

@media (max-width: 1180px) {
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-tile.s-hero { grid-column: span 2; grid-row: auto; min-height: 240px; }
}
@media (max-width: 680px) {
  .home-grid { grid-template-columns: 1fr; gap: 12px; }
  .h-tile, .h-tile.s-hero, .h-tile.s-wide { grid-column: span 1; min-height: 0; padding: 18px; }
  .h-tile.s-hero .h-title { font-size: 21px; }
  .h-tile.s-hero .h-stat b { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .h-tile, .h-ico, .h-arrow { transition: none; }
  .h-tile:hover { transform: none; }
  .h-stat.hot b::after { animation: none; }
}
.h-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.h-act {
  font-size: 12px; font-weight: 600; color: var(--text);
  padding: 7px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  cursor: pointer; transition: background .2s, transform .2s, border-color .2s;
}
.h-act:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-1px); }
.h-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.h-tile.a-blue { --accent: var(--cyan-2); --accent-soft: rgba(24,182,255,.16); }
.h-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 16px; }
.h-flow-step {
  position: relative; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); padding: 6px 11px; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
}
.h-flow-step + .h-flow-step::before {
  content: ''; position: absolute; left: -7px; top: 50%; width: 7px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 70%, transparent));
}
.h-flow-step:last-child { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.h-tile.s-hero .h-body { flex: 1; }
.h-tile.s-hero .h-flow { margin-top: auto; padding-top: 18px; }
.h-tile.s-wide .h-desc { max-width: 52ch; }

/* ==================== ТРЕНДЫ ==================== */
.tr-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.tr-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.tr-tab { padding: 7px 15px; border: none; background: none; color: var(--muted); font-weight: 600; font-size: 13px; border-radius: 9px; cursor: pointer; transition: .15s; }
.tr-tab:hover { color: var(--text); }
.tr-tab.active { color: #04121a; background: var(--grad); box-shadow: 0 6px 18px -8px rgba(0,231,216,.6); }
.tr-grid { min-height: 240px; }
.tr-loading { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 60px 0; color: var(--muted); }
.tr-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border-2); border-top-color: var(--cyan); animation: tr-rot .8s linear infinite; }
@keyframes tr-rot { to { transform: rotate(360deg); } }
.tr-card .gen-media { position: relative; overflow: hidden; }
.tr-card .gen-media img, .tr-card .gen-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-card .gen-media { cursor: pointer; }
.tr-card .tr-vid { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; pointer-events: none; }
.tr-card .gen-media.tr-playing .tr-vid { opacity: 1; }
.tr-card .gen-media.tr-playing img { opacity: 0; }
.tr-card .gen-media.tr-playing .lib-play { opacity: 0; }
.tr-metrics { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 7px; color: var(--muted); font-size: 12px; }
.tr-metrics span { display: inline-flex; align-items: center; gap: 4px; }
.tr-metrics .ic { color: var(--cyan); }
.tr-brand { color: var(--amber) !important; font-weight: 600; }
.btn.tiny.wide, .scn-card-foot a.wide { flex: 1; text-align: center; }
.tr-tag { min-height: 0; }
.tr-tag .gen-body { padding: 15px; }
.tr-tag .gb-top > b { font-size: 16px; font-family: 'Space Grotesk', sans-serif; }
.tr-song-media { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: var(--surface); }
.tr-song-media .tr-note { font-size: 34px; color: var(--cyan); opacity: .6; }
.tr-song-media .ic { width: 40px; height: 40px; }

/* ==================== АНАЛИТИКА (командный пункт) ==================== */
.an-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.an-acc-sel { background: var(--surface); border: 1px solid var(--border-2); color: var(--text); border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 600; min-width: 220px; }
.an-updated { color: var(--muted); font-size: 12px; margin-left: auto; }
.an-noacc { color: var(--muted); }
.an-hint { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; color: var(--muted); font-size: 13px; display: flex; gap: 8px; align-items: center; }
.an-hint.err { border-left-color: var(--red); color: #ffb9c4; }
.an-hint .ic { width: 16px; color: var(--cyan); }

.an-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
.an-kpi { position: relative; background: linear-gradient(150deg, color-mix(in srgb, var(--acc) 12%, transparent), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; overflow: hidden; }
.an-kpi::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--acc); }
.an-kpi-ic { width: 24px; height: 24px; color: var(--acc); margin-bottom: 8px; }
.an-kpi-v { font-family: 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.5px; }
.an-kpi-l { color: var(--muted); font-size: 12.5px; margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.an-delta { font-weight: 700; font-size: 11.5px; }
.an-delta.up { color: var(--emerald); }
.an-delta.down { color: var(--red); }

.an-charts { display: grid; grid-template-columns: 1fr 300px; grid-auto-rows: auto; gap: 14px; margin-bottom: 22px; }
.an-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.an-card-sm { grid-row: span 2; display: flex; flex-direction: column; }
.an-card-h { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.an-chart { width: 100%; height: 150px; display: block; }
.an-empty-chart { height: 130px; display: flex; align-items: center; justify-content: center; color: var(--muted-2); font-size: 12.5px; text-align: center; padding: 0 10px; }
.an-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: auto 0; }
.an-donut { width: 150px; height: 150px; }
.an-donut-num { fill: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; }
.an-donut-lbl { fill: var(--muted); font-size: 11px; }
.an-legend { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.an-leg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.an-leg i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.an-vids-h { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; margin: 6px 0 14px; display: flex; align-items: center; gap: 10px; }
.an-vids-h span { font-size: 13px; color: var(--muted); background: var(--surface); padding: 2px 10px; border-radius: 20px; }
.an-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.an-vid { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .15s, transform .15s; }
.an-vid:hover { border-color: var(--border-2); transform: translateY(-2px); }
.an-vid-thumb { position: relative; display: block; aspect-ratio: 9/16; background: #05070c; overflow: hidden; }
.an-vid-thumb img { width: 100%; height: 100%; object-fit: cover; }
.an-vid-views { position: absolute; left: 8px; bottom: 8px; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); display: inline-flex; align-items: center; gap: 4px; }
.an-vid-views .ic { width: 14px; }
.an-vid-date { position: absolute; right: 8px; top: 8px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: rgba(4,7,12,.66); color: var(--cyan); }
.an-vid-body { padding: 10px 12px 12px; }
.an-vid-cap { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; min-height: 31px; }
.an-vid-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--muted); }
.an-vid-stats span { display: inline-flex; align-items: center; gap: 3px; }
.an-vid-stats .ic { width: 13px; }
.an-vid-stats .an-er { margin-left: auto; color: var(--emerald); font-weight: 700; }

@media (max-width: 1000px) { .an-kpis { grid-template-columns: repeat(2, 1fr); } .an-charts { grid-template-columns: 1fr; } .an-card-sm { grid-row: auto; } }

/* ==================== БАЗА ФАКТОВ (пикер в студии) ==================== */
.fl-modal .modal-card.fl-card { width: min(1060px, 100%); max-height: 88vh; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
/* Разметку рисуем внутрь #flShell, поэтому колонкой должен стать и он —
   иначе шапка с подвалом не участвуют в раскладке и уезжают за край окна. */
.fl-card > #flShell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* шапка окрашена в цвет выбранной темы */
.fl-head { flex: none; position: relative; display: flex; flex-direction: column; gap: 9px; padding: 20px 22px 15px; border-bottom: 1px solid var(--border); }
.fl-head::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--acc), transparent 70%); }
.fl-head .modal-head { display: flex; align-items: center; justify-content: space-between; }
.fl-head .modal-head h3 { display: inline-flex; align-items: center; gap: 9px; font-size: 19px; }
.fl-head .modal-head h3 svg { color: var(--acc); width: 19px; height: 19px; }
.fl-head .x { background: none; border: none; color: var(--muted); cursor: pointer; display: inline-flex; }
.fl-sub { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fl-sub b { color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 15px; }
.fl-crumb { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); font-weight: 600; padding: 3px 9px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); transition: .15s; }
.fl-crumb:hover { color: var(--text); border-color: var(--border-2); }
.fl-crumb svg { width: 13px; height: 13px; }
.fl-dot { opacity: .4; }
.fl-imp { margin-left: auto; }
.fl-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 18px 22px; }

/* плитки тем: крупное число новых + полоса остатка */
.fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 11px; }
.fl-topic { position: relative; overflow: hidden; display: grid; gap: 2px; padding: 15px 15px 13px; text-align: left; border-radius: 15px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); cursor: pointer; font: inherit; transition: .16s; }
.fl-topic::after { content: ''; position: absolute; inset: auto -20% -60% auto; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, var(--acc), transparent 68%); opacity: .13; pointer-events: none; }
.fl-topic:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc) 55%, var(--border)); background: var(--surface-2); }
.fl-topic.dry { opacity: .62; }
.fl-topic-ic { color: var(--acc); display: inline-flex; margin-bottom: 4px; }
.fl-topic-ic svg { width: 20px; height: 20px; }
.fl-topic-name { font-family: 'Space Grotesk', sans-serif; font-size: 13.5px; font-weight: 700; color: var(--text); }
.fl-topic-big { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; color: var(--acc); line-height: 1.1; }
.fl-topic-sub { font-size: 10.5px; color: var(--muted-2); }
.fl-topic-bar { display: block; height: 3px; border-radius: 999px; background: rgba(255,255,255,.08); margin-top: 9px; overflow: hidden; }
.fl-topic-bar i { display: block; height: 100%; background: var(--acc); border-radius: 999px; }

/* строка поиска и фильтров */
.fl-facts-top { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; flex-wrap: wrap; }
.fl-search-wrap { flex: 1; min-width: 190px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border-radius: 11px; background: rgba(0,0,0,.24); border: 1px solid var(--border); }
.fl-search-wrap svg { width: 15px; height: 15px; color: var(--muted-2); flex: none; }
.fl-search { flex: 1; background: none; border: none; color: var(--text); padding: 11px 0; font: inherit; font-size: 13px; outline: none; }
.fl-facts-top .fas-chip[disabled] { opacity: .4; cursor: default; }

/* карточки фактов: ровная сетка, номер вместо повторяющейся иконки */
.fl-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 9px; align-items: start; }
.fl-fact { position: relative; display: flex; gap: 11px; align-items: flex-start; text-align: left; padding: 12px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; cursor: pointer; font: inherit; color: var(--text); transition: .14s; }
.fl-fact:hover { border-color: var(--border-2); background: var(--surface-2); }
.fl-fact.on { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 11%, var(--panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent); }
.fl-fact.used { opacity: .5; }
.fl-fact.used.on { opacity: 1; }
.fl-mark { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid var(--border); margin-top: 1px; transition: .14s; }
.fl-mark svg { width: 12px; height: 12px; color: var(--muted-2); }
.fl-mark b { font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; color: #04121a; }
.fl-fact.on .fl-mark { background: var(--acc); border-color: var(--acc); }
.fl-fact-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fl-fact-text { font-size: 13px; font-weight: 600; line-height: 1.4; }
.fl-fact-detail { font-size: 11.5px; color: var(--muted-2); line-height: 1.4; }
.fl-used-badge { position: absolute; top: 9px; right: 10px; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); background: rgba(255,255,255,.06); border-radius: 6px; padding: 2px 6px; }

/* низ: прогресс набора вместо сухого «Выбрано: 0» */
.fl-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--bg-2); }
.fl-progress { flex: 1; min-width: 130px; display: grid; gap: 6px; }
.fl-progress-t { font-size: 12px; color: var(--muted-2); }
.fl-progress-t b { font-family: 'Space Grotesk', sans-serif; font-size: 16px; color: var(--text); }
.fl-progress-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.fl-progress-bar i { display: block; height: 100%; border-radius: 999px; background: var(--acc); transition: width .2s; }
.fl-progress-bar i.full { background: var(--emerald); }
.fl-picked-n { color: var(--muted); font-size: 13px; margin-right: auto; }
.fl-picked-n b { color: var(--text); font-family: 'Space Grotesk', sans-serif; }
.fas-base { background: color-mix(in srgb, var(--cyan) 12%, transparent); border-color: color-mix(in srgb, var(--cyan) 30%, var(--border)); }
@media (max-width: 640px) { .fl-facts { grid-template-columns: 1fr; } }

/* ==================== Расширение Chrome — баннер в Аккаунтах ==================== */
.ext-banner { display: flex; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 16px; border-radius: var(--radius); position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--cyan) 32%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--cyan) 12%, transparent), color-mix(in srgb, var(--violet) 12%, transparent), var(--panel)); }
.ext-banner::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--cyan), var(--violet)); }
.ext-ic { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(140deg, var(--cyan), var(--violet)); box-shadow: 0 6px 18px color-mix(in srgb, var(--cyan) 35%, transparent); }
.ext-ic svg { width: 24px; height: 24px; fill: #08111a; stroke: none; }
.ext-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ext-txt b { font-family: 'Space Grotesk', sans-serif; font-size: 16px; letter-spacing: -0.2px; }
.ext-txt span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.ext-txt small { font-size: 11.5px; color: var(--muted); opacity: 0.85; margin-top: 3px; }
.ext-txt small code { background: var(--surface); padding: 1px 6px; border-radius: 6px; font-size: 11px; }
.ext-dl { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.ext-dl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 620px) { .ext-banner { flex-wrap: wrap; } .ext-dl { width: 100%; justify-content: center; } }

/* ==================== Плеер ролика (превью → лайтбокс) ==================== */
.fas-poster-wrap { position: relative; display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; margin: 8px auto 4px; line-height: 0; }
.fas-poster-wrap .fas-poster { margin: 0 auto; }
.fas-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(8,14,22,.5); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .16s, background .16s; pointer-events: none; }
.fas-play svg { width: 22px; height: 22px; fill: #fff; stroke: none; margin-left: 2px; }
.fas-poster-wrap:hover .fas-play { transform: scale(1.1); background: linear-gradient(140deg, var(--cyan), var(--violet)); border-color: transparent; }
.fas-poster-wrap:hover .fas-play svg { fill: #06131a; }

.vid-modal { display: flex; align-items: center; justify-content: center; }
.vid-box { position: relative; }
.vid-box .phone-frame { width: min(340px, 78vh); }
.vid-box .phone-frame video { object-fit: contain; background: #000; }
.vid-x { position: absolute; top: -10px; right: -10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-2, #12161f); border: 1px solid var(--border-2); color: var(--text); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow); transition: .15s; }
.vid-x:hover { background: var(--surface); transform: rotate(90deg); }
.vid-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- Цена генерации в карточках и чипах моделей ---------- */
.mc-price { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--cyan); background: rgba(0,231,216,.1); border: 1px solid rgba(0,231,216,.25);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-price.unknown { color: var(--muted-2); background: rgba(255,255,255,.05); border-color: var(--border); font-weight: 500; }
.mc-price.short { color: var(--red); background: rgba(255,84,112,.12); border-color: rgba(255,84,112,.3); }
.mc-price.rest { color: var(--muted); background: transparent; border-color: transparent; padding-left: 0; }
.model-card .mc-price { margin-top: 2px; align-self: flex-start; }
.scn-model-chip .mc-price { margin-left: 7px; padding: 1px 6px; font-size: 10.5px; }
.price-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--muted); }

.acc-loginlog { margin-top: 6px; }
.acc-loginlog summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.acc-loginlog pre {
  margin: 6px 0 0;
  padding: 8px 10px;
  max-height: 220px;
  overflow: auto;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Пакетный вход ───────────────────────────────────────────── */
.bulk-card #bulkText {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  resize: vertical;
}
.bulk-pill {
  margin-left: auto;
  margin-right: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent-soft, rgba(0, 231, 216, 0.14));
  color: var(--cyan);
}
.bulk-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 4px;
}
.bulk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
}
.bulk-chip b { color: var(--text); font-variant-numeric: tabular-nums; }
.bulk-chip.ok { border-color: rgba(31, 214, 163, 0.4); color: var(--emerald); }
.bulk-chip.ok b { color: var(--emerald); }
.bulk-chip.warn { border-color: rgba(255, 194, 75, 0.4); color: var(--amber); }
.bulk-chip.warn b { color: var(--amber); }
.bulk-chip.bad { border-color: rgba(255, 59, 102, 0.4); color: var(--coral); }
.bulk-chip.bad b { color: var(--coral); }
.bulk-issues {
  width: 100%;
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 59, 102, 0.07);
  border: 1px solid rgba(255, 59, 102, 0.2);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}
.bulk-issues b { color: var(--coral); font-weight: 600; }
.bulk-issues .ln { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.bulk-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.bulk-actions .hint { margin: 0; }

/* Прогресс */
.bulk-progress { padding: 18px 20px; }
.bp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bp-head h3 { margin: 0; font-size: 15px; letter-spacing: -0.01em; }
.bp-count { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.bp-count b { color: var(--text); }
.bp-eta { margin-left: auto; font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bp-bar {
  position: relative;
  height: 10px;
  margin: 12px 0 4px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  display: flex;
}
.bp-seg { height: 100%; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.bp-seg.done { background: linear-gradient(90deg, var(--emerald), #38e7bb); }
.bp-seg.failed { background: linear-gradient(90deg, var(--coral), var(--coral-2)); }
.bp-seg.running {
  background: linear-gradient(90deg, var(--cyan), var(--cyan-2));
  background-size: 200% 100%;
  animation: bpFlow 1.6s linear infinite;
}
@keyframes bpFlow { to { background-position: -200% 0; } }
.bp-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.bp-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 5px; vertical-align: 0; }
.bp-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.bp-row {
  display: grid;
  grid-template-columns: 22px minmax(120px, 1.1fr) 2fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13px;
  transition: background 0.2s;
}
.bp-row:hover { background: var(--surface); }
.bp-row.is-running { background: rgba(0, 231, 216, 0.06); box-shadow: inset 2px 0 0 var(--cyan); }
.bp-row.is-failed { box-shadow: inset 2px 0 0 var(--coral); }
.bp-row.is-done { box-shadow: inset 2px 0 0 var(--emerald); }
.bp-ic { display: grid; place-items: center; }
.bp-ic svg { width: 15px; height: 15px; }
.bp-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-step { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-step.err { color: var(--coral); }
.bp-tag { font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bp-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0, 231, 216, 0.25); border-top-color: var(--cyan); animation: bpSpin 0.8s linear infinite; }
@keyframes bpSpin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .bp-row { grid-template-columns: 20px 1fr auto; }
  .bp-step { grid-column: 2 / -1; }
}

/* Настройки: подпись ИИ и предпросмотр */
.set-ai { margin: 2px 0 10px; }
.set-preview {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.set-preview b { color: var(--text); }

/* ── Реклама: экран раздела ─────────────────────────────────────────── */
.fas2-step { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px; margin-bottom: 16px; }
/* Заголовок шага не переносится по слогам из-за пояснения рядом: не хватило
   места — пояснение уходит на свою строку целиком. */
.fas2-step > h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 15px;
  font-weight: 700; flex-wrap: wrap; }
.fas2-step > h3 > .fas2-n { align-self: center; }
.fas2-sub { flex: 1 1 240px; min-width: 0; }
.fas2-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--cyan); color: #06121a; font-size: 12px; font-weight: 700; flex: none; }
.ad-h-btn { margin-left: auto; background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 100px; padding: 5px 12px; font-size: 11px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.ad-h-btn:hover { color: var(--text); border-color: var(--cyan); }
.ad-h-btn svg { width: 12px; height: 12px; }
.fas-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
/* Лучше перенести поле на новую строку, чем сплющить его так, что название
   модели обрежется до «Grok In». */
.fas-row > .fas-field { flex: 1 1 210px; min-width: 0; }
.fas-row > .fas-field select, .fas-row > .fas-field input { width: 100%; min-width: 0; }
.ad-engine { display: grid; gap: 4px; }

/* Пустое состояние: объясняет, зачем это нужно, а не просто сообщает о пустоте */
.ad-empty { text-align: center; padding: 26px 16px; border: 1px dashed var(--border); border-radius: 16px; }
.ad-empty > span { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 14px; background: rgba(0,231,216,.12); color: var(--cyan); margin-bottom: 12px; }
.ad-empty > span svg { width: 22px; height: 22px; }
.ad-empty p { margin: 0 0 16px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* Карточка оффера */
.ad-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.ad-card { display: grid; gap: 7px; text-align: left; padding: 13px 14px; border-radius: 14px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); transition: border-color .15s, transform .15s; }
.ad-card:hover { transform: translateY(-1px); border-color: var(--muted-2); }
.ad-card.on { border-color: var(--cyan); background: rgba(0,231,216,.07); box-shadow: 0 0 0 1px var(--cyan), 0 8px 22px rgba(0,231,216,.12); }
.ad-card-top { display: flex; align-items: baseline; gap: 8px; }
.ad-card-top b { font-size: 13px; color: var(--text); }
.ad-card-price { margin-left: auto; font-size: 11px; font-style: normal; color: var(--cyan); font-weight: 600; white-space: nowrap; }
.ad-card-sub { font-size: 11px; color: var(--muted); line-height: 1.4; }
.ad-card-fill { display: grid; gap: 4px; }
.ad-card-fill i { display: block; height: 3px; border-radius: 3px; background: var(--cyan); transition: width .2s; }
.ad-card-fill em { font-size: 10px; font-style: normal; color: var(--muted-2); }
.ad-card-fill.thin i { background: var(--amber); }
.ad-card-fill.thin em { color: var(--amber); }

/* Персонажи: лицо решает, поэтому оно и есть карточка */
.ad-faces { display: flex; gap: 12px; flex-wrap: wrap; }
/* Имя персонажа бывает длинным («Алиса Ли — ваш баер из китая») и раньше
   расползалось на три строки поверх подписи. Обрезаем по двум. */
.ad-face { width: 112px; display: grid; justify-items: center; gap: 7px; padding: 11px 8px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; transition: border-color .15s, transform .15s; }
.ad-face:hover { transform: translateY(-1px); border-color: var(--muted-2); }
.ad-face.on { border-color: var(--cyan); background: rgba(0,231,216,.07); box-shadow: 0 0 0 1px var(--cyan), 0 8px 22px rgba(0,231,216,.12); }
.ad-face img, .ad-face-ph { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.ad-face-ph { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); color: var(--muted-2); }
.ad-face-ph svg { width: 24px; height: 24px; }
.ad-face b { font-size: 11.5px; text-align: center; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ad-face em { font-size: 9.5px; font-style: normal; color: var(--muted-2); display: flex; gap: 3px; align-items: center; }
.ad-face em svg { width: 9px; height: 9px; }

/* Каркасы — плитками: это главный выбор, он не должен прятаться в списке */
.ad-angles { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 9px; margin-bottom: 14px; }
.ad-angle { display: grid; gap: 5px; text-align: left; padding: 11px 12px; border-radius: 13px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); transition: border-color .15s, transform .15s; }
.ad-angle:hover { transform: translateY(-1px); border-color: var(--muted-2); }
.ad-angle.on { border-color: var(--cyan); background: rgba(0,231,216,.07); box-shadow: 0 0 0 1px var(--cyan), 0 8px 22px rgba(0,231,216,.12); }
.ad-angle-i { color: var(--cyan); }
.ad-angle-i svg { width: 15px; height: 15px; }
.ad-angle b { font-size: 12px; }
.ad-angle em { font-size: 10px; font-style: normal; color: var(--muted-2); line-height: 1.35; }

/* Источник вставок */
.ad-src { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; margin-bottom: 12px; }
.ad-src-b { display: grid; gap: 4px; text-align: left; padding: 11px 13px; border-radius: 13px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); transition: border-color .15s; }
.ad-src-b:hover { border-color: var(--muted-2); }
.ad-src-b.on { border-color: var(--cyan); background: rgba(0,231,216,.07); box-shadow: 0 0 0 1px var(--cyan); }
.ad-src-b > span { color: var(--cyan); }
.ad-src-b > span svg { width: 15px; height: 15px; }
.ad-src-b b { font-size: 12px; }
.ad-src-b em { font-size: 10px; font-style: normal; color: var(--muted-2); line-height: 1.35; }

.ad-sub { margin-bottom: 10px; }
.ad-sub-l { display: block; font-size: 10.5px; color: var(--muted-2); margin-bottom: 6px; }
.ad-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }

/* Предпросмотр: лицо персонажа и первая фраза */
.ad-phone { --pa: var(--cyan); --pa2: var(--cyan); --p1: #101a24; --p2: #0a1119; }
.ad-ph-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 100px; background: rgba(255,255,255,.1); color: #fff; }
.ad-ph-badge svg { width: 10px; height: 10px; }
.ad-ph-stage { display: grid; align-content: center; justify-items: center; gap: 12px; padding: 0 8px; }
.ad-ph-face { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.25); }
.ad-ph-face.empty { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.07); color: rgba(255,255,255,.35); }
.ad-ph-face.empty svg { width: 30px; height: 30px; }
.ad-ph-hook { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.4; text-align: center; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.6); }

/* Смета и запуск */
.ad-price { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ad-price > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.ad-price b { display: block; font-size: 14px; }
.ad-price span { font-size: 10px; color: var(--muted-2); }
.ad-note-warn { margin: 10px 0 0; font-size: 10.5px; color: var(--muted-2); line-height: 1.45; display: flex; gap: 6px; }
.ad-note-warn svg { width: 12px; height: 12px; flex: none; margin-top: 1px; color: var(--amber); }
.ad-make { margin-top: 16px; }
.ad-make-tabs { display: flex; gap: 4px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 100px; margin-bottom: 12px; }
.ad-make-tabs button { flex: 1; background: none; border: 0; color: var(--muted); font-size: 11.5px; font-weight: 600;
  padding: 7px; border-radius: 100px; cursor: pointer; }
.ad-make-tabs button.on { background: var(--cyan); color: #06121a; }
.ad-make-n { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ad-make-n span { font-size: 11px; color: var(--muted); }
.ad-make-n input { width: 62px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); padding: 6px 9px; text-align: center; }

/* Список роликов */
.fas-job { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--muted-2);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.fas-job.run { border-left-color: var(--cyan); }
.fas-job.ok { border-left-color: var(--emerald); }
.fas-job.err { border-left-color: var(--red); }
.fas-job-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fas-job-h b { font-size: 13px; }
.fas-job-st { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.fas-job-st.ok { color: var(--emerald); }
.fas-job-st.err { color: var(--red); }
.fas-job-sub { margin-top: 5px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.fas-job-meta { margin-top: 5px; font-size: 10.5px; color: var(--muted-2); }
.fas-job-err { margin-top: 7px; font-size: 11px; color: var(--red); display: flex; gap: 5px; align-items: flex-start; }
.fas-job-act { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }

/* Форма оффера: короткие поля парами, иначе окно уходит на два экрана */
.ad-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ad-form > .field { grid-column: 1 / -1; }
.ad-form > .field.half { grid-column: auto; }
.ad-form-note { margin: 0 0 14px; font-size: 11.5px; color: var(--muted); display: flex; gap: 7px; align-items: flex-start; line-height: 1.45; }
.ad-form-note svg { width: 13px; height: 13px; flex: none; margin-top: 1px; color: var(--cyan); }
@media (max-width: 560px) { .ad-form { grid-template-columns: 1fr; } }

/* Окно персонажа: лицо слева видно сразу, поэтому оно и есть предпросмотр */
.ad-av { display: grid; grid-template-columns: 1fr 190px; gap: 20px; }
.ad-av-tabs { display: flex; gap: 4px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 100px; margin-bottom: 14px; }
.ad-av-tabs button { flex: 1; background: none; border: 0; color: var(--muted); font-size: 11.5px; font-weight: 600;
  padding: 8px; border-radius: 100px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.ad-av-tabs button svg { width: 13px; height: 13px; }
.ad-av-tabs button.on { background: var(--cyan); color: #06121a; }

.ad-av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; margin-bottom: 16px; }
.ad-av-pick { position: relative; display: grid; gap: 6px; justify-items: center; padding: 8px 6px; border-radius: 13px;
  background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; transition: border-color .15s, transform .15s; }
.ad-av-pick:hover { transform: translateY(-1px); border-color: var(--border-2); }
.ad-av-pick.on { border-color: var(--cyan); background: rgba(0,231,216,.08); box-shadow: 0 0 0 1px var(--cyan); }
.ad-av-pick img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; object-position: center top; }
.ad-av-pick b { font-size: 10.5px; text-align: center; line-height: 1.25; }
.ad-av-pick em { font-size: 9px; font-style: normal; color: var(--muted-2); }

/* Системная кнопка «Выберите файл» выглядит чужой — прячем её за зоной загрузки */
.ad-drop { display: grid; justify-items: center; gap: 5px; padding: 22px 16px; margin-bottom: 12px; cursor: pointer;
  border: 1px dashed var(--border-2); border-radius: 14px; text-align: center; transition: border-color .15s, background .15s; }
.ad-drop:hover { border-color: var(--cyan); background: rgba(0,231,216,.04); }
.ad-drop > span { color: var(--cyan); }
.ad-drop > span svg { width: 22px; height: 22px; }
.ad-drop b { font-size: 12.5px; }
.ad-drop em { font-size: 10.5px; font-style: normal; color: var(--muted-2); line-height: 1.4; }
.ad-drop input { display: none; }

.ad-voice { margin: 6px 0 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.ad-voice > summary { padding: 11px 14px; cursor: pointer; font-size: 12.5px; font-weight: 600; display: flex; gap: 7px; align-items: center; }
.ad-voice > summary svg { width: 14px; height: 14px; color: var(--cyan); }
.ad-voice > summary span { font-weight: 500; font-size: 10.5px; color: var(--muted-2); margin-left: auto; }
.ad-voice > div { padding: 0 14px 14px; }

.ad-av-act { display: flex; gap: 8px; }
.ad-av-right { display: grid; align-content: start; gap: 8px; }
.ad-av-prev { aspect-ratio: 9/16; border-radius: 16px; overflow: hidden; background: var(--surface-2);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.ad-av-prev img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ad-av-ph { color: var(--muted-2); }
.ad-av-ph svg { width: 40px; height: 40px; }
.ad-av-hint { margin: 0; font-size: 10.5px; color: var(--muted-2); text-align: center; }

@media (max-width: 720px) { .ad-av { grid-template-columns: 1fr; } .ad-av-right { display: none; } }

/* Файлы товара: превью прямо там, где они нужны */
.ad-files { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.ad-file { position: relative; width: 74px; height: 100px; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2); }
.ad-file img, .ad-file video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-file-v { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); pointer-events: none; }
.ad-file-v svg { width: 20px; height: 20px; }
.ad-file > button { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border: 0; cursor: pointer;
  border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; display: flex; align-items: center; justify-content: center; }
.ad-file > button svg { width: 11px; height: 11px; }
.ad-file-add { width: 74px; height: 100px; display: grid; place-content: center; justify-items: center; gap: 5px;
  border: 1px dashed var(--border-2); border-radius: 11px; cursor: pointer; color: var(--muted);
  font-size: 10px; transition: border-color .15s, color .15s; }
.ad-file-add:hover { border-color: var(--cyan); color: var(--cyan); }
.ad-file-add svg { width: 17px; height: 17px; }
.ad-file-add input { display: none; }

/* Готовый ролик надо видеть, а не догадываться о нём по названию */
.fas-job.has-vid { display: grid; grid-template-columns: 68px 1fr; gap: 13px; align-items: start; }
.ad-job-vid { position: relative; width: 68px; aspect-ratio: 9/16; border: 0; padding: 0; cursor: pointer;
  border-radius: 10px; overflow: hidden; background: #000; }
.ad-job-vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-job-vid > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0,0,0,.28); transition: background .15s; }
.ad-job-vid:hover > span { background: rgba(0,0,0,.12); }
.ad-job-vid > span svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.ad-job-body { min-width: 0; }
.fas-job-act a.btn { text-decoration: none; }

.ad-scr-row { margin-bottom: 14px; }
.ad-scr-row span { display: block; font-size: 10.5px; color: var(--muted-2); margin-bottom: 4px; }
.ad-scr-row p { margin: 0; font-size: 13px; line-height: 1.5; }

.ad-cast { margin-bottom: 12px; }
.ad-cast .fas-note { margin-top: 8px; }

/* ── Конструктор призывов ───────────────────────────────────────────── */
.cta-ai { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 18px; }
.cta-ai-h { display: flex; align-items: baseline; gap: 9px; font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.cta-ai-h svg { width: 15px; height: 15px; color: var(--cyan); align-self: center; }
.cta-ai-h span { font-weight: 500; font-size: 10.5px; color: var(--muted-2); }
.cta-ai-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cta-vars { display: grid; gap: 8px; margin-top: 12px; }
.cta-var { display: flex; gap: 11px; align-items: stretch; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
  transition: border-color .15s, transform .15s; }
.cta-var:hover { transform: translateY(-1px); border-color: var(--cyan); }
/* Полоска слева — те самые цвета, в которые превратится карточка */
.cta-var-sw { width: 6px; flex: none; border-radius: 4px;
  background: linear-gradient(180deg, var(--f), var(--t)); box-shadow: 0 0 0 1px var(--a) inset; }
.cta-var-txt { display: grid; gap: 3px; min-width: 0; }
.cta-var-txt b { font-size: 13px; color: var(--a); }
.cta-var-txt em { font-style: normal; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.cta-var-txt i { font-style: normal; font-size: 10px; color: var(--muted-2); }
.cta-wait { margin: 12px 0 0; font-size: 11.5px; color: var(--muted-2); display: flex; gap: 6px; align-items: center; }
.cta-wait svg { width: 13px; height: 13px; }
.cta-wait.err { color: var(--red); }

/* ── Студия CTA ─────────────────────────────────────────────────────── */
.cta-studio .fas2-side-in { gap: 8px; }
/* Рамка телефона: карточка показывается ровно в том виде, в каком уйдёт в видео.
   Высоту выводит aspect-ratio, поэтому ограничивать её напрямую нельзя: max-height
   молча перебивает пропорцию, ширина при этом не уменьшается, и рамка перестаёт
   быть вертикальной, а overflow срезает низ карточки. Ограничиваем ширину. */
.cta-phone { position: relative; aspect-ratio: 9 / 16; margin: 0 auto 12px;
  width: min(100%, calc(min(54vh, 560px) * 0.5625)); border-radius: 22px; overflow: hidden;
  background: #05080c; border: 1px solid var(--border-2); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.cta-phone iframe { position: absolute; left: var(--kx, 0); top: var(--ky, 0);
  width: 1080px; height: 1920px; border: 0;
  transform-origin: 0 0; transform: scale(var(--k, 0.2)); pointer-events: none; }
.cta-pals { display: flex; gap: 8px; flex-wrap: wrap; }
.cta-pal { display: grid; gap: 5px; justify-items: center; padding: 7px 9px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; transition: border-color .15s, transform .15s; }
.cta-pal:hover { transform: translateY(-1px); border-color: var(--border-2); }
.cta-pal.on { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.cta-pal i { display: block; width: 44px; height: 26px; border-radius: 7px;
  background: linear-gradient(160deg, var(--f), var(--t)); box-shadow: inset 0 0 0 2px var(--a); }
.cta-pal span { font-size: 9.5px; color: var(--muted-2); }
#insPreviewBox video { width: 100%; border-radius: 12px; margin-top: 12px; }

/* Строка с флажком: без стилей она была инлайновой, и текст с квадратиком
   расползались по разным углам. */
.f-check { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px;
  color: var(--muted); line-height: 1.45; cursor: pointer; }
.f-check input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--cyan); cursor: pointer; }

.cta-bg { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.cta-bg .fas-field { flex: 1 1 190px; min-width: 0; }

/* ── YouTube Shorts ──────────────────────────────────────────────────── */
.yt-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.ig-tab, .yt-tab { padding: 9px 18px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--muted); background: var(--surface); border: 1px solid var(--border);
  transition: color .15s, border-color .15s, background .15s; }
.ig-tab:hover, .yt-tab:hover { color: var(--text); border-color: var(--border-2); }
.ig-tab.active, .yt-tab.active { color: #04121a; background: var(--grad); border-color: transparent; }

.yt-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 12px; }
.yt-bar-l { display: flex; align-items: baseline; gap: 8px; }
.yt-bar-l b { font-size: 20px; color: var(--cyan); }
.yt-bar-l span { font-size: 12.5px; color: var(--muted); }
.yt-bar-r { margin-left: auto; display: flex; gap: 8px; }

.yt-warn { display: flex; align-items: center; gap: 10px; padding: 14px 16px; margin-bottom: 12px;
  font-size: 13px; color: var(--amber); }
.yt-warn svg { width: 17px; height: 17px; flex: none; }

.yt-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.yt-card { padding: 14px 16px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); transition: border-color .15s, transform .15s; }
.yt-card:hover { border-color: var(--border-2); transform: translateY(-1px); }
.yt-card.on { border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.yt-card.posted { opacity: .55; }
.yt-card-h { display: flex; align-items: flex-start; gap: 10px; }
.yt-card-h b { font-size: 13.5px; line-height: 1.35; }
.yt-check { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  border: 1px solid var(--border-2); background: var(--surface-2); }
.yt-card.on .yt-check { background: var(--cyan); border-color: var(--cyan); }
.yt-check svg { width: 13px; height: 13px; stroke: #04121a; }
.yt-card-m { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; }
.yt-card-m a { display: inline-flex; align-items: center; gap: 4px; color: var(--cyan); }
.yt-card-m svg { width: 13px; height: 13px; }
.yt-card-d { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--muted-2); }

.yt-send { position: sticky; bottom: 16px; display: flex; align-items: center; gap: 14px; margin-top: 16px;
  padding: 12px 16px; border-radius: var(--radius); background: var(--bg-2);
  border: 1px solid var(--border-2); box-shadow: var(--shadow); }
.yt-send span { font-size: 12.5px; color: var(--muted); }
.yt-send .btn { margin-left: auto; }

.yt-add { padding: 18px 20px; margin-bottom: 16px; }
.yt-add h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 6px; }
.yt-add h3 svg { width: 17px; height: 17px; }
.yt-add .btn { margin-top: 12px; }

.yt-login { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; line-height: 1.4; }
.yt-login svg { width: 14px; height: 14px; flex: none; }
.yt-login.done { color: var(--emerald); }
.yt-login.failed { color: var(--coral); }
.yt-login.pending, .yt-login.running { color: var(--amber); }
.yt-chan { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12px; color: var(--cyan); }
.yt-chan svg { width: 13px; height: 13px; }

.job-h { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.job-err { color: var(--coral); }

/* ── Аккаунты: переключатель площадок ─────────────────────────────────── */
.acc-plat { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.acc-plat-b { display: flex; align-items: center; gap: 9px; padding: 11px 16px; cursor: pointer;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); transition: border-color .15s, color .15s, background .15s; }
.acc-plat-b:hover { color: var(--text); border-color: var(--border-2); }
.acc-plat-b.on { color: var(--text); border-color: var(--cyan); box-shadow: var(--glow-cyan); background: var(--surface-2); }
.acc-plat-b svg { width: 18px; height: 18px; flex: none; }
.acc-plat-b b { font-size: 13.5px; font-weight: 600; }
.acc-plat-b i { font-size: 11.5px; font-style: normal; color: var(--muted-2); }
.acc-plat-b.on i { color: var(--cyan); }
.job-plat { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; color: var(--cyan); background: rgba(0, 231, 216, .1);
  border: 1px solid rgba(0, 231, 216, .25); flex: none; }

/* ── «Куда публиковать» ───────────────────────────────────────────────── */
.pw { display: grid; gap: 8px; }
.pw-row { border-radius: 14px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.pw-row.on { border-color: var(--cyan); background: var(--surface-2); }
.pw-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
  cursor: pointer; background: none; border: 0; color: var(--muted); text-align: left; }
.pw-row.on .pw-head { color: var(--text); }
.pw-head svg { width: 17px; height: 17px; flex: none; }
.pw-head b { font-size: 13.5px; font-weight: 600; }
.pw-head i { margin-left: auto; font-size: 11.5px; font-style: normal; color: var(--muted-2); }
.pw-row.on .pw-head i { color: var(--cyan); }
.pw-check { flex: none; width: 19px; height: 19px; border-radius: 6px; display: grid; place-items: center;
  border: 1px solid var(--border-2); background: var(--surface); }
.pw-row.on .pw-check { background: var(--cyan); border-color: var(--cyan); }
.pw-check svg { width: 12px; height: 12px; stroke: #04121a; }
.pw-body { padding: 0 14px 12px; display: grid; gap: 10px; }
.pw-accs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px;
  max-height: 180px; overflow-y: auto; }
.pw-acc { display: flex; align-items: center; gap: 8px; padding: 7px 9px; cursor: pointer;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.pw-acc.on { border-color: var(--emerald); color: var(--text); }
.pw-acc svg { width: 13px; height: 13px; margin-left: auto; flex: none; stroke: var(--emerald); }
.pw-acc-av { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; background: var(--surface-2); color: var(--muted); }
.pw-acc-n { font-size: 11.5px; line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-acc-n i { display: block; font-style: normal; font-size: 10px; color: var(--muted-2); }
.pw-note { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--amber); margin: 0; }
.pw-note svg { width: 13px; height: 13px; flex: none; }
.pw-total { display: flex; align-items: center; gap: 7px; margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.pw-total svg { width: 15px; height: 15px; flex: none; }
.acc-ck { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.acc-ck summary { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12.5px; color: var(--muted); }
.acc-ck summary svg { width: 14px; height: 14px; }
.acc-ck summary:hover { color: var(--text); }
.acc-ck .fas-field, .acc-ck .fas-note { margin-top: 10px; }
.acc-ck .btn { margin-top: 10px; }


/* ── Редактор баннеров ────────────────────────────────────────────────── */
.bn-stage { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden;
  background: #05080c; border: 1px solid var(--border-2); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.bn-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bn-nofilm { position: absolute; inset: 0; background: linear-gradient(160deg, #0b1220, #16203a); }

/* В кадре лежит снимок, который получит ffmpeg, — поэтому никаких украшений:
   ни тени, ни подсветки, ни обрезки. Всё, что видно, окажется и в ролике. */
.bn-obj { position: absolute; left: 0; top: 0; cursor: grab; touch-action: none; }
.bn-obj.dragging { cursor: grabbing; outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
/* Снимок готовится на сервере около секунды: показываем это словами, а не
   значком «файл не найден». */
.bn-obj.wait::after { content: 'собираю превью…'; display: block; white-space: nowrap;
  padding: 7px 12px; border-radius: 999px; font-size: 11px; color: var(--muted);
  background: rgba(6,10,18,.72); border: 1px solid var(--border-2); }
.bn-obj.wait img { opacity: .35; }

.bn-hint { display: flex; align-items: center; justify-content: space-between; margin: 8px 2px 12px;
  font-size: 11.5px; color: var(--muted-2); }
.bn-hint span { display: inline-flex; align-items: center; gap: 6px; }
.bn-hint svg { width: 13px; height: 13px; }
.bn-hint b { color: var(--cyan); font-variant-numeric: tabular-nums; }

.bn-motions { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bn-motion { display: grid; gap: 3px; padding: 10px 12px; text-align: left; cursor: pointer;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.bn-motion:hover { border-color: var(--border-2); }
.bn-motion.on { border-color: var(--cyan); box-shadow: var(--glow-cyan); background: var(--surface-2); }
.bn-motion b { font-size: 12.5px; color: var(--text); }
.bn-motion span { font-size: 10.5px; color: var(--muted-2); line-height: 1.3; }

.bn-ranges { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.bn-range { display: grid; gap: 5px; }
.bn-range span { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.bn-range i { font-style: normal; color: var(--cyan); font-variant-numeric: tabular-nums; }
.bn-range input { width: 100%; accent-color: var(--cyan); }
.bn-emoji { text-align: center; font-size: 18px; }

/* ── Выбор стиля баннера: каждый вариант выглядит собой ───────────────── */
/* Плитка показывает настоящий баннер, поэтому она шире прежней: в 112 пикселях
   от него оставалась нечитаемая полоска. */
.bn-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }
.bn-pick { display: grid; gap: 7px; padding: 9px; cursor: pointer; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); transition: border-color .15s, transform .12s; }
.bn-pick:hover { border-color: var(--border-2); transform: translateY(-1px); }
.bn-pick.on { border-color: var(--cyan); box-shadow: var(--glow-cyan); background: var(--surface-2); }
/* Демонстрация лежит на «кадре»: подложка стекла и контура видна только на фоне */
.bn-pick-demo { display: grid; place-items: center; height: 52px; border-radius: 9px; overflow: hidden;
  background: linear-gradient(135deg, #1b2740, #3a2a1c 60%, #4a2c18);
  background-size: cover; background-position: center; }
.bn-pick-l { font-size: 11px; color: var(--muted); line-height: 1.25; }
.bn-pick.on .bn-pick-l { color: var(--text); }
.bn-pick-l em { display: block; font-style: normal; font-size: 9.5px; color: var(--muted-2); }

.bn-demo, .bn-lay, .bn-mo-demo i {
  /* Акцентный цвет приходит из редактора инлайном; здесь значение по умолчанию,
     чтобы демонстрация не осталась бесцветной, пока настройки не пришли. */
  --a: var(--cyan);
}
.bn-demo { display: grid; place-items: center; width: 66px; height: 28px; border-radius: 999px;
  font-size: 12px; font-weight: 800; font-style: normal; color: #eaf2fb; }
.bn-demo.s-glass { background: rgba(10,16,26,.55); backdrop-filter: blur(6px); border: 2px solid color-mix(in srgb, var(--a) 33%, transparent); }
.bn-demo.s-solid { background: var(--a); color: #04121a; }
.bn-demo.s-gradient { background: linear-gradient(120deg, var(--a), #18b6ff); color: #04121a; }
.bn-demo.s-outline { background: transparent; border: 2px solid var(--a); }
.bn-demo.s-neon { background: rgba(6,10,18,.72); border: 2px solid var(--a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 13%, transparent), 0 0 18px var(--a); }
.bn-demo.s-bare { background: transparent; text-shadow: 0 2px 8px rgba(0,0,0,.9); }
.bn-demo.sh { background: color-mix(in srgb, var(--a) 75%, transparent); width: 70px; height: 26px; }
.bn-demo.sz { background: var(--a); height: 14px; border-radius: 999px; }

/* Плитка движения сама показывает траекторию */
.bn-mo-demo { position: relative; display: block; height: 34px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(135deg, #16203a, #2a1e14); margin-bottom: 6px; }
.bn-mo-demo i { position: absolute; width: 22px; height: 9px; border-radius: 999px; background: var(--a);
  left: 6px; top: 12px; }
@keyframes dFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(46px,-7px); } }
@keyframes dSway { 0%,100% { transform: translateX(0); } 50% { transform: translateX(52px); } }
@keyframes dBounce { 0% { transform: translate(0,0); } 50% { transform: translate(54px,14px); } 100% { transform: translate(0,0); } }
@keyframes dTicker { from { transform: translateX(90px); } to { transform: translateX(-30px); } }
@keyframes dRise { from { transform: translateY(16px); } to { transform: translateY(-20px); } }
@keyframes dDrift { from { transform: translateX(-26px); } to { transform: translateX(92px); } }
.bn-mo-demo i.d-float { animation: dFloat 2.6s ease-in-out infinite; }
.bn-mo-demo i.d-sway { animation: dSway 2.4s ease-in-out infinite; }
.bn-mo-demo i.d-bounce { animation: dBounce 2.2s linear infinite; }
.bn-mo-demo i.d-ticker { animation: dTicker 2.6s linear infinite; }
.bn-mo-demo i.d-rise { animation: dRise 2.4s linear infinite; }
.bn-mo-demo i.d-drift { animation: dDrift 3s linear infinite; }
.bn-mo-demo i.d-fixed { box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 22%, transparent); }

/* ── Картинка в баннере ───────────────────────────────────────────────── */
.bn-img { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: start; }
.bn-img-view { position: relative; display: grid; place-items: center; min-height: 130px; padding: 10px;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background: repeating-conic-gradient(#131a26 0% 25%, #0e141e 0% 50%) 50% / 18px 18px; }
.bn-img-view img { max-width: 100%; max-height: 190px; border-radius: 10px; display: block; }
.bn-img-x { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 8px; cursor: pointer; color: var(--coral);
  background: rgba(8,12,20,.8); border: 1px solid var(--border-2); }
.bn-img-x svg { width: 13px; height: 13px; }
.bn-img-empty { display: grid; justify-items: center; gap: 4px; color: var(--muted-2); }
.bn-img-empty svg { width: 26px; height: 26px; }
.bn-img-empty b { font-size: 12px; color: var(--muted); }
.bn-img-empty i { font-style: normal; font-size: 10.5px; }
.bn-img-side { display: grid; gap: 10px; align-content: start; }

/* Раскладка показывает, где встанет картинка относительно строк */
.bn-lay { position: relative; display: block; width: 68px; height: 30px; border-radius: 6px;
  background: rgba(255,255,255,.06); }
.bn-lay::before, .bn-lay::after { content: ''; position: absolute; border-radius: 2px; }
.bn-lay::before { background: var(--a); }
.bn-lay::after { background: rgba(255,255,255,.45); }
.bn-lay.l-left::before { left: 4px; top: 7px; width: 16px; height: 16px; }
.bn-lay.l-left::after { left: 25px; top: 12px; width: 38px; height: 6px; }
.bn-lay.l-right::before { right: 4px; top: 7px; width: 16px; height: 16px; }
.bn-lay.l-right::after { left: 5px; top: 12px; width: 38px; height: 6px; }
.bn-lay.l-above::before { left: 50%; transform: translateX(-50%); top: 4px; width: 34px; height: 12px; }
.bn-lay.l-above::after { left: 50%; margin-left: -19px; bottom: 5px; width: 38px; height: 6px; }
.bn-lay.l-behind::before { inset: 3px; width: auto; height: auto; opacity: .55; }
.bn-lay.l-behind::after { left: 12px; top: 12px; width: 44px; height: 6px; }
.bn-lay.l-only::before { inset: 3px; width: auto; height: auto; }
.bn-lay.l-only::after { display: none; }
.bn-acts { display: flex; flex-wrap: wrap; gap: 7px; }
.bn-refs { display: flex; flex-wrap: wrap; gap: 8px; }
.bn-ref { position: relative; width: 74px; height: 74px; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface); }
.bn-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-ref button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; display: grid;
  place-items: center; border-radius: 6px; cursor: pointer; color: var(--coral);
  background: rgba(8,12,20,.85); border: 1px solid var(--border-2); }
.bn-ref button svg { width: 11px; height: 11px; }
.bn-ref.add { display: grid; place-items: center; gap: 2px; cursor: pointer; color: var(--muted-2);
  border-style: dashed; }
.bn-ref.add:hover { color: var(--cyan); border-color: var(--cyan); }
.bn-ref.add svg { width: 17px; height: 17px; }
.bn-ref.add span { font-size: 9.5px; }

/* Настройки модели картинок: длинный список полей, поэтому свёрнут по умолчанию,
   а цена вынесена в заголовок — она меняется от самих настроек. */
.img-model { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); margin: 8px 0 4px; }
.img-model > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--text);
  list-style: none;
}
.img-model > summary::-webkit-details-marker { display: none; }
.img-model > summary svg { width: 15px; height: 15px; color: var(--cyan); }
.img-model > summary i {
  font-style: normal; font-size: 11px; color: var(--muted);
  border: 1px solid var(--border-2); border-radius: 999px; padding: 1px 7px;
}
.img-model > summary b { margin-left: auto; color: var(--emerald); font-size: 12px; font-weight: 700; }
.img-model[open] > summary { border-bottom: 1px solid var(--border); }
.img-model .fas-row { padding: 10px 12px; }
.img-model .fas-note { padding: 10px 12px 0; margin: 0; }
.img-price { padding: 0 12px 10px; margin: 6px 0 0; font-size: 11px; color: var(--muted-2); display: flex; gap: 6px; align-items: flex-start; }
.img-price svg { width: 13px; height: 13px; flex: none; margin-top: 1px; color: var(--amber); }

/* Название модели вместе с ценой длиннее кнопок рядом: в одну строку они
   ужимают список до обрезанного слова, поэтому строке разрешён перенос, а сам
   список забирает всё, что осталось от подписи. */
.cta-bg.wrap { flex-wrap: wrap; }
.cta-bg.wrap > .fas-field { flex: 1 1 100%; }
#ctaImgModel, #bnModel { flex: 1; min-width: 0; }

/* Подзаголовок шага: без него номер и одно слово не объясняют, что тут делать. */
.fas2-sub { font-style: normal; font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 10px; }

/* Образцы стоят до выбора модели, потому что меняют сам список моделей. */
.bn-refs-row { display: flex; flex-direction: column; gap: 6px; }
.bn-refs-l { font-size: 12px; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.bn-refs-l i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--muted-2); }

/* Настройка = поле плюс строка о том, на что оно влияет. */
.img-set { display: flex; flex-direction: column; gap: 3px; min-width: 190px; }
.img-set.grow { flex: 1 1 100%; }
.img-hint { font-style: normal; font-size: 11px; line-height: 1.35; color: var(--muted-2); }
.img-set .f-check { margin-top: 6px; }

/* Колонка справа от превью узкая: подпись слева от поля съедала половину
   ширины, и название модели с ценой не помещалось. */
.bn-img-side .fas-field { flex-direction: column; align-items: stretch; gap: 4px; }
.bn-img-side .fas-field > span { font-size: 12px; color: var(--muted); }
.bn-img-side .fas-field > .fas-input { width: 100%; }

/* Плитки выбора показывают настоящий баннер: iframe с той же разметкой, что
   уходит в рендер, ужатый до ширины плитки, и на настоящем кадре из ролика —
   стекло, контур и неон видно только на живом фоне. */
.bn-pick-demo { display: block; position: relative; overflow: hidden; border-radius: 10px; }
.bn-pick-demo iframe { border: 0; display: block; transform-origin: 0 0; pointer-events: none;
  background: transparent; position: absolute; left: 0; top: 0; }
.bn-pick.wide { grid-column: span 2; }

/* Плитка движения — мини-кадр 9:16 с прямоугольником, который ходит по той же
   траектории, что и баннер в ролике. */
.bn-mo-demo { position: relative; overflow: hidden; border-radius: 8px;
  background: linear-gradient(160deg, rgba(120,140,180,.16), rgba(10,16,26,.55));
  border: 1px solid var(--border-2); aspect-ratio: 9 / 16; width: 46px; }
.bn-mo-demo > i { position: absolute; left: 0; top: 0; width: 22px; height: 7px; border-radius: 4px; will-change: transform; }

/* Надписи баннера: подпись сверху, поле снизу — так видно, что именно пишут,
   и остаётся место под счётчик. */
.bn-words { display: grid; gap: 10px; }
.bn-word { display: grid; gap: 5px; }
.bn-word > span { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; font-weight: 600; color: var(--muted); }
.bn-word > span i { font-style: normal; font-weight: 400; font-size: 11px; color: var(--muted-2); }
.bn-word .fas-input { width: 100%; }
.bn-word .fas-input.big { font-size: 17px; font-weight: 700; }

/* Значок выбирается из набора: вводить эмодзи руками с десктопа неоткуда. */
.bn-emojis { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bn-emoji-b { font-size: 19px; line-height: 1; padding: 7px 9px; border-radius: 10px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.bn-emoji-b:hover { border-color: var(--border-2); }
.bn-emoji-b.on { border-color: var(--cyan); box-shadow: var(--glow-cyan); background: var(--surface-2); }
.bn-emojis .bn-emoji { width: 84px; font-size: 15px; text-align: center; }

/* Цвет — это образец, а не безымянная полоска: рядом написано, на что он влияет. */
.bn-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.bn-color { display: grid; grid-template-columns: 42px 1fr auto; grid-template-rows: auto auto; gap: 2px 12px;
  align-items: center; padding: 10px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); cursor: pointer; }
.bn-color input { grid-row: span 2; width: 42px; height: 42px; padding: 0; border: 1px solid var(--border-2);
  border-radius: 10px; background: none; cursor: pointer; }
.bn-color b { font-size: 13px; color: var(--text); }
.bn-color i { grid-column: 2; font-style: normal; font-size: 11px; color: var(--muted-2); }
.bn-color em { grid-row: span 2; font-style: normal; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.bn-when { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.bn-when-note { flex: 1 1 240px; display: flex; gap: 6px; font-size: 11px; color: var(--muted-2); line-height: 1.4; }
.bn-when-note svg { width: 13px; height: 13px; flex: none; margin-top: 1px; color: var(--cyan); }

/* Мини-кадр движения крупнее: в 46 точках траекторию не разглядеть. */
/* Мини-кадр движения крупнее: в 46 точках траекторию не разглядеть. */
.bn-mo-demo { width: 84px; }
.bn-mo-demo > i { width: 30px; height: 9px; }

/* Галочка с пояснением: без него «Вставка включена» и «при публикации» звучат
   одинаково важно, хотя означают разное. */
.bn-switches { display: grid; gap: 10px; }
.bn-switches .f-check { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start;
  padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.bn-switches .f-check input { grid-row: span 2; margin-top: 2px; }
.bn-switches .f-check b { font-size: 13px; color: var(--text); font-weight: 600; }
.bn-switches .f-check i { font-style: normal; font-size: 11px; color: var(--muted-2); line-height: 1.4; }

/* В кадре лежит настоящий снимок баннера, а не перерисованная копия. */
.bn-obj img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* Редактор картинки: отдельная зона внутри шага, чтобы десяток ручек не
   смешивался с генерацией. */
.bn-imged { margin-top: 14px; padding: 14px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border); }
.bn-imged-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 13px; font-weight: 700; color: var(--text); }
.bn-imged-h svg { width: 15px; height: 15px; color: var(--cyan); }
.bn-imged-h em { font-style: normal; font-size: 11px; font-weight: 400; color: var(--muted-2); }
.bn-imged-h .btn { margin-left: auto; }
.bn-imged .ad-sub-l { display: block; margin: 12px 0 6px; }
.bn-imged .bn-ranges { margin-top: 0; }

.bn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bn-chip { padding: 6px 11px; border-radius: 999px; cursor: pointer; font-size: 12px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px; }
.bn-chip:hover { border-color: var(--border-2); color: var(--text); }
.bn-chip.on { border-color: var(--cyan); color: var(--text); box-shadow: var(--glow-cyan); }
.bn-chip svg { width: 13px; height: 13px; }
.bn-flips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Вырезание фона — первое действие в редакторе картинки: оно решает, ляжет
   объект на ролик плашкой или чисто. */
.bn-cut { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bn-cut i { flex: 1 1 220px; font-style: normal; font-size: 11px; color: var(--muted-2); line-height: 1.4; }

/* Присмотр за сессиями: панель над списком аккаунтов — там же, где на них
   смотрят, и где становится видно, что половина отвалилась. */
.keeper { margin: 12px 0 16px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); }
.keeper-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.keeper-h svg { width: 15px; height: 15px; color: var(--cyan); }
.keeper-h .f-switch { margin-left: auto; }
.keeper-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 10px; }
.keeper-row .fas-field { flex: 0 0 auto; }
.keeper-log { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.keeper-item { font-size: 11px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border-2); color: var(--muted); }
.keeper-item.ok { color: var(--emerald); border-color: var(--emerald); }
.keeper-item.wait { color: var(--amber); border-color: var(--amber); }
.keeper-item.bad { color: var(--coral); border-color: var(--coral); }
.f-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }