/* AI Box Studio — dark theme, desktop 1280+
   Inspired by Leonardo.ai layout + Most-AI controls */

:root {
  --bg:           #0a0a0c;
  --bg-1:         #121215;
  --bg-2:         #1a1a1f;
  --bg-3:         #25252c;
  --border:       #2a2a32;
  --border-hover: #3d3d48;
  --text:         #ffffff;
  --text-dim:     #9595a5;
  --text-faint:   #5d5d6d;
  --accent:       #7c5cff;      /* фиолет Leonardo */
  --accent-2:     #a385ff;
  --accent-dark:  #5a3fcc;
  --gold:         #ffcc00;
  --green:        #4ade80;
  --red:          #ff6b6b;
  --orange:       #ff9f43;
  --shadow:       0 4px 20px rgba(0,0,0,0.4);
  --radius:       12px;
  --radius-sm:    8px;
  --sidebar-w:    220px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  font-feature-settings: 'cv11', 'ss01', 'ss03';  /* Inter character variants — Leonardo-style */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

/* Display font для рабочих заголовков (внутри разделов) */
h1, h2, .gen-header h1, .ai-consultant-title {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Тяжёлый display-шрифт для ОБЛОЖЕК / лендингов (Leonardo-style) */
.hero h1,
.use-hero h1,
.films-hero h1,
.ucd-hero h1 {
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.hero h1     { font-size: 56px; }
.use-hero h1 { font-size: 48px; }
.films-hero h1 { font-size: 48px; }
.ucd-hero h1   { font-size: 36px; }

@media (max-width: 900px) {
  .hero h1     { font-size: 38px; }
  .use-hero h1 { font-size: 32px; }
  .films-hero h1 { font-size: 32px; }
  .ucd-hero h1   { font-size: 26px; }
}

/* Numbers monospace-aligned (prices, balance) */
.balance, .ctrl-price, .leo-select-price, .qa-sub, .gen-side-card-price, .mp-card-price, .m-cost-label b {
  font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; }

/* ===== SIDEBAR ===== */
:root {
  --sidebar-mini-w: 64px;
}
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 16px 0;
  z-index: 10;
  transition: width 0.22s ease;
}

/* Mini mode — только иконки */
.sidebar.mini { width: var(--sidebar-mini-w); }
.sidebar.mini .logo-text,
.sidebar.mini .nav-item > span:not(.ico):not(.nav-badge),
.sidebar.mini .nav-badge,
.sidebar.mini .balance > span:not(.balance-icon),
.sidebar.mini .balance-topup,
.sidebar.mini .username { display: none; }
.sidebar.mini .logo { justify-content: center; padding: 0 0 16px; }
.sidebar.mini .nav-item { justify-content: center; padding: 12px 0; gap: 0; border-left: none; border-radius: 0; }
.sidebar.mini .nav-item.active { background: var(--bg-2); }
.sidebar.mini .nav-item.active .ico { color: var(--accent-2); }
.sidebar.mini .balance { padding: 8px; justify-content: center; }
.sidebar.mini .user { justify-content: center; padding: 4px 0; }
.sidebar.mini .sidebar-bottom { padding: 12px 8px; }

/* Toggle button (хедер сайдбара) */
.sidebar-toggle {
  position: absolute;
  top: 18px; right: -12px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  z-index: 12;
  font-size: 11px;
  color: var(--text-dim);
  transition: transform 0.22s, background 0.15s, color 0.15s;
}
.sidebar-toggle:hover { background: var(--accent); color: white; border-color: var(--accent); }
.sidebar.mini .sidebar-toggle { transform: rotate(180deg); }
.logo {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.logo-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.logo-icon img { width: 32px; height: 32px; display: block; }
.logo-text { font-weight: 600; font-size: 16px; }

.nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  color: var(--text-dim);
  border-left: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-item:hover { background: var(--bg-2); color: var(--text); }
.nav-item.active {
  background: var(--bg-2);
  color: var(--text);
  border-left-color: var(--accent);
}
.nav-item .ico {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.nav-item .ico svg { width: 20px; height: 20px; }
.logo-icon svg { width: 17px; height: 17px; }
.qa-ico svg { width: 26px; height: 26px; }
.learn-thumb-ico svg { width: 40px; height: 40px; }
.prompt-ctrl-small svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; }
.pst-spark svg { width: 15px; height: 15px; display: block; }

/* ===== Кастомный confirm (вместо браузерного) ===== */
.confirm-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: confFade .12s ease; }
@keyframes confFade { from { opacity: 0; } to { opacity: 1; } }
.confirm-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 16px; padding: 24px; max-width: 360px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.confirm-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.confirm-msg { font-size: 14px; line-height: 1.5; color: var(--text-dim); margin-bottom: 20px; }
.confirm-acts { display: flex; gap: 10px; }
.confirm-btn { flex: 1; padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--bg-2); color: var(--text); }
.confirm-cancel:hover { border-color: var(--border-hover); }
.confirm-danger { background: rgba(255,107,107,.15); color: var(--red); border-color: rgba(255,107,107,.4); }
.confirm-danger:hover { background: rgba(255,107,107,.25); }
.confirm-ok { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; }

.sidebar-bottom {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
}
.balance {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  font-weight: 500;
  cursor: pointer;   /* весь блок ведёт на Пополнить (важно для свёрнутого меню — там только знак ₽) */
}
.sidebar.mini .balance { cursor: pointer; }
.sidebar.mini .balance-icon { font-size: 19px; color: var(--accent-2); }   /* свёрнуто: ₽ крупнее и акцентный — заметно, что кликабельно */
.balance-icon { font-size: 16px; }

/* Плавающий баланс — всегда виден сверху справа */
.balance-float {
  position: fixed; top: 12px; right: 16px; z-index: 240;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 14px;
  background: var(--bg-2, #1a1a22); border: 1px solid var(--accent, #a385ff);
  border-radius: 999px; font-weight: 700; color: var(--ink, #fff);
  box-shadow: 0 6px 20px rgba(0,0,0,.32);
}
.balance-float .bf-money { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.balance-float .bf-ico { color: var(--accent-2, #8b6cff); }
.balance-float .bf-cta {
  background: var(--accent, #a385ff); color: #fff; border-radius: 999px;
  padding: 5px 13px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.balance-float .bf-cta:hover { background: var(--accent-2, #8b6cff); }
.balance-float .bf-avatar {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent, #a385ff); color: #fff; font-weight: 700; font-size: 14px;
}
/* Низкий баланс — подсветка «Мало средств → Пополните» (рост оплат) */
.balance-float .bf-low { display: none; color: #ff6b6b; font-size: 12px; font-weight: 800; white-space: nowrap; padding-left: 4px; }
.balance-float.low { border-color: #ff6b6b; animation: bfPulse 2s ease-in-out infinite; }
.balance-float.low .bf-low { display: inline; }
.balance-float.low .bf-ico, .balance-float.low #balance-float-value { color: #ff6b6b; }
.balance-float.low .bf-cta { background: #ff6b6b; }
.balance-float.low .bf-cta:hover { background: #e85555; }
@keyframes bfPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,107,107,.16), 0 6px 20px rgba(0,0,0,.32); }
  50% { box-shadow: 0 0 0 7px rgba(255,107,107,.30), 0 6px 20px rgba(0,0,0,.32); }
}
@media (max-width: 768px) {
  .balance-float { top: 8px; right: 9px; padding: 4px 4px 4px 11px; gap: 6px; font-size: 13px; }
  .balance-float .bf-cta { padding: 4px 10px; font-size: 12px; }
  .balance-float .bf-avatar { width: 26px; height: 26px; font-size: 12px; }
  .balance-float .bf-low { display: none !important; }   /* на мобиле текст не влезает — хватит красного+пульса */
  .balance-float.low .bf-ico, .balance-float.low #balance-float-value { color: #ff6b6b; }
}
#balance-value { flex: 1; }
.balance-topup {
  background: var(--accent);
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
.balance-topup:hover { background: var(--accent-2); }

.user {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: white; flex: 0 0 auto;
}
.username { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== MAIN ===== */
.main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  padding: 24px 32px 40px;
  transition: margin-left 0.22s ease;
}
body.sidebar-mini .main { margin-left: var(--sidebar-mini-w); }

.route { display: none; }
.route.active { display: block; }

/* ===== HERO (Home) ===== */
.hero {
  background: linear-gradient(135deg, rgba(124,92,255,0.15), rgba(255,159,67,0.08));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px 32px;
  text-align: center;
  margin-bottom: 32px;
}
.hero h1 {
  margin-bottom: 12px;
  color: var(--text);
}
.hero h1 .accent {
  background: linear-gradient(135deg, var(--accent-2), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub { color: var(--text-dim); font-size: 16px; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

/* Home Trends — большая галерея вдохновения как у Leonardo Featured Blueprints */
.home-trends { margin-bottom: 36px; }
.home-trends-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 6px;
}
.home-trends-title {
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-size: 28px;
  color: var(--text);
}
.home-trends-title .accent {
  background: linear-gradient(135deg, var(--accent-2), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.home-trends-all {
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 500;
}
.home-trends-all:hover { color: var(--text); }
.home-trends-sub { color: var(--text-dim); font-size: 14px; margin-bottom: 18px; }

/* Главная — тот же masonry, что в Трендах/Шаблонах (контент разной высоты в колонки) */
.home-trends-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1300px) { .home-trends-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .home-trends-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .home-trends-grid { grid-template-columns: repeat(2, 1fr); } }

.ht-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.2s;
}
.ht-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.ht-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--bg-2);
  overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.ht-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ht-photo-empty { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.ht-photo-ico {
  font-size: 44px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  color: white;
}
.ht-body {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.ht-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.ht-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.ht-model { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ht-model-thumb {
  width: 18px; height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}
.ht-model-name {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ht-price {
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ht-card { position: relative; }
.ht-badge {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 9px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  z-index: 2;
  backdrop-filter: blur(6px);
}
.ht-badge-community {
  background: rgba(124,92,255,0.85);
  color: white;
}

/* Share-кнопка чуть выделяется */
.lrc-act-share {
  background: rgba(124,92,255,0.7) !important;
  border-color: rgba(124,92,255,0.4) !important;
}
.lrc-act-share:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.quick-actions h2 { font-size: 18px; margin-bottom: 12px; font-weight: 500; }
.qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.qa-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  transition: border-color 0.15s, transform 0.15s;
}
.qa-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.qa-ico { font-size: 32px; margin-bottom: 8px; color: var(--accent-2); }
.qa-title { font-weight: 500; margin-bottom: 4px; }
.qa-sub { color: var(--text-dim); font-size: 12px; }

/* ===== Generate route ===== */
.gen-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px;
}
.gen-header h1 { font-size: 28px; font-weight: 700; flex: 1; }

/* Back-to-menu button (выраженный) */
.section-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.section-back:hover { background: var(--bg-3); border-color: var(--accent); color: var(--accent-2); transform: translateX(-2px); }
.section-back:active { transform: translateX(-1px); }
.gen-history {
  color: var(--text-dim);
  font-size: 14px;
}
.gen-history:hover { color: var(--text); }

.gen-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-dim);
}
.gen-empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  color: var(--text-faint);
}
.gen-empty h2 { font-size: 22px; font-weight: 500; margin-bottom: 8px; color: var(--text); }

.gen-result-area {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.gen-result-item {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
/* Галерея: понятная кликабельность карточки при наведении */
.lib-grid .gen-result-item { cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.lib-grid .gen-result-item:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.lib-grid .gen-result-item::after { content: '↗ Открыть'; position: absolute; top: 10px; left: 10px; z-index: 3; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,.62); padding: 4px 9px; border-radius: 8px; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.lib-grid .gen-result-item:hover::after { opacity: 1; }
.gen-result-item img,
.gen-result-item video {
  width: 100%; height: 280px;
  object-fit: cover;
  display: block;
}
.gen-result-item .gri-vbadge {
  position: absolute; top: 140px; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 16px; border-radius: 50%;
  backdrop-filter: blur(4px); pointer-events: none;
}
/* Угловой крестик удаления на карточке галереи — нужен на мобиле/мини-аппе (там .gri-meta скрыта) */
.gri-del-corner { display: none; position: absolute; top: 8px; right: 8px; z-index: 5; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; font-size: 19px; line-height: 1; cursor: pointer; align-items: center; justify-content: center; }
.gri-del-corner:active { background: rgba(220,60,60,.92); }
.td-own-del-btn { color: #ff8a8a; }
.td-own-del-btn:hover { border-color: #ff6b6b; color: #ff6b6b; }
/* Меню работы по долгому нажатию (мобайл): Скачать / Удалить / Закрыть */
.gri-tile-menu { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: rgba(8,8,14,.82); }
.gri-tile-menu button { width: 100%; max-width: 200px; border: none; border-radius: 9px; padding: 11px; font-size: 13px; font-weight: 500; cursor: pointer; }
.gri-tile-menu [data-tm="save"] { background: var(--accent); color: #fff; }
.gri-tile-menu [data-tm="secret"] { background: rgba(124,92,255,.18); color: #ccbcff; border: 1px solid rgba(124,92,255,.5); }
.gri-tile-menu [data-tm="del"] { background: #3a1414; color: #ff8a8a; border: 1px solid #5a1d1d; }
.gri-tile-menu [data-tm="close"] { background: transparent; color: var(--text-dim); padding: 6px; }
.gen-result-item .gri-meta {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-dim);
}

/* ===== Tabs ===== */
.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.tab {
  padding: 10px 16px;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* ===== Chips ===== */
.chip {
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-dim);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip:hover { background: var(--bg-3); color: var(--text); }
.chip.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.lib-filters, .trends-cats {
  display: flex; gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* Trends — masonry (Leonardo Community Creations): картинки разной высоты в колонки */
.trends-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1280px) { .trends-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .trends-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== Models grid ===== */
.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
}
.empty-state p { margin-bottom: 12px; }
.empty-state .btn-primary { margin-top: 12px; }

/* ===== Buttons ===== */
.btn-primary {
  background: var(--accent);
  color: white;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--accent-2); }
.btn-primary:disabled { background: var(--bg-3); color: var(--text-faint); cursor: not-allowed; }
.btn-primary.btn-large { padding: 14px 28px; font-size: 15px; }

.btn-secondary {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  transition: background 0.15s, border-color 0.15s;
}
.btn-secondary:hover { background: var(--bg-3); border-color: var(--border-hover); }

/* ===== PROMPT BAR — inline в верхней части leo-main ===== */
.prompt-bar-mount { width: 100%; }
.prompt-bar {
  width: 100%;
  margin-bottom: 16px;
  /* Сбрасываем старые fixed-стили */
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  background: none;
  padding: 0;
  z-index: auto;
  pointer-events: auto;
}
.prompt-bar > * { pointer-events: auto; }
.prompt-bar-inner {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
}
@media (max-width: 900px) {
  .prompt-bar-inner { grid-template-columns: 1fr; }
}

/* Левая колонка: крупная зона добавления фото */
.prompt-photo-zone {
  display: flex; flex-direction: column;
  gap: 8px;
}
.prompt-photo-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  background: linear-gradient(135deg, rgba(124,92,255,0.10), rgba(163,133,255,0.04));
  border: 2px dashed rgba(124,92,255,0.45);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  min-height: 110px;
}
.prompt-photo-btn:hover {
  background: linear-gradient(135deg, rgba(124,92,255,0.22), rgba(163,133,255,0.12));
  border-color: var(--accent);
  transform: translateY(-1px);
}
.ppb-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: white;
  box-shadow: 0 4px 12px rgba(124,92,255,0.4);
}
.ppb-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.ppb-title { font-weight: 600; font-size: 13px; }
.ppb-sub { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.prompt-photo-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 4px;
}
.prompt-photo-thumbs .prompt-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-2);
}
.prompt-photo-thumbs .prompt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.prompt-photo-thumbs .prompt-thumb .x {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px;
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 10px; cursor: pointer;
}

/* Правая колонка: промпт + контролы */
.prompt-text-zone {
  display: flex; flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* AI-подсказка лучшей модели под промптом */
.prompt-suggest-tip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 12px;
  background: linear-gradient(135deg, rgba(124,92,255,0.13), rgba(255,204,0,0.04));
  border: 1px solid rgba(124,92,255,0.3);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text);
  animation: pstFade 0.2s ease-out;
}
@keyframes pstFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pst-spark { font-size: 14px; flex-shrink: 0; }
.pst-text { flex: 1; line-height: 1.5; min-width: 0; }
.pst-text b { color: var(--accent-2); }
.pst-apply {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 6px;
  background: var(--accent);
  color: white;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.pst-apply:hover { background: var(--accent-2); }
.pst-mthumb {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}
.pst-close {
  width: 24px; height: 24px;
  color: var(--text-dim);
  font-size: 18px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.pst-close:hover { background: var(--bg-3); color: var(--text); }

.prompt-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.prompt-row-spacer { flex: 1; }

.prompt-attach {
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap;
}
.prompt-attach:hover { background: var(--bg-3); color: var(--text); }

.prompt-ctrl-small {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap;
}
.prompt-ctrl-small:hover { background: var(--bg-2); color: var(--text); border-color: var(--border-hover); }
#ctrl-ai-improve { color: var(--accent-2); border-color: rgba(124,92,255,0.35); }
#ctrl-ai-improve:hover { background: rgba(124,92,255,0.12); border-color: var(--accent); color: var(--text); }

#prompt-text {
  display: block;
  width: 100%;
  min-height: 72px;
  max-height: 280px;
  padding: 12px 14px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  resize: vertical;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
#prompt-text::placeholder { color: var(--text-faint); }
#prompt-text:focus { background: var(--bg-3); outline: none; }

.prompt-row-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.prompt-row-info { flex: 1; display: flex; gap: 8px; align-items: center; }
.prompt-model-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: var(--bg-2);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.prompt-model-chip #ctrl-model-name { color: var(--text); font-weight: 500; }
.ctrl-price { color: var(--gold); }
/* Бесплатная генерация: чип и кнопка показывают «Бесплатно» без знака ₽ */
body.is-free-gen .ctrl-cur,
body.is-free-gen .fab-cur { display: none; }

.prompt-go {
  background: var(--accent);
  color: white;
  padding: 10px 28px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  white-space: nowrap;
}
.prompt-go:hover { background: var(--accent-2); }
.prompt-go:disabled { background: var(--bg-3); color: var(--text-faint); cursor: not-allowed; }

.prompt-bar-thumbs {
  max-width: 960px;
  margin: 8px auto 0;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.prompt-thumb {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 6px;
  overflow: hidden;
}
.prompt-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* INSTA-UPLOAD: тайл во время загрузки — приглушённое превью + полоса прогресса */
.prompt-thumb-up img { opacity: 0.55; }
.prompt-thumb-up .up-prog { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 4px; background: rgba(0,0,0,0.55); border-radius: 3px; overflow: hidden; }
.prompt-thumb-up .up-prog > span { display: block; height: 100%; width: 8%; background: var(--accent); border-radius: 3px; transition: width 0.15s ease; }
.prompt-thumb .x {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px;
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 10px; cursor: pointer;
}

/* ===== MODAL ===== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 960px;
  width: 100%;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 18px; font-weight: 500; }
.modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 20px;
  color: var(--text-dim);
}
.modal-close:hover { background: var(--bg-2); color: var(--text); }
.modal-body { padding: 20px; overflow-y: auto; }

/* Model picker modal */
.modal-model-picker { max-width: 1100px; }
.model-picker-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  flex: 1;
  overflow: hidden;
  min-height: 500px;
}
.mp-providers {
  border-right: 1px solid var(--border);
  padding: 12px 0;
  overflow-y: auto;
}
.mp-provider {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  color: var(--text-dim);
  cursor: pointer;
}
.mp-provider:hover { background: var(--bg-2); color: var(--text); }
.mp-provider.active { background: var(--bg-2); color: var(--text); }
.mp-provider .mp-ico { width: 24px; height: 24px; background: var(--bg-3); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }

.mp-main { padding: 16px 20px; overflow-y: auto; }
.mp-filters {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
#mp-search {
  flex: 1; min-width: 200px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 13px;
}
#mp-search:focus { background: var(--bg-3); }
#mp-search::placeholder { color: var(--text-faint); }

.mp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mp-card {
  display: flex; gap: 12px;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.mp-card:hover { border-color: var(--accent); background: var(--bg-3); }
.mp-card.selected { border-color: var(--accent); background: var(--bg-3); }
.mp-card-ico {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
}
.mp-card-body { flex: 1; min-width: 0; }
.mp-card-title-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.mp-card-name { font-weight: 500; }
.mp-card-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.mp-card-tag.new      { background: rgba(74,222,128,0.15); color: var(--green); }
.mp-card-tag.popular  { background: rgba(124,92,255,0.15); color: var(--accent-2); }
.mp-card-tag.premium  { background: rgba(255,204,0,0.15); color: var(--gold); }
.mp-card-tag.cheap    { background: rgba(255,159,67,0.15); color: var(--orange); }
.mp-card-tag.trending { background: rgba(255,107,107,0.15); color: var(--red); }
.mp-card-tag.min-moderation { background: rgba(255,107,107,0.15); color: var(--red); }
.mp-card-tag.russian-voice  { background: rgba(74,222,128,0.15); color: var(--green); }
.mp-card-tag.audio          { background: rgba(124,92,255,0.15); color: var(--accent-2); }
.mp-card-tag.two-frames     { background: rgba(255,159,67,0.15); color: var(--orange); }
.mp-card-desc {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-card-price {
  margin-top: 6px;
  font-size: 12px;
  color: var(--gold);
  font-weight: 500;
}

/* Train modal */
.modal-train { max-width: 640px; }
.modal-train h4 { font-size: 13px; color: var(--text-dim); font-weight: 500; text-transform: uppercase; margin: 20px 0 10px; }
.modal-train h4:first-child { margin-top: 0; }

.train-cats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.train-cat {
  background: var(--bg-2);
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
}
.train-cat:hover { background: var(--bg-3); }
.train-cat.active { border-color: var(--accent); background: var(--bg-3); }
.train-cat-ico { font-size: 32px; margin-bottom: 6px; }
.train-cat-title { font-weight: 500; margin-bottom: 4px; }
.train-cat-desc { font-size: 11px; color: var(--text-dim); }

#train-name {
  width: 100%;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
#train-name:focus { background: var(--bg-3); }

.train-uploader {
  background: var(--bg-2);
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}
.train-files-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 6px;
  margin-top: 12px;
}
.train-files-preview .tf { width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--bg-3); }
.train-files-preview .tf img { width: 100%; height: 100%; object-fit: cover; }

.train-cost {
  margin: 20px 0 12px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-dim);
}
.train-cost b { color: var(--gold); }

/* ===== TOAST ===== */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-3);
  border: 1px solid var(--border-hover);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 1000;
  max-width: 80vw;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== Loading shimmer ===== */
.shimmer {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ===== Leonardo-style 2-col layout for Image/Video/Music ===== */
.leo-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  min-height: calc(100vh - 280px);
}

.leo-settings {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  height: fit-content;
  position: sticky;
  top: 16px;
}

.leo-set { margin-bottom: 18px; }
.leo-set > label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* ===== Note под моделью (что эта модель требует) ===== */
.leo-model-note {
  background: rgba(124,92,255,0.08);
  border: 1px solid rgba(124,92,255,0.25);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 16px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
}
/* Напоминание «загрузи фото» для моделей-оживляторов — янтарное, заметное */
.leo-photo-reminder {
  background: rgba(255,176,32,0.12);
  border: 1px solid rgba(255,176,32,0.45);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  margin-bottom: 16px;
  color: #ffd479;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

/* ===== Reference photos в settings panel (синхронизировано с prompt-bar) ===== */
.leo-ref-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 4px;
  margin-top: 8px;
}
.leo-ref-photos .prompt-thumb {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-2);
}
.leo-ref-photos .prompt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.leo-ref-photos .prompt-thumb .x {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px;
  background: rgba(0,0,0,0.7);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 10px; cursor: pointer;
}

/* Native select */
.leo-select-native {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.leo-select-native:focus { border-color: var(--accent); outline: none; }

/* ===== Hint под segm/aspect (Leonardo: "1024×1024 · ~5 сек") ===== */
.leo-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Help text — большая подсказка под параметром (для seed, negative и т.д.) */
.leo-help-text {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}
.leo-help-text b { color: var(--text); font-weight: 600; }

/* Help icon (?) — маленький кружок с тултипом */
.leo-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 700;
  cursor: help;
  position: relative;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}
.leo-help:hover { background: var(--accent); color: white; }
.leo-help:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  padding: 10px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border-hover);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 200;
  pointer-events: none;
}
.leo-help:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border-hover);
  z-index: 200;
}

/* ===== Style picker (popover) ===== */
.leo-style-trigger {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
}
.leo-style-trigger:hover { background: var(--bg-3); border-color: var(--border-hover); }
.leo-style-pop {
  margin-top: 6px;
  background: var(--bg-1);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  padding: 4px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.lsp-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}
.lsp-item:hover { background: var(--bg-2); }
.lsp-item.active { background: var(--bg-3); color: var(--accent-2); }
.lsp-desc {
  display: block;
  color: var(--text-faint);
  font-size: 11px;
  margin-top: 2px;
  font-weight: 400;
}

/* ===== Model trigger (compact card in left panel) ===== */
.leo-model-set { position: relative; }
.leo-model-trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.leo-model-trigger:hover { background: var(--bg-3); border-color: var(--border-hover); }
.leo-model-trigger.open { border-color: var(--accent); }
.lmt-thumb {
  width: 36px; height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.lmt-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lmt-name { font-weight: 600; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmt-desc { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lmt-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lmt-price { color: var(--gold); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lmt-chevron { color: var(--text-dim); font-size: 10px; transition: transform 0.2s; }
.leo-model-trigger.open .lmt-chevron { transform: rotate(180deg); color: var(--accent-2); }

/* ===== Model slider (Leonardo-style floating panel, рядом с settings) ===== */
/* Backdrop отключён — слайдер не блокирует остальной UI */
.lms-backdrop { display: none !important; }

:root { --settings-w: 280px; --leo-gap: 24px; }

.leo-model-slider {
  position: fixed;
  top: 16px;
  /* Правее settings-panel: sidebar + settings + gap */
  left: calc(var(--sidebar-w) + var(--settings-w) + var(--leo-gap) + 32px);
  width: 440px;
  height: calc(100vh - 32px);
  background: var(--bg-1);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius);
  z-index: 100;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
  transform: translateX(-20px);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s, left 0.22s ease;
  pointer-events: none;
}
/* CRITICAL: display:flex выше перекрывает [hidden] браузера — нужен явный override */
.leo-model-slider[hidden] { display: none !important; }

body.sidebar-mini .leo-model-slider {
  left: calc(var(--sidebar-mini-w) + var(--settings-w) + var(--leo-gap) + 32px);
}
.leo-model-slider.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.lms-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.lms-header h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lms-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 22px;
  color: var(--text-dim);
}
.lms-close:hover { background: var(--bg-2); color: var(--text); }

.lms-search-wrap {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
#lms-search {
  width: 100%;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: 13px;
  color: var(--text);
  border: 1px solid transparent;
}
#lms-search:focus { background: var(--bg-3); border-color: var(--accent); outline: none; }
#lms-search::placeholder { color: var(--text-faint); }

.lms-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.lms-card {
  padding: 14px;
  margin-bottom: 6px;
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.lms-card:hover { background: var(--bg-3); border-color: var(--border-hover); }
.lms-card.active { border-color: var(--accent); background: var(--bg-3); }

.lms-card-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.lms-card-thumb {
  width: 52px; height: 52px;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.lms-card-titles { flex: 1; min-width: 0; }
.lms-card-name {
  font-weight: 600; font-size: 15px;
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.lms-card-provider {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.lms-card-desc {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.lms-card-faq {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.55;
  padding: 8px 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lms-card-cta { display: flex; justify-content: flex-end; }
.lms-card-select {
  padding: 7px 16px;
  background: var(--accent);
  color: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
.lms-card.active .lms-card-select {
  background: var(--green);
}
.lms-card:hover .lms-card-select { background: var(--accent-2); }

.lms-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.lms-footer .btn-secondary { width: 100%; }

@media (max-width: 1100px) {
  .leo-model-slider {
    left: calc(var(--sidebar-mini-w) + 16px) !important;
    width: calc(100vw - var(--sidebar-mini-w) - 32px);
    max-width: 440px;
  }
}

/* ===== Popover (старый — оставлен для возможного fallback) ===== */
.leo-model-popover {
  position: absolute;
  top: calc(100% + 28px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg-1);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  overflow: hidden;
  animation: lmpFade 0.15s ease-out;
}
@keyframes lmpFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lmp-head {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.lmp-list {
  max-height: 50vh;
  overflow-y: auto;
  padding: 6px;
}
.lmp-card {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.lmp-card + .lmp-card { margin-top: 2px; }
.lmp-card:hover { background: var(--bg-2); }
.lmp-card.active { background: var(--bg-2); border-color: var(--accent); }
.lmp-thumb {
  width: 44px; height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.lmp-body { flex: 1; min-width: 0; }
.lmp-title-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.lmp-name { font-weight: 600; font-size: 13px; color: var(--text); }
.lmp-desc {
  font-size: 12px; color: var(--text-dim); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.lmp-price {
  align-self: center;
  color: var(--gold);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lmi-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(74,222,128,0.15);
  color: var(--green);
}
.lmi-tag-gold  { background: rgba(255,204,0,0.15); color: var(--gold); }
.lmi-tag-cheap { background: rgba(255,159,67,0.15); color: var(--orange); }
.lmi-tag-trend { background: rgba(255,107,107,0.15); color: var(--red); }
.lmi-tag-pop   { background: rgba(124,92,255,0.15); color: var(--accent-2); }
.lmi-tag-adult { background: rgba(239,68,68,0.18); color: var(--red); }

.lmp-all {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--bg-2);
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  border-top: 1px solid var(--border);
}
.lmp-all:hover { background: var(--bg-3); color: var(--text); }

/* Model selector button (left panel) — старая компактная версия, оставлена для возможного fallback */
.leo-select {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.leo-select:hover { background: var(--bg-3); border-color: var(--accent); }
.leo-select-ico {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.leo-select-name { flex: 1; font-weight: 500; font-size: 13px; }
.leo-select-price { color: var(--gold); font-size: 12px; }
.leo-select-chevron { color: var(--text-dim); font-size: 10px; }

/* Aspect ratio chooser */
.leo-aspects {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.leo-aspect {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-dim);
  transition: border-color 0.15s, color 0.15s;
}
.leo-aspect:hover { border-color: var(--border-hover); color: var(--text); }
.leo-aspect.active { border-color: var(--accent); color: var(--text); background: var(--bg-3); }
.la-box {
  background: var(--text-faint);
  border-radius: 2px;
}
.leo-aspect.active .la-box { background: var(--accent-2); }
.la-23  { width: 12px; height: 18px; }
.la-11  { width: 16px; height: 16px; }
.la-34  { width: 14px; height: 18px; }
.la-169 { width: 22px; height: 12px; }
.la-916 { width: 11px; height: 20px; }

/* Segmented control */
.leo-segm {
  display: flex;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.leo-segm button {
  flex: 1;
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 6px;
  color: var(--text-dim);
  transition: background 0.15s, color 0.15s;
}
.leo-segm button:hover { color: var(--text); }
.leo-segm button.active { background: var(--accent); color: white; }

/* Upload button (for video frames) */
.leo-upload {
  width: 100%;
  padding: 14px;
  background: var(--bg-2);
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 13px;
}
.leo-upload:hover { color: var(--text); background: var(--bg-3); border-color: var(--accent); }
.leo-upload.has-file {
  border-style: solid;
  border-color: var(--green);
  color: var(--text);
}

/* Advanced expand */
.leo-advanced {
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 0;
  margin-bottom: 12px;
}
.leo-advanced summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dim);
  list-style: none;
}
.leo-advanced summary::-webkit-details-marker { display: none; }
.leo-advanced summary::before { content: '▸ '; }
.leo-advanced[open] summary::before { content: '▾ '; }
.leo-advanced > .leo-set { padding: 0 14px; margin-bottom: 14px; }
.leo-advanced > .leo-set:last-of-type { padding-bottom: 14px; }
.leo-advanced input[type=text] {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
}

.leo-toggle {
  display: flex !important; align-items: center; gap: 8px;
  font-size: 12px !important;
  color: var(--text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  margin-bottom: 0 !important;
}
.leo-toggle input[type=checkbox] { accent-color: var(--accent); }

.leo-reset {
  width: 100%;
  padding: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 8px;
}
.leo-reset:hover { background: var(--bg-2); color: var(--text); }

/* Main canvas */
.leo-main {
  display: flex; flex-direction: column;
}
.leo-canvas {
  flex: 1;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.leo-canvas .gen-empty { padding: 0; }

/* Music — one-window blocks */
.m-block {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 14px;
}
.m-block-title {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.m-block .music-themes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.m-block input[type=text] {
  width: 100%;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
}
.m-block input[type=text]:focus { background: var(--bg-3); outline: none; }
.m-block #music-text {
  margin-bottom: 0;
  min-height: 100px;
  width: 100%;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  resize: vertical;
}
.m-block #music-text:focus { background: var(--bg-3); outline: none; }

.music-modes-v {
  display: flex; flex-direction: column;
  gap: 6px;
}
.music-mode-v {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.music-mode-v:hover { background: var(--bg-3); border-color: var(--border-hover); }
.music-mode-v.active { border-color: var(--accent); background: var(--bg-3); }
.music-mode-v .mm-title { font-weight: 500; font-size: 13px; margin-bottom: 2px; }
.music-mode-v .mm-desc { color: var(--text-dim); font-size: 11px; }

.m-generate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 8px;
}
.m-cost-label { color: var(--text-dim); font-size: 13px; }
.m-cost-label b { color: var(--gold); margin-left: 8px; }

/* Old 2col fallback (kept for trends/library) */
.gen-2col {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
}
.gen-side {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  height: fit-content;
  position: sticky;
  top: 24px;
}
.gen-side-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gen-side-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.gen-side-card {
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
}
.gen-side-card:hover { background: var(--bg-3); border-color: var(--accent); }
.gen-side-card-title { font-weight: 500; font-size: 13px; margin-bottom: 2px; }
.gen-side-card-sub { color: var(--text-dim); font-size: 11px; }
.gen-side-card-price { color: var(--gold); font-size: 11px; margin-top: 4px; }
.gen-side-more {
  display: block;
  text-align: center;
  padding: 8px;
  color: var(--accent-2);
  font-size: 13px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.gen-side-more:hover { color: var(--text); }

/* ===== Music multi-step (Сонграйтер-style) ===== */
.music-steps {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.music-step {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-dim);
  font-size: 14px;
}
.music-step .ms-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.music-step.active { color: var(--text); }
.music-step.active .ms-num { background: var(--accent); color: white; border-color: var(--accent); }
.music-step.done .ms-num { background: var(--green); color: white; border-color: var(--green); }

.music-step-body h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.music-step-body h4 { font-size: 13px; color: var(--text-dim); font-weight: 500; text-transform: uppercase; margin-top: 16px; }
.music-hint { color: var(--text-dim); font-size: 13px; margin-bottom: 12px; }

.music-modes {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.music-mode {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: var(--bg-2);
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
}
.music-mode:hover { background: var(--bg-3); }
.music-mode.active { border-color: var(--accent); background: var(--bg-3); }
.music-mode .mm-ico { font-size: 28px; }
.music-mode .mm-title { font-weight: 500; margin-bottom: 2px; }
.music-mode .mm-desc { color: var(--text-dim); font-size: 12px; }

.music-themes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.music-themes p { width: 100%; margin-bottom: 4px; }

#music-text {
  width: 100%;
  min-height: 100px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  resize: vertical;
  font-size: 14px;
  color: var(--text);
}
#music-text:focus { background: var(--bg-3); outline: none; }

.music-genre-grid, .music-mood-grid {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 8px;
}

.music-summary {
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: 16px;
  margin: 16px 0;
}
.music-summary-row {
  display: flex; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.music-summary-row:last-child { border-bottom: none; }
.music-summary-label { color: var(--text-dim); width: 140px; font-size: 13px; }
.music-summary-value { flex: 1; font-size: 13px; }

.music-cost {
  background: var(--bg-2);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  display: flex; justify-content: space-between; align-items: center;
}
.music-cost b { color: var(--gold); }

/* ===== AI Consultant (Home flagship block) ===== */
.ai-consultant {
  background: linear-gradient(135deg, rgba(124,92,255,0.12), rgba(255,159,67,0.06));
  border: 1px solid var(--border-hover);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 32px;
}
.ai-consultant-head {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 16px;
}
.ai-consultant-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.ai-consultant-title { font-size: 17px; font-weight: 600; margin-bottom: 2px; }
.ai-consultant-sub { color: var(--text-dim); font-size: 13px; }

.ai-consultant-body {
  background: var(--bg-1);
  border-radius: 10px;
  padding: 14px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.ai-msg {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 85%;
}
.ai-msg-bot {
  background: var(--bg-2);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.ai-msg-user {
  background: var(--accent);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.ai-msg-loading::after {
  content: '...';
  animation: dots 1.5s infinite;
}
@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

.ai-consultant-input-row {
  display: flex; gap: 8px;
}
#ai-consultant-input {
  flex: 1;
  background: var(--bg-1);
  border: 1px solid var(--border);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}
#ai-consultant-input:focus { border-color: var(--accent); }

/* ===== Ctrl AI + Ctrl Info ===== */
.ctrl-ai {
  background: linear-gradient(135deg, rgba(124,92,255,0.2), rgba(163,133,255,0.2));
  color: var(--accent-2);
  font-weight: 500;
}
.ctrl-ai:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
}
.ctrl-info { padding: 8px 10px; font-size: 14px; }

/* ===== Model picker — info button on card ===== */
.mp-card-info {
  margin-left: auto;
  background: var(--bg-3);
  border-radius: 50%;
  width: 22px; height: 22px;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.mp-card-info:hover { background: var(--accent); }

/* ===== FAQ modal ===== */
.modal-faq { max-width: 720px; }
.modal-faq .modal-body p { margin: 8px 0; line-height: 1.6; }
.modal-faq .modal-body li { margin: 4px 0; }
.modal-faq .modal-body h3 { color: var(--accent-2); }

/* ===== AI helper modal ===== */
.modal-ai-helper { max-width: 640px; }
.modal-ai-helper textarea { background: var(--bg-2); border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--text); resize: vertical; outline: none; border: none; }
.modal-ai-helper textarea:focus { background: var(--bg-3); }

/* ===== Reference photos: большая верхняя кнопка ===== */
.leo-ref-top {
  background: rgba(124,92,255,0.06);
  border: 1px solid rgba(124,92,255,0.18);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 18px;
}
.leo-ref-label { color: var(--accent-2) !important; font-size: 11px !important; margin-bottom: 10px !important; }
.leo-ref-upload-big {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 16px;
  background: linear-gradient(135deg, rgba(124,92,255,0.15), rgba(163,133,255,0.08));
  border: 2px dashed rgba(124,92,255,0.45);
  border-radius: 12px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.leo-ref-upload-big:hover {
  background: linear-gradient(135deg, rgba(124,92,255,0.25), rgba(163,133,255,0.15));
  border-color: var(--accent);
  transform: translateY(-1px);
}
.lru-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(124,92,255,0.4);
}
.lru-text { display: flex; flex-direction: column; gap: 2px; }
.lru-title { font-weight: 600; font-size: 14px; color: var(--text); }
.lru-sub { font-size: 11px; color: var(--text-dim); }

/* ===== Inspire block (раздел Фото — «Ищете вдохновение?») ===== */
.leo-canvas { flex-direction: column; gap: 32px; padding: 32px 28px; align-items: stretch; justify-content: flex-start; }

/* Результаты последней генерации — 4-в-ряд (Leonardo-style) */
.leo-results {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  min-height: 200px;
}
.leo-results .gen-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
}
@media (max-width: 1400px) { .leo-results { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .leo-results { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .leo-results { grid-template-columns: 1fr; } }

.leo-result-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1;
  position: relative;
  transition: border-color 0.15s, transform 0.15s;
}
.leo-result-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.leo-result-card .lrc-gift {
  position: absolute; top: 8px; left: 8px; z-index: 5;
  background: linear-gradient(135deg, #a385ff, #7c5cff); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .2px;
  padding: 4px 9px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.3);
  pointer-events: none; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.leo-result-card.lrc-is-gift { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 14px; }
@media (max-width: 760px) {
  .leo-result-card .lrc-gift { font-size: 12.5px; top: 10px; left: 10px; padding: 5px 12px; }
}
.leo-result-card img,
.leo-result-card video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.leo-result-card .lrc-loading {
  position: absolute; inset: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2);
  color: #fff;
  font-size: 13px;
  flex-direction: column; gap: 10px;
}
/* бегущий блик по карточке в процессе генерации */
.leo-result-card .lrc-loading::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(124,92,255,0.22) 50%, transparent 70%);
  transform: translateX(-120%); animation: lrcShine 1.8s ease-in-out infinite;
}
.leo-result-card .lrc-loading > * { position: relative; z-index: 1; }
@keyframes lrcShine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
/* пульсирующее свечение рамки карточки в наших цветах */
.leo-result-card:has(.lrc-loading) { animation: genGlow 1.6s ease-in-out infinite; }
@keyframes genGlow {
  0%, 100% { box-shadow: 0 0 0 1px var(--accent), 0 0 0 0 rgba(124,92,255,0); }
  50%      { box-shadow: 0 0 0 1px var(--accent), 0 0 22px 3px rgba(124,92,255,0.55); }
}
.leo-result-card .lrc-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(124,92,255,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lrc-spin 0.8s linear infinite;
}
@keyframes lrc-spin { to { transform: rotate(360deg); } }
/* B3: яркий, заметный текст процесса генерации */
.leo-result-card .lrc-pct { color: #fff; font-weight: 800; font-size: 15px; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.leo-result-card .lrc-label { color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .2px; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.leo-result-card .lrc-failed {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(239,68,68,0.08);
  color: var(--red);
  font-size: 13px; text-align: center; padding: 20px;
}
.lrc-failed-x { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(239,68,68,0.18); font-size: 20px; font-weight: 700; }
.lrc-failed-msg { color: var(--text); font-size: 13px; line-height: 1.45; max-width: 240px; }

/* Меню действий на result-карточке (появляется при hover) */
.lrc-actions {
  position: absolute;
  bottom: 8px; left: 8px; right: 8px;
  display: flex; gap: 6px; flex-wrap: wrap;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}
.leo-result-card:hover .lrc-actions {
  opacity: 1;
  pointer-events: auto;
}
.lrc-act {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  white-space: nowrap;
}
.lrc-act:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.lrc-act > span:first-child { font-size: 13px; }
.lrc-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
}
.lrc-ico svg {
  width: 100%; height: 100%;
  stroke: currentColor;
}
.lrc-act-primary {
  background: var(--accent);
  border-color: var(--accent);
}
.lrc-act-primary:hover { background: var(--accent-2); }
.lrc-act-danger {
  margin-left: auto;
  padding: 6px 9px;
}
.lrc-act-danger:hover { background: var(--red); border-color: var(--red); }
.lrc-act-saved { background: var(--green) !important; border-color: var(--green) !important; }

.inspire-block { width: 100%; max-width: 1180px; margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--border); }
.inspire-title {
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-size: 32px;
  margin-bottom: 6px;
  text-align: center;
  color: var(--text);
}
.inspire-title .accent {
  background: linear-gradient(135deg, var(--accent-2), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.inspire-sub {
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 24px;
}
.inspire-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .inspire-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .inspire-grid { grid-template-columns: 1fr; } }

.inspire-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.2s;
}
.inspire-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

/* Единый формат превью 4:5 (Instagram-style) для inspire и trends */
.inspire-photo, .trend-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--bg-2);
  overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.inspire-photo img, .trend-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.trend-photo-empty { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.trend-photo-ico {
  font-size: 48px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  color: white;
}

/* Trend card — masonry-плитка (Leonardo Community Creations) */
.trend-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  display: block;
  background: var(--bg-2);
  transition: transform 0.15s, box-shadow 0.2s;
}
.trend-card:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,0.5); }
.trend-img { width: 100%; display: block; background: var(--bg-2); aspect-ratio: 4 / 5; object-fit: cover; }
video.trend-img { aspect-ratio: 4 / 5; object-fit: cover; }
.trend-img-empty { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; }
/* +30% высоты ТОЛЬКО для ленты готовых шаблонов */
.bp-track .trend-img, .bp-track video.trend-img, .bp-track .trend-img-empty { aspect-ratio: 4 / 6.5; }
.trend-img-empty span { font-size: 48px; color: #fff; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); }
/* Метка видео-работы — кружок-play по центру (верхний-правый угол отдан лайкам) */
.trend-vbadge { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); color: #fff; font-size: 16px; line-height: 1; border-radius: 50%; backdrop-filter: blur(4px); pointer-events: none; }

/* Лайки на карточке трендов/главной */
.trend-like { position: absolute; top: 8px; right: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); border: none; border-radius: 999px; padding: 5px 9px; color: #fff; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; transition: transform .12s ease, background .15s ease; }
.trend-like svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; }
.trend-like:hover { transform: scale(1.07); background: rgba(0,0,0,0.7); }
.trend-like:active { transform: scale(0.93); }
.trend-like.liked { background: rgba(255,59,92,0.95); }
.trend-like.liked svg { fill: #fff; stroke: #fff; }
.trend-seed { position: absolute; top: 40px; right: 8px; z-index: 4; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.25); border-radius: 50%; color: #fff; font-size: 12px; cursor: pointer; padding: 0; }
.trend-seed:hover { background: rgba(0,0,0,0.78); }
/* Метка для лендинга (владелец) — позиция ролика 1-8; акцент, когда метка стоит */
.trend-lprank { position: absolute; top: 72px; right: 8px; z-index: 4; min-width: 26px; height: 26px; padding: 0 6px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.25); border-radius: 13px; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.trend-lprank:hover { background: rgba(0,0,0,0.78); }
.trend-lprank.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Цена — крупная заметная плашка (чёрная заливка, белый жирный шрифт), всегда видна */
.trend-price { position: absolute; right: 9px; bottom: 9px; z-index: 3; background: #000; color: #fff; font-size: 17px; font-weight: 800; padding: 7px 14px; border-radius: 10px; line-height: 1; letter-spacing: -0.2px; font-variant-numeric: tabular-nums; box-shadow: 0 3px 12px rgba(0,0,0,0.55); }
/* Название стиля — всегда сверху, аккуратная типографика */
.trend-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding: 13px 13px 26px; background: linear-gradient(to bottom, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.30) 55%, rgba(0,0,0,0) 100%); pointer-events: none; }
.trend-top-title { color: #fff; font-weight: 800; font-size: 15.5px; line-height: 1.18; letter-spacing: 0.2px; text-shadow: 0 2px 12px rgba(0,0,0,0.65); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* D2: имя готового шаблона — аккуратной шапкой НАД картинкой (а не оверлеем) */
.trend-card-bp .trend-top { position: static; z-index: auto; padding: 9px 11px 7px; background: none; pointer-events: none; }
.trend-card-bp .trend-top-title { color: var(--text); font-size: 13.5px; line-height: 1.2; text-shadow: none; -webkit-line-clamp: 1; }
.trend-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.25) 38%, rgba(0,0,0,0) 62%);
  opacity: 0; transition: opacity 0.18s;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 12px;
}
.trend-card:hover .trend-ov { opacity: 1; }
.trend-ov-prompt {
  font-size: 12px; color: #fff; line-height: 1.4; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.trend-ov-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trend-ov-model { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.trend-ov-thumb { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.trend-ov-name { font-size: 11px; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend-ov-price { color: #fff; font-size: 11px; font-weight: 600; background: rgba(255,255,255,0.16); padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }

.inspire-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.inspire-prompt {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.inspire-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.inspire-model { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.inspire-model-thumb {
  width: 24px; height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.inspire-model-name {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inspire-use {
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
}

/* ===== Use cases (Применения a-la Leonardo Industries) ===== */
.use-hero { text-align: center; padding: 24px 16px 32px; }
.use-hero h1 { margin-bottom: 14px; color: var(--text); }
.use-hero h1 .accent {
  background: linear-gradient(135deg, var(--accent-2), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.use-hero-sub { font-size: 16px; color: var(--text-dim); max-width: 640px; margin: 0 auto; line-height: 1.6; }

/* Большие PRO-кнопки (auto-fit сетка, флагманские карточки) */
.use-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 18px;
}
@media (max-width: 900px) { .use-grid { grid-template-columns: 1fr; } }

.uc-pro {
  position: relative;
  display: flex; align-items: flex-start; gap: 20px;
  padding: 28px 28px 26px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  min-height: 200px;
}
.uc-pro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--uc-gradient);
  opacity: 0.08;
  transition: opacity 0.25s;
  z-index: 0;
}
.uc-pro:hover {
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.uc-pro:hover::before { opacity: 0.18; }

.uc-pro-glow {
  position: absolute;
  top: -40%; right: -20%;
  width: 60%; height: 200%;
  background: var(--uc-gradient);
  filter: blur(60px);
  opacity: 0.15;
  transition: opacity 0.3s;
  z-index: 0;
  pointer-events: none;
}
.uc-pro:hover .uc-pro-glow { opacity: 0.3; }

.uc-pro-icon {
  position: relative;
  z-index: 1;
  width: 72px; height: 72px;
  border-radius: 18px;
  background: var(--uc-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.uc-pro-content {
  position: relative; z-index: 1;
  flex: 1; min-width: 0;
}
.uc-pro-badge {
  display: inline-block;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #1a1a1a;
  border-radius: 4px;
  margin-bottom: 10px;
}
.uc-pro-title {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--text);
}
.uc-pro-short {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 16px;
}

.uc-pro-cta {
  display: inline-flex;
  align-items: center; gap: 6px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: background 0.2s, border-color 0.2s, gap 0.2s;
}
.uc-pro:hover .uc-pro-cta {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
  gap: 10px;
}
.uc-pro-arrow {
  transition: transform 0.2s;
}
.uc-pro:hover .uc-pro-arrow { transform: translateX(3px); }

/* Use detail (мини-лендинг) */
.use-back {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--text-dim);
  font-size: 13px;
}
.use-back:hover { color: var(--text); }

.ucd-hero {
  display: flex; gap: 24px; align-items: center;
  padding: 32px 28px;
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.ucd-icon-big {
  font-size: 64px;
  width: 100px; height: 100px;
  background: var(--bg-1);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.ucd-hero-text h1 {
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.02;
  font-size: 36px;
  margin-bottom: 8px;
  color: var(--text);
}
.ucd-hero-sub { font-size: 15px; color: var(--text); margin-bottom: 6px; }
.ucd-audience { color: var(--text-dim); font-size: 13px; }

.ucd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.ucd-col { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; }
.ucd-col h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; letter-spacing: -0.01em; }
.use-detail h2 { font-size: 18px; font-weight: 600; margin: 24px 0 12px; letter-spacing: -0.01em; }
.ucd-hint { color: var(--text-dim); font-size: 13px; margin-bottom: 12px; }

.ucd-bullets { list-style: none; padding: 0; }
.ucd-bullets li {
  padding: 6px 0 6px 22px;
  position: relative;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}
.ucd-bullets li::before {
  content: '✓';
  position: absolute; left: 0; top: 6px;
  color: var(--accent-2);
  font-weight: 700;
}

.ucd-models { display: flex; flex-direction: column; gap: 8px; }
.ucd-model {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
}
.ucd-model-name { font-weight: 500; font-size: 13px; }
.ucd-model-desc { color: var(--text-dim); font-size: 12px; }
.ucd-model-price { color: var(--gold); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }

.ucd-samples { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.ucd-sample {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ucd-sample:hover { border-color: var(--accent); background: var(--bg-2); }
.ucd-sample-text { font-size: 13px; color: var(--text); flex: 1; }
.ucd-sample-go { color: var(--accent-2); font-size: 12px; white-space: nowrap; }

.ucd-pro-banner {
  background: linear-gradient(135deg, rgba(124,92,255,0.15), rgba(255,159,67,0.08));
  border: 1px solid rgba(124,92,255,0.3);
  border-radius: var(--radius);
  padding: 20px;
  margin: 24px 0;
}
.ucd-pro-title { font-weight: 600; color: var(--accent-2); margin-bottom: 6px; }
.ucd-pro-banner p { color: var(--text-dim); font-size: 13px; line-height: 1.6; }

.ucd-cta { display: flex; gap: 10px; margin-top: 28px; }

/* ===== Sidebar nav badges (new/soon) ===== */
.nav-badge-new {
  background: linear-gradient(135deg, var(--green), #65a30d);
  color: #0a3622;
}
.nav-badge-soon {
  background: linear-gradient(135deg, var(--text-faint), var(--text-dim));
  color: var(--text);
  text-transform: lowercase;
  letter-spacing: 0.3px;
}

/* ===== PRO uses — состояние «скоро» ===== */
.uc-pro-soon .uc-pro-icon {
  filter: grayscale(0.4);
}
.uc-pro-soon-tag {
  position: absolute;
  top: 14px; right: 16px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 999px;
  z-index: 2;
  backdrop-filter: blur(4px);
}

/* ===== Learn / Обучение ===== */
.learn-hero {
  background: linear-gradient(135deg, rgba(124,92,255,0.10), rgba(255,159,67,0.05));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  margin-bottom: 24px;
  text-align: center;
}
.learn-hero h2 {
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  font-size: 32px;
  margin-bottom: 8px;
  color: var(--text);
}
.learn-hero h2 .accent {
  background: linear-gradient(135deg, var(--accent-2), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.learn-hero p { color: var(--text-dim); font-size: 14px; }

.learn-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }

.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.learn-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.15s, transform 0.15s;
  cursor: pointer;
}
.learn-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.learn-soon { opacity: 0.78; }
.learn-soon:hover { opacity: 1; }
.learn-soon-tag {
  position: absolute;
  top: 12px; right: 12px;
  padding: 3px 9px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 999px;
  z-index: 2;
  backdrop-filter: blur(4px);
}

.learn-thumb {
  height: 132px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background: linear-gradient(135deg, rgba(124,92,255,0.30), rgba(170,120,255,0.08));
  border-bottom: 1px solid var(--border);
}
.learn-thumb-label {
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-weight: 800; font-size: 30px; letter-spacing: -0.5px; line-height: 1.05;
  text-transform: uppercase; text-align: center; color: rgba(255,255,255,0.94);
  padding: 0 14px; text-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.learn-thumb-ico { font-size: 44px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); color: #fff; }

.learn-body { padding: 14px 16px 18px; }
.learn-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.learn-title {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  line-height: 1.3;
  color: var(--text);
}
.learn-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ===== Films / Stories (PRO placeholder) ===== */
.nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #1a1a1a;
  border-radius: 3px;
  vertical-align: middle;
}

.films-hero {
  background: linear-gradient(135deg, rgba(124,92,255,0.18), rgba(255,159,67,0.08));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  margin-bottom: 32px;
  text-align: center;
}
.films-badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  color: #1a1a1a;
  border-radius: 4px;
}
.films-hero h1 {
  margin-bottom: 14px;
  color: var(--text);
  background: linear-gradient(135deg, var(--accent-2), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.films-sub { font-size: 16px; color: var(--text-dim); max-width: 640px; margin: 0 auto 28px; line-height: 1.6; }

.films-cta {
  display: flex; gap: 10px;
  max-width: 720px;
  margin: 0 auto;
}
.films-cta input {
  flex: 1;
  background: var(--bg-1);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  color: var(--text);
  font-size: 14px;
}
.films-cta input:focus { border-color: var(--accent); outline: none; }
.films-cta-hint { margin-top: 12px; color: var(--text-faint); font-size: 12px; }

.films-pipeline h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em; }

.films-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.films-step {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  position: relative;
}
.fs-num {
  position: absolute;
  top: 14px; right: 16px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.fs-title { font-weight: 600; margin-bottom: 6px; }
.fs-desc { color: var(--text-dim); font-size: 13px; line-height: 1.5; padding-right: 30px; }

.films-prices {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.films-price {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  position: relative;
}
.films-price-pop {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(124,92,255,0.08), transparent);
}
.fp-tag {
  display: inline-block;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.films-price-pop .fp-tag { color: var(--accent-2); }
.fp-price { font-size: 28px; font-weight: 700; color: var(--gold); margin-bottom: 8px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.fp-desc { color: var(--text-dim); font-size: 13px; line-height: 1.5; }

/* ===== Scrollbars ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* ===== Trend / Community detail modal ===== */
/* ===== Trend lightbox (Leonardo-style) ===== */
.td-lightbox .td-close { position: absolute; top: 16px; right: 16px; z-index: 6; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; width: 34px; height: 34px; line-height: 1; }
.td-lb { display: flex; width: 96vw; max-width: 1400px; height: 90vh; background: var(--bg-1); border-radius: 14px; overflow: hidden; position: relative; }
.td-strip { width: 86px; flex-shrink: 0; overflow-y: auto; padding: 10px 9px; display: flex; flex-direction: column; gap: 8px; background: #0a0a0c; }
.td-thumb { width: 68px; height: 68px; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; background: var(--bg-2); }
.td-thumb img, .td-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-thumb.active { border-color: var(--accent); }
.td-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.td-nav:hover { background: rgba(0,0,0,.8); }
.td-prev { left: 98px; }
.td-next { right: 360px; }
.td-media { flex: 1; background: #0a0a0c; display: flex; align-items: center; justify-content: center; min-width: 0; }
.td-media img, .td-media video { max-width: 100%; max-height: 90vh; object-fit: contain; display: block; }
.td-side { width: 340px; flex-shrink: 0; padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; background: var(--bg-1); }
.td-prompt-label { font-size: 12px; color: var(--text-dim); font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.td-copy { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; min-width: 24px; height: 22px; color: var(--text-dim); cursor: pointer; font-size: 12px; }
.td-copy:hover { color: var(--text); }
.td-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.td-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text); background: var(--bg-2); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; }
.td-chip-ico { width: 16px; height: 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; }

/* Монохромные мини-лого моделей: белая буква бренда на тёмном квадрате */
.lmt-thumb, .lms-card-thumb, .td-chip-ico, .trend-ov-thumb, .trend-model-thumb, .ht-model-thumb, .pst-mthumb, .td-model-thumb {
  color: #fff; font-weight: 800; letter-spacing: 0; text-shadow: none;
}
.td-side-head .td-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--accent); background: var(--bg-2); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.td-side-head h3 { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.3; }
.td-label { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; }
.td-source { padding: 14px; background: var(--bg-2); border-radius: 12px; }
.td-source-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.td-source-thumbs img { width: 74px; height: 74px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); display: block; }
.td-source-hint { font-size: 12px; color: var(--text-dim); margin-top: 10px; line-height: 1.4; }
.td-meta .td-model { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); margin-bottom: 14px; }
.td-meta .td-model .td-model-thumb { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.td-prompt { font-size: 13px; line-height: 1.5; color: var(--text-dim); background: var(--bg-2); padding: 12px 14px; border-radius: 10px; max-height: 150px; overflow-y: auto; white-space: pre-wrap; }
.td-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.td-actions .td-use { width: 100%; }
.td-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
.td-actions-row .btn-secondary { flex: 1 1 calc(50% - 4px); min-width: 120px; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.td-actions-row .btn-secondary[hidden] { display: none; }
/* Community badge on trend cards */
.trend-card { position: relative; }
.trend-card .ht-badge { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; backdrop-filter: blur(4px); }
@media (max-width: 920px) {
  .td-lb { flex-direction: column; height: 94vh; }
  .td-strip { flex-direction: row; width: 100%; height: 74px; padding: 8px; }
  .td-side { width: 100%; flex: 1; }
  .td-prev, .td-next { display: none; }
  .td-media { min-height: 38vh; }
  .td-media img, .td-media video { max-height: 50vh; }
  /* G2: видная кнопка «Закрыть» — СЛЕВА вверху, крупная, поверх всего */
  .td-lightbox .td-close { top: 12px !important; left: 12px !important; right: auto !important; z-index: 60 !important; width: 46px !important; height: 46px !important; font-size: 28px !important; background: rgba(0,0,0,.82) !important; color: #fff !important; box-shadow: 0 2px 14px rgba(0,0,0,.6) !important; display: flex !important; align-items: center; justify-content: center; }
}

/* ===== Прогресс генерации ===== */
.lrc-pbar { width: 72%; max-width: 160px; height: 5px; background: rgba(255,255,255,0.14); border-radius: 999px; overflow: hidden; margin: 10px 0 5px; }
.lrc-pfill { height: 100%; width: 2%; background: var(--accent); border-radius: 999px; transition: width 0.8s linear; }
.lrc-pct { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ===== Inline AI improve panel (без модалки) ===== */
.prompt-improve-panel { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.prompt-improve-panel .pip-head { font-size: 13px; color: var(--text-dim); }
.prompt-improve-panel .pip-label { font-size: 12px; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.prompt-improve-panel .pip-text { font-size: 13px; line-height: 1.5; color: var(--text); margin-bottom: 10px; white-space: pre-wrap; max-height: 160px; overflow-y: auto; }
.prompt-improve-panel .pip-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.prompt-improve-panel .pip-btn { padding: 8px 14px; border-radius: 8px; font-size: 13px; background: var(--bg-3); color: var(--text); cursor: pointer; border: 1px solid var(--border); }
.prompt-improve-panel .pip-btn:hover { background: var(--bg-1); }
.prompt-improve-panel .pip-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ===== Mask editor (Кисть / Ластик) ===== */
.modal-mask { max-width: 760px; width: 94vw; }
.mask-body { display: flex; flex-direction: column; gap: 12px; }
.mask-hint { font-size: 13px; color: var(--text-dim); line-height: 1.4; }
.mask-stage { position: relative; display: flex; justify-content: center; align-items: center; background: #0a0a0c; border-radius: 10px; overflow: hidden; min-height: 200px; }
.mask-stage img { max-width: 100%; max-height: 58vh; display: block; user-select: none; -webkit-user-drag: none; }
.mask-stage canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: .5; cursor: crosshair; touch-action: none; }
.mask-controls { display: flex; align-items: center; gap: 14px; }
.mask-brush-lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); flex: 1; }
.mask-brush-lbl input { flex: 1; }
.mask-prompt-wrap input { width: 100%; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 14px; }
.mask-actions { display: flex; }
.mask-actions .btn-primary { width: 100%; }

/* ===== Seedance мультимодальные референсы (@-теги) ===== */
.seed-ref-group { margin-bottom: 12px; }
.seed-ref-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.seed-ref-name { font-size: 12px; font-weight: 600; color: var(--text); }
.seed-ref-add { font-size: 12px; padding: 3px 12px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--accent-2); cursor: pointer; }
.seed-ref-add:hover { border-color: var(--accent-2); background: rgba(163,133,255,0.08); }
.seed-ref-count { font-size: 11px; color: var(--text-faint); margin-left: auto; }
.seed-ref-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.seed-ref-chips:empty { display: none; }
.seed-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--border); cursor: pointer; transition: border-color .12s; }
.seed-chip:hover { border-color: var(--accent-2); }
/* Чип загрузки (видео/фото грузится) — спиннер + % */
.seed-chip-uploading { cursor: default; border-color: var(--accent); }
.seed-chip-uploading .seed-chip-tag { color: var(--accent); font-variant-numeric: tabular-nums; }
.seed-spin { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--accent); border-radius: 50%; animation: seed-spin .7s linear infinite; }
@keyframes seed-spin { to { transform: rotate(360deg); } }
/* Кнопка видео-референса в процессе загрузки — пульсация */
.leo-video-ref.uploading { border-color: var(--accent); animation: vref-pulse 1.1s ease-in-out infinite; }
@keyframes vref-pulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
.seed-chip-thumb { width: 28px; height: 28px; border-radius: 6px; background-size: cover; background-position: center; background-color: rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.seed-chip-tag { font-size: 12px; font-weight: 600; color: var(--accent-2); }
.seed-chip-rm { border: none; background: transparent; color: var(--text-faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.seed-chip-rm:hover { color: var(--red); }

/* Курсор-кружок кисти/ластика — показывает реальный диаметр */
.mask-cursor { position: fixed; pointer-events: none; border: 2px solid rgba(255,60,60,0.95); border-radius: 50%; transform: translate(-50%, -50%); display: none; z-index: 100000; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.55); }

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ (≤760px) — только overrides, десктоп не трогаем.
   Сайдбар → выезжающая шторка (drawer) + гамбургер. Контент на всю ширину.
   До 08.06 viewport был залочен width=1280 → эти и существующие @media не срабатывали.
   ============================================================ */
.mobile-menu-btn { display: none; position: fixed; top: 8px; left: 8px; z-index: 18;
  width: 42px; height: 42px; align-items: center; justify-content: center;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font-size: 20px; line-height: 1; }
.mobile-backdrop { display: none; }

@media (max-width: 760px) {
  /* Контент на всю ширину (фикс-сайдбар больше не отжимает; боковой воздух даёт .route) */
  .main, body.sidebar-mini .main { margin-left: 0; padding-top: 54px; padding-left: 0; padding-right: 0; }

  /* Сайдбар — drawer слева, по умолчанию спрятан */
  .sidebar, .sidebar.mini { width: 270px; transform: translateX(-100%);
    transition: transform .25s ease; z-index: 30; box-shadow: 0 0 50px rgba(0,0,0,.6); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-toggle { display: none; }

  /* В drawer возвращаем полные подписи (отменяем mini-сжатие — зеркало селекторов mini) */
  .sidebar.mini .logo-text,
  .sidebar.mini .nav-item > span:not(.ico):not(.nav-badge),
  .sidebar.mini .nav-badge,
  .sidebar.mini .balance > span:not(.balance-icon),
  .sidebar.mini .balance-topup,
  .sidebar.mini .username { display: revert; }
  .sidebar.mini .nav-item { justify-content: flex-start; padding: 12px 18px; gap: 12px; border-radius: 0; }
  .sidebar.mini .logo { justify-content: flex-start; padding: 0 18px 16px; }
  .sidebar.mini .balance { padding: 10px 14px; justify-content: space-between; }
  .sidebar.mini .user { justify-content: flex-start; padding: 8px 14px; }

  /* Гамбургер + затемнение */
  .mobile-menu-btn { display: flex; }
  .mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 25; }
  body.sidebar-open .mobile-backdrop { display: block; }

  /* Отступы и тач-цели */
  .route { padding-left: 14px; padding-right: 14px; }
  .nav-item { font-size: 15px; }

  /* Generate-раздел (Фото/Видео): настройки + работа стекаются в одну колонку.
     minmax(0,1fr) + min-width:0 — иначе 1fr не ужимает контент уже его естественной ширины. */
  .leo-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; min-height: auto; }
  .leo-settings, .leo-main { min-width: 0; }
  .leo-settings { position: static; }

  /* Поповер выбора модели — на всю ширину телефона */
  .leo-model-slider,
  body.sidebar-mini .leo-model-slider {
    left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; }

  /* Модалки на всю ширину телефона */
  .modal-card, .modal-box, .qa-modal, .train-modal-card { max-width: 96vw !important; width: 96vw !important; }
}

/* ===== Профиль ===== */
#sidebar .user { cursor: pointer; border-radius: 10px; transition: background .15s; }
#sidebar .user:hover { background: var(--bg-2); }
.modal-profile { max-width: 420px; }
.prof-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.prof-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: #fff; flex: 0 0 auto; }
.prof-name { font-size: 18px; font-weight: 700; }
.prof-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.prof-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.prof-balance { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.prof-actions { display: flex; flex-direction: column; gap: 10px; }
.prof-btn { display: block; text-align: center; padding: 12px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); }
.prof-btn:hover { border-color: var(--accent); }
.prof-btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; }
.prof-btn-danger { color: var(--red); border-color: rgba(255,107,107,.3); }
.prof-btn-danger:hover { background: rgba(255,107,107,.1); border-color: var(--red); }

/* ===== Главная — герой в стиле Leonardo (фон + «Начни творить» + промпт) ===== */
.home-hero {
  position: relative; overflow: hidden; background: #14141a;
  padding: 72px 28px; min-height: 360px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.home-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-bg); background-size: cover; background-position: center 28%;
  opacity: .6;
}
.home-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 120% at 50% 38%, rgba(15,15,18,0.22) 0%, rgba(15,15,18,0.88) 78%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; max-width: 720px; text-align: center; }
.hero-brand { font-size: 14px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.hero-brand .accent { background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-title { font-size: 54px; font-weight: 800; letter-spacing: -1px; color: #fff; margin: 0 0 12px; text-shadow: 0 6px 36px rgba(0,0,0,.55); }
.home-hero .hero-sub { color: rgba(255,255,255,.85); font-size: 15px; margin-bottom: 22px; }
.hero-prompt { display: flex; gap: 8px; align-items: center; background: rgba(18,18,24,.66); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 6px 6px 6px 8px; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.hero-prompt input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font-size: 15px; padding: 12px 14px; }
.hero-prompt input::placeholder { color: rgba(255,255,255,.55); }
.hero-prompt .btn-primary { white-space: nowrap; border-radius: 11px; padding: 11px 22px; }
.home-hero .ai-consultant-body { margin-top: 14px; text-align: left; background: rgba(18,18,24,.72); }
.ai-consultant-body:empty { display: none; }
@media (max-width: 760px) { .hero-title { font-size: 34px; } .home-hero { padding: 46px 16px; min-height: 270px; } }

/* ===== Контролы трендов: тип (Все/Фото/Видео) + сортировка (Топ/Новые) ===== */
.trends-controls { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.trends-bar-sep { width: 1px; align-self: stretch; min-height: 26px; background: var(--border); margin: 0 4px; }
.seg-toggle { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-toggle .seg { padding: 7px 16px; font-size: 13px; font-weight: 600; color: var(--text-dim); border-radius: 8px; cursor: pointer; background: transparent; border: none; }
.seg-toggle .seg.active { background: var(--accent); color: #fff; }
.trends-sort { position: relative; }
.trends-sort-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--text); background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.trends-sort-btn .sort-caret { color: var(--text-dim); }
.trends-sort-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; padding: 6px; min-width: 190px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.trends-sort-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 9px 12px; font-size: 13px; color: var(--text); background: transparent; border: none; border-radius: 8px; cursor: pointer; }
.trends-sort-menu button:hover { background: var(--bg-2); }
.trends-sort-menu button.active { color: var(--accent-2); }
.trends-sort-menu .sort-hint { font-size: 11px; color: var(--text-faint); }

/* ===== Сайдбар «парит» над фоном ===== */
.sidebar { box-shadow: 6px 0 30px rgba(0,0,0,0.45); }

/* ===== Подсказка-стрелка на сайдбар (только на главной) ===== */
.sidebar-hint { position: fixed; left: calc(var(--sidebar-w) + 10px); top: 84px; z-index: 9; display: none; align-items: center; gap: 8px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 20px rgba(124,92,255,.5); animation: hintBounce 1.4s ease-in-out infinite; pointer-events: none; }
body.show-sidebar-hint .sidebar-hint { display: inline-flex; }
body.sidebar-mini .sidebar-hint { left: calc(var(--sidebar-mini-w) + 10px); }
.sidebar-hint-arrow { font-size: 14px; }
@keyframes hintBounce { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-7px); } }
@media (max-width: 760px) { .sidebar-hint { display: none !important; } }

/* ===== Боковая панель «парит» над фоном (Leonardo, десктоп) ===== */
@media (min-width: 761px) {
  .sidebar {
    top: 14px; left: 14px; bottom: 14px; height: auto;
    border: 1px solid var(--border); border-radius: 18px;
    box-shadow: 0 22px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
  }
  .main { margin-left: calc(var(--sidebar-w) + 28px); }
  body.sidebar-mini .main { margin-left: calc(var(--sidebar-mini-w) + 28px); }
  /* Пункты меню — скруглённые «кнопки», активная подсвечена (как у Leonardo) */
  .nav-item { margin: 2px 10px; border-radius: 11px; border-left: none; padding: 10px 12px; }
  .nav-item.active { background: var(--bg-2); border-left: none; }
  .nav-item.active .ico { color: var(--accent-2); }
  .sidebar.mini .nav-item { margin: 2px 8px; }
}

/* ===== Фон-картинка за всем (включая сайдбар) — как Leonardo, только на главной ===== */
.main { position: relative; z-index: 1; }
.page-bg { display: none; position: absolute; top: 0; left: 0; right: 0; height: 540px; z-index: 0; background-image: var(--page-bg); background-size: cover; background-position: center 22%; }
.page-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,18,0.40) 0%, rgba(14,14,18,0.70) 55%, var(--bg) 100%); }
body.home-bg .page-bg { display: block; }
body.home-bg .home-hero { background: transparent; }
body.home-bg .home-hero::before { display: none; }
body.home-bg .home-hero::after { background: radial-gradient(120% 120% at 50% 40%, rgba(15,15,18,0) 0%, rgba(15,15,18,0.30) 82%); }
@media (min-width: 761px) {
  body.home-bg .sidebar { background: rgba(18,18,24,0.80); backdrop-filter: blur(16px); }
}

/* ===== Подсветка рабочей зоны (Фото/Видео/Музыка) ===== */
.nav-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); padding: 10px 18px 4px; }
.nav-sep { height: 1px; background: var(--border); margin: 8px 14px; }
.nav-item.nav-create .ico { color: var(--accent-2); }
.sidebar.mini .nav-label, .sidebar.mini .nav-sep { display: none; }

/* ===== Профи: Склейка видео ===== */
.stitch-title {
  font-family: 'Unbounded', 'Manrope', sans-serif;
  font-size: 40px; font-weight: 800; letter-spacing: -0.5px;
  background: linear-gradient(135deg, #fff 0%, var(--accent-2) 120%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.stitch-sub { color: var(--text-dim); font-size: 14px; max-width: 680px; margin: -6px 0 22px; line-height: 1.55; }
.stitch-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.stitch-counter { color: var(--text-faint); font-size: 13px; }
.btn-ghost { padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--text); background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.btn-ghost:hover { background: var(--bg-3); }

.stitch-track { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 18px; min-height: 70px; }
.stitch-empty { color: var(--text-faint); font-size: 14px; padding: 26px; border: 1px dashed var(--border); border-radius: 14px; width: 100%; text-align: center; }
.stitch-clip { position: relative; flex: 0 0 auto; width: 150px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: #000; }
.stitch-clip video { width: 150px; height: 200px; object-fit: cover; display: block; }
.stitch-num { position: absolute; top: 8px; left: 8px; z-index: 2; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.stitch-clip-acts { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 4px; padding: 6px; background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0)); }
.stitch-clip-acts button { flex: 1; height: 28px; border: none; border-radius: 7px; background: rgba(255,255,255,.14); color: #fff; font-size: 14px; cursor: pointer; }
.stitch-clip-acts button:hover:not(:disabled) { background: var(--accent); }
.stitch-clip-acts button:disabled { opacity: .3; cursor: not-allowed; }
.stitch-clip-acts [data-rm]:hover { background: var(--red); }

.stitch-actions { display: flex; align-items: center; gap: 18px; margin: 8px 0 24px; flex-wrap: wrap; }
.stitch-go { padding: 14px 30px; font-size: 15px; }
.stitch-status { flex: 1; min-width: 240px; }
.stitch-bar { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.stitch-bar-fill { height: 100%; width: 2%; background: var(--accent); border-radius: 999px; transition: width .2s ease; }
.stitch-status-text { margin-top: 7px; font-size: 13px; color: var(--text-dim); }

.stitch-result { max-width: 460px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 16px; padding: 18px; }
.stitch-result h3 { font-family: 'Unbounded', 'Manrope', sans-serif; font-size: 16px; margin-bottom: 12px; }
.stitch-result video { width: 100%; border-radius: 12px; background: #000; display: block; }
.stitch-result-acts { display: flex; gap: 10px; margin-top: 14px; }
.stitch-save-hint { margin: 10px 2px 0; font-size: 12px; line-height: 1.45; color: var(--gold, #e0b341); }

/* Пикер из галереи */
.stitch-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.72); display: none; align-items: center; justify-content: center; padding: 20px; }
.stitch-picker-card { width: 100%; max-width: 920px; max-height: 88vh; display: flex; flex-direction: column; background: var(--bg-1); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.stitch-ph-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.stitch-ph-head h3 { font-family: 'Unbounded', 'Manrope', sans-serif; font-size: 17px; }
.stitch-ph-x { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--bg-2); color: var(--text-dim); font-size: 17px; cursor: pointer; }
.stitch-ph-x:hover { background: var(--bg-3); color: var(--text); }
.stitch-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: 18px; overflow-y: auto; }
.stitch-pick { position: relative; border-radius: 12px; overflow: hidden; border: 2px solid transparent; background: #000; cursor: pointer; }
.stitch-pick video { width: 100%; height: 180px; object-fit: cover; display: block; }
.stitch-pick.sel { border-color: var(--accent); }
.stitch-pick-check { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; opacity: 0; transition: opacity .15s; }
.stitch-pick.sel .stitch-pick-check { opacity: 1; background: var(--accent); }
.stitch-pick-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 8px 7px; font-size: 11px; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,0)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stitch-picker-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--border); }
.stitch-picker-foot span { color: var(--text-dim); font-size: 14px; }

@media (max-width: 760px) {
  .stitch-title { font-size: 30px; }
  .stitch-clip, .stitch-clip video { width: 120px; }
  .stitch-clip video { height: 160px; }
}

/* ===== Профи: хаб инструментов ===== */
.pro-sub { color: var(--text-dim); font-size: 15px; max-width: 680px; margin: -4px 0 26px; line-height: 1.55; }
.pro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.pro-tool { position: relative; display: flex; flex-direction: column; background: var(--bg-1); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.pro-tool-active { cursor: pointer; }
.pro-tool-active:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 18px 44px rgba(124,92,255,.28); }
.pro-tool-soon { opacity: .62; }
.pro-tool-preview { height: 150px; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, rgba(124,92,255,.30), rgba(170,120,255,.10)); border-bottom: 1px solid var(--border); }
.pro-prev-clip { width: 40px; height: 54px; border-radius: 7px; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.pro-prev-arrow { color: #fff; font-size: 22px; opacity: .8; }
.pro-prev-film { width: 48px; height: 54px; border-radius: 7px; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; box-shadow: 0 4px 14px rgba(124,92,255,.6); }
.pro-prev-alt { background: linear-gradient(135deg, rgba(120,120,140,.22), rgba(80,80,100,.10)); }
.pro-prev-emoji { font-size: 52px; filter: grayscale(.2); }
.pro-tool-info { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pro-tool-title { font-family: 'Unbounded', 'Manrope', sans-serif; font-size: 34px; font-weight: 800; line-height: 1.0; letter-spacing: -0.5px; color: #fff; }
.pro-tool-desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.5; flex: 1; }
.pro-tool-cta { color: var(--accent-2); font-weight: 700; font-size: 14px; }
.pro-soon { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #fff; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.18); padding: 4px 10px; border-radius: 999px; }
@media (max-width: 760px) { .pro-tool-title { font-size: 30px; } }

/* ===== Лайтбокс: «Продолжить видео» ===== */
.td-continue { width: 100%; margin-top: 10px; }
.td-continue-hint { margin: 8px 2px 2px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); background: rgba(124,92,255,.10); border: 1px solid rgba(124,92,255,.22); border-radius: 10px; padding: 9px 12px; }

/* ===== Музыка: переключатель режимов (Песня / Озвучка / Свой голос) ===== */
.music-top-modes { display: flex; gap: 8px; margin: 0 0 22px; flex-wrap: wrap; }
.mtm { position: relative; padding: 9px 18px; font-size: 14px; font-weight: 600; color: var(--text-dim); background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.mtm.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.mtm-soon { margin-left: 7px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: rgba(255,255,255,.18); padding: 2px 6px; border-radius: 6px; vertical-align: middle; }
.music-panel { display: none; }
.route[data-route="music"].mode-tts .leo-main > .m-block,
.route[data-route="music"].mode-tts .leo-main > .m-generate-row,
.route[data-route="music"].mode-tts .leo-main > #gen-result-music { display: none; }
.route[data-route="music"].mode-tts #music-panel-tts { display: block; }
.route[data-route="music"].mode-clone .leo-main > .m-block,
.route[data-route="music"].mode-clone .leo-main > .m-generate-row,
.route[data-route="music"].mode-clone .leo-main > #gen-result-music { display: none; }
.route[data-route="music"].mode-clone #music-panel-clone { display: block; }
.route[data-route="music"].mode-tts .song-only,
.route[data-route="music"].mode-clone .song-only { display: none; }
/* «Мои песни» (#gen-result-music) при песнях получает инлайн display:block — на вкладках Озвучка/Свой голос
   перебивал бы CSS, поэтому скрываем с !important (иначе списки песен и озвучек видны вместе). */
.route[data-route="music"].mode-tts .leo-main > #gen-result-music,
.route[data-route="music"].mode-clone .leo-main > #gen-result-music { display: none !important; }
.music-ai-btn { margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; }
.clone-soon { text-align: center; padding: 60px 24px; border: 1px dashed var(--border); border-radius: 16px; }
.clone-soon-icon { font-size: 54px; margin-bottom: 14px; }
.clone-soon h2 { font-family: 'Unbounded','Manrope',sans-serif; font-size: 24px; margin-bottom: 10px; }
.clone-soon p { color: var(--text-dim); font-size: 14px; max-width: 460px; margin: 0 auto 16px; line-height: 1.5; }
.clone-soon-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #fff; background: var(--accent); padding: 5px 14px; border-radius: 999px; }

/* ===== Музыка: список песен/озвучки строками ===== */
.song-list-head { font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; margin: 10px 2px 12px; }
.song-row { display: flex; flex-direction: column; padding: 10px 12px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; }
.song-row-top { display: flex; align-items: center; gap: 12px; width: 100%; }
.song-row-acts { flex: 0 0 auto; display: flex; gap: 6px; }
.song-row-acts button, .song-row-acts .song-act-link { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-dim); font-size: 15px; cursor: pointer; text-decoration: none; }
.song-row-acts button:hover, .song-row-acts .song-act-link:hover { border-color: var(--accent); color: var(--text); }
.song-row-acts button.done { color: var(--gold); border-color: var(--gold); }
.song-row-acts .song-act-del { color: #d9737d; border-color: rgba(217,115,125,.35); }
.song-row-acts .song-act-del:hover { border-color: #ff6b6b; color: #ff6b6b; background: rgba(255,107,107,.10); }
.song-row-acts .song-act-del svg { display: block; }
.m-block #tts-text {
  width: 100%; min-height: 140px; background: var(--bg-2);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; font-size: 15px; line-height: 1.65; color: var(--text); resize: vertical;
}
.m-block #tts-text:focus { background: var(--bg-3); border-color: var(--accent); outline: none; }
.m-block #tts-text::selection { background: var(--accent); color: #fff; }
.tts-ai-row { margin-top: 10px; }
.tts-ai-row .prompt-ctrl-small { display: inline-flex; align-items: center; gap: 6px; }
.tts-emo-block { margin-top: 12px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tts-emo-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; }
.tts-emo-title svg { color: var(--accent); flex: 0 0 auto; }
.tts-emo-hint { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 10px; }
.tts-emo-hint b { color: var(--text); font-weight: 500; }
.tts-emo-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tts-emo-row button { font-size: 12.5px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-1); color: var(--text-dim); cursor: pointer; font-family: inherit; }
.tts-emo-row button:hover { border-color: var(--accent); color: var(--text); background: var(--bg-3); }
.song-row-ico { width: 38px; height: 38px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 18px; }
.song-row-main { flex: 1; min-width: 0; }
.song-row-title { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-row-meta { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.song-row-audio { width: 100%; height: 40px; margin-top: 10px; }
.song-row-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-dim); }
.song-row-status.err { color: var(--red); }
.song-spin { width: 13px; height: 13px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: songspin .8s linear infinite; }
@keyframes songspin { to { transform: rotate(360deg); } }
.audio-gallery-list { grid-column: 1 / -1; max-width: 760px; }
/* аудио-плеер на всю ширину строки на всех экранах */

/* ===== Гостевой режим (превью без входа) ===== */
.guest-mode #balance-value, .guest-mode .user { cursor: pointer; }
#guest-banner {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 14px;
  background: rgba(23,24,28,0.97); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  max-width: calc(100vw - 24px);
}
#guest-banner .gb-txt { font-size: 13px; color: var(--text-dim); }
#guest-banner .gb-btn {
  flex: 0 0 auto; border: none; cursor: pointer; border-radius: 9px;
  padding: 9px 14px; font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}
.auth-wall-card {
  width: 100%; max-width: 420px; background: var(--bg-1);
  border: 1px solid var(--border); border-radius: 18px; padding: 30px 26px;
  text-align: center; box-shadow: var(--shadow);
}
.auth-wall-card .aw-title { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.auth-wall-card .aw-sub { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin-bottom: 22px; }
.auth-wall-card .aw-btn-primary {
  width: 100%; border: none; cursor: pointer; border-radius: 12px;
  padding: 14px; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark)); margin-bottom: 10px;
}
.auth-wall-card .aw-btn-ghost {
  width: 100%; border: 1px solid var(--border); background: none; cursor: pointer;
  border-radius: 12px; padding: 12px; font-size: 14px; color: var(--text-dim);
}
@media (max-width: 640px) {
  #guest-banner { flex-direction: column; gap: 8px; bottom: 10px; text-align: center; padding: 12px; }
}

/* ===== Анимация «AI думает» (вместо ✨ при улучшении промпта) ===== */
.pip-think { display: inline-flex; gap: 4px; align-items: center; margin-right: 9px; vertical-align: middle; }
.pip-think i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; animation: pipThink 1s ease-in-out infinite; }
.pip-think i:nth-child(2) { animation-delay: .15s; }
.pip-think i:nth-child(3) { animation-delay: .3s; }
@keyframes pipThink { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* ===== Музыка: переключатель «ИИ напишет / строго по тексту» ===== */
.music-mode-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.m-mode-label { font-size: 13px; color: var(--text-dim); margin-right: 2px; }

/* ===== Выбор модели: крупная стрелка + подсказка-пульс ===== */
.leo-model-trigger .lmt-chevron { font-size: 30px; font-weight: 700; line-height: 1; color: var(--accent); transition: transform .15s; }
.leo-model-trigger:hover .lmt-chevron { transform: translateX(3px); }
body.show-model-hint .leo-model-trigger { animation: lmtPulse 2.2s ease-in-out infinite; }
body.show-model-hint .leo-model-trigger .lmt-chevron { animation: lmtNudge 1.2s ease-in-out infinite; }
@keyframes lmtPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(124,92,255,0); border-color: var(--border); } 50% { box-shadow: 0 0 0 3px rgba(124,92,255,.20); border-color: var(--accent); } }
@keyframes lmtNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
/* плашка 18+ на триггере модели */
.lmt-adult { display: inline-block; font-size: 10px; font-weight: 800; line-height: 1; color: #fff; background: var(--red); border-radius: 5px; padding: 3px 5px; margin-left: 6px; vertical-align: middle; }

/* ===== Видео-уроки (Обучение + ссылки из Профи) ===== */
.learn-playable { cursor: pointer; transition: transform .15s, border-color .15s; }
.learn-playable:hover { transform: translateY(-3px); border-color: var(--accent); }
.learn-thumb { position: relative; }
.learn-play-badge { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(0,0,0,.62); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px); white-space: nowrap; }
.lesson-backdrop { align-items: center; justify-content: center; }
.lesson-modal-card { width: 100%; max-width: 860px; max-height: 92vh; overflow-y: auto; background: var(--bg-1); border: 1px solid var(--border); border-radius: 18px; padding: 22px; position: relative; }
.lesson-modal-x { position: absolute; top: 10px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font-size: 17px; cursor: pointer; }
.lesson-modal-title { font-size: 20px; font-weight: 800; margin: 2px 44px 14px 2px; }
.lesson-modal-video-wrap { background: #000; border-radius: 12px; overflow: hidden; }
.lesson-modal-video-wrap video { width: 100%; max-height: 68vh; display: block; }
.lesson-modal-related { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lesson-rel-title { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.lesson-rel-link { background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 9px 13px; font-size: 13px; cursor: pointer; }
.lesson-rel-link:hover { border-color: var(--accent); color: var(--accent-2); }
.stitch-lessons { margin-top: -4px; }
.stitch-lesson-link { color: var(--accent-2); font-weight: 600; }
.stitch-lesson-link:hover { text-decoration: underline; }

/* ===================== МОИ ГЕРОИ (сохранённый персонаж) ===================== */
.heroes-sub { color: var(--text-dim); font-size: 14px; line-height: 1.55; max-width: 720px; margin: -6px 0 22px; }
.h4-opt { color: var(--text-faint); font-weight: 400; font-size: 13px; }
.hero-hint { margin-top: 14px; font-size: 13px; color: var(--text-dim); line-height: 1.5; }

.heroes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.hero-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s; }
.hero-card:hover { border-color: var(--border-hover); }
.hero-card-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hero-card-cover { position: relative; aspect-ratio: 1/1; background: var(--bg-2); }
.hero-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-card-badge { position: absolute; top: 8px; left: 8px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.hero-card-body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.hero-card-name { font-weight: 700; font-size: 15px; }
.hero-card-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-card-actions { margin-top: auto; display: flex; gap: 8px; align-items: center; padding-top: 6px; }
.hero-card-actions .hero-use { flex: 1; padding: 8px 10px; font-size: 13px; }
.hero-del { background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 9px; padding: 8px 10px; font-size: 12.5px; cursor: pointer; }
.hero-del:hover { border-color: #b3324a; color: #ff6b86; }

/* Кнопка «Герой» в панели промпта */
.prompt-ctrl-small.ctrl-hero { display: inline-flex; align-items: center; gap: 6px; }
.prompt-ctrl-small.ctrl-hero svg { width: 15px; height: 15px; }
.prompt-ctrl-small.ctrl-hero.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.prompt-ctrl-small.ctrl-hero.active svg { color: #fff; }
#ctrl-hero-label { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Пикер героя */
.modal-hero-picker { max-width: 560px; }
.hero-pick-sub { color: var(--text-dim); font-size: 13.5px; margin: 0 0 16px; }
.hero-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.hero-pick-tile { background: var(--bg-2); border: 1px solid var(--border); border-radius: 13px; padding: 0; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; align-items: center; transition: border-color .15s; color: var(--text); }
.hero-pick-tile:hover { border-color: var(--accent); }
.hero-pick-tile.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hpt-cover { width: 100%; aspect-ratio: 1/1; background: var(--bg-3); }
.hpt-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hpt-name { font-size: 13px; font-weight: 600; padding: 9px 8px; text-align: center; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-pick-add, .hero-pick-none { justify-content: center; min-height: 150px; }
.hero-pick-add .hpt-ico, .hero-pick-none .hpt-ico { font-size: 30px; color: var(--text-dim); margin-top: 36px; line-height: 1; }
.hero-pick-add:hover .hpt-ico { color: var(--accent-2); }

/* Кнопка удаления фото в превью создания героя */
.train-files-preview .tf { position: relative; }
.train-files-preview .tf-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: none; background: #1a1a1f; color: #fff; font-size: 14px; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.train-files-preview .tf-x:hover { background: #b3324a; }

/* Ряд категорий трендов (рендер из presets.js — только наполненные) */
.trends-cats { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: -8px 0 18px; }

/* Лайтбокс: быстрые действия своей работы (Повторить / В галерею / Поделиться) */
.td-own-row { display: flex; gap: 8px; }
.td-own-row[hidden] { display: none !important; }
.td-own-row .btn-secondary { flex: 1; padding: 10px 6px; font-size: 12.5px; white-space: nowrap; touch-action: manipulation; }

/* Плашка типа видео-модели в карточке выбора (текст→видео / фото→видео / …) */
.lms-mode { display: inline-block; margin: 8px 6px 2px 0; padding: 4px 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .3px; color: var(--accent-2); background: rgba(124,92,255,.12);
  border: 1px solid rgba(124,92,255,.3); border-radius: 999px; }
/* Заметный зелёный бейдж «оживляет фото» — сразу видно, какая модель превращает фото в видео */
.lms-mode-animate { color: #16a34a; background: rgba(22,163,74,.14); border-color: rgba(22,163,74,.4); }

/* Кнопка «Показать ещё» в лентах (мобайл-пагинация) */
.trends-more { grid-column: 1 / -1; margin: 10px 14px; padding: 13px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
.trends-more:hover { border-color: var(--accent); }
.trends-more .tm-rest { color: var(--text-faint); font-weight: 400; font-size: 12px; }

/* 3 быстрые кнопки под героем — только мобайл/мини-апп (на десктопе есть «С чего начать») */
.home-quick3 { display: none; }

/* Верхняя панель разделов создания (Фото/Видео/Музыка) — только мобайл */
.create-topbar { display: none; }

/* Спойлер «Все настройки» в панели (#image) — только мобайл */
.leo-all-toggle { display: none; }

/* ============================================================
   МОБИЛЬНАЯ ДОВОДКА (≤760px) — 10.06.2026
   1) Страница не «расплывается»: ни один элемент не распирает экран
      (в WebView Telegram/MAX любой overflow → страница зумится как десктоп).
   2) Ленты (Главная/Тренды/Галерея) — как Instagram: 3 квадрата в ряд,
      тонкие зазоры, от края до края, текст только по тапу в карточке.
   ============================================================ */
@media (max-width: 760px) {
  /* --- 1. Жёсткие границы экрана --- */
  html, body { overflow-x: hidden; }
  .main { overflow-x: hidden; }
  .route img, .route video, .route canvas, .route audio { max-width: 100%; }

  /* Старый 2-колоночный fallback → одна колонка */
  .gen-2col { grid-template-columns: 1fr; }

  /* Модалки: реальный класс .modal (старый override целил несуществующие классы) */
  .modal { width: 94vw !important; max-width: 94vw !important; max-height: 92vh; }

  /* Ряды управления переносим, а не выталкиваем за край */
  .gen-header { flex-wrap: wrap; gap: 10px; }
  .gen-header h1 { font-size: 22px; }
  .m-generate-row { flex-wrap: wrap; gap: 10px; }
  .m-generate-row .btn-primary { width: 100%; }
  .trends-controls { flex-wrap: wrap; gap: 8px; }
  .music-mode-row { gap: 6px; }
  .leo-results { grid-template-columns: 1fr; }

  /* Вкладки — горизонтальный свайп вместо распирания */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { white-space: nowrap; flex: 0 0 auto; }

  /* Категории трендов — одна строка со свайпом (как сторис), не разлетаются */
  .trends-cats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .trends-cats::-webkit-scrollbar { display: none; }
  .trends-cats .chip { white-space: nowrap; flex: 0 0 auto; }

  /* Герой «Начни творить» — тот же лого-стек, что «Тренды сообщества»:
     «Начни» крупно, «творить» акцент-градиентом под ним */
  .hero-title { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
  .hero-title .ht1-w1 { font-size: 175%; letter-spacing: .5px; }  /* 200% упиралось в края на 360px-экранах */
  .hero-title .ht1-w2 { background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

  /* 3 быстрые кнопки под героем: фото / видео / музыка */
  .home-quick3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 4px; }

  /* Верхняя панель разделов создания: только Фото | Видео | Музыка */
  .create-topbar:not([hidden]) { display: flex; position: fixed; top: 8px; left: 58px; right: 58px; z-index: 18;
    height: 42px; align-items: stretch; gap: 4px; padding: 4px;
    background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; }
  .create-topbar a { flex: 1; display: flex; align-items: center; justify-content: center;
    font-size: 13.5px; font-weight: 700; color: var(--text-dim); border-radius: 8px; }
  .create-topbar a.active { background: var(--accent); color: #fff; }
  /* E: баланс — маленький круглешок ₽ (тап → профиль), не заслоняет табы разделов */
  .balance-float { padding: 0; gap: 0; width: 42px; height: 42px; justify-content: center; top: 8px; right: 8px; }
  .balance-float .bf-cta, .balance-float #balance-float-value, .balance-float .bf-avatar, .balance-float .bf-low { display: none !important; }
  .balance-float .bf-money { gap: 0; }
  .balance-float .bf-ico { color: var(--accent); font-size: 18px; font-weight: 800; }
  /* F: промпт-бар (фото/видео) — поле в рамке, под ним только «AI улучшит» и «Очистить» в одну полосу */
  .prompt-text-zone { display: flex; flex-direction: column; }
  .prompt-text-zone #prompt-text { order: 1; border: 1.5px solid var(--accent); border-radius: 12px; }
  .prompt-text-zone .prompt-row-top { order: 2; gap: 8px; }
  .prompt-text-zone #prompt-quickset { order: 3; }
  .prompt-text-zone .prompt-quick { order: 4; }
  .prompt-text-zone .leo-model-set { order: 5; margin: 4px 0 0; }   /* модель-пикер поднят в промпт-зону над «Создать» */
  .prompt-text-zone .prompt-row-bottom { order: 6; }
  .leo-all-toggle { display: none !important; }   /* кнопка «⚙ Настройки» убрана (формат/качество/кол-во в быстрых кнопках) */
  .prompt-row-top #ctrl-hero, .prompt-row-top #ctrl-ai-en, .prompt-row-top #ctrl-model-faq, .prompt-row-top .prompt-row-spacer { display: none !important; }
  /* 3 кнопки в одну строку: AI улучшит | Очистить | Действия */
  .prompt-text-zone .prompt-row-top { flex-wrap: nowrap; }
  .prompt-text-zone .prompt-row-top > button { flex: 1 1 0; min-width: 0; justify-content: center; font-size: 12.5px; padding: 9px 6px; white-space: nowrap; }
  .prompt-text-zone #ctrl-quick { display: inline-flex; align-items: center; gap: 4px; }
  .prompt-quick .pq-toggle { display: none !important; }   /* дубль-тоггл заменён кнопкой «Действия» в строке */
  [data-leo-settings="image"] details.leo-advanced { display: none; }   /* «Дополнительно» в фото убрано на мобайле */
  /* Старый header раздела (← Назад / заголовок / Моя галерея) на мобиле не нужен —
     он оказывался посреди страницы, всё уехало в верхнюю панель */
  .generate-route .gen-header,
  .route[data-route="music"] .gen-header { display: none; }

  /* ФОТО+ВИДЕО, мобильный поток 2.0 (Leonardo-паттерн): промпт первым; панель
     настроек JS-ом переезжает ПОД промпт — видна большая кнопка «Выбрать модель»,
     остальные блоки (формат/качество/длительность/стиль) под спойлером. */
  .generate-route .leo-main > .leo-settings { margin-top: 10px; }
  /* «Настройки» сворачивают формат/качество/количество/стиль, НО кадры/референсы под
     модель ([data-vinput]) остаются видны — ими управляет video-inputs.js под модель. */
  .leo-settings.mob-collapsed .leo-set:not(.leo-model-set):not([data-vinput]),
  .leo-settings.mob-collapsed .leo-model-note,
  .leo-settings.mob-collapsed .leo-reset { display: none; }
  .leo-all-toggle { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px;
    margin-top: 10px; padding: 11px; background: var(--bg-3); border: 1px solid var(--border-hover);
    border-radius: 10px; color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; }
  .leo-all-toggle .lat-caret { color: var(--text-dim); }

  /* Компактная «Добавить фото» (была блоком ~110px → строка ~52px) */
  .prompt-photo-btn { flex-direction: row; align-items: center; justify-content: flex-start;
    min-height: 0; padding: 10px 12px; gap: 10px; }
  .ppb-icon { width: 28px; height: 28px; font-size: 18px; border-radius: 8px; box-shadow: none; flex: 0 0 auto; }
  .ppb-text { align-items: flex-start; text-align: left; }

  /* Лайтбокс работы: действия СРАЗУ под фото (на мобиле сайдбар уходит вниз —
     кнопки «Создать такое же / Доработать / Скачать…» были глубоко под промптом) */
  .td-side { display: flex; flex-direction: column; }
  .td-side .td-actions { order: -1; }
  .td-actions-row .btn-secondary { padding-top: 9px; padding-bottom: 9px; font-size: 12.5px; }

  /* Результаты: hover на таче нет — кнопки действий видны ВСЕГДА, панелью под фото
     (не оверлеем поверх — не закрывают картинку). Тап по фото = открыть на весь экран. */
  .lrc-actions { position: static; opacity: 1; pointer-events: auto;
    padding: 9px 8px; background: var(--bg-1); border-top: 1px solid var(--border); }
  .lrc-act { background: var(--bg-3); border-color: var(--border-hover); font-size: 11.5px; padding: 7px 10px; }
  .lrc-act-primary { background: var(--accent); border-color: var(--accent); }

  /* Зоны настроек — заметнее на тёмном фоне: обыватель должен видеть, где идёт выбор */
  .leo-settings { background: var(--bg-2); border-color: var(--border-hover); }
  .leo-settings .leo-set > label { color: var(--text); font-weight: 600; }
  .leo-model-trigger, .leo-style-trigger { background: var(--bg-3); }
  .m-block { background: var(--bg-2); border: 1px solid var(--border-hover); }

  /* Тренды на главной: явный разделитель от кнопок + заголовок по центру,
     «Тренды» вдвое крупнее (по ширине со «сообщества»), «Все шаблоны» убран */
  .home-trends { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); }
  .home-trends-head { justify-content: center; }
  .home-trends-all { display: none; }
  .home-trends-title { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.05; }
  .home-trends-title .ht-word1 { font-size: 200%; font-weight: 800; letter-spacing: .5px; }
  .home-trends-sub { text-align: center; }
  .home-trends .trends-controls { justify-content: center; }
  .hq3 { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px;
    background: var(--bg-1); border: 1px solid var(--border); border-radius: 14px; color: var(--text); }
  .hq3:active { border-color: var(--accent); background: var(--bg-2); }
  .hq3-ico { width: 26px; height: 26px; color: var(--accent-2); }
  .hq3-ico svg { width: 26px; height: 26px; }
  .hq3-t { font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.25; }

  /* Подсказка на меню: пульс гамбургера, пока юзер не открыл его первый раз */
  body.menu-hint .mobile-menu-btn { animation: mhPulse 1.6s ease-in-out infinite; border-color: var(--accent); }
  body.menu-hint .mobile-menu-btn::after { content: "меню"; position: absolute; left: calc(100% + 8px); top: 50%;
    transform: translateY(-50%); font-size: 11px; font-weight: 700; color: #fff; background: var(--accent);
    padding: 4px 9px; border-radius: 8px; white-space: nowrap; animation: mhTip 1.6s ease-in-out infinite; }

  /* Prompt-bar: компактная зона фото; ряд кнопок (Герой/AI улучшит/EN/…) переносится, не обрезается */
  .prompt-photo-btn { min-height: 84px; }
  .prompt-row-top { flex-wrap: wrap; }
  .prompt-row-spacer { flex: 1 1 100%; order: -1; display: none; }
  .prompt-ctrl-small { padding: 6px 9px; font-size: 11.5px; }

  /* --- 2. Ленты: 2 крупные плитки в строку, чистые (мета по тапу в карточке) --- */
  .home-trends-grid, .trends-grid, .lib-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 3px !important;
    margin-left: -14px; margin-right: -14px;   /* full-bleed: съедаем padding .route */
  }
  .home-trends-grid .trend-card,
  .trends-grid .trend-card,
  .lib-grid .gen-result-item { border: none; border-radius: 0; }
  .trend-img, video.trend-img, .trend-img-empty { aspect-ratio: 1 / 1 !important; }
  .lib-grid .gen-result-item img,
  .lib-grid .gen-result-item video { height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
  .lib-grid .shimmer { height: auto !important; aspect-ratio: 1 / 1; }
  /* Чистая плитка: лайки/бейджи/мета мешают просмотру — всё в карточке по тапу */
  .trend-ov { display: none !important; }
  .lib-grid .gri-meta { display: none; }
  .lib-grid .gri-del-corner { display: none; }   /* угловой «×» убран — удаление по долгому нажатию (.gri-tile-menu) */
  .lib-grid .gen-result-item::after { display: none; }
  .gen-result-item .gri-vbadge { top: 50%; }
  .trend-vbadge { width: 34px; height: 34px; font-size: 13px; }
  /* Лайк на плитке возвращён (по фидбеку 12.06) — компактный; бейджи/цена скрыты */
  .trend-like { transform: scale(.9); transform-origin: top right; }
  .trend-seed { display: none !important; }
  .trend-card .ht-badge { display: none !important; }
  .trend-price { display: none !important; }
  /* Аудио-список в Галерее — на всю ширину, но с воздухом по краям */
  .audio-gallery-list { padding-left: 14px; padding-right: 14px; }
}

/* Пульс-подсказка на гамбургер (анимации — вне media, селекторы внутри) */
@keyframes mhPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,92,255,.55); }
  55%      { box-shadow: 0 0 0 9px rgba(124,92,255,0); }
}
@keyframes mhTip {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  55%      { transform: translateY(-50%) translateX(4px); }
}

/* Мобила: AI-подсказка «лучшей модели» отключена (JS-гейт в generate.js + страховка) */
@media (max-width: 760px) { .prompt-suggest-tip { display: none !important; } }

/* Мобила/мини-аппы: «В избранное» и «В тренды» в лайтбоксе дублируют верхний ряд
   Повторить/В галерею/Поделиться — убраны (просьба юзера 12.06) */
@media (max-width: 760px) { #td-fav-btn, #td-trend-btn { display: none !important; } }

/* Кнопка докупки слотов галереи (в заголовке «Моя галерея») */
.lib-buy-slots {
  font-size: 12px; font-weight: 600; padding: 5px 12px; margin-left: 6px;
  background: var(--panel-2, rgba(255,255,255,.06)); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; cursor: pointer;
  vertical-align: middle; transition: background .15s;
}
.lib-buy-slots:hover { background: var(--accent); color: #fff; }
.lib-buy-slots:disabled { opacity: .5; cursor: default; }

/* Блок привязки мессенджера в профиле */
.prof-link-block { margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--border, rgba(255,255,255,.08)); }
.prof-link-btns { display: flex; gap: 8px; margin-top: 8px; }
.prof-link-btns .prof-btn { flex: 1; }
#prof-link-status { margin-top: 8px; color: var(--accent); }

/* Промо-кампании: превью-картинка под полем промпта */
.promo-preview { margin-top: 10px; border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 12px; overflow: hidden; background: var(--panel-2, rgba(255,255,255,.04)); }
.promo-preview img { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.promo-preview .pp-cap { padding: 8px 12px; font-size: 13px; color: var(--text-dim); }

/* Промо-превью компактно: тумб + подпись в строку (юзер: большое фото не нужно) */
.promo-preview { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; }
.promo-preview img { width: 64px; height: 64px; max-height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 64px; }
.promo-preview .pp-cap { padding: 0; }

/* ===== Транскрибация видео ===== */
.tr-form { max-width: 720px; background: var(--panel, #15151c); border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 14px; padding: 18px; margin-top: 8px; }

/* «Зеркалочка» — стеклянная тёмная оболочка рабочих зон (Промпт из видео / Получить текст / Фото / Видео).
   Слоёный фон: лёгкий блик сверху + тёмный градиент (за контентом, без оверлея); светлая рамка + верхний хайлайт. */
.tr-form, .prompt-bar-inner {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 30%), linear-gradient(162deg, #202231 0%, #15151e 55%, #101017 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.45);
}
/* шрифты ярче на стекле */
.tr-form .tr-tab, .tr-form label, .prompt-photo-btn .ppb-title { color: #f2f2f7; }
/* подсказка про источники (IG/Threads/TikTok → загрузить файлом) */
.tr-src-hint { margin-top: 8px; font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.tr-src-hint b { color: #f2f2f7; font-weight: 600; }
/* понятная раскладка ввода: метка блока + разделитель «или» (вкладки убраны) */
.tr-src-label { font-size: 12.5px; color: #f2f2f7; font-weight: 600; margin: 0 0 8px; }
.tr-or { display: flex; align-items: center; gap: 12px; color: var(--text-dim); font-size: 12px; margin: 16px 0; }
.tr-or::before, .tr-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.tr-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tr-tab { flex: 1; padding: 10px; border-radius: 10px; background: var(--bg-2, rgba(255,255,255,.04)); border: 1px solid var(--border, rgba(255,255,255,.08)); color: var(--text-dim); cursor: pointer; font-weight: 600; }
.tr-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tr-pane { display: flex; gap: 8px; }
.tr-input { flex: 1; padding: 11px 14px; border-radius: 10px; background: var(--bg, #0e0e14); border: 1px solid var(--border, rgba(255,255,255,.1)); color: var(--text, #e9e9ee); font-size: 14px; }
.tr-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 28px; border: 2px dashed var(--border, rgba(255,255,255,.18)); border-radius: 12px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.tr-drop.drag { border-color: var(--accent); background: rgba(124,92,255,.06); }
.tr-drop-icon { font-size: 26px; color: var(--accent-2); }
.tr-drop-text { font-size: 13px; color: var(--text-dim); }
.tr-lang { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--text-dim); }
.tr-lang-btn { padding: 5px 12px; border-radius: 999px; background: var(--bg-2, rgba(255,255,255,.04)); border: 1px solid var(--border, rgba(255,255,255,.08)); color: var(--text-dim); cursor: pointer; font-size: 12px; }
.tr-lang-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tr-quote { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 14px; background: var(--bg-2, rgba(255,255,255,.04)); border-radius: 10px; }
.tr-quote-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tr-quote-info > span:first-child { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.tr-quote-dur { font-size: 12px; color: var(--text-dim); }
.tr-msg { margin-top: 12px; padding: 10px 12px; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); border-radius: 9px; color: #fca5a5; font-size: 13px; }
/* «видео загружено» — карточка-подтверждение с локальным кадром */
.tr-loaded { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 12px; background: linear-gradient(135deg, rgba(124,92,255,.12), rgba(22,163,74,.07)); }
.tr-loaded-thumb { flex: 0 0 auto; width: 92px; height: 58px; border-radius: 8px; background: #0c0c12 center/cover no-repeat; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; color: var(--accent-2); font-size: 22px; }
.tr-loaded-thumb[data-audio] { background: rgba(124,92,255,.14); }
.tr-loaded-spin { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--accent-2); border-radius: 50%; animation: trspin .8s linear infinite; }
.tr-loaded-thumb.ready .tr-loaded-spin { display: none; }
.tr-loaded-info { flex: 1 1 auto; min-width: 0; }
.tr-loaded-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-loaded-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.tr-loaded-ok { font-size: 12.5px; color: #46d369; margin-top: 4px; }
.tr-loaded-ok::before { content: '✓ '; font-weight: 700; }
.tr-loaded-bar { height: 6px; margin-top: 8px; background: rgba(255,255,255,.10); border-radius: 999px; overflow: hidden; }
.tr-loaded-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width .25s; }
.tr-loaded-x { flex: 0 0 auto; width: 30px; height: 30px; border: none; background: rgba(255,255,255,.06); color: var(--text-dim); font-size: 18px; line-height: 1; border-radius: 8px; cursor: pointer; }
.tr-loaded-x:hover { background: rgba(255,90,90,.16); color: #ff6b6b; }
@keyframes trspin { to { transform: rotate(360deg); } }

/* обработка — заголовок + проценты + шаги + бегущий блик */
.tr-progress { max-width: 720px; margin-top: 18px; }
.tr-proc-title { font-weight: 600; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-proc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tr-pct { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-2); flex: 0 0 auto; }
.tr-pbar { height: 10px; background: var(--bg-2, rgba(255,255,255,.06)); border-radius: 999px; overflow: hidden; }
.tr-pfill { height: 100%; width: 5%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width .5s; position: relative; overflow: hidden; }
.tr-pfill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); transform: translateX(-100%); animation: trshimmer 1.4s infinite; }
@keyframes trshimmer { to { transform: translateX(100%); } }
.tr-pstatus { margin: 0; font-size: 13px; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-steps { display: flex; gap: 8px; margin-top: 14px; }
.tr-step { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--text-dim); text-align: center; transition: color .3s; }
.tr-step-dot { height: 4px; border-radius: 999px; background: rgba(255,255,255,.10); transition: background .3s; }
.tr-step.active { color: var(--text); }
.tr-step.active .tr-step-dot, .tr-step.done .tr-step-dot { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.tr-result { max-width: 820px; margin-top: 18px; }
.tr-upsell { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; margin-bottom: 18px; background: linear-gradient(135deg, rgba(124,92,255,.14), rgba(22,163,74,.10)); border: 1px solid var(--accent); border-radius: 12px; }
.tr-upsell-txt { font-size: 13px; line-height: 1.4; }
.tr-block { margin-bottom: 20px; }
.tr-block h3 { font-size: 15px; margin: 0 0 8px; }
.tr-block p { line-height: 1.5; color: var(--text, #e9e9ee); }
#tr-keypoints { margin: 0; padding-left: 20px; line-height: 1.7; }
.tr-text-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tr-dl { display: flex; gap: 6px; }
.tr-text { white-space: pre-wrap; word-break: break-word; background: var(--bg-2, rgba(255,255,255,.03)); border: 1px solid var(--border, rgba(255,255,255,.07)); border-radius: 10px; padding: 14px; font-size: 13.5px; line-height: 1.6; max-height: 460px; overflow-y: auto; font-family: inherit; }
.tr-history { max-width: 720px; margin-top: 26px; }
.tr-history h3 { font-size: 14px; color: var(--text-dim); }
.tr-hist-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 9px; background: var(--bg-2, rgba(255,255,255,.03)); border: 1px solid var(--border, rgba(255,255,255,.06)); margin-bottom: 6px; }
.tr-hist-item:hover { border-color: var(--accent-2); }
.tr-hist-main { display: flex; flex: 1 1 auto; min-width: 0; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; }
.tr-hist-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-hist-meta { color: var(--text-dim); font-size: 12px; flex: 0 0 auto; }
.tr-hist-del { flex: 0 0 auto; width: 30px; height: 30px; border: none; background: transparent; color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 8px; }
.tr-hist-del:hover { background: rgba(255,90,90,.16); color: #ff6b6b; }
.tr-result-top { margin-bottom: 14px; }
@media (max-width: 760px) { .tr-pane { flex-direction: column; } .tr-quote { flex-direction: column; align-items: stretch; } .tr-quote-info > span:first-child { max-width: 100%; } .tr-upsell { flex-direction: column; align-items: stretch; } }

/* Логотип карточки «Получить текст с видео»: кадр видео → документ со строками (в стиле склейки) */
.tr-prev-frame { width: 48px; height: 54px; border-radius: 7px; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.tr-prev-frame svg { width: 26px; height: 26px; }
.tr-prev-doc { width: 44px; height: 54px; border-radius: 7px; background: #fff; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 8px; box-shadow: 0 4px 14px rgba(124,92,255,.45); }
.tr-prev-doc i { display: block; height: 3px; width: 100%; border-radius: 2px; background: var(--accent); opacity: .85; }

/* Баннер техобслуживания (распознавание речи временно недоступно) */
.tr-maint { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.45); color: var(--text); border-radius: 12px; padding: 14px 16px; margin: 6px 0 16px; line-height: 1.5; }
.tr-maint span { color: var(--text-dim); font-size: 14px; }

/* Логотип карточки «Промпт из видео»: кадр → раскадровка-сетка из 4 кадров (сторибоард) */
.vp-prev-grid { width: 50px; height: 50px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; }
.vp-prev-grid i { display: block; border-radius: 4px; background: linear-gradient(135deg, var(--accent), #aa78ff); box-shadow: 0 2px 8px rgba(124,92,255,.5); }
.vp-prev-grid i:nth-child(2) { opacity: .8; }
.vp-prev-grid i:nth-child(3) { opacity: .65; }
.vp-prev-grid i:nth-child(4) { opacity: .5; }

/* Мобильная плавающая кнопка «Создать» — быстрый доступ без прокрутки длинной страницы.
   Видна только в разделах Фото/Видео (body.gen-route) и только на мобиле. */
.m-gen-fab { display: none; }
@media (max-width: 760px) {
  body.gen-route .m-gen-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70;
    height: 54px; border: none; border-radius: 16px;
    background: var(--accent); color: #fff;
    font-size: 17px; font-weight: 700; letter-spacing: .2px;
    box-shadow: 0 8px 24px rgba(124,92,255,.55); cursor: pointer;
  }
  body.gen-route .m-gen-fab:active { transform: translateY(1px); }
  body.gen-route .main { padding-bottom: 84px; }
}

/* Пикер «референс из галереи» + поповер выбора источника */
.media-picker { max-width: 740px; width: 92vw; max-height: 86vh; display: flex; flex-direction: column; }
.mp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mp-head h3 { margin: 0; }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; overflow: auto; }
.mp-item { position: relative; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--bg-2); cursor: pointer; }
.mp-item img, .mp-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-item:hover { border-color: var(--accent); transform: scale(1.02); }
.mp-vbadge { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.mp-loading, .mp-empty { color: var(--text-dim); padding: 28px; text-align: center; grid-column: 1 / -1; }
.ref-src-pop { position: fixed; z-index: 300; background: var(--bg-1, #181822); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.55); overflow: hidden; }
.ref-src-pop.vp-model-pop { max-height: 300px; overflow-y: auto; }
.ref-src-pop button { display: block; width: 188px; padding: 12px 16px; background: none; border: none; color: var(--text); text-align: left; font-size: 14px; cursor: pointer; }
.ref-src-pop button + button { border-top: 1px solid var(--border); }
.ref-src-pop button:hover { background: var(--accent); color: #fff; }

/* Быстрые действия в студийном промпт-баре (клик → готовый промпт) */
#ctrl-quick{display:none}   /* кнопка «Действия» — только мобайл/мини-апп (на ПК готовые действия инлайн) */
/* Быстрые настройки формат/качество/кол-во — только мобайл/мини-апп */
.prompt-quickset{display:none}
.prompt-quickset[hidden]{display:none!important}
@media(max-width:760px){
  .prompt-quickset:not([hidden]){display:flex;gap:8px;margin-top:8px}
  .qs-btn{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--bg-2,#1a1a22);border:1px solid rgba(255,255,255,.13);border-radius:11px;padding:7px 6px;cursor:pointer;font-family:inherit}
  .qs-btn .qs-lbl{font-size:10px;color:var(--muted,#9595a5);font-weight:600;letter-spacing:.2px}
  .qs-btn .qs-val{font-size:14px;color:var(--ink,#fff);font-weight:800}
  .qs-pop{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:3px;background:var(--bg-1,#16161e);border:1px solid var(--border,#2a2a32);border-radius:12px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.5);min-width:90px}
  .qs-pop button{background:transparent;border:0;color:var(--ink,#fff);border-radius:8px;padding:9px 12px;font-size:14px;font-weight:600;cursor:pointer;text-align:center;white-space:nowrap;font-family:inherit}
  .qs-pop button.on{background:var(--accent,#a385ff);color:#fff}
  .qs-pop button:not(.on):active{background:rgba(255,255,255,.1)}
}
.prompt-quick{margin:9px 0 2px}
.prompt-quick:empty{display:none}
.prompt-quick .pq-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.prompt-quick .pq-toggle{display:none;align-items:center;gap:6px;background:var(--bg-2,#1a1a22);border:1px solid rgba(255,255,255,.13);color:var(--ink,#fff);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.prompt-quick .pq-toggle .pq-car{transition:transform .2s;font-size:11px}
.prompt-quick.open .pq-toggle .pq-car{transform:rotate(180deg)}
@media(max-width:768px){
  .prompt-quick .pq-toggle{display:inline-flex}
  .prompt-quick .pq-row{display:none;margin-top:8px}
  .prompt-quick.open .pq-row{display:flex}
  .prompt-quick .pq-t{display:none}
}
.prompt-quick .pq-hint{margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--muted,#9595a5);padding:1px 0 1px 11px;border-left:2px solid var(--accent,#a385ff)}
.prompt-quick .pq-t{font-size:12px;color:var(--muted,#9595a5);font-weight:600;margin-right:2px}
.pq-btn{background:var(--bg-2,#1a1a22);border:1px solid rgba(255,255,255,.13);color:var(--ink,#fff);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.pq-btn:hover{border-color:var(--accent,#a385ff);background:rgba(163,133,255,.12)}
.pq-btn.active{background:var(--accent,#a385ff);border-color:var(--accent,#a385ff);color:#fff}

/* Готовые шаблоны на главной — горизонтальная строка (как Leonardo Featured Blueprints) */
.home-blueprints{margin-bottom:28px}
.bp-row{overflow-x:auto;overflow-y:hidden;padding:2px 0 8px;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x;-webkit-mask:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);mask:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent)}
.bp-row::-webkit-scrollbar{display:none}
.bp-row.bp-grab{cursor:grab}
.bp-row.bp-grabbing{cursor:grabbing}
.bp-track{display:flex;width:max-content}
.bp-track > *{flex:0 0 auto;width:210px;margin:0 14px 0 0!important}
/* видимый перетаскиваемый ползунок под лентой стилей (ПК + мобайл) */
.bp-scroll{position:relative;height:8px;margin:0 2px 16px;border-radius:99px;background:rgba(255,255,255,.09);cursor:pointer;touch-action:none}
.bp-scroll .bp-thumb{position:absolute;top:0;left:0;height:100%;min-width:44px;width:60px;border-radius:99px;background:var(--accent,#a385ff);cursor:grab;touch-action:none;transition:background .15s}
.bp-scroll .bp-thumb:hover{background:var(--accent-2,#8b6cf0)}
.bp-scroll .bp-thumb.bp-drag{cursor:grabbing;background:var(--accent-2,#8b6cf0)}
@media(max-width:760px){.bp-scroll{height:11px;margin-bottom:14px}}
@media(max-width:760px){.bp-track > *{width:155px;margin-right:10px!important}}
/* ФИКС: .bp-track{width:max-content} в ленте стилей раздела фото раздувал холст (сетка результатов огромная).
   min-width:0 по флекс-цепочке + кап ленты — холст держит свою ширину, лента клипится как на главной. */
.leo-main, .leo-canvas { min-width: 0; }
#image-styles-strip { max-width: 100%; min-width: 0; overflow: hidden; }
#image-styles-row { max-width: 100%; min-width: 0; }   /* прокрутка из .bp-row (overflow-x:auto); max-width держит холст */

/* Пресет-флоу в окне тренда: «добавь своё фото → Создать» */
.td-pp{display:flex;flex-direction:column;gap:10px}
.td-pp-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:280px;border:1.6px dashed rgba(255,255,255,.20);border-radius:14px;padding:24px 16px;cursor:pointer;text-align:center;background:rgba(255,255,255,.03);transition:border-color .15s,background .15s}
.td-pp-drop:hover,.td-pp-drop.drag{border-color:var(--accent,#a385ff);background:rgba(163,133,255,.08)}
.td-pp-drop .td-pp-t{font-weight:700;font-size:17px;color:var(--ink,#fff)}
.td-pp-drop .td-pp-s{font-size:12.5px;color:var(--muted,#9595a5)}
.td-pp-thumb{display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px}
.td-pp-thumb img{width:100%;height:260px;object-fit:cover;border-radius:10px;display:block}
.td-pp-thumb .td-pp-x{align-self:center;background:transparent;border:1px solid rgba(255,255,255,.18);color:var(--muted,#9595a5);border-radius:8px;padding:8px 16px;cursor:pointer;font-size:13px}
.td-pp-ph{display:flex;align-items:center;justify-content:center;text-align:center;min-height:150px;color:var(--muted,#9595a5);font-size:13px;padding:16px;line-height:1.4}
.td-pp-msg{font-size:12.5px;color:var(--muted,#9595a5);min-height:16px}
/* Вариации примеров стиля в окне (крупное фото + лента превью) */
.td-media .td-ex{display:flex;flex-direction:column;gap:10px;width:100%;align-items:center}
.td-media img.td-ex-main{width:auto;max-width:100%;max-height:66vh;object-fit:contain;border-radius:12px;display:block;background:var(--bg-2,#1a1a22)}
.td-media .td-ex-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;flex:0 0 auto;max-width:100%}
.td-media .td-ex-strip::-webkit-scrollbar{height:6px}
.td-media .td-ex-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:6px}
.td-media img.td-ex-th{width:64px;height:64px;min-width:64px;max-width:64px;max-height:64px;flex:0 0 auto;object-fit:cover;border-radius:8px;cursor:pointer;opacity:.5;border:2px solid transparent;transition:opacity .15s,border-color .15s}
.td-media img.td-ex-th.on,.td-media img.td-ex-th:hover{opacity:1;border-color:var(--accent,#a385ff)}
@media(max-width:760px){.td-media img.td-ex-main{max-height:42vh}}
/* Наши готовые стили в селекторе «Стиль» — выделяем цветом */
.lsp-group{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--accent,#a385ff);padding:9px 12px 4px}
.lsp-group.lsp-group-base{color:var(--text-dim,#9595a5)}
.lsp-item.lsp-bp{border-left:3px solid var(--accent,#a385ff);background:rgba(163,133,255,.08)}
.lsp-item.lsp-bp:hover{background:rgba(163,133,255,.16)}
.lsp-item.lsp-bp .lsp-desc{color:var(--accent,#a385ff)}
.leo-style-bp-active{box-shadow:0 0 0 2px var(--accent,#a385ff) inset;border-radius:9px;color:var(--accent,#a385ff)!important}
/* Баннер-таймер «−35% первый час» */
.disc-strip{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:linear-gradient(135deg,#a385ff,#7c5cff);color:#fff;text-decoration:none;font-weight:700;font-size:14px;box-shadow:0 10px 30px rgba(124,92,255,.42);white-space:nowrap;animation:dsPulse 2.4s ease-in-out infinite}
@keyframes dsPulse{0%,100%{box-shadow:0 10px 30px rgba(124,92,255,.42)}50%{box-shadow:0 12px 40px rgba(124,92,255,.66)}}
.disc-strip .ds-badge{background:rgba(255,255,255,.24);border-radius:999px;padding:3px 9px;font-weight:800;font-size:13px}
.disc-strip .ds-txt{font-weight:600}
.disc-strip .ds-txt b{font-variant-numeric:tabular-nums;font-weight:800}
.disc-strip .ds-cta{background:#fff;color:#7c5cff;border-radius:999px;padding:5px 12px;font-weight:800;font-size:13px}
@media(max-width:600px){.disc-strip{bottom:14px;font-size:12.5px;padding:9px 12px;gap:8px}.disc-strip .ds-cta{padding:5px 10px}}
/* Инлайн-баннер «−35% первый час» в разделе фото — сразу после результатов */
.disc-inline{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 16px;border-radius:12px;background:linear-gradient(135deg,#a385ff,#7c5cff);color:#fff;text-decoration:none;font-weight:700;font-size:14px;box-shadow:0 6px 20px rgba(124,92,255,.35);margin:4px 0 10px}
.disc-inline[hidden]{display:none}
.disc-inline .ds-badge{background:rgba(255,255,255,.24);border-radius:999px;padding:3px 9px;font-weight:800;font-size:13px}
.disc-inline .ds-txt{font-weight:600}
.disc-inline .ds-txt b{font-variant-numeric:tabular-nums;font-weight:800}
.disc-inline .ds-cta{background:#fff;color:#7c5cff;border-radius:999px;padding:5px 13px;font-weight:800;font-size:13px;white-space:nowrap}
/* На ПК инлайн-баннер НЕ нужен — по центру уже есть фикс-плашка (работает на всех страницах) */
@media(min-width:761px){ .disc-inline{ display:none !important; } }
/* Мобайл: аккуратный баннер без кривого переноса по словам */
/* Мобайл: крупный «−35%», большая кнопка «Пополнить», шрифт пожирнее (наши тона) */
@media(max-width:760px){
  .disc-inline{ flex-wrap:wrap; align-items:center; gap:8px 11px; padding:15px 16px 16px; }
  .disc-inline .ds-badge{ font-size:25px; font-weight:900; line-height:1; letter-spacing:-.3px; padding:6px 13px; border-radius:14px; background:rgba(255,255,255,.26); }
  .disc-inline .ds-txt{ font-size:15px; font-weight:700; white-space:nowrap; }
  .disc-inline .ds-txt b{ font-weight:900; }
  .disc-inline .ds-cta{ flex:1 0 100%; text-align:center; font-size:17px; font-weight:900; letter-spacing:.2px; padding:14px; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.22); }
}

.tg-strip{position:fixed;right:16px;top:60px;z-index:71;display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:999px;background:linear-gradient(135deg,#2AABEE,#229ED9);color:#fff;text-decoration:none;font-weight:700;font-size:13.5px;box-shadow:0 8px 26px rgba(34,158,217,.45);white-space:nowrap;overflow:hidden;animation:dsPulse 2.4s ease-in-out infinite}
.tg-strip[hidden]{display:none!important}
.tg-strip::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);animation:tgShine 2.8s ease-in-out infinite;pointer-events:none}
.tg-strip .tg-ico{font-size:15px;position:relative;z-index:1}
.tg-strip .ds-txt{position:relative;z-index:1;font-weight:700}
.tg-strip .ds-cta{background:#fff;color:#229ED9;border-radius:999px;padding:4px 11px;font-weight:800;font-size:13px;position:relative;z-index:1}
@keyframes tgShine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
/* Мобайл/TG/MAX: десктоп-пилюлю прячем, показываем бегущую строку на главной */
@media(max-width:760px){ .tg-strip{ display:none!important; } }
/* Бегущая полоска подписки на Telegram-канал — на главной и в разделах фото/видео, все версии */
.tg-home-strip{ display:block; position:relative; overflow:hidden; margin:0 0 14px; padding:11px 0; border-radius:12px; background:linear-gradient(135deg,#2AABEE,#229ED9); color:#fff; text-decoration:none; box-shadow:0 6px 20px rgba(34,158,217,.40); }
#tg-strip-image, #tg-strip-video { margin-top: 12px; }
.tg-home-strip[hidden]{ display:none!important; }
.tg-home-strip .tgh-track{ display:inline-block; white-space:nowrap; font-weight:800; font-size:14px; letter-spacing:.2px; animation:tghMarquee 20s linear infinite; }
@keyframes tghMarquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* крупнее кнопка удаления загруженного фото (мобильный тап) — 26.06 */
#prompt-thumbs .prompt-thumb .x,#leo-image-ref-photos .prompt-thumb .x{width:24px;height:24px;font-size:14px;z-index:5;}