: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-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; }
.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 { background: var(--grad); border-color: transparent; box-shadow: 0 0 16px -5px var(--cyan); }
.fas-switch input:checked + .fas-tog::after { transform: translateX(19px); background: #04121a; }
.fas-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; }
.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; }
.acc-card .acc-info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-card .acc-top .badge { flex: none; white-space: nowrap; }

/* ══════════════ ГЛАВНАЯ: пульт из плиток ══════════════ */
.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(940px, 100%); max-height: 86vh; overflow: hidden; padding: 20px; }
#flShell { display: flex; flex-direction: column; gap: 14px; min-height: 0; max-height: calc(86vh - 40px); }
.fl-head { display: flex; flex-direction: column; gap: 8px; }
.fl-head .modal-head h3 { display: inline-flex; align-items: center; gap: 8px; }
.fl-head .x { background: none; border: none; color: var(--muted); cursor: pointer; display: inline-flex; }
.fl-sub { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fl-sub b { color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 16px; }
.fl-imp { margin-left: auto; }
.fl-body { overflow-y: auto; flex: 1; min-height: 130px; padding-right: 4px; }
.fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.fl-topic { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; text-align: left; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(150deg, color-mix(in srgb, var(--acc) 16%, transparent), var(--panel)); cursor: pointer; transition: transform .15s, border-color .15s; overflow: hidden; }
.fl-topic::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--acc); }
.fl-topic:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--acc) 50%, var(--border)); }
.fl-topic-ic { color: var(--acc); font-size: 26px; line-height: 1; display: inline-flex; }
.fl-topic-name { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; }
.fl-topic-count { color: var(--muted); font-size: 11.5px; }
.fl-topic-count b { color: var(--acc); }
.fl-facts-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.fl-facts-title { font-family: 'Space Grotesk', sans-serif; font-size: 18px; display: inline-flex; align-items: center; gap: 8px; }
.fl-facts-title svg { color: var(--cyan); }
.fl-search { flex: 1; min-width: 150px; background: var(--surface); border: 1px solid var(--border-2); color: var(--text); border-radius: 11px; padding: 8px 13px; font-size: 13px; }
.fl-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; cursor: pointer; }
.fl-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.fl-fact { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 13px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color .15s, background .15s; }
.fl-fact:hover { border-color: var(--border-2); }
.fl-fact.on { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, var(--panel)); }
.fl-fact.used { opacity: 0.6; }
.fl-fact.used.on { opacity: 1; }
.fl-fact-ic { color: var(--cyan); font-size: 19px; line-height: 1.1; flex: none; display: inline-flex; margin-top: 1px; }
.fl-fact-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fl-fact-text { font-size: 14px; font-weight: 600; line-height: 1.35; }
.fl-fact-detail { font-size: 12px; color: var(--muted); line-height: 1.35; }
.fl-check { flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--cyan); min-width: 22px; }
.fl-used-badge { font-size: 10px; font-weight: 700; color: var(--emerald); background: color-mix(in srgb, var(--emerald) 15%, transparent); padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.fl-foot { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.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; } }