:root {
  --bg: #08080a;
  --bg-soft: #0e0e12;
  --surface: #15151a;
  --surface-2: #1e1e25;
  --line: rgba(255, 255, 255, 0.04);
  --line-strong: rgba(255, 255, 255, 0.07);
  --text: #f4f4f6;
  --text-secondary: #c4c4cc;
  --muted: #9494a0;
  /* Брендовое золото: спокойнее жёлтого, контрастно на тёмной теме. */
  --accent: #c9932e;
  --accent-2: #ad741e;
  --accent-grad: linear-gradient(135deg, #e2be67, #ad741e);
  --accent-ink: #1c1305;
  --accent-soft: rgba(201, 147, 46, 0.12);
  --accent-line: rgba(226, 190, 103, 0.28);
  --accent-glow: rgba(201, 147, 46, 0.22);
  --danger: #ff5c5c;
  --radius: 20px;
  --radius-sm: 14px;
  --bottom-nav-height: 70px;
  --nav-h: var(--bottom-nav-height);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-top-inset: max(env(safe-area-inset-top, 0px), var(--content-safe-top, 0px));
  --app-bottom-inset: max(env(safe-area-inset-bottom, 0px), var(--content-safe-bottom, 0px));
  --content-safe-top: 0px;
  --content-safe-right: 0px;
  --content-safe-bottom: 0px;
  --content-safe-left: 0px;
  /* Единый хром Telegram — JS перезаписывает; fallback одинаков на всех устройствах */
  --chrome-top: 56px;
  --chrome-bottom: env(safe-area-inset-bottom, 0px);
  --bottom-safe-area: var(--chrome-bottom);
  --page-bottom-inset: calc(var(--bottom-nav-height) + var(--bottom-safe-area) + 24px);
  --floating-create-offset: calc(var(--bottom-nav-height) + var(--bottom-safe-area) + 12px);
  --tg-safe-top: var(--chrome-top); /* alias */
  --viewer-side: 14px;
  --media-radius: 28px;
  --media-ar: 3 / 4;
  --media-max-h: min(62vh, 620px);
  --shadow: none;
  --glow: none;

  /* Типографика */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Unbounded", "Inter", system-ui, sans-serif;

  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 26px;

  --leading-tight: 1.22;
  --leading-snug: 1.38;
  --leading-normal: 1.5;
  --leading-relaxed: 1.62;

  --tracking-tight: -0.025em;
  --tracking-normal: -0.012em;
  --tracking-label: 0.045em;
  --tracking-caps: 0.07em;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: var(--tracking-normal);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

/* Display-заголовки — акцентный шрифт */
.brand,
.brand-name,
.hero-title,
.profile-name,
.publish-title,
.model-banner-title,
.ad-title,
.ad-code {
  font-family: var(--font-display);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  letter-spacing: inherit;
}
input, textarea, select {
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
/* appearance:none ломает нативные чекбоксы — оставляем системный вид */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
  pointer-events: auto;
}
.hidden { display: none !important; }
.muted { color: var(--muted); font-weight: 400; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────  ТИПОГРАФИКА (общие классы) ───────────── */
.section-title {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 8px 2px 14px;
  color: var(--text);
}
.shop-sub,
.subtitle {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  margin: -8px 2px 18px;
}
.type-label,
.block-title,
.detail-label,
.account-linked-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-snug);
}
.block-title { margin-bottom: 10px; }
.field-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
}
.link-btn,
.preset-view-all {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
}
.empty-text { font-size: var(--text-base); font-weight: 500; line-height: var(--leading-relaxed); color: var(--text-secondary); }
.legal,
.publish-legal,
.account-hint {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--muted);
  line-height: var(--leading-relaxed);
}

body {
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(201, 147, 46, 0.08), transparent 60%),
    radial-gradient(70% 50% at 0% 100%, rgba(173, 116, 30, 0.05), transparent 55%),
    var(--bg);
  min-height: 100vh;
}

/* ─────────────  ВЕРХНЯЯ ПАНЕЛЬ  ───────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  padding: calc(var(--chrome-top) + 8px) 16px 10px;
  background: rgba(8, 8, 10, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.brand {
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: visible;
}
.brand-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  line-height: 1;
}
.brand-logo-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background: #08080a;
  position: relative;
}
.brand-logo {
  width: 100%;
  height: 100%;
  /* PNG уже круг с прозрачными углами — contain, чтобы не срезать ободок */
  object-fit: contain;
  object-position: center center;
  display: block;
}
.brand-name {
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-caption {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.topbar-back {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
}
.topbar-back:not(.hidden) + .brand { margin-right: auto; }
/* С «Назад» не сжимаем название до «L...» — только укорачиваем «Купить» */
.topbar:has(#topbarBack:not(.hidden)) .buy-pill-full { display: none; }
.topbar:has(#topbarBack:not(.hidden)) .buy-pill-short { display: inline; }
.topbar:has(#topbarBack:not(.hidden)) .brand-logo-wrap { width: 36px; height: 36px; }
.buy-pill {
  background: var(--accent-grad);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-normal);
  padding: 9px 15px;
  border-radius: 999px;
  box-shadow: var(--glow);
  transition: transform 0.12s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.buy-pill:active { transform: scale(0.95); }
.buy-pill-short { display: none; }
@media (max-width: 390px) {
  .brand-logo-wrap { width: 38px; height: 38px; }
  .brand-name { font-size: var(--text-md); letter-spacing: -0.02em; }
  .brand-caption { font-size: 7px; letter-spacing: 0.13em; }
  .buy-pill { padding: 8px 11px; }
  .buy-pill-full { display: none; }
  .buy-pill-short { display: inline; }
  .balance-chip { padding: 7px 10px; }
  .topbar-actions { gap: 6px; }
}
.balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 13px;
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-normal);
}
.balance-token,
.token-ico {
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  object-fit: contain;
  object-position: center;
  display: inline-block;
  vertical-align: -0.2em;
  flex-shrink: 0;
  background: transparent;
}
.balance-chip .token-ico {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  object-fit: contain;
}

/* ─────────────  КОНТЕЙНЕР  ───────────── */
.app {
  padding: 16px 16px calc(var(--nav-h) + var(--chrome-bottom) + 22px);
  max-width: 620px;
  margin: 0 auto;
}
.view { animation: fade 0.25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ─────────────  КАРТОЧКА ПАРТНЁРКИ  ───────────── */
.home-partner-card:focus-visible,
.chat-reset:focus-visible,
.chat-model:focus-visible,
.chat-send:focus-visible,
#chatInput:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-partner-cta {
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.home-partner-card {
  width: 100%; min-height: 72px; display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px; padding: 13px 14px; border: 1px solid rgba(126, 139, 255, 0.28);
  border-radius: var(--radius-sm); color: var(--text);
  background: linear-gradient(112deg, rgba(112, 122, 255, 0.16), rgba(112, 122, 255, 0.04) 64%, var(--surface));
  text-align: left; transition: transform 180ms ease, border-color 180ms ease;
}
.home-partner-card:active { transform: scale(0.985); }
.home-partner-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: #e9ebff; background: rgba(112, 122, 255, 0.32); }
.home-partner-icon svg { width: 22px; height: 22px; }
.home-partner-copy { min-width: 0; display: grid; gap: 2px; }
.home-partner-copy strong { font-size: var(--text-md); font-weight: 650; }
.home-partner-copy small { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-snug); }
.home-partner-cta { color: #dfe2ff; border-color: rgba(161, 170, 255, 0.3); }

.chat-view {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--chrome-top) - var(--nav-h) - var(--chrome-bottom) - 32px);
}
.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 4px 0 16px; }
.chat-eyebrow { margin: 0 0 5px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-caps); }
.chat-title { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.16; letter-spacing: var(--tracking-tight); }
.chat-subtitle { margin: 7px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-snug); }
.chat-reset {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 13px;
}
.chat-reset:active { transform: scale(0.94); }
.chat-reset svg { width: 20px; height: 20px; }
.chat-model-row { display: flex; align-items: center; gap: 8px; min-height: 42px; margin-bottom: 14px; }
.chat-model-label { color: var(--muted); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.chat-model {
  min-width: 0;
  max-width: 230px;
  flex: 1 1 auto;
  padding: 9px 32px 9px 11px;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239494a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  font-size: var(--text-sm);
  font-weight: 600;
}
.chat-model:disabled { opacity: 0.6; }
.chat-cost { margin-left: auto; color: var(--accent); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.chat-messages { display: flex; flex: 1 1 auto; flex-direction: column; gap: 12px; min-height: 0; padding: 2px 0 16px; }
.chat-empty { display: grid; place-items: center; gap: 8px; min-height: 154px; padding: 24px 20px; text-align: center; color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); border: 1px solid rgba(220, 216, 255, .12); border-radius: 20px; background: radial-gradient(circle at 50% 0%, rgba(103, 91, 167, .10), transparent 68%), rgba(255,255,255,.018); }
.chat-empty strong { color: var(--text); font-size: 17px; line-height: 1.2; }
.chat-empty span { max-width: 390px; }
.chat-bubble { max-width: 88%; padding: 12px 14px; border-radius: 16px; font-size: var(--text-base); line-height: var(--leading-relaxed); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-bubble.user { align-self: flex-end; color: var(--accent-ink); border-bottom-right-radius: 5px; background: var(--accent-grad); }
.chat-bubble.assistant { align-self: flex-start; color: var(--text); border: 1px solid var(--line-strong); border-bottom-left-radius: 5px; background: var(--surface); }
.chat-bubble.pending { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.chat-pulse { display: inline-flex; gap: 4px; }
.chat-pulse i { width: 5px; height: 5px; border-radius: 99px; background: var(--accent); animation: chat-pulse 1.2s ease-in-out infinite; }
.chat-pulse i:nth-child(2) { animation-delay: 0.15s; }
.chat-pulse i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-pulse { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-compose {
  position: sticky;
  bottom: calc(var(--nav-h) + var(--chrome-bottom) + 10px);
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 17px;
  background: rgba(21, 21, 26, 0.96);
  box-shadow: 0 -10px 26px rgba(8, 8, 10, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#chatInput { width: 100%; min-height: 44px; max-height: 144px; resize: none; padding: 11px 8px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 16px; line-height: 1.42; }
#chatInput::placeholder { color: var(--muted); }
.chat-send { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; color: var(--accent-ink); border-radius: 12px; background: var(--accent-grad); transition: transform 150ms ease, opacity 150ms ease; }
.chat-send:disabled { opacity: 0.4; }
.chat-send:not(:disabled):active { transform: scale(0.94); }
.chat-send svg { width: 21px; height: 21px; }
.chat-disclaimer { margin: 9px 5px 8px; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-snug); text-align: center; }
@media (prefers-reduced-motion: reduce) { .chat-pulse i { animation: none; } }

/* ─────────────  HERO  ───────────── */
.hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 176px;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  margin-bottom: 18px;
  background: #111;
  background-size: cover;
  background-position: center;
  border: none;
  box-shadow: none;
}
#homeHero, #createHero { background-image: url("/shop/assets/hero-image.jpg?v=6"); }
#createHero.video { background-image: url("/shop/assets/hero-video.jpg?v=6"); }
#createHero.chat { background-image: url("/shop/assets/banner-1.jpg?v=6"); }
.create-hero { min-height: 150px; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 10, 0.05) 30%, rgba(8, 8, 10, 0.88));
}
.hero-text { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin-bottom: 8px;
}
.hero-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.create-hero .hero-title { font-size: var(--text-xl); text-transform: uppercase; letter-spacing: 0.04em; }

/* ─────────────  БЫСТРЫЕ ДЕЙСТВИЯ  ───────────── */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.quick-card {
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 13.5px;
  text-align: center;
  transition: transform 0.12s ease, border-color 0.15s;
}
.quick-card:active { transform: scale(0.97); border-color: var(--accent); }
.quick-emoji { font-size: 26px; }

/* ─────────────  ПЕРЕКЛЮЧАТЕЛЬ СОЗДАНИЯ  ───────────── */
.mode-toggle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 22px;
}
.mode-btn {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  color: #fff;
  text-align: center;
  background: transparent;
  box-shadow: none;
  transition: transform 180ms cubic-bezier(.16,1,.3,1), opacity 180ms ease;
  touch-action: manipulation;
}
.mode-btn-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 22%;
  background: #111;
  box-shadow: none;
}
.mode-btn-visual::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: 5px;
  left: 18%;
  height: 3px;
  border-radius: 999px;
  background: transparent;
  pointer-events: none;
}
.mode-btn-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
}
.mode-btn strong {
  max-width: 100%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.mode-btn small {
  max-width: 100%;
  color: rgba(255,255,255,0.78);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
}
.mode-btn:active { transform: scale(0.975); }
.mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mode-btn.active .mode-btn-visual::after { background: var(--accent); }

/* ─────────────  БАННЕРЫ МОДЕЛЕЙ  ───────────── */
.model-banners { display: flex; flex-direction: column; gap: 12px; }
.model-provider-label {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  line-height: 1.2;
  text-transform: uppercase;
}
.model-provider-label:first-child { margin-top: 0; }
.model-banner {
  position: relative;
  border-radius: var(--radius);
  min-height: 126px;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  overflow: hidden;
  border: none;
  outline: none;
  text-align: left;
  width: 100%;
  background-color: #111;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  touch-action: manipulation;
}
.model-banner:active { opacity: 0.94; transform: scale(0.985); }
/* Затемнение слева под текст — без светлых краёв и без filter */
.model-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 8, 10, 0.88) 0%,
    rgba(8, 8, 10, 0.55) 42%,
    rgba(8, 8, 10, 0.2) 100%
  );
  pointer-events: none;
}
.model-banner-title {
  position: relative;
  z-index: 1;
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.model-banner-copy {
  position: relative;
  z-index: 1;
  width: 100%;
}

.model-banner--chat::after {
  background: linear-gradient(90deg, rgba(8, 8, 10, 0.9) 0%, rgba(8, 8, 10, 0.56) 54%, rgba(8, 8, 10, 0.18) 100%);
}
.model-banner-subtitle {
  position: relative;
  z-index: 1;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-sm);
}
.model-catalog-status { margin: 0; padding: 20px 0; text-align: center; }

/* ─────────────  BOTTOM SHEET  ───────────── */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Не заезжать под кнопки Telegram (Закрыть / ⋯) */
  padding-top: var(--chrome-top);
  background: rgba(0, 0, 0, 0.6);
  animation: fade 0.2s ease;
  box-sizing: border-box;
}
.sheet-body {
  background: var(--bg-soft);
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--line-strong);
  padding: 6px 18px 16px;
  max-height: calc(100% - 8px);
  overflow-y: auto;
  animation: slide-up 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes slide-up { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.sheet-body::before {
  content: "";
  display: block;
  width: 40px; height: 4px;
  border-radius: 999px;
  background: var(--line-strong);
  margin: 8px auto 0;
}
.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 18px;
  position: sticky;
  top: 0;
  background: var(--bg-soft);
  z-index: 2;
}
.sheet-model { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.sheet-model-text { min-width: 0; }
.sheet-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sheet-head-actions .modal-close {
  width: 44px;
  height: 44px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  align-self: center;
}
.sheet-share-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sheet-share-btns.hidden { display: none !important; }
.sheet-round-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--accent);
  color: #111;
  display: grid;
  place-items: center;
}
.sheet-round-btn svg { width: 18px; height: 18px; }
.sheet-gallery-byline {
  display: flex;
  min-height: 44px;
  margin: -2px 4px 8px;
}
.sheet-gallery-byline.hidden { display: none !important; }
.sheet-gallery-author {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #f7f2e4;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sheet-gallery-author:disabled { cursor: default; }
.sheet-gallery-author > img,
.sheet-gallery-author > .sheet-gallery-author-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 800;
  object-fit: cover;
}
.sheet-gallery-author-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.sheet-gallery-author-copy strong {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-gallery-author-handle {
  overflow: hidden;
  color: rgba(255,255,255,.78);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-round-btn.sheet-gallery-action {
  width: 44px;
  height: 54px;
  min-width: 44px;
  min-height: 54px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}
.sheet-round-btn.sheet-gallery-action .sheet-action-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--accent-ink);
  box-shadow: inset 0 1px rgba(255,255,240,.68), 0 5px 13px rgba(0,0,0,.28);
}
.sheet-round-btn.sheet-gallery-action .sheet-action-icon svg {
  width: 18px;
  height: 18px;
}
.sheet-round-btn.sheet-gallery-action .sheet-action-count {
  display: block;
  min-width: 3em;
  max-width: 44px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-round-btn.sheet-gallery-action:active { transform: none; }
.sheet-round-btn.sheet-gallery-action:active .sheet-action-icon { transform: scale(.9); }
.sheet-cover {
  position: relative;
  margin: 4px 0 8px;
  border-radius: 18px;
  overflow: hidden;
  background: #0a0a0c;
  width: 100%;
  height: min(42vh, 360px);
  flex-shrink: 0;
  cursor: zoom-in;
}
.sheet-cover.hidden { display: none !important; }
/* Loki: пресет = идея — чёрный фон, скруглённая медиа-карточка, форма снизу */
.gen-sheet--preset {
  justify-content: flex-end;
  align-items: stretch;
  gap: 0;
  padding: calc(var(--chrome-top) + 8px) 0 0;
  background: #000;
  box-sizing: border-box;
}
.gen-sheet--preset .sheet-body {
  width: 100%;
  max-width: none;
  padding: 0 var(--viewer-side) max(16px, var(--chrome-bottom));
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100% - 76px);
  border-radius: 24px 24px 0 0;
  border: none;
  background: #0a0a0c;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  animation: none;
  display: flex;
  flex-direction: column;
}
.gen-sheet--preset .sheet-body::before { display: none; }
.gen-sheet--preset .sheet-cover {
  width: 100%;
  max-width: none;
  aspect-ratio: var(--media-ar);
  height: auto;
  max-height: var(--media-max-h);
  margin: 0 0 14px;
  border-radius: var(--media-radius);
  cursor: pointer;
  flex-shrink: 0;
  background: #111;
  overflow: hidden;
}
.gen-sheet--preset .sheet-cover #sheetCoverImg,
.gen-sheet--preset .sheet-cover .sheet-cover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Обложка повтора — это исходный результат креатора, а не декоративный
     фон. Всегда сохраняем кадр целиком, чтобы не срезались лица и края. */
  object-fit: contain;
  object-position: center;
  display: block;
  background: #000;
}
.gen-sheet--preset .sheet-cover.sheet-cover--unavailable {
  display: grid;
  min-height: 180px;
  place-items: center;
  background:
    radial-gradient(circle at 50% 28%, rgba(225, 184, 91, .16), transparent 46%),
    #0a0a0a;
}
.gen-sheet--preset .sheet-cover.sheet-cover--unavailable::after {
  content: "Материал больше недоступен";
  color: rgba(255, 247, 222, .72);
  font-size: 13px;
  font-weight: 650;
}
@media (max-width: 639px) {
  /* Оставляем по 8px с каждой стороны: этого достаточно, чтобы оба
     скруглённых края и первый нижний блок были видны без автопрокрутки
     листа, но ролик остаётся почти во всю ширину. */
  .gen-sheet--preset .sheet-cover.sheet-cover--portrait {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    height: auto;
    max-height: none;
    aspect-ratio: var(--media-ar);
    margin-right: auto;
    margin-left: auto;
    align-self: center;
    border-radius: var(--media-radius);
  }
}
@media (min-width: 640px) {
  .gen-sheet--preset .sheet-cover {
    width: auto;
    max-width: 100%;
    height: min(62dvh, 620px);
    max-height: min(62dvh, 620px);
    margin-right: auto;
    margin-left: auto;
    align-self: center;
  }
}
.gen-sheet--preset .sheet-cover-caption {
  left: 16px;
  right: 16px;
  bottom: 14px;
  font-size: 16px;
  font-weight: 700;
}
.gen-sheet--preset #sheetClose {
  display: none !important;
}
/* У зрителя стрелка Telegram в системной шапке скрыта: вместо неё остаётся
   явная кнопка закрытия прямо на обложке — её не нужно искать под роликом. */
.gen-sheet--trend .sheet-cover-back {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: grid !important;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 50%;
  background: rgba(10,10,12,0.72);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.gen-sheet--trend .sheet-cover-back:active { transform: scale(0.94); }
.gen-sheet--preset .sheet-head {
  padding: 4px 4px 12px;
  background: transparent;
}
/* В публичном viewer заголовок идёт после ролика. Sticky-позиционирование
   базового листа при прокрутке уводило его под обложку и создавало ощущение,
   что вертикальный кадр выходит за границы следующего блока. */
.gen-sheet--trend .sheet-head {
  position: static;
}
/* Экран повтора — не нижний sheet с укороченной рабочей областью. Базовый
   лимит sheet-body считал высоту уже после top inset и затем вычитал ещё
   76px: на телефоне это сдвигало начало кадра примерно на 140px вниз. Для
   вертикального 9:16 из-за этого ноги/низ кадра оказывались за экраном, а
   сверху появлялся чёрный «лист». Тренд занимает всю доступную область под
   системной шапкой Telegram; файл остаётся в его нативной пропорции. */
.gen-sheet--trend .sheet-body {
  max-height: 100%;
  border-radius: 0;
  background: #000;
}
.gen-sheet--preset .sheet-body > .block,
.gen-sheet--preset .sheet-body > #promptBlock {
  padding-left: 4px;
  padding-right: 4px;
}
.sheet-cover-caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}
.sheet-cover-caption.hidden { display: none !important; }
/* Крестики на обложке не нужны — есть BackButton Telegram */
.sheet-cover-back,
.sheet-cover-expand {
  display: none !important;
}
.sheet-cover img,
.sheet-cover .sheet-cover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #0a0a0c;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.sheet-model-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.2;
}
.sheet-model-badge.hidden { display: none !important; }
.sheet-model-badge strong { color: var(--text); font-weight: 600; }
.sheet-like-btn {
  border: 1px solid rgba(255,255,255,0.32);
  background: rgba(18,18,22,0.96);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.sheet-like-btn svg { width: 18px; height: 18px; }
.sheet-like-btn.liked {
  border-color: rgba(255,150,172,0.9);
  background: #9f2941;
  color: #fff;
  box-shadow: 0 7px 22px rgba(159,41,65,0.42);
}
.sheet-round-btn.sheet-gallery-action.sheet-like-btn.liked {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.sheet-round-btn.sheet-gallery-action.sheet-like-btn.liked .sheet-action-icon {
  background: #ff3b30;
  color: #fff;
  box-shadow: 0 5px 14px rgba(255, 59, 48, .35);
}
.sheet-like-btn:active { transform: scale(0.94); }
.sheet-like-btn:focus-visible {
  outline: 3px solid rgba(226,190,103,0.9);
  outline-offset: 3px;
}
.sheet-like-btn.hidden { display: none !important; }
.social-like-burst {
  position: fixed;
  z-index: 160;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.18);
  will-change: transform, opacity;
}
.social-like-burst svg {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 8px 15px rgba(0,0,0,.34));
}
.social-like-burst.is-visible { animation: social-like-burst .58s cubic-bezier(.2,.82,.2,1) forwards; }
@keyframes social-like-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
  24% { opacity: 1; transform: translate(-50%, -50%) scale(1.16); }
  56% { opacity: 1; transform: translate(-50%, -50%) scale(.96); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .social-like-burst { display: none; }
}
.sheet-avatar-pick-btn {
  width: 100%;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 500;
}
.sheet-avatar-pick-ico {
  opacity: 0.7;
  display: inline-grid;
  place-items: center;
}
.sheet-avatar-pick-ico svg { width: 18px; height: 18px; display: block; }
.gen-sheet--preset .model-emoji { display: none; }
.gen-sheet--preset .model-hint { display: none; }
.gen-sheet--preset .model-name {
  font-size: var(--text-lg);
  font-weight: 600;
}
.sheet-foot {
  flex-shrink: 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: 12px 18px calc(14px + var(--chrome-bottom));
}
.sheet-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
  margin: 0 2px 10px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.sheet-price.hidden { display: none; }
.sheet-price-label { font-weight: 500; }
.sheet-price-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}
.sheet-price-value .token-ico { width: 16px; height: 16px; }
.gen-sheet--preset .sheet-foot {
  width: 100%;
  max-width: none;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--line);
  padding: 12px var(--viewer-side) calc(14px + var(--chrome-bottom));
  background: #0a0a0c;
  box-shadow: none;
}
.model-emoji { font-size: 28px; }
.model-name { font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.model-hint { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-relaxed); font-weight: 400; }
.modal-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  align-self: flex-start;
  box-sizing: border-box;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  display: grid;
  place-items: center;
}

/* ─────────────  БЛОКИ ФОРМЫ  ───────────── */
.block { margin-bottom: 20px; }

.dropzone {
  display: block;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 20px;
  text-align: center;
  background: var(--surface);
  transition: border-color 0.15s;
}
.dropzone:active { border-color: var(--accent); }
.dropzone-inner { display: flex; flex-direction: column; gap: 4px; }
.dropzone-title { font-weight: 600; font-size: var(--text-sm); color: var(--text); }
.dropzone-sub { font-size: var(--text-xs); color: var(--muted); line-height: var(--leading-relaxed); }

.ref-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ref-thumb {
  position: relative;
  width: 66px; height: 66px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.ref-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ref-del {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  color: #fff; font-size: 11px;
  display: grid; place-items: center;
}
.multimodal-reference { margin-top: 16px; }
.reference-dropzone { min-height: 78px; padding: 16px; }
.multimodal-reference-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.reference-file-list {
  display: grid;
  gap: 8px;
  max-height: 184px;
  margin-top: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.reference-file {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid rgba(241, 212, 134, .22);
  border-radius: 12px;
  background: rgba(215, 169, 80, .055);
}
.reference-file-icon {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: rgba(215, 169, 80, .14);
  color: #f2d486;
}
.reference-file-copy { display: grid; min-width: 0; gap: 2px; }
.reference-file-copy strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.reference-file-copy small { color: var(--muted); font-size: 11px; }
.reference-file-remove { display: grid; flex: 0 0 32px; width: 32px; height: 32px; margin-left: auto; place-items: center; border: 1px solid rgba(241, 212, 134, .28); border-radius: 10px; background: rgba(255, 255, 255, .035); color: #f2d486; font-size: 15px; }
.duration-slider {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(232, 198, 117, .18);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(208, 155, 57, .035));
  box-shadow: inset 0 1px 0 rgba(255, 246, 215, .055);
}
.duration-slider-head,
.duration-slider-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.duration-slider-head { color: var(--muted); font-size: var(--text-xs); }
.duration-slider-head strong {
  min-width: 74px;
  padding: 5px 8px;
  border: 1px solid rgba(240, 201, 103, .3);
  border-radius: 999px;
  background: rgba(17, 14, 8, .64);
  color: #f7d77d;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.duration-slider-meta { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.duration-slider-rail { display: flex; align-items: center; min-height: 44px; }
.duration-slider input[type="range"] {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.duration-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid rgba(255, 240, 192, .14);
  border-radius: 999px;
  background: linear-gradient(90deg, #d7a950 0 var(--duration-progress, 0%), rgba(255, 255, 255, .11) var(--duration-progress, 0%) 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .48);
}
.duration-slider input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 3px solid #fff0bb;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: #c58b2a;
  box-shadow: 0 0 0 4px rgba(218, 170, 73, .16), 0 3px 8px rgba(0, 0, 0, .45);
}
.duration-slider input[type="range"]::-moz-range-track {
  height: 6px;
  border: 1px solid rgba(255, 240, 192, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .48);
}
.duration-slider input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: #d7a950; }
.duration-slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid #fff0bb;
  border-radius: 50%;
  background: #c58b2a;
  box-shadow: 0 0 0 4px rgba(218, 170, 73, .16), 0 3px 8px rgba(0, 0, 0, .45);
}
.duration-slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.08); }
.duration-slider input[type="range"]:active::-moz-range-thumb { transform: scale(1.08); }
.duration-slider input[type="range"]:focus-visible { outline: 2px solid rgba(241, 212, 134, .88); outline-offset: 4px; border-radius: 999px; }
.duration-slider input[type="range"]:disabled { cursor: not-allowed; opacity: .5; }
.duration-slider-hint { min-height: 15px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.motion-duration-note {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(232, 198, 117, .22);
  border-radius: 14px;
  background: rgba(215, 169, 80, .055);
}
.motion-duration-note strong { color: #f7d77d; font-size: var(--text-sm); }
.motion-duration-note span { color: var(--muted); font-size: var(--text-xs); line-height: 1.35; }

.sheet-avatar-picker { margin-top: 12px; }
.sheet-avatar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.sheet-avatar-label {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 500;
}
.sheet-avatar-link { font-size: var(--text-xs); padding: 0; }
.sheet-avatar-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.sheet-avatar-grid::-webkit-scrollbar { display: none; }
.sheet-avatar-btn {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--line);
  padding: 0;
  background: var(--surface-2);
  transition: border-color 0.15s, transform 0.12s;
}
.sheet-avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet-avatar-btn.active { border-color: var(--accent); box-shadow: var(--glow); }
.sheet-avatar-btn:active { transform: scale(0.94); }
.sheet-avatar-empty { font-size: var(--text-xs); margin: 4px 0 0; line-height: var(--leading-relaxed); }

.prompt {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
}
.prompt:focus { outline: none; border-color: var(--accent); }
.prompt-counter { text-align: right; font-size: var(--text-xs); color: var(--muted); margin-top: 5px; font-weight: 400; }

/* Длинный промпт — основной рабочий инструмент, а не короткий комментарий.
   Поле остаётся во всю ширину листа на телефоне и получает читаемую высоту;
   на широком экране сам лист ограничен, чтобы строки не становились слишком длинными. */
#genSheet .sheet-body {
  width: 100%;
  max-width: 860px;
  align-self: center;
  box-sizing: border-box;
}
#genSheet #promptBlock { min-width: 0; }
#genSheet #prompt {
  display: block;
  min-width: 0;
  min-height: clamp(180px, 28dvh, 280px);
  max-height: 54dvh;
  overflow-y: auto;
  padding: 16px 17px;
  font-size: 16px;
  line-height: 1.55;
  resize: vertical;
  -webkit-overflow-scrolling: touch;
}
#modHomeUploadPrompt { min-height: 170px; line-height: 1.55; }

.aspect-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.aspect-cell {
  padding: 11px 4px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition: transform 0.1s;
}
.aspect-cell:active { transform: scale(0.94); }
.aspect-cell.active { background: var(--accent-grad); color: #1a1200; border-color: transparent; }

/* Обычное «Создать видео»: форматы — короткие touch-safe овалы. Это не
   распространяется на авторские/витринные сценарии, где сетка — часть состава
   карточки и уже имеет отдельную композицию. */
#genSheet.gen-sheet--video-create .aspect-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#genSheet.gen-sheet--video-create .aspect-cell {
  flex: 0 0 auto;
  min-width: 64px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 10px 17px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.chip.active { background: var(--accent-grad); color: #1a1200; border-color: transparent; }

/* ─────────────  КНОПКИ  ───────────── */
.btn-primary {
  background: var(--accent-grad);
  color: #1a1200;
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-normal);
  padding: 15px 18px;
  border-radius: 15px;
  box-shadow: var(--glow);
  transition: transform 0.12s ease, opacity 0.15s;
}
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.4; box-shadow: none; }
.btn-block { width: 100%; display: block; }

/* ─────────────  ИСТОРИЯ  ───────────── */
.filter-pills { display: flex; gap: 8px; margin-bottom: 16px; }
#modSectionTabs.filter-pills {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  padding-bottom: 4px;
}
#modSectionTabs.filter-pills::-webkit-scrollbar { display: none; }
#modSectionTabs .filter-pill { flex-shrink: 0; white-space: nowrap; }
.filter-pill {
  padding: 10px 17px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
  color: var(--text-secondary);
}
.filter-pill.active { background: var(--accent-grad); color: #1a1200; border-color: transparent; font-weight: 600; }
.filter-pill--top-creators {
  color: #f8ddb0;
  border-color: rgba(242, 186, 84, .38);
  background: rgba(126, 76, 11, .18);
}
.filter-pill--top-creators.active {
  color: #201406;
  border-color: rgba(255, 229, 160, .78);
  background: linear-gradient(135deg, #ffe0a3, #e7ad43);
  box-shadow: inset 0 1px rgba(255,255,240,.65), 0 5px 15px rgba(148,83,5,.24);
}
.info-banner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.low-balance-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 16px 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 92, 92, 0.12);
  border: 1px solid rgba(255, 92, 92, 0.35);
  color: #ffb4b4;
  font-size: 13px;
  font-weight: 600;
}
.low-balance-banner.hidden { display: none !important; }
.video-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.video-mode-tabs.hidden { display: none !important; }
.video-mode-tab {
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.video-mode-tab.active {
  background: var(--accent);
  color: #111;
  border-color: var(--accent);
}
.mod-users-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mod-user-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.mod-user-row:active { opacity: 0.88; }
.mod-user-row-name { font-weight: 600; font-size: var(--text-base); }
.mod-user-row-meta { font-size: var(--text-sm); color: var(--muted); }
.mod-user-head .btn-outline { margin-top: 10px; }
.mod-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.mod-user-row:active { opacity: 0.9; }
.mod-user-row-meta { font-size: 12px; color: var(--muted); }
.history-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.history-card {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #0a0a0c;
  border: none;
  aspect-ratio: 3 / 4;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* История содержит до 50 работ. Вне viewport карточки не должны участвовать
     в paint/layout во время свайпа, как и карточки ленты «Идей». */
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: auto 250px;
}
.history-card:active { transform: scale(0.98); }
.history-share,
.trend-share,
.gc-share,
.work-share {
  position: absolute;
  z-index: 5;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  color: #fff;
  background: rgba(0,0,0,0.56);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.history-share { right: 8px; bottom: 8px; }
.history-share:active,
.trend-share:active,
.gc-share:active,
.work-share:active { transform: scale(0.92); }
.history-share svg,
.trend-share svg,
.gc-share svg,
.work-share svg { width: 18px; height: 18px; }
.history-card-media,
.history-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0a0c;
}
.history-card img,
.history-card video.card-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.history-card-play {
  position: absolute; inset: 0;
  z-index: 1;
  display: grid; place-items: center;
  font-size: 22px; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.35));
  pointer-events: none;
}
.history-card-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 32px;
  color: var(--muted);
  width: 100%;
  height: 100%;
  background: #0a0a0c;
}
.history-card-loading { font-size: 22px; opacity: 0.7; }
.history-tag {
  position: absolute; top: 8px; right: 8px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  color: #fff;
}
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 46px 0; text-align: center; }
.empty-emoji { font-size: 44px; opacity: 0.9; }

/* ─────────────  ПРОФИЛЬ  ───────────── */
.profile-head { display: flex; align-items: center; gap: 20px; margin: 10px 0 16px; }
.profile-avatar-wrap {
  position: relative; flex-shrink: 0;
  border: none; background: none; padding: 0; cursor: pointer;
}
.profile-avatar-wrap:active .profile-avatar { transform: scale(0.96); }
.profile-avatar {
  width: 78px; height: 78px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 2px solid var(--accent);
  display: grid; place-items: center;
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
  overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-badge {
  position: absolute; right: -2px; bottom: -2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #1a1200;
  display: grid; place-items: center;
  border: 3px solid var(--bg);
}
.avatar-badge.hidden { display: none; }
.profile-avatar-wrap:disabled { cursor: default; }
.profile-avatar-wrap:disabled:active .profile-avatar { transform: none; }
.avatar-badge svg { width: 13px; height: 13px; }
.profile-stats { display: flex; gap: 26px; flex: 1; justify-content: space-around; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat-num { font-size: var(--text-xl); font-weight: 700; color: var(--accent); letter-spacing: var(--tracking-tight); }
.stat-label { font-size: var(--text-xs); color: var(--muted); font-weight: 500; }
.profile-name { font-size: var(--text-xl); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.profile-name-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; background: none; padding: 0; margin-bottom: 14px;
  color: var(--text); cursor: pointer; text-align: left;
}
.profile-name-btn:active { opacity: 0.75; }
.profile-edit-ico { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.profile-actions { display: flex; gap: 12px; margin-bottom: 26px; }

.profile-edit-avatar { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 0 20px; }
.profile-edit-ava-btn {
  position: relative; border: none; background: none; padding: 0; cursor: pointer;
}
.profile-edit-ava-btn:active .profile-avatar { transform: scale(0.96); }
.profile-edit-hint { font-size: var(--text-xs); color: var(--muted); margin: 0; text-align: center; line-height: var(--leading-relaxed); }
#profileEditSheet { z-index: 96; }
#avatarCropModal { z-index: 120; }
.profile-back { border: none; background: none; color: var(--accent); font-size: var(--text-sm); font-weight: 600; padding: 0; margin: 4px 0 8px; cursor: pointer; }
.profile-stats-row { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: var(--text-xs); color: var(--muted); margin: -6px 0 12px; font-weight: 400; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.profile-badge { font-size: var(--text-xs); font-weight: 500; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.profile-bio { font-size: var(--text-sm); line-height: var(--leading-relaxed); margin: 0 0 12px; min-height: 0; font-weight: 400; color: var(--text-secondary); }
.profile-bio:empty { display: none; }
.profile-telegram {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}
.profile-telegram.hidden { display: none !important; }
.profile-telegram-channel {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(238, 206, 126, .31);
  border-radius: 12px;
  background: rgba(244, 222, 158, .06);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .14s ease;
}
.profile-telegram-channel [data-ix] { flex: 0 0 auto; color: var(--accent); }
.profile-telegram-channel [data-ix] svg { width: 17px; height: 17px; }
.profile-telegram-channel { color: var(--accent); font-size: 13px; font-weight: 700; }
.profile-telegram-channel:active { transform: scale(.985); background: rgba(244, 222, 158, .12); }
.profile-telegram-channel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.profile-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: var(--text-sm); font-weight: 600; }
.session-warn {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(236, 57, 66, 0.45);
  background: rgba(236, 57, 66, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.session-warn.hidden { display: none; }
.session-warn-text { font-size: 13px; color: var(--text); line-height: 1.4; }
.btn-sm { padding: 8px 12px; font-size: var(--text-xs); font-weight: 600; border-radius: 10px; }
.profile-pinned { margin-bottom: 14px; }
.profile-pinned-label { font-size: var(--text-xs); color: var(--muted); margin-bottom: 8px; font-weight: 500; }
.profile-pinned .work-card { max-width: 180px; }
.profile-showcase-edit {
  width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; touch-action: manipulation; transition: border-color .18s ease, background .18s ease, transform .14s ease;
}
.profile-showcase-edit svg { width: 18px; height: 18px; color: var(--accent); }
.profile-showcase-edit:hover { border-color: var(--accent); background: var(--surface-2); }
.profile-showcase-edit:active { transform: scale(.985); }
.profile-works-sheet { max-width: 560px; }
.profile-media-add {
  min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 12px; margin: 2px 0 10px;
  border: 1px dashed var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--text);
  cursor: pointer; touch-action: manipulation;
}
.profile-media-add:focus-within, .profile-media-add:hover { border-color: var(--accent); background: var(--surface-2); }
.profile-media-add-icon {
  width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 12px;
  color: #1a1200; background: var(--accent-grad);
}
.profile-media-add-icon svg { width: 22px; height: 22px; }
.profile-media-add strong, .profile-media-add small { display: block; }
.profile-media-add strong { font-size: var(--text-sm); }
.profile-media-add small { margin-top: 3px; color: var(--muted); font-size: var(--text-xs); line-height: 1.35; }
.profile-works-hint { margin: 0 0 10px; color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.profile-works-editor { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.profile-work-editor-item {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border-color .18s ease, opacity .18s ease, transform .18s ease;
}
.profile-work-editor-item.is-dragging { opacity: .45; transform: scale(.985); }
.profile-work-editor-item.is-drop-target { border-color: var(--accent); }
.profile-work-editor-preview { width: 60px; height: 60px; overflow: hidden; border-radius: 10px; background: #0a0a0c; }
.profile-work-editor-preview img, .profile-work-editor-preview video { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-work-editor-main { min-width: 0; }
.profile-work-editor-title { display: flex; gap: 6px; align-items: center; color: var(--text); font-size: var(--text-sm); font-weight: 600; }
.profile-work-editor-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-work-editor-meta { margin-top: 4px; color: var(--muted); font-size: var(--text-xs); }
.profile-work-editor-actions { display: flex; gap: 4px; align-items: center; }
.profile-work-editor-actions button {
  width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px;
  background: transparent; color: var(--text); font: inherit; cursor: pointer; touch-action: manipulation;
}
.profile-work-editor-actions button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.profile-work-editor-actions button:disabled { opacity: .35; cursor: default; }
.profile-work-editor-actions .profile-work-remove { color: #ef6a70; }
.profile-works-empty { padding: 22px 12px; margin-bottom: 14px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; font-size: var(--text-sm); }
@media (prefers-reduced-motion: reduce) {
  .profile-showcase-edit, .profile-work-editor-item { transition: none; }
}
.profile-select { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; color: var(--text); font-size: var(--text-base); font-weight: 400; }
.pub-toggle { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text); margin: 8px 0; font-weight: 400; }
.setting-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.setting-toggle-label { flex: 1; font-size: var(--text-base); font-weight: 400; color: var(--text); line-height: var(--leading-normal); }
.setting-toggle-switch {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}
.setting-toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.setting-toggle input:checked + .setting-toggle-switch { background: var(--accent); }
.setting-toggle input:checked + .setting-toggle-switch::after { transform: translateX(20px); }
.work-card-menu { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; z-index: 2; }
.work-actions-list { display: flex; flex-direction: column; gap: 8px; }
.work-action-btn { width: 100%; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 15px; cursor: pointer; }
.crop-sheet { max-width: 340px; }
.crop-stage { display: grid; place-items: center; margin: 10px 0; border-radius: 50%; overflow: hidden; border: 2px solid var(--accent); width: 260px; height: 260px; margin-inline: auto; }
.crop-zoom { width: 100%; margin: 12px 0; accent-color: var(--accent); }
.work-card { position: relative; }
.work-pin-badge { position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 3px 7px; border-radius: 999px; background: var(--accent-grad); color: #1a1200; font-weight: 700; z-index: 2; }
.ideas-status-badge { position: absolute; top: 8px; left: 8px; font-size: 10px; padding: 3px 7px; border-radius: 999px; background: rgba(0,0,0,0.65); color: #fff; z-index: 2; }
.icon-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  display: grid; place-items: center;
  transition: transform 0.12s, background 0.15s;
}
.icon-btn svg,
.icon-btn[data-ix] svg,
.partner-link-edit svg,
.sheet-round-btn svg,
.avatar-badge svg,
.profile-edit-ico svg,
.prompt-lock svg { width: 1em; height: 1em; display: block; }
.icon-btn svg { width: 20px; height: 20px; }
.avatar-badge { display: grid; place-items: center; }
.avatar-badge svg { width: 14px; height: 14px; }
.profile-edit-ico { display: inline-grid; place-items: center; }
.ws-like svg, .work-stats svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.icon-btn:active { transform: scale(0.92); background: var(--accent-soft); }

/* Работы в профиле */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.work-card {
  position: relative;
  /* Видео декодируется в отдельном compositor-слое. Свой stacking context
     гарантирует, что метрики и авторские действия остаются поверх ролика. */
  isolation: isolate;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #0a0a0c;
  border: 1px solid var(--line);
  padding: 0;
  /* Профиль автора может содержать 100 работ; карточки вне экрана не должны
     участвовать в paint/layout на каждом кадре прокрутки. */
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}
.work-card img,
.work-card .card-preview-poster,
.work-card video.card-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.work-play {
  position: absolute; inset: 0;
  z-index: 1;
  display: grid; place-items: center;
  font-size: 24px; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.3));
  pointer-events: none;
}
.work-empty {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 34px;
  background: #0a0a0c;
}
.work-badge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px);
  color: #fff; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 8px;
}
.work-stats {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 4;
  display: flex; gap: 14px; align-items: center;
  padding: 18px 12px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
  color: #fff; font-size: 12.5px; font-weight: 600;
}
.work-stats span { display: inline-flex; align-items: center; gap: 5px; }
.work-stats svg { width: 15px; height: 15px; opacity: 0.95; }
.work-stats .ws-like svg { color: var(--accent); }
.work-share { right: 8px; bottom: 7px; width: 44px; height: 44px; }
.work-card .work-share,
.work-card .work-badge,
.work-card .work-pin-badge,
.work-card .ideas-status-badge,
.work-card .work-card-menu { z-index: 4; }
.work-share svg { width: 17px; height: 17px; }

/* ─────────────  ПРЕСЕТЫ  ───────────── */
.preset-group { margin-bottom: 26px; }
.currency-picker { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.currency-picker select { min-height: 44px; max-width: 60%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; }
#payCurrencyNote:empty { display: none; }
#payCurrencyNote { margin: 0 0 16px; font-size: 13px; }
.preset-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.preset-title { font-size: var(--text-md); font-weight: 600; letter-spacing: var(--tracking-tight); margin: 0; }
.preset-view-all {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
  margin: -6px 0;
  flex-shrink: 0;
}
.preset-home-sub { margin-top: -10px; margin-bottom: 8px; }
.preset-empty-state {
  margin: 8px 0 20px;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.preset-scroller {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 2px;
  /* pan-y — иначе на карточке не листается главная */
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}
.preset-scroller::-webkit-scrollbar { display: none; }
.preset-card {
  flex: 0 0 148px;
  width: 148px;
  height: 210px;
  scroll-snap-align: start;
  border-radius: 18px;
  border: none;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  text-align: left;
  position: relative;
  overflow: hidden;
  background: #0a0a0c;
  box-shadow: none;
  transition: transform 0.12s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.preset-card:active { transform: scale(0.97); }
.preset-card:focus-visible,
.preset-view-all:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.preset-card::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.72)); pointer-events: none; }
.preset-card--photo { padding: 0; border: none; }
.preset-card--photo::after { display: none; }
.preset-card-media,
.preset-card > img.preset-card-media,
.preset-card > video.card-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
  background: #0a0a0c;
  pointer-events: none;
}
.preset-card > video.card-preview-video {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.preset-card > video.card-preview-video.is-ready { opacity: 1; }
.preset-card-media--ph {
  background:
    radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.28), transparent 55%),
    #121218;
}
.preset-card--missing-media {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 14px;
  border: 1px solid rgba(230, 194, 107, .24);
  background:
    radial-gradient(circle at 70% 18%, rgba(219, 174, 77, .2), transparent 46%),
    linear-gradient(145deg, #211a0e, #0a0a0a 72%);
}
.preset-card--missing-media::after { display: none; }
.preset-card--missing-media .preset-emoji,
.preset-card--missing-media .preset-name { position: relative; z-index: 1; }
.preset-card-author,
.preset-card-like {
  position: absolute;
  z-index: 4;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(12,12,16,0.82);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 5px 16px rgba(0,0,0,0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  touch-action: manipulation;
}
.preset-card-author {
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 56px);
  gap: 6px;
  padding: 4px 10px 4px 4px;
  overflow: hidden;
  border-radius: 999px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.preset-card-author > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.preset-card-ava {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 800;
}
.preset-card-like {
  top: 8px;
  right: 8px;
  min-width: 44px;
  justify-content: center;
  gap: 4px;
  padding: 7px 9px;
  border-radius: 999px;
}
.preset-card-like svg { width: 17px; height: 17px; }
.preset-card-like.liked {
  border-color: rgba(255,150,172,0.9);
  background: #9f2941;
}
.preset-card-like:active,
.preset-card-author:active { transform: scale(0.95); }
.preset-card-like:focus-visible,
.preset-card-author:focus-visible { outline: 3px solid rgba(226,190,103,0.9); outline-offset: 2px; }
.preset-emoji { position: relative; z-index: 3; font-size: 24px; }
.preset-name { position: relative; z-index: 3; font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); }
.preset-group-sheet {
  padding-bottom: calc(16px + var(--chrome-bottom));
  max-height: calc(100% - 8px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#presetGroupSheet.sheet {
  overscroll-behavior: contain;
}
#presetGroupSheet .sheet-body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.preset-group-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-bottom: 12px;
}
.preset-grid-card {
  position: relative;
  border: none;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  padding: 0;
  text-align: left;
  background: #0a0a0c;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.preset-grid-card:active { transform: scale(0.98); }
.preset-grid-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.78));
  pointer-events: none;
}
.preset-grid-card .preset-card-media,
.preset-grid-card > img.preset-card-media,
.preset-grid-card > video.card-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
  background: #0a0a0c;
  pointer-events: none;
}
.preset-grid-card > video.card-preview-video {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.preset-grid-card > video.card-preview-video.is-ready { opacity: 1; }
.preset-grid-card .preset-name {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.preset-grid-card .preset-emoji {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 36px;
  z-index: 0;
}
.video-recipe-grid {
  align-items: stretch;
}
.video-recipe-column { display: contents; }
#presetGroupSheet.preset-group-sheet--recipe {
  padding-top: var(--chrome-top);
  background: #050505;
}
#presetGroupSheet.preset-group-sheet--recipe .preset-group-sheet {
  width: min(100%, 640px);
  min-height: 100%;
  margin: 0 auto;
  padding: 0 18px calc(28px + var(--chrome-bottom));
  border: 0;
  border-radius: 0;
  background: #050505;
  box-shadow: none;
}
#presetGroupSheet.preset-group-sheet--recipe .preset-group-sheet::before {
  display: none;
}
#presetGroupSheet.preset-group-sheet--recipe .sheet-head {
  position: sticky;
  top: 0;
  margin: 0 -18px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: rgba(5, 5, 5, .96);
  backdrop-filter: blur(12px);
  z-index: 5;
}
#presetGroupSheet.preset-group-sheet--recipe .model-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #f7f5f0;
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#presetGroupSheet.preset-group-sheet--recipe .modal-close {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #fff;
}
.recipe-manage-btn {
  min-height: 40px;
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid rgba(232, 198, 117, .42);
  border-radius: 12px;
  background: rgba(232, 198, 117, .08);
  color: #f2d487;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .01em;
}
.recipe-manage-btn:active { transform: scale(.98); }
.recipe-video-handoff-kicker {
  color: var(--gold, #e2be67);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
}
.video-recipe-card {
  min-height: 190px;
  isolation: isolate;
  outline: 0;
}
.video-recipe-card::before {
  display: none;
}
.video-recipe-card--video {
  grid-row: span 2;
  min-height: 392px;
  box-shadow: none;
}
.video-recipe-card--reference {
  aspect-ratio: auto;
  overflow: hidden;
  padding-bottom: 64px;
  background: #0a0a0c center / cover no-repeat;
  background-image: var(--recipe-ref-image, none);
}
/* Подложка заполняет плитку, но сам подготовительный кадр не обрезается. */
.video-recipe-card--reference::before {
  display: block;
  content: "";
  position: absolute;
  z-index: 0;
  inset: -16px;
  background: var(--recipe-ref-image, none) center / cover no-repeat;
  filter: blur(15px) brightness(.48) saturate(.82);
  transform: scale(1.08);
  pointer-events: none;
}
/* Кадр ролика заполняет большую карточку; у референсов показываем весь силуэт,
   чтобы на телефоне не исчезали голова или ноги. */
.video-recipe-card .preset-card-media {
  object-position: center top;
}
/* Точнее базового `.preset-grid-card > img.preset-card-media`: это правило
   действительно выигрывает каскад и сохраняет кадр целиком. */
.preset-grid-card.video-recipe-card--reference > img.preset-card-media {
  inset: 0 0 64px;
  z-index: 1;
  object-fit: contain;
  object-position: center;
  background: transparent;
}
.video-recipe-card--reference .video-recipe-card-meta {
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 64px;
  padding: 9px 12px 10px;
  background: linear-gradient(180deg, rgba(5, 5, 6, .18), rgba(5, 5, 6, .92) 45%);
}
.video-recipe-card--reference .video-recipe-card-meta strong { font-size: 15px; }
.video-recipe-card-meta {
  position: absolute;
  z-index: 4;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: grid;
  gap: 2px;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.82);
  pointer-events: none;
}
.video-recipe-card-meta small {
  color: rgba(250, 222, 151, 0.98);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.video-recipe-card-meta strong {
  color: #fff;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.12;
}
.video-recipe-card-meta em {
  overflow: hidden;
  color: rgba(255, 250, 240, 0.78);
  font-size: 10px;
  font-style: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipe-video-handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 2px;
  padding: 12px;
  border: 1px solid rgba(224, 184, 91, 0.3);
  border-radius: 14px;
  background: rgba(224, 184, 91, 0.07);
}
.recipe-video-handoff.hidden { display: none; }
.recipe-video-handoff > div { min-width: 0; }
.recipe-video-handoff strong {
  display: block;
  margin-top: 2px;
  color: #f8f1e1;
  font-size: 13px;
  line-height: 1.2;
}
.recipe-video-handoff p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.recipe-video-handoff .btn-outline {
  flex: 0 0 auto;
  min-height: 40px;
  font-size: 11px;
}

#videoRecipeEditorSheet {
  padding-top: var(--chrome-top);
  background: rgba(3, 3, 4, .94);
}
#videoRecipeEditorSheet .video-recipe-editor-sheet {
  width: min(100%, 640px);
  max-height: calc(100dvh - var(--chrome-top));
  margin: 0 auto;
  padding-bottom: calc(24px + var(--chrome-bottom));
  overflow-y: auto;
  border: 1px solid rgba(232, 198, 117, .2);
  border-radius: 22px 22px 0 0;
  background: linear-gradient(155deg, #1b1811 0%, #0d0d0d 42%, #080808 100%);
  overscroll-behavior: contain;
}
#videoRecipeEditorSheet .sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -18px 16px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(232, 198, 117, .18);
  background: rgba(22, 19, 13, .96);
  backdrop-filter: blur(14px);
}
.video-recipe-editor-hint {
  margin-top: 3px;
  color: rgba(255, 245, 220, .58);
  font-size: 12px;
}
.video-recipe-editor-prompt-field { display: grid; gap: 8px; }
.video-recipe-editor-prompt-field > span,
.video-recipe-editor-ref-copy > label {
  color: rgba(255, 245, 220, .74);
  font-size: 12px;
  font-weight: 650;
}
.video-recipe-editor-prompt-field .prompt {
  min-height: 180px;
  max-height: 54dvh;
  overflow-y: auto;
  font-size: 16px;
  line-height: 1.55;
  resize: vertical;
  border-color: rgba(232, 198, 117, .22);
  background: rgba(0, 0, 0, .22);
}
.video-recipe-editor-toggle {
  margin: 12px 0;
  border-top: 1px solid rgba(232, 198, 117, .13);
  border-bottom: 1px solid rgba(232, 198, 117, .13);
}
.video-recipe-editor-variables {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
#videoRecipeEditorVariables { display: grid; gap: 8px; }
.video-recipe-editor-variable {
  display: grid;
  grid-template-columns: minmax(82px, .72fr) minmax(100px, 1fr) minmax(100px, 1fr) auto;
  gap: 7px;
  align-items: end;
  padding: 9px;
  border: 1px solid rgba(255, 244, 214, .11);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
}
.video-recipe-editor-variable > label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: rgba(255, 245, 220, .62);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.video-recipe-editor-variable .field-input { min-width: 0; padding: 9px; font-size: 13px; }
.video-recipe-editor-variable-remove {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(255, 143, 143, .3);
  border-radius: 10px;
  background: rgba(255, 90, 90, .08);
  color: #ffb6b6;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.video-recipe-editor-refs {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.video-recipe-editor-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.video-recipe-editor-section-head strong { color: #fff5de; font-size: 15px; }
.video-recipe-editor-section-head p {
  margin: 4px 0 0;
  color: rgba(255, 245, 220, .56);
  font-size: 12px;
  line-height: 1.35;
}
.video-recipe-editor-count {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(232, 198, 117, .25);
  border-radius: 999px;
  color: #f2d487;
  font-size: 11px;
  font-weight: 700;
}
#videoRecipeEditorRefs { display: grid; gap: 8px; }
.video-recipe-editor-ref {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255, 244, 214, .11);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
}
.video-recipe-editor-ref > img {
  width: 72px;
  height: 88px;
  border-radius: 9px;
  object-fit: cover;
  background: #050505;
}
.video-recipe-editor-ref-copy { min-width: 0; }
.video-recipe-editor-ref-copy > label { display: grid; gap: 6px; }
.video-recipe-editor-ref-prompt {
  min-height: 54px;
  padding: 8px 9px;
  resize: vertical;
  color: #fff8ec;
  font-size: 12px;
  line-height: 1.3;
}
.video-recipe-editor-ref-remove {
  min-height: 40px;
  padding: 7px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 198, 183, .9);
  font-size: 11px;
  font-weight: 700;
}
.video-recipe-editor-empty {
  margin: 0;
  padding: 13px;
  border: 1px dashed rgba(232, 198, 117, .24);
  border-radius: 12px;
  color: rgba(255, 245, 220, .62);
  font-size: 12px;
  line-height: 1.4;
}
.video-recipe-editor-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 10px;
}
.video-recipe-editor-actions .btn-outline {
  min-height: 44px;
  padding: 9px 6px;
  font-size: 12px;
}
.video-recipe-editor-actions .video-recipe-editor-delete {
  border-color: rgba(230, 120, 100, .38);
  color: #f0aaa0;
}
/* Мобильный рецепт повторяет эталонную masonry-композицию: независимые
   колонки без схлопывающихся auto-строк Grid. Слева ролик 9:16 и следующий
   кадр, справа — первые два портретных референса. */
@media (max-width: 639px) {
  #presetGroupSheet.preset-group-sheet--recipe .video-recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 10px;
  }
  #presetGroupSheet.preset-group-sheet--recipe .video-recipe-column {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 10px;
  }
  #presetGroupSheet.preset-group-sheet--recipe .video-recipe-card--video {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 9 / 16;
  }
  #presetGroupSheet.preset-group-sheet--recipe .video-recipe-card--reference {
    min-height: 0;
    /* Высокий формат ближе к самому коллажу 9:16: кадр не превращается
       в узкую полосу и одновременно вмещает полный рост. */
    aspect-ratio: 9 / 16;
    padding-bottom: 60px;
  }
  .preset-grid-card.video-recipe-card--reference > img.preset-card-media { inset-bottom: 60px; }
  .video-recipe-card--reference .video-recipe-card-meta { min-height: 60px; padding: 8px 10px 9px; }
}
@media (max-width: 370px) {
  .video-recipe-editor-ref { grid-template-columns: 58px minmax(0, 1fr); }
  .video-recipe-editor-ref > img { width: 58px; height: 74px; }
  .video-recipe-editor-ref-remove { grid-column: 2; justify-self: start; min-height: 32px; padding: 0; }
}
@media (max-width: 370px) {
  #presetGroupSheet.preset-group-sheet--recipe .video-recipe-card--video { min-height: 0; }
  .video-recipe-card { min-height: 171px; }
  .recipe-video-handoff { align-items: flex-start; flex-direction: column; }
  .recipe-video-handoff .btn-outline { width: 100%; }
}
.sheet-cover-video.hidden { display: none !important; }
.sheet-cover.has-video #sheetCoverImg { display: block; }
.sheet-cover .sheet-cover-video { opacity: 0; }
.sheet-cover .sheet-cover-video.is-ready { opacity: 1; }
.sheet-cover.has-video { cursor: pointer; }

/* ─────────────  МАГАЗИН  ───────────── */
.plans { display: flex; flex-direction: column; gap: 11px; margin-bottom: 22px; }
.plan {
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  transition: border-color 0.15s, transform 0.12s;
}
.plan:active { transform: scale(0.99); }
.plan.selected { border-color: var(--accent); box-shadow: var(--glow); }
.plan-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.plan-tier { font-weight: 700; font-size: 15px; }
.plan-badge { background: var(--accent-grad); color: #1a1200; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.plan-badge.hot { background: linear-gradient(135deg, #ff9a4d, #ff6a3d); }
.plan-row { display: flex; justify-content: space-between; align-items: flex-end; }
.plan-volume { font-size: 19px; font-weight: 800; }
.plan-tagline { font-size: 12px; color: var(--muted); margin-top: 2px; }
.plan-price-col { text-align: right; }
.plan-old { font-size: 12px; color: var(--muted); text-decoration: line-through; }
.plan-price { font-size: 19px; font-weight: 800; color: var(--accent); }
.plans-empty { color: var(--muted); text-align: center; }
.plan-loki {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.plan-loki-name { font-weight: 600; font-size: var(--text-base); letter-spacing: var(--tracking-normal); }
.plan-loki-price { text-align: right; font-size: var(--text-sm); color: var(--text-secondary); }
.plan-loki-price strong { font-size: var(--text-lg); font-weight: 700; color: var(--accent); letter-spacing: var(--tracking-tight); }
.plan-details { margin-bottom: 18px; }
.plan-details-title { font-size: var(--text-base); font-weight: 600; margin: 0 0 12px; letter-spacing: var(--tracking-tight); }
.plan-highlights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.plan-highlights li { font-size: var(--text-sm); line-height: var(--leading-relaxed); padding-left: 26px; position: relative; font-weight: 400; }
.plan-highlights li.included::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.plan-highlights li.excluded { color: var(--muted); }
.plan-highlights li.excluded::before { content: "✕"; position: absolute; left: 0; color: var(--muted); }
.plan-tagline { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; line-height: var(--leading-snug); }
.checkout-panel { margin-bottom: 14px; }
.pay-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
@media (min-width: 380px) {
  .pay-methods { grid-template-columns: 1fr 1fr 1fr; }
}
.pay-method {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.pay-method.hidden { display: none !important; }
.pay-method.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
.pay-method-title { font-weight: 700; font-size: var(--text-sm); }
.pay-method-sub { font-size: var(--text-xs); color: var(--muted); line-height: 1.3; }
.checkout-toggle {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 15px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}
.checkout-toggle .chevron { transition: transform 0.2s; color: var(--muted); }
.checkout-toggle[aria-expanded="true"] .chevron { transform: rotate(90deg); }
.checkout-fields { display: flex; flex-direction: column; gap: 11px; margin-top: 11px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 14px;
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
}
.field input:focus { outline: none; border-color: var(--accent); }
.legal { text-align: center; margin-top: 12px; }
.legal-offer { margin-top: 6px; }
.legal-offer a { color: var(--accent); text-underline-offset: 3px; }

/* ─────────────  НИЖНЯЯ НАВИГАЦИЯ  ───────────── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: calc(var(--bottom-nav-height) + var(--bottom-safe-area));
  padding-bottom: var(--bottom-safe-area);
  background: rgba(8, 8, 10, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  flex: 1;
  transition: color 0.15s;
}
.nav-item.active { color: var(--accent); font-weight: 600; }
.nav-ico { display: grid; place-items: center; height: 24px; }
.nav-ico svg { width: 23px; height: 23px; display: block; }
.nav-center .nav-plus {
  width: 48px; height: 48px;
  margin-top: -16px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #1a1200;
  font-size: 30px;
  font-weight: 300;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s;
}
.nav-center .nav-plus svg {
  width: 26px;
  height: 26px;
  display: block;
}
.nav-center:active .nav-plus { transform: scale(0.9); }
.nav-center { color: var(--text); }

/* ─────────────  МОДАЛКИ  ───────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  animation: fade 0.2s ease;
}
.modal-sheet {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 14px; }
.result-img { width: 100%; border-radius: var(--radius-sm); margin-bottom: 12px; display: block; }
.result-note { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.success-icon {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #1a1200;
  font-size: 30px;
  display: grid; place-items: center;
  box-shadow: var(--glow);
}

/* ─────────────  ОВЕРЛЕЙ ГЕНЕРАЦИИ  ───────────── */
.gen-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: rgba(8, 8, 10, 0.94);
  backdrop-filter: blur(8px);
  padding: calc(var(--chrome-top) + 8px) 20px calc(24px + var(--chrome-bottom));
}
.gen-overlay-back {
  position: absolute;
  top: calc(var(--chrome-top) + 8px);
  left: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  background: var(--surface);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.gen-overlay-back:active { transform: scale(0.94); }
.gen-overlay-hint {
  margin: 0;
  max-width: 280px;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--leading-relaxed);
}
.particles { display: block; }
.gen-status { font-size: var(--text-base); font-weight: 600; color: var(--accent); letter-spacing: var(--tracking-normal); }

/* ─────────────  ГЛАВНАЯ: БАННЕРЫ (как LOKI)  ───────────── */
.home-banners {
  width: 100%;
  margin-bottom: 18px;
}
.home-banner-carousel { width: 100%; }
.home-banner-track {
  display: flex;
  gap: 12px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.home-banner-track::-webkit-scrollbar { display: none; }
.home-banner {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-height: 96px;
  border-radius: 22px;
  overflow: hidden;
  /* Карточка без светящихся краёв и декоративной рамки. */
  border: none;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  text-align: left;
  background-color: #111;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: none;
  isolation: isolate;
  transition: transform 180ms cubic-bezier(.16,1,.3,1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.home-banner:active { transform: scale(0.985); }
.home-banner:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.home-banner--video {
  min-height: 230px;
  align-items: stretch;
  padding: 0;
  background-image: url("/shop/assets/hero-video.jpg?v=6");
  border: none;
}
.home-banner--video:active { transform: scale(0.99); }

.home-banner--video .hb-text {
  align-self: flex-start;
  max-width: min(80%, 510px);
  padding: 52px 22px 0;
}

.home-banner--video .hb-kicker { margin-bottom: 8px; }

.home-banner--video .hb-sub {
  max-width: 360px;
  color: rgba(255, 255, 255, 0.82);
}

.home-banner--video .hb-cta {
  right: auto;
  bottom: 20px;
  left: 22px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}
.home-brand-hero {
  min-height: 260px;
}
.home-brand-hero .hb-text {
  max-width: min(94%, 550px);
}
.home-brand-hero .hb-title {
  margin: 0;
  font-size: clamp(23px, 6.2vw, 34px);
  line-height: 1.08;
}
.home-brand-hero .hb-sub { margin-bottom: 0; }
.home-brand-actions {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 18px;
  left: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}
.home-brand-hero .hb-cta {
  position: static;
  min-height: 40px;
  border: 0;
  cursor: pointer;
}
.home-hero-partner {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  background: rgba(9,9,12,0.58);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.home-hero-partner:focus-visible,
.home-brand-hero .hb-cta:focus-visible,
.home-shortcuts-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.home-banner-motion {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #111;
  pointer-events: none;
}
.home-banner--video::after {
  display: none;
}
.home-banner--image {
  min-height: 128px;
  align-items: center;
  background-image: url("/shop/assets/hero-image.jpg?v=6");
}
.home-banner--partner {
  min-height: 260px;
  align-items: center;
  background-image: url("/shop/assets/banner-3.jpg?v=6");
}
.home-banner--chat,
.home-banner--launch {
  min-height: 216px;
  align-items: center;
}
.home-banner--chat { background-image: url("/shop/assets/banner-1.jpg?v=6"); }
.home-banner--launch { background-image: url("/shop/assets/banner-4.jpg?v=6"); }
.home-banner--chat .hb-text,
.home-banner--launch .hb-text { max-width: min(78%, 390px); }
.home-banner--partner .hb-text {
  /* CTA закреплена справа сверху — текст не должен заходить под неё. */
  max-width: min(60%, 280px);
}
.home-banner--partner .hb-sub { max-width: 330px; }
.home-banner--partner .hb-cta {
  top: 15px;
  right: 15px;
  bottom: auto;
}
.hb-levels {
  position: absolute;
  z-index: 1;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.hb-levels > span {
  display: grid;
  gap: 3px;
  min-height: 52px;
  padding: 8px 9px;
  border: 1px solid rgba(226, 190, 103, 0.32);
  border-radius: 10px;
  background: rgba(8, 8, 10, 0.72);
}
.hb-levels b {
  color: #f0ce7a;
  font-size: 17px;
  line-height: 1;
}
.hb-levels small {
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
  line-height: 1.1;
}
.hb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,8,10,0.9) 0%, rgba(8,8,10,0.5) 55%, rgba(8,8,10,0.2) 100%), linear-gradient(0deg, rgba(8,8,10,0.72), transparent 58%);
  pointer-events: none;
}
.home-banner--image .hb-overlay { background: linear-gradient(90deg, rgba(8,8,10,0.93) 0%, rgba(8,8,10,0.54) 64%, rgba(8,8,10,0.24) 100%); }
.hb-text { position: relative; z-index: 1; max-width: 78%; }
.hb-brand {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.62);
}
.hb-brand img {
  width: 21px;
  height: 21px;
  object-fit: contain;
}
.home-banner--image .hb-text {
  /* Правая часть карточки всегда остаётся под CTA: текст не наезжает на кнопку. */
  max-width: min(270px, calc(100% - 174px));
}
.home-banner--image .hb-title { font-size: clamp(18px, 5.3vw, 21px); line-height: 1.12; }
.home-banner--image .hb-sub { margin-top: 6px; }
.hb-kicker {
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .11em;
  line-height: 1;
}
.hb-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72);
}
.hb-sub {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.76);
  margin-top: 7px;
  line-height: 1.35;
  font-weight: 400;
}
.hb-cta {
  position: absolute;
  z-index: 1;
  right: 14px;
  bottom: 14px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 11px;
  color: var(--accent-ink);
  background: var(--accent-grad);
  box-shadow: none;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.hb-cta span { font-size: 16px; line-height: 0; }
.home-banner-dots {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 4px;
}
.home-banner-dot {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
}
.home-banner-dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.36);
  transition: width 180ms ease, background-color 180ms ease;
}
.home-banner-dot.active::after {
  width: 20px;
  background: var(--accent);
}
.home-banner-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 999px; }

/* Карусель заканчивается собственными точками, поэтому перед следующей карточкой
   не нужен искусственный пустой отступ. */
#view-home .home-partner-card { margin-top: 0; }

@media (max-width: 390px) {
  .home-banner--image { min-height: 144px; align-items: flex-start; }
  .home-banner--image .hb-text { max-width: calc(100% - 148px); padding-top: 2px; }
  .home-banner--image .hb-cta { right: 12px; bottom: 12px; padding: 8px 10px; gap: 6px; }
  #view-home .home-partner-card { margin-top: 0; }
}

@media (min-width: 640px) {
  .home-banner--video .hb-text { padding: 54px 26px 0; }
  .home-banner--video .hb-cta {
    bottom: 22px;
    left: 26px;
  }
}
.hb-video-mark {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  background: rgba(12,12,15,0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hb-video-mark span {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #fff;
}
.hb-arrow {
  position: absolute;
  z-index: 1;
  right: 15px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  background: rgba(8,8,10,0.48);
  color: #fff;
  font-size: 20px;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
@media (prefers-reduced-motion: reduce) {
  .home-banner-motion { display: none; }
  .home-banner,
  .home-banner-dot::after { transition: none; }
  .home-banner-track { scroll-behavior: auto; }
}

/* ─────────────  ГЛАВНАЯ: LOKI-ЯРЛЫКИ  ───────────── */
.home-shortcuts {
  display: grid;
  /* Шесть нейросетей — одна компактная линия, без скрытого горизонтального списка. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding: 0 2px 18px;
  margin: 0 0 4px;
}
.home-shortcuts-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 2px 10px;
}
.home-shortcuts-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.home-shortcuts-all {
  min-height: 36px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
@media (max-width: 360px) {
  .home-brand-hero { min-height: 282px; }
  .home-brand-hero .hb-title { font-size: 22px; }
}
.home-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.home-shortcut-tile {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 22%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, #2a2a32 0%, #1a1a22 45%, #101016 100%);
  box-shadow: none;
  border: 1px solid rgba(212, 175, 55, 0.22);
  display: grid;
  place-items: center;
  transition: transform 0.14s ease;
}
.home-shortcut:active .home-shortcut-tile {
  transform: scale(0.93);
}
.home-shortcut-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  pointer-events: none;
  image-rendering: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.home-shortcut-label {
  font-size: 8.5px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.15;
  letter-spacing: var(--tracking-normal);
  max-width: 100%;
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: manual;
  min-height: 2.3em;
}
@media (max-width: 360px) {
  .home-shortcut-label { font-size: 8px; }
}

/* ─────────────  ГЛАВНАЯ: ТРЕНДЫ  ───────────── */
.trends-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 10px 2px 14px;
}
.trends-head-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.trends-head .section-title {
  margin: 0;
}
.trends-head .shop-sub {
  margin: 0;
}
.trends-head .link-btn {
  flex-shrink: 0;
  margin-top: 2px;
  white-space: nowrap;
}
.link-btn { color: var(--accent); }
.trends-scroller {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* pan-y — иначе на карточке не листается главная */
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}
.trends-scroller::-webkit-scrollbar { display: none; }
.trend-card {
  position: relative;
  flex: 0 0 144px;
  width: 144px;
  aspect-ratio: 3 / 4;
  height: auto;
  border-radius: 18px;
  overflow: hidden;
  border: none;
  padding: 0;
  margin: 0;
  background: #0a0a0c;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.trend-card > img,
.trend-card > .card-preview-poster,
.trend-card > video.card-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Та же защита формата для горизонтальной витрины «Трендов» на главной. */
.trend-card--native-vertical > img,
.trend-card--native-vertical > .card-preview-poster,
.trend-card--native-vertical > video.card-preview-video {
  object-fit: contain;
  background: #0a0a0c;
}
.trend-share { right: 8px; bottom: 8px; }
.card-preview-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  background: #0a0a0c;
}
.trend-card video.card-preview-video,
.gallery-card video.card-preview-video,
.history-card video.card-preview-video,
.work-card video.card-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #0a0a0c;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.trend-card video.card-preview-video.is-ready,
.gallery-card video.card-preview-video.is-ready,
.history-card video.card-preview-video.is-ready,
.work-card video.card-preview-video.is-ready {
  opacity: 1;
}
/* iOS WebKit может оставить старый декодированный слой после removeAttribute
   src. Полное снятие video из дерева даёт постеру отрисоваться без полос. */
.card-preview-video.is-released { display: none !important; }
/* WebKit promotes <video> into a native layer. Clip that layer itself:
   clipping only the card can expose square frames during screen changes. */
video.card-preview-video { transform: none !important; }
.gallery-card:has(video), .history-card:has(video), .work-card:has(video) {
  content-visibility: visible;
  contain: none;
}
/* iOS clips the parent reliably but can leave square native fragments when
   `clip-path` is applied directly to a <video>. The opaque mask keeps media
   in the card's compositing group without making another rounded video layer. */
.trend-card, .gallery-card:not(.gallery-card--feed), .history-card, .work-card,
.preset-card, .preset-grid-card {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}
/* Do not animate native video surfaces during screen teardown on WebKit. */
video.card-preview-video { transition: none !important; }
.trend-card, .preset-card, .preset-grid-card { isolation: isolate; }
/* Превью без кнопки ▶ — сразу постер/ролик */
.trend-card .work-play,
.trend-card .history-card-play,
.gallery-card .work-play,
.history-card .history-card-play,
.work-card .work-play {
  display: none !important;
}
.trend-card .work-empty,
.gallery-card .work-empty { width: 100%; height: 100%; display: grid; place-items: center; font-size: 34px; }

/* ─────────────  ГАЛЕРЕЯ (ИДЕИ)  ───────────── */
.feed-intro { margin-bottom: 14px; }
.feed-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 16px;
  padding: 4px;
  border: 1px solid rgba(245, 224, 167, .16);
  border-radius: 15px;
  background: rgba(255, 248, 225, .035);
}
.feed-switch-btn {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #b9b19e;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.feed-switch-btn.active {
  color: var(--accent-ink);
  border-color: rgba(255, 243, 197, .66);
  background: var(--accent-grad);
  box-shadow: inset 0 1px rgba(255,255,240,.7), 0 6px 16px rgba(145,91,10,.24);
}
.feed-switch-btn:active { transform: scale(.98); }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* «Идеи» — компактный обзор, чтобы быстро находить нужный пресет.
   Полноэкранная лента ниже намеренно переопределяет эту сетку одним материалом. */
#view-ideas:not(.feed-mode) .gallery-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
/* «Идеи» — быстрый визуальный выбор. В отличие от ленты, здесь карточка
   остаётся главным объектом: автор — только небольшая аватарка, а счётчики
   собраны внизу в одну спокойную строку. Так лицо и композиция не скрываются
   высокой колонкой кнопок. Полные touch-safe действия остаются в открытой
   работе и в полноэкранной ленте. */
#view-ideas:not(.feed-mode) .gallery-card {
  aspect-ratio: 3 / 4;
  border-color: rgba(245, 224, 167, .18);
  background: #090908;
}
#view-ideas:not(.feed-mode) .gallery-card > img,
#view-ideas:not(.feed-mode) .gallery-card > .card-preview-poster,
#view-ideas:not(.feed-mode) .gallery-card > video.card-preview-video {
  background: #090908;
}
/* «Тренды» — та же компактная витрина, что и «Идеи». Раньше здесь оставалась
   базовая сетка 2:3, поэтому один и тот же опубликованный кадр выглядел у
   автора и зрителя по-разному. */
#view-trends .gallery-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
#view-trends .gallery-card {
  aspect-ratio: 3 / 4;
  border-color: rgba(245, 224, 167, .18);
  background: #090908;
}
#view-trends .gallery-card > img,
#view-trends .gallery-card > .card-preview-poster,
#view-trends .gallery-card > video.card-preview-video {
  background: #090908;
}
/* Превью в «Трендах» всегда держат единую геометрию с фотографиями.
   Полный 9:16-кадр в 3:4-сетке оставлял чёрные полосы и визуально сжимал
   ролик. Полный кадр доступен после открытия работы, а в сетке используем
   аккуратный общий crop без пустых полей. */
#view-trends .gallery-card--native-vertical > img,
#view-trends .gallery-card--native-vertical > .card-preview-poster,
#view-trends .gallery-card--native-vertical > video.card-preview-video {
  object-fit: cover;
  background: #090908;
}
#view-ideas:not(.feed-mode) .gc-author,
#view-ideas:not(.feed-mode) .gc-author-btn {
  z-index: 3;
  left: 3px;
  bottom: 3px;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  min-height: 28px;
  height: 28px;
  gap: 0;
  padding: 2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 0;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.82);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  touch-action: manipulation;
}
#view-ideas:not(.feed-mode) .gc-ava,
#view-ideas:not(.feed-mode) .gc-ava-img {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
#view-ideas:not(.feed-mode) .gc-author-copy { display: none; }
#view-ideas:not(.feed-mode) .gc-author-btn:focus-visible,
#view-ideas:not(.feed-mode) .gc-like:focus-visible,
#view-ideas:not(.feed-mode) .gc-repeat:focus-visible,
#view-ideas:not(.feed-mode) .gc-share:focus-visible {
  outline: 2px solid rgba(255, 231, 166, .96);
  outline-offset: 1px;
}
#view-ideas:not(.feed-mode) .gc-like,
#view-ideas:not(.feed-mode) .gc-repeat,
#view-ideas:not(.feed-mode) .gc-share {
  z-index: 4;
  bottom: 1px;
  min-width: 28px;
  width: 28px;
  min-height: 31px;
  height: 31px;
  display: inline-grid;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0,0,0,.82);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  touch-action: manipulation;
}
#view-ideas:not(.feed-mode) .gc-like { right: 59px; }
#view-ideas:not(.feed-mode) .gc-share { right: 30px; }
#view-ideas:not(.feed-mode) .gc-repeat { right: 1px; }
#view-ideas:not(.feed-mode) .gc-like .gc-action-icon {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
}
#view-ideas:not(.feed-mode) .gc-like .gc-heart svg {
  width: 15px;
  height: 15px;
}
#view-ideas:not(.feed-mode) .gc-like:active { transform: none; opacity: .7; }
#view-ideas:not(.feed-mode) .gc-repeat .gc-action-icon,
#view-ideas:not(.feed-mode) .gc-share .gc-action-icon {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
}
#view-ideas:not(.feed-mode) .gc-repeat .gc-action-icon svg,
#view-ideas:not(.feed-mode) .gc-share .gc-action-icon svg { width: 14px; height: 14px; }
#view-ideas:not(.feed-mode) .gc-repeat:active,
#view-ideas:not(.feed-mode) .gc-share:active { transform: none; opacity: .7; }

/* Лента — это не каталог: на телефоне один материал занимает один жест,
   без второй навигационной шапки поверх медиа. */
html.feed-scroll { scroll-snap-type: y mandatory; }
/* В полноэкранной ленте не дублируем навигацию Telegram собственной шапкой:
   остаются системные «Назад», свернуть и меню. */
body.is-feed-view .topbar { display: none; }
/* У ленты нет боковых полей: фото и видео занимают всю доступную ширину
   Mini App, а не остаются внутри карточки с полями от обычного экрана. */
body.is-feed-view .app {
  max-width: none;
  padding: 0;
}
/* Лента начинается от самого верха видимой сцены. Раньше здесь оставался
   отрицательный сдвиг от старой шапки: первый кадр фактически уезжал под
   экран и на разных iPhone выглядел обрезанным. */
body.is-feed-view #view-ideas.feed-mode { margin-top: 0; }
#view-ideas.feed-mode {
  margin-top: 0;
}
#view-ideas.feed-mode .feed-intro,
#view-ideas.feed-mode .filter-pills,
#view-ideas.feed-mode .feed-switch { display: none; }
/* Логотип — единственная точка входа к разделам в immersive-ленте.
   Он не закрывает контент и открывает компактное меню вместо широких плашек. */
.feed-overlay-nav { display: none; }
#view-ideas.feed-mode .feed-overlay-nav {
  display: block;
}
/* Оба нижних контрола используют одну геометрию. Так «Идеи» никогда не
   накладываются на «Подписаться» — в том числе на узких iPhone и при
   переключении языка, где подписи становятся разной длины. */
body.is-feed-view {
  --feed-overlay-edge: max(10px, env(safe-area-inset-right, 0px));
  --feed-ideas-menu-width: 104px;
  --feed-overlay-gap: 8px;
  /* Все нижние элементы опираются на одну базу. Иначе fixed-значение
     действия совпадает с «Идеями» на iPhone с другой высотой safe-area. */
  /* Видимая «Идеи» стоит на одной линии с «Подписаться». Внешние 44px
     остаются зоной касания, сама плашка рисуется компактной внутри. */
  --feed-menu-bottom: 10px;
  --feed-menu-height: 44px;
  --feed-action-gap: 8px;
  --feed-action-step: 66px;
  --feed-repeat-bottom: calc(var(--bottom-nav-height) + var(--bottom-safe-area) + var(--feed-menu-bottom) + var(--feed-menu-height) + var(--feed-action-gap));
  --feed-share-bottom: calc(var(--feed-repeat-bottom) + var(--feed-action-step));
  --feed-like-bottom: calc(var(--feed-share-bottom) + var(--feed-action-step));
  --feed-pause-bottom: calc(var(--feed-like-bottom) + 72px);
}
.feed-brand-menu {
  position: fixed;
  z-index: 49;
  right: var(--feed-overlay-edge);
  /* Кнопка «Идеи» не касается дорожки видео. Сдвиг затрагивает только
     визуальную кнопку: у самой шкалы остаётся высокая touch-зона. */
  bottom: calc(var(--bottom-nav-height) + var(--bottom-safe-area) + var(--feed-menu-bottom));
  box-sizing: border-box;
  inline-size: var(--feed-ideas-menu-width);
  min-width: var(--feed-ideas-menu-width);
  min-height: 44px;
  padding: 0 12px 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: #fff8e8;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  text-shadow: 0 1px 5px rgba(0,0,0,.92);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .18s ease, opacity .18s ease, border-color .18s ease, background .18s ease;
}
.feed-brand-menu::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7px 0;
  border: 1px solid rgba(255, 247, 221, .72);
  border-radius: 8px;
  background: rgba(8, 8, 7, .22);
  box-shadow: 0 1px 3px rgba(0,0,0,.38);
  transition: background .16s ease-out, border-color .16s ease-out;
}
.feed-brand-menu > * { position: relative; z-index: 1; }
.feed-brand-menu [data-ix] { width: 20px; height: 20px; color: #f4cc6b; }
.feed-brand-menu [data-ix] svg { width: 20px; height: 20px; }
.feed-brand-menu-label { white-space: nowrap; }
.feed-brand-menu:hover::before { border-color: rgba(255,255,255,.98); background: rgba(255,255,255,.14); }
.feed-brand-menu:active { transform: scale(.97); }
.feed-brand-menu:focus-visible {
  outline: 2px solid #f1c967;
  outline-offset: 3px;
}
#view-ideas.feed-mode .gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* У трека и карточки одна фиксированная высота. Иначе iOS WebView при
     content-visibility мог кратко использовать его старый intrinsic-size и
     показывать в одном экране сразу две работы. */
  grid-auto-rows: var(--feed-card-height);
  align-items: stretch;
  gap: 0;
}
/* Один свайп = один ровно видимый экран. Не используем лишь min-height:
   содержимое карточки или особенности WebView могли растянуть её и оставляли
   внизу предыдущий/следующий кадр. Нижняя навигация теперь лежит поверх
   материала: исходник доходит до самого края экрана, как в ленте Instagram. */
body.is-feed-view {
  --feed-card-height: 100svh;
}
@supports (height: 100dvh) {
  body.is-feed-view {
    --feed-card-height: 100dvh;
  }
}
#view-ideas.feed-mode .gallery-card {
  width: 100%;
  box-sizing: border-box;
  block-size: var(--feed-card-height);
  height: var(--feed-card-height);
  min-height: var(--feed-card-height);
  max-height: var(--feed-card-height);
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  /* Исходный кадр никогда не растягиваем и не обрезаем. Нейтральное тёплое
     поле заполняет свободное место у горизонтальных/квадратных работ, поэтому
     лента остаётся цельной без жёстких чёрных полос и без дублирования кадра. */
  background:
    radial-gradient(90% 72% at 50% 46%, rgba(136, 97, 36, .20), transparent 72%),
    #060605;
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* В обычной сетке виртуализация экономит память. В fullscreen-ленте она
     создаёт неверный резервный размер в iOS Telegram и обрывает кадр, поэтому
     здесь размер и содержимое должны участвовать в раскладке сразу. */
  content-visibility: visible;
  contain-intrinsic-size: none;
}
/* Контент остаётся целиком в кадре, а свободное место у вертикальных,
   квадратных и горизонтальных оригиналов занимает не пустая полоса, а мягкое
   продолжение того же кадра. Для видео используем постер — второй decoder не
   запускается и лента не начинает лагать на телефоне. */
#view-ideas.feed-mode .gallery-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -28px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(6, 6, 5, .48), rgba(6, 6, 5, .48)),
    var(--feed-media-backdrop, none);
  background-position: center;
  background-size: cover;
  filter: blur(22px) saturate(.76) brightness(.62);
  transform: scale(1.08);
  opacity: .78;
}
/* Лента — режим просмотра на весь экран. Пользователь выбрал заполнение
   экрана целиком: при несовпадении пропорций края кадра осознанно обрезаются,
   зато ни сверху, ни снизу не появляется свободная полоса. */
#view-ideas.feed-mode .gallery-card--image > img,
#view-ideas.feed-mode .gallery-card--image > .card-preview-poster {
  object-fit: cover;
  object-position: center;
  z-index: 1;
  background: transparent;
  border-radius: 0;
}
#view-ideas.feed-mode .gallery-card--video > video.card-preview-video,
#view-ideas.feed-mode .gallery-card--video > .card-preview-poster {
  object-fit: cover;
  object-position: center;
  z-index: 1;
  background: transparent;
  border-radius: 0;
}
/* Высокий экран iPhone уже не равен 9:16. В immersive-ленте и такой исходник
   заполняет viewport; статичный стиль ниже предотвращает прежний прыжок после тапа. */
#view-ideas.feed-mode .gallery-card--native-vertical > img,
#view-ideas.feed-mode .gallery-card--native-vertical > .card-preview-poster,
#view-ideas.feed-mode .gallery-card--native-vertical > video.card-preview-video {
  object-fit: cover;
}
/* На телефоне 9:16 естественно заполняет высокий экран. На ПК такой же
   fullscreen-контейнер существенно шире, поэтому `cover` растягивает ролик
   по всей ширине и отрезает голову/ноги. Оставляем исходный кадр целиком по
   центру, а свободные поля мягко заполняет уже существующая подложка. */
@media (min-width: 768px) {
  #view-ideas.feed-mode .gallery-card--native-vertical > img,
  #view-ideas.feed-mode .gallery-card--native-vertical > .card-preview-poster,
  #view-ideas.feed-mode .gallery-card--native-vertical > video.card-preview-video {
    object-fit: contain;
    object-position: center;
  }
}
/* На iOS после тапа браузер может оставить :hover на карточке. У обычной
   сетки он даёт мягкое увеличение превью, но в полноэкранной ленте это
   воспринимается как прыжок/обрезание кадра. Материал в ленте всегда
   статичен: обратная связь живёт только в нажатой иконке действия. */
#view-ideas.feed-mode .gallery-card--feed > img,
#view-ideas.feed-mode .gallery-card--feed > .card-preview-poster,
#view-ideas.feed-mode .gallery-card--feed > video.card-preview-video,
#view-ideas.feed-mode .gallery-card--feed:hover > img,
#view-ideas.feed-mode .gallery-card--feed:hover > .card-preview-poster,
#view-ideas.feed-mode .gallery-card--feed:hover > video.card-preview-video {
  transform: none !important;
  transition: none !important;
}
/* Затемнение — только лёгкая подложка для подписи автора. Оно не образует
   отдельный тёмный столбец под действиями и не меняет формат изображения. */
#view-ideas.feed-mode .gc-overlay {
  z-index: 2;
  background: linear-gradient(180deg, transparent 58%, rgba(0,0,0,.34) 100%);
}
#view-ideas.feed-mode .gallery-card--feed {
  /* Не отдаём double tap браузерному zoom и не масштабируем сам кадр при
     нажатии: визуальная реакция живёт только в иконке лайка. */
  touch-action: manipulation;
}
#view-ideas.feed-mode .gallery-card--feed:active { transform: none; }
/* Действия в ленте построены как в соцсети: компактный круг с иконкой и
   отдельный счётчик снизу. Так длинное число не растягивает саму кнопку и
   не перекрывает «Идеи» на маленьких экранах. */
#view-ideas.feed-mode .gc-feed-action {
  position: absolute;
  z-index: 5;
  right: max(10px, env(safe-area-inset-right, 0px));
  width: 48px;
  display: grid;
  justify-items: center;
  gap: 3px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 5px rgba(0,0,0,.9);
  -webkit-tap-highlight-color: transparent;
}
#view-ideas.feed-mode .gc-feed-like { bottom: var(--feed-like-bottom); }
#view-ideas.feed-mode .gc-feed-share { bottom: var(--feed-share-bottom); }
#view-ideas.feed-mode .gc-feed-repeat { bottom: var(--feed-repeat-bottom); }
#view-ideas.feed-mode .gc-like,
#view-ideas.feed-mode .gc-repeat,
#view-ideas.feed-mode .gc-share,
#view-ideas.feed-mode .gc-video-toggle {
  position: static;
  min-width: 48px;
  width: 48px;
  min-height: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  /* Общая линия Lumix — тонкая и золотая. Сами символы остаются светлыми,
     а лайк после нажатия получает единственный яркий красный акцент. */
  border: 1px solid rgba(241, 201, 103, .74) !important;
  border-radius: 50%;
  background: rgba(9, 9, 7, .16) !important;
  box-shadow: 0 2px 9px rgba(0, 0, 0, .14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}
#view-ideas.feed-mode .gc-action-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: currentColor;
}
#view-ideas.feed-mode .gc-like .gc-action-icon svg,
#view-ideas.feed-mode .gc-action-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}
#view-ideas.feed-mode .gc-like .gc-action-icon svg {
  width: 25px;
  height: 25px;
}
#view-ideas.feed-mode .gc-action-count {
  display: block;
  min-width: 3em;
  max-width: 54px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-ideas.feed-mode .gc-like:active .gc-action-icon,
#view-ideas.feed-mode .gc-repeat:active .gc-action-icon,
#view-ideas.feed-mode .gc-share:active .gc-action-icon,
#view-ideas.feed-mode .gc-video-toggle:active .gc-action-icon { transform: scale(.88); }
/* Пауза отдельна от звука: она не включает новый аудиопоток и никогда не
   запускает соседний ролик. Расположена выше действий, чтобы не спорить с
   закреплённой кнопкой «Идеи». */
#view-ideas.feed-mode .gc-video-toggle {
  position: absolute;
  z-index: 5;
  right: max(10px, env(safe-area-inset-right, 0px));
  bottom: var(--feed-pause-bottom);
}
#view-ideas.feed-mode .gc-video-toggle.is-paused {
  background: rgba(9, 9, 7, .34) !important;
}
/* Шкала у ролика остаётся тонкой визуально, но зона нажатия достаточно
   высокой для телефона: можно нажать на начало или протянуть к нужному кадру. */
#view-ideas.feed-mode .gc-video-progress {
  --feed-video-progress: 0%;
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: calc(var(--bottom-nav-height) + var(--bottom-safe-area) - 12px);
  left: 12px;
  width: auto;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease-out;
  touch-action: manipulation;
  cursor: pointer;
}
#view-ideas.feed-mode .gc-video-progress::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff5dc 0 var(--feed-video-progress), rgba(255,255,255,.24) var(--feed-video-progress) 100%);
  box-shadow: 0 0 5px rgba(255,226,150,.36);
}
#view-ideas.feed-mode .gc-video-progress::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border: 1px solid rgba(0,0,0,.45);
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: #fff5dc;
  box-shadow: 0 1px 5px rgba(0,0,0,.48);
}
#view-ideas.feed-mode .gc-video-progress::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
}
#view-ideas.feed-mode .gc-video-progress::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: #fff5dc;
}
#view-ideas.feed-mode .gc-video-progress::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(0,0,0,.45);
  border-radius: 50%;
  background: #fff5dc;
  box-shadow: 0 1px 5px rgba(0,0,0,.48);
}
#view-ideas.feed-mode .gc-video-progress:focus-visible {
  outline: 2px solid rgba(255,230,164,.96);
  outline-offset: 2px;
}
#view-ideas.feed-mode .gc-video-progress.is-visible { opacity: .9; pointer-events: auto; }
#view-ideas.feed-mode .gc-author-row {
  position: absolute;
  z-index: 4;
  left: 14px;
  /* Порядок в нижней строке: аватар и имя, затем «Подписаться», затем
     отдельная быстрая кнопка «Идеи». Последняя не конкурирует с именем. */
  right: calc(var(--feed-overlay-edge) + var(--feed-ideas-menu-width) + var(--feed-overlay-gap));
  /* Автор остаётся над нижней навигацией, хотя материал продолжается под ней. */
  bottom: calc(var(--bottom-nav-height) + var(--bottom-safe-area) + 10px);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 0;
}
#view-ideas.feed-mode .gc-author,
#view-ideas.feed-mode .gc-author-btn {
  position: static;
  flex: 1 1 auto;
  max-width: none;
  min-height: 44px;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  font-size: 14px;
  text-shadow: 0 1px 5px rgba(0,0,0,.92);
}
#view-ideas.feed-mode .gc-author,
#view-ideas.feed-mode .gc-author-btn {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
}
#view-ideas.feed-mode .gc-author-btn {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
#view-ideas.feed-mode .gc-author-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}
#view-ideas.feed-mode .gc-author-name {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-ideas.feed-mode .gc-author-handle {
  display: block;
  overflow: hidden;
  max-width: 100%;
  color: rgba(241, 211, 139, .94);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-ideas.feed-mode .gc-ava,
#view-ideas.feed-mode .gc-ava-img { width: 34px; height: 34px; }
#view-ideas.feed-mode .gc-ava { font-size: 14px; }
#view-ideas.feed-mode .gc-follow {
  position: static;
  flex: 0 0 auto;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0,0,0,.92);
}
/* У кнопки компактный, почти инстаграмный контур, но внешняя зона нажатия
   остаётся 44 px: на телефоне её удобно нажать, а на кадре она не тяжелеет. */
#view-ideas.feed-mode .gc-follow-label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(255, 247, 221, .72);
  border-radius: 8px;
  background: rgba(8, 8, 7, .22);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.08px;
  box-shadow: 0 1px 3px rgba(0,0,0,.38);
  transition: background .16s ease-out, border-color .16s ease-out, transform .16s ease-out;
}
#view-ideas.feed-mode .gc-follow:hover .gc-follow-label {
  border-color: rgba(255,255,255,.98);
  background: rgba(255,255,255,.14);
}
#view-ideas.feed-mode .gc-follow:active { transform: none; }
#view-ideas.feed-mode .gc-follow:active .gc-follow-label {
  transform: scale(.96);
  background: rgba(255,255,255,.22);
}
#view-ideas.feed-mode .gc-follow:focus-visible .gc-follow-label {
  outline: 2px solid rgba(247,214,129,.98);
  outline-offset: 3px;
}
@media (max-width: 375px) {
  body.is-feed-view {
    --feed-ideas-menu-width: 102px;
    --feed-overlay-gap: 6px;
  }
  #view-ideas.feed-mode .gc-author-row { left: 10px; gap: 5px; }
  #view-ideas.feed-mode .gc-author-btn {
    flex: 0 0 42px;
    padding-right: 4px;
  }
  #view-ideas.feed-mode .gc-author-copy { display: none; }
  #view-ideas.feed-mode .gc-follow-label { padding-inline: 8px; font-size: 11px; }
}
/* В ленте навигация — только набор иконок поверх работы, без чёрной плашки.
   Это сохраняет доступные зоны 44 px, но не отрезает нижнюю часть кадра. */
body.is-feed-view .bottom-nav {
  /* Базовый bottom-nav добавляет тонкую верхнюю границу позднее в CSS.
     В ленте это выглядело как лишняя полоса поверх контента. */
  border: 0 !important;
  background: linear-gradient(0deg, rgba(3, 3, 3, .18), transparent 84%);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (prefers-reduced-motion: reduce) {
  html.feed-scroll { scroll-snap-type: y proximity; }
  #view-ideas.feed-mode .gc-follow-label { transition: none; }
}
.gallery-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: none;
  background: #0a0a0c;
  aspect-ratio: 2 / 3;
  box-shadow: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: transform 0.12s;
  -webkit-appearance: none;
  appearance: none;
  /* Длинная лента с тяжёлыми фото не должна постоянно перерисовывать карточки
     за пределами видимой области. Размер всё равно резервируется aspect-ratio. */
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: auto 250px;
}
.gallery-card .gc-tag,
.gallery-card .gc-author-btn,
.gallery-card .gc-like {
  /* Blur-слои поверх каждой карточки заметно нагружают GPU именно при
     вертикальном скролле ленты. Оставляем читаемый непрозрачный фон. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.gallery-card:active { transform: scale(0.98); }
.gallery-card > img,
.gallery-card > .card-preview-poster,
.gallery-card > video.card-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.skeleton-card {
  cursor: default;
  background: linear-gradient(100deg, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.03) 70%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.skeleton-card:active { transform: none; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-card { animation: none; }
}
.gc-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.72)); }
.gc-tag {
  position: absolute; top: 8px; left: 8px;
  z-index: 4;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px; font-weight: 700;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.gc-creator-rank {
  position: absolute;
  z-index: 5;
  top: 7px;
  left: 7px;
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid rgba(255, 225, 155, .58);
  border-radius: 999px;
  background: rgba(24, 16, 5, .76);
  color: #fff1ca;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: .01em;
  pointer-events: none;
}
.trend-card .gc-tag {
  color: #fff;
}
.gc-author {
  position: absolute; left: 8px; bottom: 8px;
  z-index: 2;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  max-width: 62%;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.gc-author-btn {
  border: none;
  background: rgba(0,0,0,0.45);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  color: #fff;
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.gc-author-btn:active { opacity: 0.85; }
.gc-author-copy { min-width: 0; }
.gc-author-name { overflow: hidden; text-overflow: ellipsis; }
.gc-author-handle { display: none; }
.gc-follow {
  position: absolute;
  left: 8px;
  bottom: 46px;
  z-index: 4;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(255,244,204,.62);
  border-radius: 999px;
  color: var(--accent-ink);
  background: var(--accent-grad);
  box-shadow: 0 8px 22px rgba(0,0,0,.3);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.gc-follow:active { transform: scale(.96); }
.gc-ava {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: #1a1200;
  font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.gc-ava-img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.detail-author-link {
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.detail-cell-wide { grid-column: 1 / -1; }
.gc-like {
  position: absolute; right: 8px; bottom: 8px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,0.5);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px; font-weight: 700;
  backdrop-filter: blur(6px);
}
.gc-like .gc-heart { color: #fff; }
.gc-repeat {
  position: absolute; right: 8px; bottom: 91px;
  z-index: 5;
  min-width: 40px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(9,10,16,.66);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.gc-repeat svg { width: 17px; height: 17px; }
.gc-repeat:active { transform: scale(.92); }
.gc-share { right: 8px; bottom: 46px; }

/* ─────────────  ДЕТАЛЬ ГЕНЕРАЦИИ  ───────────── */
/* Карточка как у пресета: один layout на всех устройствах */
#detailModal.modal,
#detailModal.modal.detail-modal--ideas {
  align-items: stretch;
  justify-content: flex-start;
  padding:
    calc(var(--chrome-top) + 8px)
    var(--viewer-side)
    max(16px, var(--chrome-bottom));
  background: #000;
}
/* Только карточка автора в «Идеях»: выводим кадр ближе к верхней навигации.
   Пользовательский fullscreen здесь не затрагивается. */
#detailModal.modal.detail-modal--ideas {
  padding-top: max(0px, calc(var(--chrome-top) - 4px));
}
#detailModal .detail-media,
#detailModal .detail-media--photo,
#detailModal .detail-media--photo img,
#detailModal .detail-media--video {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
#detailModal .detail-media--photo:active,
#detailModal .detail-media--photo:focus,
#detailModal .detail-media--photo img:active {
  opacity: 1;
  transform: none;
  filter: none;
}
.detail-sheet {
  width: 100%;
  max-width: none;
  max-height: 100%;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
.detail-media-wrap {
  position: relative;
  background: #111;
  border-radius: var(--media-radius);
  overflow: hidden;
  flex-shrink: 0;
  width: 100%;
  max-height: var(--media-max-h);
  /* Медиа не оформляем золотой рамкой: она отвлекает от кадра и выглядит
     как ошибка загрузки на светлых фотографиях. */
  border: 0;
  box-shadow: none;
}
/* Видео сохраняет чистый чёрный фон там, где файл содержит прозрачные/пустые
   области, но использует ту же геометрию без рамки, что и фотографии. */
.detail-media-wrap.detail-media-wrap--video {
  background: #000;
  border: 0;
  border-radius: var(--media-radius);
}
/* Закрытие — BackButton Telegram / тап по фону */
.detail-close { display: none !important; }
.detail-media {
  width: 100%;
  background: #111;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
}
.detail-media--photo {
  display: block;
  padding: 0;
  background: #111;
  min-height: 0;
  aspect-ratio: var(--media-ar);
  height: auto;
  max-height: var(--media-max-h);
  overflow: hidden;
  cursor: zoom-in;
}
.detail-media--photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: center;
  background: #111;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Мобильные фото могут прийти с фактическими пропорциями, отличающимися от
   заявленного формата генерации. Высота кадра тогда определяется файлом, а
   не старым aspect-ratio — рамка не оставляет чёрных боковых полос. */
@media (max-width: 639px) {
  #detailModal .detail-media-wrap { max-height: none; }
  #detailModal .detail-media--photo {
    height: auto;
    max-height: none;
    aspect-ratio: auto;
  }
  #detailModal .detail-media--photo img {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    object-fit: initial;
  }
  /* Высокий ролик должен сохранять свою высоту, а не втискиваться в 72vh:
     иначе object-fit: contain рисует широкие чёрные полосы по сторонам. */
  #detailModal .detail-video-wrap {
    max-height: none;
    border-radius: var(--media-radius);
  }
}
/* На ПК контейнер повторяет пропорции самого кадра. Портреты не теряются в
   огромной широкой плашке, но полностью помещаются по высоте без обрезки. */
@media (min-width: 640px) {
  #detailModal .detail-media-wrap {
    width: auto;
    height: min(68dvh, 720px);
    max-width: 100%;
    max-height: calc(100dvh - var(--chrome-top) - 32px);
    margin-right: auto;
    margin-left: auto;
    aspect-ratio: var(--detail-media-ar, var(--media-ar));
  }
  #detailModal .detail-media,
  #detailModal .detail-media--photo,
  #detailModal .detail-media--video,
  #detailModal .detail-video-wrap {
    width: 100%;
    height: 100%;
    max-height: none;
  }
  #detailModal .detail-media--photo,
  #detailModal .detail-video-wrap {
    aspect-ratio: auto;
  }
  #detailModal .detail-video-wrap {
    border-radius: var(--media-radius);
  }
}
/* Крестик на фото не нужен — есть BackButton Telegram */
.detail-photo-expand { display: none !important; }
body.photo-lightbox-open {
  overflow: hidden !important;
  touch-action: none;
}
/* Пока fullscreen — sheet/пресет не просвечивает снизу */
body.photo-lightbox-open #genSheet,
body.photo-lightbox-open #detailModal {
  visibility: hidden;
}
/* Полноэкранный просмотр: фото всегда идёт от края до края.
   Раньше stage был ограничен высотой viewport и contain сужал высокие
   вертикальные кадры, превращая их в узкую карточку с чёрными полями. */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100050;
  background: radial-gradient(80% 46% at 50% 100%, rgba(201,147,46,0.1), transparent 64%), #050506;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  padding:
    calc(var(--chrome-top) + 8px)
    0
    max(10px, var(--chrome-bottom));
  margin: 0;
  box-sizing: border-box;
  animation: fade 0.18s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.photo-lightbox.hidden { display: none !important; }
.photo-lightbox-stage {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  display: block;
  overflow: hidden;
  touch-action: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border-radius: 0;
  background: #000;
}
.photo-lightbox-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: initial;
  object-position: center;
  transform-origin: center center;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none; /* жесты ловит stage */
  border-radius: 0;
  opacity: 0;
  transition: opacity 0.16s ease;
}
.photo-lightbox-img.is-ready { opacity: 1; }
/* В Telegram Desktop событие load у закэшированного изображения иногда не
   приходит в WebView. Фото не должно оставаться прозрачным из-за анимации. */
.photo-lightbox[data-kind="image"] .photo-lightbox-img { opacity: 1; }
/* В ленте «Идей» кадр не ждёт декоративной fade-анимации: Telegram Desktop
   иначе может оставить первый экран чёрным до прокрутки. */
.photo-lightbox--gallery .photo-lightbox-img { opacity: 1; }
.photo-lightbox-video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
  border-radius: 0;
  outline: none;
}
/* Та же геометрия, что у фото: video никогда не диктует сцене свой
   натуральный размер и не образует отдельную скруглённую рамку. */
.photo-lightbox--gallery[data-kind="video"] .photo-lightbox-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-width: 0;
  min-height: 0;
}
.photo-lightbox[data-kind="video"] .photo-lightbox-img {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.photo-lightbox-video-toggle {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0 0 0 4px;
  border: 1px solid rgba(255,255,255,0.36);
  border-radius: 50%;
  background: rgba(8,8,10,0.74);
  box-shadow: 0 10px 30px rgba(0,0,0,0.38);
  color: #fff;
  transform: translate(-50%, -50%);
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.photo-lightbox-video-toggle::before {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid currentColor;
  content: "";
}
.photo-lightbox-video-toggle.is-playing {
  width: 42px;
  height: 42px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.photo-lightbox-video-toggle.is-playing::before {
  width: 14px;
  height: 18px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(90deg, currentColor 0 38%, transparent 38% 62%, currentColor 62%);
}
.photo-lightbox-video-toggle:focus-visible {
  outline: 3px solid rgba(228,180,70,0.8);
  outline-offset: 3px;
}
.photo-lightbox-video-toggle:active { transform: translate(-50%, -50%) scale(0.94); }
.photo-lightbox[data-kind="video"] .photo-lightbox-stage { touch-action: pan-y; }
.photo-lightbox-meta {
  position: absolute;
  z-index: 4;
  top: calc(var(--chrome-top) + 18px);
  left: max(18px, env(safe-area-inset-left));
  max-width: calc(100% - 146px);
  min-height: 28px;
  padding: 7px 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(20,20,24,0.66);
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.photo-lightbox-repeat {
  position: absolute;
  z-index: 5;
  top: calc(var(--chrome-top) + 18px);
  right: max(76px, calc(env(safe-area-inset-right) + 66px));
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  background: rgba(18,18,22,0.86);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  touch-action: manipulation;
}
.photo-lightbox-repeat svg { width: 18px; height: 18px; }
.photo-lightbox-repeat:active { transform: scale(0.96); }
@media (max-width: 390px) {
  .photo-lightbox-repeat { padding: 10px; }
  .photo-lightbox-repeat span { display: none; }
}
.photo-lightbox-actions {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: max(18px, calc(var(--chrome-bottom) + 10px));
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  background: rgba(18,18,22,0.88);
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.photo-lightbox-actions.hidden { display: none !important; }
.photo-lightbox-bottom {
  position: absolute;
  z-index: 6;
  right: 12px;
  bottom: max(12px, calc(var(--chrome-bottom) + 8px));
  left: 12px;
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  background: rgba(12,12,15,0.94);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.photo-lightbox-bottom.hidden { display: none !important; }
.photo-lightbox-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.photo-lightbox-author {
  min-width: 0;
  max-width: calc(100% - 54px);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.photo-lightbox-author:disabled { cursor: default; }
.photo-lightbox-author img,
.photo-lightbox-author > span {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 800;
  object-fit: cover;
}
.photo-lightbox-author strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-lightbox-share-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.photo-lightbox-owner-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.photo-lightbox-owner-actions.hidden { display: none !important; }
.photo-lightbox-owner-action {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.photo-lightbox-owner-action svg { width: 19px; height: 19px; }
.photo-lightbox-owner-action--danger {
  border-color: rgba(255,112,135,0.32);
  background: rgba(255,92,122,0.14);
  color: #ffadbb;
}
.photo-lightbox-owner-action:active { transform: scale(0.97); }
.photo-lightbox-share {
  width: 44px;
  height: 44px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--accent-ink);
  cursor: pointer;
  touch-action: manipulation;
}
.photo-lightbox-share svg,
.photo-lightbox-copy-link svg { width: 20px; height: 20px; }
.photo-lightbox-copy-link {
  width: 44px;
  height: 44px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--accent-ink);
  cursor: pointer;
  touch-action: manipulation;
}
.photo-lightbox-like {
  position: absolute;
  /* Выше native video compositor в Telegram iOS: иначе кнопка видна, но
     первый tap может попасть в плеер и не поставить лайк. */
  z-index: 5;
  right: 12px;
  bottom: 12px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 999px;
  background: rgba(18,18,22,0.96);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 7px 22px rgba(0,0,0,0.38);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.photo-lightbox-like svg { width: 21px; height: 21px; }
.photo-lightbox-like.liked {
  border-color: rgba(255,150,172,0.9);
  background: #9f2941;
  color: #fff;
  box-shadow: 0 7px 22px rgba(159,41,65,0.42);
}
.photo-lightbox-like:focus-visible {
  outline: 3px solid rgba(226,190,103,0.9);
  outline-offset: 3px;
}
.photo-lightbox-like:active,
.photo-lightbox-copy-link:active { transform: scale(0.97); }
.photo-lightbox-primary {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: var(--accent-grad);
  color: var(--accent-ink);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}
.photo-lightbox-primary svg { width: 21px; height: 21px; }
.photo-lightbox-primary:active,
.photo-lightbox-share:active,
.photo-lightbox-author:not(:disabled):active { transform: scale(0.97); }
.photo-lightbox--gallery {
  --gallery-viewer-actions-h: 0px;
  gap: 0;
  overflow: hidden;
}
.photo-lightbox--gallery.photo-lightbox--owner {
  --gallery-viewer-actions-h: 184px;
}
.photo-lightbox--gallery.photo-lightbox--video {
  --gallery-viewer-actions-h: 0px;
}
.photo-lightbox--gallery.photo-lightbox--ideas {
  --gallery-viewer-actions-h: 0px;
  /* В iPhone viewer не должен оставлять лишнюю полосу между верхней
     навигацией Telegram и кадром. Плашка метаданных остаётся поверх медиа. */
  padding-top: max(0px, calc(var(--chrome-top) - 16px));
}
.photo-lightbox-bottom,
.photo-lightbox--ideas .photo-lightbox-bottom {
  display: none !important;
}
.photo-lightbox--gallery .photo-lightbox-stage {
  /* Нижняя панель закреплена вне сцены. Резервируем её высоту явно:
     так высокий портрет не может вытолкнуть действия под safe-area iPhone. */
  flex: 0 0 calc(100dvh - var(--chrome-top) - var(--chrome-bottom) - var(--gallery-viewer-actions-h));
  height: calc(100dvh - var(--chrome-top) - var(--chrome-bottom) - var(--gallery-viewer-actions-h));
  display: grid;
  min-height: 0;
  place-items: center;
  margin-bottom: 0;
}
.photo-lightbox--gallery .photo-lightbox-img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}
.photo-lightbox--gallery .photo-lightbox-bottom {
  position: absolute;
  right: 12px;
  bottom: max(10px, var(--chrome-bottom));
  left: 12px;
  margin: 0;
}
.photo-lightbox--gallery .photo-lightbox-nav,
.photo-lightbox--gallery .photo-lightbox-count,
.photo-lightbox--gallery .photo-lightbox-actions { display: none !important; }
/* На desktop медиа не растягивается на ширину всего окна Telegram: кадр
   всегда целиком помещается в центральную сцену — одинаково для фото и видео.
   В Telegram Desktop CSS-ширина иногда бывает меньше 640px из-за системного
   масштаба. По одной ширине такой экран ошибочно попадал в мобильный flex-layout:
   stage оказывался ниже viewport, и фото становилось видно лишь после zoom.
   Точный признак ПК — мышь с hover, поэтому используем его как второй путь. */
@media (min-width: 640px), (hover: hover) and (pointer: fine) {
  .photo-lightbox {
    /* В Telegram Desktop flex-раскладка сцены может рассчитываться раньше,
       чем WebView отдаст финальную высоту viewport. В результате stage
       оказывался ниже экрана, а изображение проявлялось только при zoom.
       На ПК привязываем сцену напрямую к границам fixed-overlay, без flex. */
    display: block;
    padding: 0;
    overflow: hidden;
  }
  .photo-lightbox-stage,
  .photo-lightbox--gallery .photo-lightbox-stage,
  .photo-lightbox--gallery:not(.photo-lightbox--video) .photo-lightbox-stage {
    position: absolute;
    top: calc(var(--chrome-top) + 8px);
    right: 24px;
    bottom: max(10px, calc(var(--chrome-bottom) + 8px));
    left: 24px;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    flex: none;
    align-self: auto;
    display: grid;
    place-items: center;
  }
  /* Только «Идеи»: кадр на пару миллиметров ближе к верхней панели. */
  .photo-lightbox--gallery.photo-lightbox--ideas .photo-lightbox-stage {
    top: calc(var(--chrome-top) + 4px);
  }
  .photo-lightbox .photo-lightbox-img,
  .photo-lightbox .photo-lightbox-video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
  }
  /* Grid не даёт процентной высоте replaced-элемента надёжную опорную
     величину во всех WebView: портрет мог получить ширину сцены, но свою
     натуральную высоту и уйти за её нижнюю границу. Абсолютный слой всегда
     имеет ровно размеры сцены, а object-fit уже вписывает в него кадр. */
  .photo-lightbox[data-kind="image"] .photo-lightbox-img {
    position: absolute;
    inset: 0;
    min-width: 0;
    min-height: 0;
  }
}
.photo-lightbox-action {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  touch-action: manipulation;
}
.photo-lightbox-action:active { transform: scale(0.96); }
.photo-lightbox-action--danger { color: #ff9aaa; background: rgba(255,92,122,0.15); }
.photo-lightbox-nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  background: rgba(20,20,24,0.72);
  color: #fff;
  font: 400 34px/1 sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.photo-lightbox-nav:hover { background: rgba(45,45,52,0.9); }
.photo-lightbox-nav:active { transform: scale(0.92); }
.photo-lightbox-nav:disabled { opacity: 0.22; pointer-events: none; }
.photo-lightbox-nav.hidden,
.photo-lightbox-count.hidden { display: none !important; }
.photo-lightbox-prev { left: max(10px, env(safe-area-inset-left)); }
.photo-lightbox-next { right: max(10px, env(safe-area-inset-right)); }
.photo-lightbox-count {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(16px, calc(var(--chrome-bottom) + 8px));
  transform: translateX(-50%);
  min-width: 54px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(20,20,24,0.72);
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}
@media (max-width: 520px) {
  .photo-lightbox-nav {
    top: auto;
    bottom: max(14px, calc(var(--chrome-bottom) + 6px));
    margin-top: 0;
  }
  .photo-lightbox-prev { left: 16px; }
  .photo-lightbox-next { right: 16px; }
  .photo-lightbox-count { bottom: max(27px, calc(var(--chrome-bottom) + 19px)); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-lightbox-img,
  .photo-lightbox-nav { transition: none; }
}
.photo-lightbox-hint {
  display: none !important;
}
.photo-lightbox-close {
  display: none;
  position: absolute;
  z-index: 3;
  top: calc(var(--chrome-top) + 12px);
  right: max(18px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  background: rgba(20,20,24,0.72);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.photo-lightbox-close:active { transform: scale(0.92); }
.detail-media--video {
  display: block;
  padding: 0;
  background: #000;
  max-height: none;
}
.detail-video-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  /* Нативное соотношение кадра (16:9, 4:3…) — без обрезки */
  aspect-ratio: var(--detail-video-ar, 16 / 9);
  height: auto;
  max-height: min(72vh, 720px);
  margin: 0 auto;
  border-radius: var(--media-radius);
  overflow: hidden;
  background: #000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Вертикальное видео автора в «Идеях» должно заполнять рамку по ширине.
   Ограничение 72vh сжимало кадр, оставляя чёрные поля по бокам. */
@media (max-width: 639px) {
  #detailModal.detail-modal--ideas .detail-video-wrap {
    max-height: none;
  }
}
.detail-video-expand {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.17);
  border-radius: 14px;
  background: rgba(12,12,16,0.66);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 160ms ease, background 160ms ease;
}
.detail-video-expand svg { width: 20px; height: 20px; }
.detail-video-expand:active { transform: scale(0.92); background: rgba(38,38,44,0.9); }
.detail-video-sound {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 12px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.17);
  border-radius: 12px;
  background: rgba(12,12,16,0.72);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  touch-action: manipulation;
}
.detail-video-sound:active { transform: scale(0.96); }
.detail-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 1;
  pointer-events: none;
  background: #000;
}
.detail-media video.detail-video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #000;
  opacity: 0;
  transition: opacity 0.2s ease;
  /* без нативного UI (timeline / pause / AirPlay) */
  pointer-events: none;
}
.detail-media video.detail-video::-webkit-media-controls {
  display: none !important;
}
.detail-media video.detail-video::-webkit-media-controls-enclosure {
  display: none !important;
}
.detail-media video.detail-video.is-ready,
.detail-video-wrap.is-ready .detail-video {
  opacity: 1;
}
.detail-video-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 200px; font-size: 40px; color: var(--muted);
}
.detail-video-ph span { font-size: var(--text-sm); color: var(--muted); font-weight: 400; }
.detail-body {
  padding: 16px 4px 8px;
  background: transparent;
  color: #fff;
}
.detail-body .detail-label { color: rgba(255, 255, 255, 0.55); }
.detail-body .detail-prompt { color: #fff; }
.detail-body .detail-value { color: #fff; }
.detail-label { margin-bottom: 4px; }
.detail-prompt { font-size: var(--text-base); font-weight: 400; line-height: var(--leading-relaxed); color: var(--text); }
.detail-cell .detail-value { font-size: var(--text-base); font-weight: 600; letter-spacing: var(--tracking-normal); }
.da-label { font-size: var(--text-xs); font-weight: 500; color: var(--muted); line-height: var(--leading-snug); }
.detail-badge {
  display: inline-block;
  background: rgba(52, 199, 89, 0.16);
  color: #34c759;
  border: 1px solid rgba(52,199,89,0.35);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.detail-copy {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted); font-size: 15px;
  display: grid; place-items: center;
}
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 20px; }
.detail-prompt-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.detail-prompt-col { flex: 1; min-width: 0; }
.detail-prompt-row--locked {
  align-items: stretch;
}
.detail-prompt-row--locked .detail-prompt-col {
  width: 100%;
}
.detail-prompt-row--locked .prompt-hidden-notice {
  margin: 0;
  width: 100%;
}
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.detail-action {
  flex: 1 1 60px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 60px;
}
.detail-action .da-ico {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--accent);
  transition: transform 0.12s;
}
.detail-action.danger .da-ico {
  border-color: #ff5c7a;
  color: #ff5c7a;
}
.detail-action .da-ico svg {
  width: 22px;
  height: 22px;
  display: block;
}
.detail-action.primary .da-ico { background: var(--accent-grad); color: #1a1200; border-color: transparent; box-shadow: var(--glow); }
.detail-action.active .da-ico { border-color: #ff5c7a; color: #ff5c7a; }
.detail-action:active .da-ico { transform: scale(0.9); }
.detail-action:disabled { opacity: 0.5; }
.detail-action:disabled .da-ico { background: var(--surface); }

/* ─────────────  ПУБЛИКАЦИЯ  ───────────── */
.resolution-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.resolution-chips .chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 8px 6px;
  width: 100%;
}
.resolution-chips .chip-res {
  font-weight: 700;
  font-size: 15px;
}
.resolution-chips .chip-cost {
  font-size: 11px;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.video-quality-chips {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* В Kling 3.0 три уровня качества: финальный 4K занимает целую строку,
   поэтому сетка не оставляет визуально случайную пустоту справа. */
.video-quality-chips .chip:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.home-upload-btn {
  margin-top: 16px;
  width: 100%;
}
#modHomeDropzone,
#manualDropzone {
  display: block;
  cursor: pointer;
  margin-bottom: 10px;
}
#modHomeUploadPrompt {
  margin: 10px 0;
  min-height: 80px;
}
.publish-title { font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.publish-desc { font-size: var(--text-sm); color: var(--muted); margin-top: 4px; max-width: 92%; line-height: var(--leading-relaxed); font-weight: 400; }
.sheet-head > div:first-child { padding-right: 8px; }
.pub-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  margin-bottom: 14px;
}
.pub-card-title { font-size: var(--text-base); font-weight: 600; margin-bottom: 3px; letter-spacing: var(--tracking-tight); }
.pub-status { font-size: var(--text-sm); color: var(--muted); margin-bottom: 13px; font-weight: 400; }
.pub-status.on { color: var(--accent); }
.pub-status.pending { color: #ff9a4d; }
.btn-outline {
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-normal);
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  box-shadow: none;
  transition: transform 0.12s;
}
.btn-outline:active { transform: scale(0.98); }

/* ─────────────  ИНФО НА ОВЕРЛЕЕ ГЕНЕРАЦИИ  ───────────── */
.gen-info { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.gi-model { font-size: var(--text-base); font-weight: 600; letter-spacing: var(--tracking-tight); }
.gi-meta { font-size: var(--text-sm); color: var(--muted); font-weight: 400; }
.gen-tip {
  max-width: 300px;
  margin-top: 6px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  font-weight: 400;
  text-align: center;
  transition: opacity 0.3s;
}

/* ─────────────  ЭМОДЗИ (Twemoji)  ───────────── */
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 0.03em;
  vertical-align: -0.12em;
  display: inline-block;
}
.mi-circle img.emoji, .model-emoji img.emoji, .preset-emoji img.emoji,
.quick-emoji img.emoji, .empty-emoji img.emoji, .da-ico img.emoji { vertical-align: -0.1em; }

/* Публикация всегда выше детального просмотра */
#publishSheet { z-index: 95; }

/* ─────────────  ДОСТУП ТОЛЬКО ИЗ TELEGRAM  ───────────── */
body.locked { overflow: hidden; }
body.boot-pending .topbar,
body.boot-pending .app,
body.boot-pending .bottom-nav { visibility: hidden; pointer-events: none; }
/* Публичная страница /shop доступна без Telegram: её проверяют платёжные
   провайдеры, а пользователь может прочитать условия до покупки. */
.public-shop-page { display: none; }
html.public-shop { min-width: 320px; background: #080806; }
/* Mini App может оставить body.locked после прежней сессии. У публичной
   витрины всегда обычный документный скролл — и на Safari, и на телефоне. */
html.public-shop,
html.public-shop body {
  min-width: 320px;
  min-height: 100%;
  height: auto !important;
  overflow: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
}
html.public-shop body { background: #080806; }
html.public-shop .boot-splash,
html.public-shop .topbar,
html.public-shop .app,
html.public-shop .bottom-nav,
html.public-shop #accessDenied { display: none !important; }
html.public-shop .public-shop-page { display: block; min-height: 100dvh; overflow: visible; visibility: visible; pointer-events: auto; }
.public-shop-page {
  min-height: 100dvh;
  color: #f9f4e9;
  background:
    radial-gradient(54rem 32rem at 100% -8%, rgba(187, 136, 47, .18), transparent 64%),
    radial-gradient(40rem 25rem at -10% 28%, rgba(120, 85, 28, .12), transparent 66%),
    #080806;
  font-family: var(--font-body);
}
.public-shop-shell { width: min(100% - 32px, 860px); margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 0 max(48px, env(safe-area-inset-bottom)); }
.public-shop-brand { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; color: #fffaf0; }
.public-shop-brand img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.public-shop-brand span { display: grid; gap: 1px; }
.public-shop-brand strong { font-size: 16px; letter-spacing: -.01em; }
.public-shop-brand small,
.public-shop-kicker { color: #d8bb7d; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.public-shop-hero { padding: clamp(31px, 7vw, 58px) 0 26px; max-width: 670px; }
.public-shop-hero h1 { max-width: 620px; margin: 8px 0 14px; color: #fffaf0; font-family: var(--font-display); font-size: clamp(33px, 7vw, 52px); line-height: 1.03; letter-spacing: -.045em; }
.public-shop-hero p:not(.public-shop-kicker) { max-width: 640px; margin: 0; color: rgba(249, 244, 233, .76); font-size: 17px; line-height: 1.6; }
.public-shop-telegram-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 23px; }
.public-shop-telegram { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 1px solid rgba(241, 205, 125, .7); border-radius: 14px; background: linear-gradient(135deg, #f1ce83, #c5943d); color: #171108; font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: 0 12px 28px rgba(0, 0, 0, .24); }
.public-shop-telegram:hover { filter: brightness(1.06); }
.public-shop-telegram--secondary { border-color: rgba(241, 205, 125, .36); background: rgba(255, 255, 255, .055); color: #f9f4e9; box-shadow: none; }
.public-shop-telegram:focus-visible,
.public-shop-footer a:focus-visible { outline: 2px solid #f3cf81; outline-offset: 3px; border-radius: 4px; }
.public-shop-card { padding: clamp(20px, 4vw, 30px); border: 1px solid rgba(230, 192, 111, .25); border-radius: 22px; background: linear-gradient(145deg, rgba(39, 33, 23, .92), rgba(16, 14, 10, .96)); box-shadow: 0 18px 46px rgba(0, 0, 0, .18); }
.public-shop-card h2 { margin: 5px 0 17px; color: #fffaf0; font-family: var(--font-display); font-size: clamp(21px, 4vw, 28px); line-height: 1.15; letter-spacing: -.025em; }
.public-shop-card p,
.public-shop-card li { color: rgba(249, 244, 233, .78); font-size: 15px; line-height: 1.62; }
.public-shop-card p { margin: 0; }
.public-shop-card p + p { margin-top: 14px; }
.public-shop-card ol { margin: 0; padding-left: 20px; }
.public-shop-card li + li { margin-top: 10px; }
.public-shop-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.public-shop-prices { width: 100%; border-collapse: collapse; font-size: 15px; }
.public-shop-prices caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.public-shop-prices th,
.public-shop-prices td { padding: 13px 8px; border-bottom: 1px solid rgba(255, 255, 255, .11); text-align: left; white-space: nowrap; }
.public-shop-prices thead th { color: rgba(249, 244, 233, .62); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.public-shop-prices tbody th { color: #fffaf0; font-weight: 700; }
.public-shop-prices td:last-child { color: #f1cd7c; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.public-shop-note { margin-top: 16px !important; color: rgba(249, 244, 233, .63) !important; font-size: 13px !important; }
.public-shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.public-shop-requisites { margin-top: 14px; }
.public-shop-requisites dl { display: grid; gap: 12px; margin: 0; }
.public-shop-requisites dl div { display: grid; grid-template-columns: minmax(110px, .38fr) minmax(0, 1fr); gap: 14px; }
.public-shop-requisites dt { color: rgba(249, 244, 233, .59); font-size: 14px; }
.public-shop-requisites dd { min-width: 0; margin: 0; color: #fffaf0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.public-shop-requisites a,
.public-shop-footer a { color: #f1cd7c; text-underline-offset: 3px; }
.public-shop-footer { padding: 23px 0 0; color: rgba(249, 244, 233, .58); font-size: 14px; line-height: 1.55; }
.public-shop-footer span { margin: 0 7px; color: rgba(249, 244, 233, .35); }
.public-shop-footer p { margin: 10px 0 0; }
@media (max-width: 620px) {
  .public-shop-shell { width: min(100% - 24px, 860px); }
  .public-shop-grid { grid-template-columns: 1fr; }
  .public-shop-requisites dl div { grid-template-columns: 1fr; gap: 3px; }
  .public-shop-telegram-actions { display: grid; grid-template-columns: 1fr; }
  .public-shop-telegram { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .public-shop-telegram { transition: none; } }
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 50% at 50% 20%, var(--accent-soft), transparent 55%),
    #000;
}
.boot-splash.hidden { display: none; }
.boot-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
}
.boot-splash-logo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  animation: boot-pulse 1.4s ease-in-out infinite;
}
.boot-splash-brand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: var(--tracking-tight);
}
.boot-splash-caption {
  margin-top: -10px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.boot-splash-spinner {
  width: 28px;
  height: 28px;
  margin-top: 6px;
  border: 2.5px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: boot-spin 0.75s linear infinite;
}
.boot-splash-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}
@keyframes boot-spin {
  to { transform: rotate(360deg); }
}
@keyframes boot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.96); opacity: 0.85; }
}
.access-denied {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: calc(var(--chrome-top) + 8px) 24px calc(28px + var(--chrome-bottom));
  background: #000;
}
.access-denied[data-mode="blocked"] {
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(255, 92, 92, 0.12), transparent 58%),
    #000;
}
.ad-box {
  width: min(100%, 340px);
  text-align: center;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.ad-icon {
  width: 72px;
  height: 86px;
  margin: 0 auto 28px;
  color: var(--accent);
}
.ad-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ad-code {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  color: var(--danger);
  margin-bottom: 10px;
}
.ad-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 12px;
}
.ad-text {
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 32px;
  font-weight: 400;
}
.ad-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.ad-debug {
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px;
  margin: 0 0 14px;
  max-height: 36vh;
  overflow: auto;
}
.ad-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 22px;
  border-radius: 14px;
  background: var(--accent);
  color: #111;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border: none;
  cursor: pointer;
}
.ad-btn:active { filter: brightness(0.95); }
.ad-btn-link { background: var(--accent); color: #111; }
.ad-btn-secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
}

/* ─────────────  TOAST  ───────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + var(--chrome-bottom) + 18px);
  transform: translateX(-50%);
  z-index: 999;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 13px 18px;
  border-radius: 13px;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-snug);
  max-width: 88%;
  text-align: center;
  box-shadow: var(--shadow);
  animation: toast-in 0.2s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ─────────────  ПРОФИЛЬ: РАЗДЕЛЫ  ───────────── */
.profile-section-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 14px;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.profile-section-tabs::-webkit-scrollbar { display: none; }

.account-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
}
.account-row:last-of-type { border-bottom: none; }
.billing-card { margin-top: 14px; }
.account-support-card { margin-top: 14px; }
.account-support-card .account-linked-title {
  margin-bottom: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--muted);
}
.account-support-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}
.billing-list { display: flex; flex-direction: column; gap: 0; }
.billing-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.billing-item:first-child { padding-top: 4px; }
.billing-item:last-child { border-bottom: none; padding-bottom: 0; }
.billing-item-main { min-width: 0; flex: 1; }
.billing-item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.billing-item-date {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.billing-item-right {
  text-align: right;
  flex-shrink: 0;
}
.billing-item-tokens {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.3;
}
.billing-item-tokens.is-debit { color: #f07178; }
.billing-item-money {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.account-id-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--line);
}
.account-id-row code {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  word-break: break-all;
}
.account-linked { margin: 14px 0; }
.account-linked-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.account-linked-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.account-linked-badge { color: var(--accent); font-weight: 600; font-size: 13px; }
.account-email-field { margin: 14px 0; }
.account-email-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.account-email-row input { flex: 1; min-width: 0; }
.account-hint { font-size: 12px; margin: 6px 0 0; }
.account-avatars-block { margin-top: 16px; }
.gen-avatars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 10px 0 12px;
}
.gen-avatar-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  padding: 0;
  background: var(--surface-2);
}
.gen-avatar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gen-avatar-del {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
}
.gen-avatar-add { margin-top: 4px; cursor: pointer; }

/* ─────────────  ПАРТНЁРКА  ───────────── */
.partner-page {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  font-weight: 400;
}
.partner-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 16px 16px;
  margin-bottom: 16px;
}
.partner-card-title {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.partner-moderation-notice {
  display: flex;
  align-items: center;
  min-height: 32px;
  margin: 0 0 12px;
  padding: 7px 10px;
  border: 1px solid rgba(212, 175, 55, .32);
  border-radius: 10px;
  background: rgba(212, 175, 55, .08);
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}
.partner-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0 16px;
  align-items: stretch;
}
.partner-level {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 92px;
  padding: 12px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}
.partner-level-name {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.9;
  line-height: 1.2;
}
.partner-level-desc {
  font-size: 11px;
  opacity: 0.55;
  line-height: 1.25;
  min-height: 2.5em;
}
.partner-level-pct {
  margin-top: auto;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.partner-payout-summary {
  margin: 14px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}
.partner-terms {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.partner-terms summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--accent);
  cursor: pointer;
  font-weight: 650;
}
.partner-terms p { margin: 0; }
.partner-data-status {
  margin: -8px 0 12px;
  color: var(--muted);
  font-size: var(--text-sm);
}
.partner-data-status.is-error { color: var(--danger); }
.partner-stat-levels {
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.75;
  line-height: 1.45;
}
.partner-card-sub {
  font-size: var(--text-sm);
  margin: 0 0 14px;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  font-weight: 400;
}
.partner-link-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}
.partner-link-tab {
  flex: 1;
  min-height: 36px;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.partner-link-tab.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.partner-link-hint {
  margin: 8px 0 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  font-weight: 500;
}
.partner-link-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px 4px 4px 14px;
  margin-bottom: 0;
  height: 46px;
  box-sizing: border-box;
}
.partner-link-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 10px 0;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  outline: none;
}
.partner-link-edit {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.partner-link-edit svg { width: 18px; height: 18px; }
.partner-link-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.partner-round-btn {
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: none;
  background: var(--accent-grad);
  color: #1a1200;
  display: grid;
  place-items: center;
  box-shadow: var(--glow);
  flex-shrink: 0;
}
.partner-round-btn svg { width: 20px; height: 20px; }
.partner-period { margin-bottom: 16px; }
.partner-stats { margin: 4px 0 18px; }
.partner-stat-big {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text);
}
.partner-stat-label {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}
.partner-balances {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.partner-balance-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}
.partner-balance-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.partner-balance-value {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
}
.partner-stars-note {
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.partner-withdraw {
  font-size: var(--text-sm);
  margin: 0 0 20px;
  line-height: var(--leading-relaxed);
  color: var(--muted);
  font-weight: 400;
}
.partner-block { margin-bottom: 18px; }
.partner-block-title {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: var(--tracking-tight);
}
.partner-block-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}
.partner-tx-pills { margin-bottom: 10px; }
.partner-list { display: flex; flex-direction: column; gap: 0; }
.partner-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.partner-list-item:last-child { border-bottom: none; padding-bottom: 0; }
.partner-list-item:first-child { padding-top: 0; }
.partner-empty {
  font-size: 14px;
  line-height: 1.55;
  color: #a8a8b3;
  font-weight: 500;
  margin: 0;
}

/* ─────────────  МОДЕРАЦИЯ  ───────────── */
.mod-analytics-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mod-analytics-group { margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mod-analytics-group summary { cursor: pointer; font-weight: 700; padding: 4px 0 10px; }
.mod-analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mod-analytics-metric { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--bg); border-radius: 10px; overflow-wrap: anywhere; }
.mod-analytics-metric span { color: var(--muted); font-size: 12px; }
.mod-analytics-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.mod-analytics-switch .btn-outline.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
#modAnalyticsContent .mod-user-row { width: 100%; margin-top: 8px; overflow-wrap: anywhere; text-align: left; }
.mod-pending-list { display: flex; flex-direction: column; gap: 12px; }
.mod-pending-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.mod-pending-card img,
.mod-pending-card video {
  width: 100%;
  /* Модератор должен видеть весь кадр, а не обрезанные головы/ноги. */
  aspect-ratio: 3 / 4;
  object-fit: contain;
  display: block;
  background: #090908;
}
.mod-pending-meta { padding: 12px 14px; }
.mod-pending-actions { display: flex; gap: 8px; margin-top: 10px; }
.mod-pending-actions .btn-primary { flex: 1; }
.mod-pending-actions .btn-outline { flex: 1; }
.mod-channel-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.mod-channel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mod-channel-head strong { display: block; overflow-wrap: anywhere; }
.mod-channel-id,
.mod-channel-meta,
.mod-channel-active { color: var(--muted); font-size: 12px; line-height: 1.45; }
.mod-channel-id { display: block; margin-top: 2px; }
.mod-channel-active,
.mod-channel-meta { margin: 8px 0 0; overflow-wrap: anywhere; }
.mod-channel-link { display: block; margin-top: 12px; color: var(--accent); font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.mod-channel-status { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; }
.mod-channel-status--pending { color: #f5d982; background: rgba(184, 132, 32, .16); }
.mod-channel-status--approved { color: #70d5a2; background: rgba(44, 173, 112, .15); }
.mod-channel-status--rejected { color: #ff9994; background: rgba(214, 77, 68, .14); }
.mod-channel-actions { flex-wrap: wrap; }
.mod-channel-actions .mod-channel-remove { flex: 1 1 100%; }
.mod-published-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mod-published-head .shop-sub { max-width: 560px; margin-bottom: 0; }
.mod-published-card { position: relative; }
.mod-published-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mod-published-kind { flex: 0 0 auto; padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 700; }
.mod-published-prompt { margin-top: 7px; font-size: 12px; line-height: 1.45; }
.mod-published-actions .btn-primary,
.mod-published-actions .btn-outline { min-height: 44px; }
.mod-published-actions { flex-wrap: wrap; }
.mod-idea-folders-list { display: grid; gap: 8px; margin: 16px 0; }
.mod-idea-folder-option { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.mod-idea-folder-option input { width: 20px; height: 20px; accent-color: var(--accent); }
.mod-published-actions .mod-feature-action { flex: 1 1 100%; }
.mod-feature-action.is-featured {
  border-color: rgba(225, 181, 81, .7);
  background: rgba(184, 132, 32, .16);
  color: #f5d982;
}
.mod-idea-editor-sheet { max-width: 560px; }
.mod-idea-editor-author { margin: 2px 0 14px; color: var(--muted); font-size: 13px; font-weight: 600; }
.mod-idea-editor-prompt-field { display: grid; gap: 7px; }
.mod-idea-editor-prompt-field textarea { min-height: 170px; resize: vertical; }
.mod-idea-editor-delete { margin-top: 8px; border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); color: var(--danger); }
@media (max-width: 420px) {
  .mod-published-head { display: block; }
  .mod-published-head .mod-library-counter { display: inline-flex; margin-top: 8px; }
}
.mod-home-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
}
.mod-library-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 2px 0 14px;
}
.mod-library-eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.mod-library-intro .section-title { margin-bottom: 5px; }
.mod-library-intro .shop-sub { margin-bottom: 0; max-width: 510px; }
.mod-library-counter {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(212,175,55,.34);
  border-radius: 999px;
  color: var(--accent);
  background: rgba(212,175,55,.08);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.mod-library-upload { padding: 16px; }
.mod-library-step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.mod-library-step > span {
  flex: 0 0 auto;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #18150d;
  font-size: 12px;
  font-weight: 800;
}
.mod-library-step strong,
.mod-library-step small { display: block; }
.mod-library-step strong { color: var(--text); font-size: 14px; }
.mod-library-step small { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.mod-library-dropzone {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 15px;
  border-color: rgba(212,175,55,.42);
  background: linear-gradient(135deg, rgba(212,175,55,.1), rgba(255,255,255,.025));
}
.mod-library-dropzone:hover { border-color: var(--accent); }
.mod-library-drop-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 14px;
  color: var(--accent);
  background: rgba(0,0,0,.18);
}
.mod-library-drop-copy { min-width: 0; }
.mod-library-drop-copy strong,
.mod-library-drop-copy small { display: block; }
.mod-library-drop-copy strong { color: var(--text); font-size: 14px; }
.mod-library-drop-copy small { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.mod-library-queue {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 12px 0;
}
.mod-library-queue-item {
  display: flex;
  width: 100%;
  min-height: 68px;
  align-items: center;
  gap: 7px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.mod-library-queue-item.active { border-color: var(--accent); background: rgba(212,175,55,.08); }
.mod-library-queue-item.is-preparing .mod-library-queue-thumb::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.18) 46%, transparent 67%);
  background-size: 220% 100%;
  animation: mod-library-preview-loading 1.1s linear infinite;
}
@keyframes mod-library-preview-loading { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) {
  .mod-library-queue-item.is-preparing .mod-library-queue-thumb::after { animation: none; }
}
.mod-library-queue-item:focus-within,
.mod-library-dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.mod-library-queue-select {
  display: flex;
  min-width: 0;
  min-height: 54px;
  flex: 1;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mod-library-queue-select:active { transform: scale(.99); }
.mod-library-queue-thumb {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 10px;
  background: #09090b;
}
.mod-library-queue-thumb img,
.mod-library-queue-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mod-library-file-mark {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: linear-gradient(145deg, rgba(212,175,55,.34), rgba(88,65,217,.35));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}
.mod-library-video-mark {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
}
.mod-library-queue-copy { min-width: 0; flex: 1; }
.mod-library-queue-copy strong,
.mod-library-queue-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-library-queue-copy strong { color: var(--text); font-size: 13px; font-weight: 650; }
.mod-library-queue-copy small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.mod-library-queue-ready { color: var(--accent); font-size: 11px; font-weight: 700; }
.mod-library-queue-remove {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: var(--muted);
  font: inherit;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}
.mod-library-queue-remove:active { color: #fff; background: rgba(255,255,255,.08); }
.mod-library-queue-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mod-library-editor {
  margin: 14px 0 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0,0,0,.12);
}
.mod-library-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mod-library-fields .field { margin: 0; }
.mod-library-fields .field:only-child { grid-column: 1 / -1; }
.mod-home-preset-field { grid-column: 1 / -1; }
.mod-home-preset-picker { display: flex; gap: 8px; align-items: stretch; }
.mod-home-preset-picker select { min-width: 0; flex: 1; }
.mod-home-new-folder-btn { flex: 0 0 auto; min-height: 48px; padding: 0 12px; white-space: nowrap; }
.mod-home-new-folder { display: grid; gap: 8px; margin-top: 8px; }
.mod-home-new-folder-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; }
.mod-home-new-folder-actions button { min-height: 44px; }
.mod-home-reference-field {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(232, 198, 117, .24);
  border-radius: 14px;
  background: rgba(232, 198, 117, .045);
}
.mod-home-reference-field .mod-library-step { margin-bottom: 0; }
.mod-home-reference-field .btn-outline { min-height: 44px; justify-content: center; }
@media (max-width: 390px) {
  .mod-home-preset-picker { display: grid; grid-template-columns: 1fr; }
  .mod-home-new-folder-btn { width: 100%; }
}
.mod-library-note { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
@media (max-width: 430px) {
  .mod-library-intro { display: block; }
  .mod-library-counter { display: inline-block; margin-top: 10px; }
  .mod-library-fields { grid-template-columns: 1fr; }
}
.mod-check,
.mod-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin: 10px 0;
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
.mod-check input,
.mod-check-row input {
  pointer-events: auto;
}
.mod-home-trends {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 0 10px;
  scrollbar-width: none;
}
.mod-home-trends::-webkit-scrollbar { display: none; }
.mod-trend-pick {
  flex: 0 0 88px;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: var(--surface-2);
}
.mod-trend-pick.selected { border-color: var(--accent); }
.mod-trend-pick img { width: 88px; height: 88px; object-fit: cover; display: block; }
.mod-trend-pick .mod-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: none;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
}
.mod-trend-order {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: 4px;
  display: inline-flex;
  overflow: hidden;
  border: 1px solid rgba(245, 208, 114, .72);
  border-radius: 999px;
  background: rgba(9, 8, 6, .52);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
}
.mod-trend-move {
  width: 26px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-right: 1px solid rgba(245, 208, 114, .35);
  padding: 0;
  background: transparent;
  color: #fff5d8;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.mod-trend-move:last-child { border-right: 0; }
.mod-trend-move:not(:disabled):hover { background: rgba(235, 185, 75, .24); }
.mod-trend-move:active { transform: none; background: rgba(235, 185, 75, .34); }
.mod-trend-move:disabled { cursor: default; opacity: .32; }
.mod-home-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mod-preset-chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--muted);
}
.mod-preset-chip.active {
  border-color: var(--accent);
  color: var(--text);
  background: var(--accent-soft);
}
.mod-tab-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #1a1200;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.mod-preset-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.mod-preset-count { font-size: 14px; flex: 1; min-width: 140px; }
.mod-preset-hint { font-size: 13px; margin: 0; }
.mod-preset-selected {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 8px;
}
.mod-preset-selected-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
}
.mod-preset-selected-cover {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.mod-preset-selected-info { flex: 1; min-width: 0; }
.mod-preset-selected-title { font-size: 14px; font-weight: 600; }
.mod-preset-selected-group { font-size: 12px; color: var(--muted); }
.mod-preset-order-btns { display: flex; gap: 4px; }
.mod-preset-order-btns button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
}
.mod-preset-catalog { display: flex; flex-direction: column; gap: 16px; margin-bottom: 14px; }
.mod-preset-category-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.mod-preset-category-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}
.mod-preset-category-order { display: grid; grid-template-rows: 1fr 1fr; gap: 4px; }
.mod-preset-category-order .mod-preset-order {
  width: 30px;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
}
.mod-preset-category-order .mod-preset-order:disabled { opacity: .35; cursor: default; }
.mod-preset-category-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  text-align: left;
  padding: 0;
  cursor: pointer;
}
.mod-preset-category-card:active { transform: scale(0.98); }
.mod-preset-category-cover {
  aspect-ratio: 3/4;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: var(--surface2);
}
.mod-preset-category-cover--photo { font-size: 0; }
.mod-preset-category-body { padding: 10px 12px 12px; }
.mod-preset-category-title { font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.mod-preset-category-meta { font-size: 11px; color: var(--muted); line-height: 1.35; }
.mod-preset-category-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mod-preset-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
}
.mod-preset-badge--accent { color: var(--accent); background: rgba(124,92,255,0.12); }
.mod-preset-category-detail { margin-bottom: 14px; }
.mod-preset-back {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
  padding: 0 0 12px;
  cursor: pointer;
}
.mod-preset-category-head {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--surface);
}
.mod-preset-category-head-top { display: flex; gap: 12px; align-items: flex-start; }
.mod-preset-category-head-cover {
  width: 72px;
  aspect-ratio: 3/4;
  border-radius: 10px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: var(--surface2);
}
.mod-preset-category-head-info { flex: 1; min-width: 0; }
.mod-preset-category-head-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.mod-preset-category-head-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mod-preset-group-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--muted);
}
.mod-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mod-preset-card {
  position: relative;
  border: 2px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
  padding: 0;
  background: var(--surface-2);
  min-height: 108px;
}
.mod-preset-card.selected { border-color: var(--accent); box-shadow: var(--glow); }
.mod-preset-card-cover {
  height: 64px;
  display: grid;
  place-items: center;
  font-size: 28px;
}
.mod-preset-card-body { padding: 8px 10px 10px; }
.mod-preset-card-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
.mod-preset-card-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #1a1200;
  font-size: 12px;
  font-weight: 700;
  display: none;
  place-items: center;
}
.mod-preset-card.selected .mod-preset-card-check { display: grid; }
.mod-preset-card-main {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  color: inherit;
}
.mod-preset-help {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.mod-preset-help strong { color: var(--text); display: block; margin-bottom: 6px; }
.mod-preset-help p { margin: 0 0 6px; }
.mod-preset-help p:last-child { margin-bottom: 0; }
.mod-preset-group-meta { font-size: 12px; color: var(--muted); margin: -4px 0 8px; }
.mod-preset-examples-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mod-preset-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
  font-size: 14px;
}
.mod-preset-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.mod-preset-group-head .mod-preset-group-title { flex: 1; margin: 0; }
.mod-preset-group-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.mod-preset-card-actions {
  display: flex;
  gap: 4px;
  padding: 0 8px 8px;
}
.mod-preset-card-actions button {
  flex: 1;
  min-width: 0;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
}
.mod-preset-card-actions .mod-preset-order { flex: 0 0 31px; font-size: 15px; }
.mod-preset-card.disabled { opacity: 0.55; }
.mod-preset-card.disabled .mod-preset-card-title::after {
  content: " · выкл";
  color: var(--muted);
  font-weight: 400;
}
.mod-preset-sheet .mod-preset-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.mod-preset-sheet .field-label { font-size: 13px; color: var(--muted); }
.mod-preset-sheet .field-input,
.mod-preset-sheet select,
.mod-preset-sheet textarea {
  min-height: 48px;
  font-size: 16px;
  line-height: 1.4;
}
.mod-preset-prompt {
  min-height: 200px !important;
  max-height: 54dvh;
  resize: vertical;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mod-preset-form-intro {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  line-height: 1.45;
}
.mod-preset-form-intro strong { display: block; margin-bottom: 4px; }
.mod-preset-form-intro p { margin: 0; font-size: 13px; color: var(--muted); }
.mod-preset-cover-upload,
.mod-preset-upload-step { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.mod-preset-cover-preview {
  width: 100%;
  min-height: 112px;
  border-radius: 14px;
  border: 1px dashed var(--line-strong);
  background: var(--surface);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}
.mod-preset-cover-preview:disabled { opacity: .7; cursor: wait; }
.mod-preset-cover-placeholder { font-size: 14px; color: var(--muted); }
.mod-preset-cover-placeholder[data-ix] { display: inline-flex; align-items: center; gap: 8px; }
.mod-preset-cover-placeholder[data-ix] svg { width: 20px; height: 20px; }
.mod-preset-advanced {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 10px 10px;
}
.mod-preset-advanced summary { padding: 10px 0; color: var(--muted); font-size: 13px; cursor: pointer; }
.mod-preset-settings { display: grid; grid-template-columns: 1fr; gap: 8px; padding-top: 4px; }
.mod-preset-format-field,
.mod-preset-prompt-field { display: flex; flex-direction: column; gap: 6px; }
/* Плашка скрытого промпта тренда (как у референса) */
.prompt-hidden-notice {
  background: #1c1c22;
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.prompt-hidden-notice.hidden { display: none !important; }
.prompt-hidden-notice .prompt-lock {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.prompt-hidden-notice .prompt-lock svg {
  display: block;
  width: 18px;
  height: 18px;
}
.prompt-hidden-notice .prompt-hidden-text {
  flex: 1;
  color: #b8b8c2;
  font-weight: 400;
  letter-spacing: 0.01em;
}
#promptBlock.prompt-block--hidden {
  margin-top: 4px;
}
#promptBlock.prompt-block--hidden .block-title,
#promptBlock.prompt-block--hidden #prompt,
#promptBlock.prompt-block--hidden #promptCounterWrap {
  display: none !important;
}
.prompt-variables {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(232, 198, 117, .23);
  border-radius: 14px;
  background: rgba(232, 198, 117, .07);
}
.prompt-variables-title { margin: 0; color: #fff2cf; font-size: 14px; font-weight: 700; }
.prompt-variables-copy { margin: 4px 0 10px; color: rgba(255, 245, 220, .64); font-size: 12px; line-height: 1.35; }
.prompt-variables-fields { display: grid; gap: 8px; }
.prompt-variable-field { display: grid; grid-template-columns: minmax(96px, .5fr) minmax(0, 1fr); gap: 10px; align-items: center; color: rgba(255, 245, 220, .78); font-size: 13px; font-weight: 650; }
.prompt-variable-field .field-input { min-width: 0; background: rgba(0, 0, 0, .22); }
@media (max-width: 480px) {
  .video-recipe-editor-variable { grid-template-columns: 1fr 1fr; }
  .video-recipe-editor-variable-remove { grid-column: span 2; }
}
.mod-user-search {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.mod-user-search .field-input { flex: 1; }
.mod-user-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mod-user-head { display: flex; flex-direction: column; gap: 4px; }
.mod-user-name { font-size: 17px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mod-user-meta { font-size: 13px; color: var(--muted); }
.mod-user-head-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.mod-user-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.18);
  color: var(--accent);
}
.mod-user-badge--danger {
  background: rgba(255, 69, 58, 0.18);
  color: #ff453a;
}
.mod-user-row--blocked .mod-user-row-name { color: #ff453a; }
.mod-user-row-name em { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 500; }
.mod-user-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.mod-user-stat {
  background: var(--surface);
  border-radius: 10px;
  padding: 10px;
  font-size: 12px;
}
.mod-user-stat strong { display: block; font-size: 15px; margin-top: 4px; }
.mod-user-form { display: flex; flex-direction: column; gap: 8px; }
.mod-user-form-row { display: flex; gap: 8px; align-items: center; }
.mod-user-form-row .field-input { flex: 1; }
.mod-wd-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mod-wd-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}
.mod-wd-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.mod-wd-amount { font-size: 18px; font-weight: 700; color: var(--accent); }
.mod-wd-user { font-size: 14px; font-weight: 600; }
.mod-wd-meta { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.mod-wd-actions { display: flex; gap: 8px; margin-top: 10px; }
.mod-wd-actions button { flex: 1; }
.mod-pending-meta .mod-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────
   LUMIX STUDIO · 2026 PRODUCT SYSTEM
   A quiet, image-led creative operating system. This layer intentionally
   normalizes legacy screens behind one set of surface, type, spacing and
   motion tokens.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --bg: #090a10;
  --bg-soft: #10111a;
  --surface: #141622;
  --surface-2: #1a1d2b;
  --surface-3: #222638;
  --line: rgba(222, 224, 255, .075);
  --line-strong: rgba(222, 224, 255, .14);
  --text: #f5f5fa;
  --text-secondary: #d0d1dc;
  --muted: #9396aa;
  --accent: #b4adff;
  --accent-2: #8d81ee;
  --accent-grad: linear-gradient(135deg, #e2e0ff 0%, #b2aaff 50%, #9183f5 100%);
  --accent-ink: #151426;
  --accent-soft: rgba(180, 173, 255, .13);
  --accent-line: rgba(191, 186, 255, .3);
  --accent-glow: rgba(157, 143, 255, .22);
  --radius: 22px;
  --radius-sm: 16px;
  --nav-h: 76px;
  --shadow: 0 20px 50px rgba(0, 0, 0, .32);
  --glow: 0 10px 30px rgba(126, 111, 245, .22);
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 32px;
  --leading-tight: 1.08;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.62;
  --tracking-tight: -.045em;
  --tracking-normal: -.018em;
  --tracking-label: .055em;
  --tracking-caps: .12em;
}

html { background: var(--bg); scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  background:
    radial-gradient(80vw 48vw at 100% -12%, rgba(98, 83, 210, .16), transparent 62%),
    radial-gradient(68vw 42vw at -18% 48%, rgba(76, 100, 178, .10), transparent 65%),
    var(--bg);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-normal);
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 10px 14px;
  color: var(--accent-ink);
  background: var(--accent-grad);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: none; outline: 2px solid #fff; outline-offset: 2px; }
:where(button, a, input, textarea, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
button { touch-action: manipulation; }
button:disabled { cursor: not-allowed; }

.brand, .brand-name, .hero-title, .profile-name, .publish-title,
.model-banner-title, .ad-title, .ad-code { font-family: var(--font-display); }
.section-title, .page-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
.section-title {
  margin: 8px 0 7px;
  font-size: 20px;
  line-height: 1.12;
}
.shop-sub, .subtitle { color: var(--muted); font-size: 13px; line-height: 1.52; }
.page-intro { margin: 7px 0 20px; max-width: 560px; }
.page-intro .shop-sub { margin: 9px 0 0; max-width: 470px; }
.page-kicker, .chat-eyebrow, .hero-eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.2;
}
.page-title { margin: 0; font-size: clamp(28px, 7.7vw, 43px); line-height: .99; }

.topbar {
  min-height: 74px;
  padding: calc(var(--chrome-top) + 10px) max(16px, env(safe-area-inset-left)) 12px;
  gap: 9px;
  background: rgba(9, 10, 16, .75);
  border-bottom: 1px solid rgba(230, 232, 255, .07);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.brand { gap: 9px; }
.brand-logo-wrap {
  width: 39px;
  height: 39px;
  padding: 2px;
  border: 1px solid rgba(225, 222, 255, .22);
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.025));
  box-shadow: 0 8px 25px rgba(0, 0, 0, .24);
}
.brand-logo { border-radius: 11px; }
.brand-name { color: var(--text); font-size: 17px; font-weight: 750; letter-spacing: -.055em; }
.brand-caption { margin-top: 3px; color: #9e9db2; font-size: 8px; letter-spacing: .15em; }
.topbar-actions { gap: 7px; }
.topbar-back, .modal-close, .icon-btn {
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.045);
  color: var(--text-secondary);
}
.topbar-back { width: 40px; height: 40px; border-radius: 14px; }
.buy-pill {
  min-height: 38px;
  padding: 9px 13px;
  color: var(--accent-ink);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 7px 20px rgba(109, 93, 231, .18);
}
.balance-chip {
  min-height: 38px;
  gap: 5px;
  padding: 8px 10px;
  border-color: var(--line-strong);
  background: rgba(255,255,255,.045);
  font-size: 12px;
  font-weight: 700;
}

/* Language lives in the header as a compact, touch-safe control.  It follows
   the same translucent chrome as balance so it reads as a setting, not CTA. */
.language-button {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.language-button:active { transform: scale(.96); }
.language-button-icon { display: inline-grid; place-items: center; }
.language-sheet { max-width: 380px; }
.language-current { margin: -2px 0 14px; color: var(--muted); font-size: 13px; }
.language-options { display: grid; gap: 8px; }
.language-option {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.language-option[aria-checked="true"] {
  border-color: rgba(224, 187, 104, .7);
  background: linear-gradient(135deg, rgba(213, 170, 80, .14), rgba(255,255,255,.04));
  color: #fbf2d7;
}
.language-option:active { transform: scale(.985); }
.language-option-check { opacity: 0; color: #e0bb68; }
.language-option[aria-checked="true"] .language-option-check { opacity: 1; }
.language-button:focus-visible,
.language-option:focus-visible {
  outline: 2px solid #e0bb68;
  outline-offset: 2px;
}

@media (max-width: 390px) {
  .language-button { min-width: 38px; min-height: 38px; padding: 7px; }
  .language-button-icon { display: none; }
}

.app {
  max-width: 760px;
  padding: 17px max(16px, env(safe-area-inset-left)) calc(var(--nav-h) + var(--chrome-bottom) + 28px);
}
.view { animation: lumix-view-in .34s cubic-bezier(.16, 1, .3, 1); }
@keyframes lumix-view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Home · editorial campaign rather than an app carousel */
.home-banners { margin-bottom: 26px; }
.home-banner-track { gap: 14px; scroll-padding: 1px; }
.home-banner {
  min-height: 278px;
  padding: 20px;
  border: 1px solid rgba(226, 228, 255, .14);
  border-radius: 26px;
  background-color: #12131d;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .23);
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .25s ease;
}
.home-banner:hover { border-color: rgba(212, 208, 255, .35); box-shadow: 0 20px 55px rgba(0, 0, 0, .33); }
.home-banner:active { transform: scale(.987); }
.home-banner--video, .home-brand-hero {
  min-height: 352px;
  padding: 0;
  background-image: url("/shop/assets/lumix-studio-v3.png?v=1");
  background-position: center 57%;
}
.home-banner-motion { display: none; }
.home-banner--video .hb-text, .home-brand-hero .hb-text {
  max-width: min(82%, 540px);
  padding: 72px 24px 0;
}
.home-brand-hero .hb-title, .hb-title {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 7.2vw, 42px);
  font-weight: 750;
  letter-spacing: -.06em;
  line-height: .98;
  text-shadow: 0 5px 30px rgba(0,0,0,.55);
}
.hb-sub, .home-banner--video .hb-sub {
  max-width: 338px;
  margin: 12px 0 0;
  color: rgba(242,243,255,.79);
  font-size: 13px;
  line-height: 1.42;
}
.hb-kicker { margin-bottom: 11px; color: #d2ceff; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.hb-brand {
  top: 17px;
  left: 19px;
  gap: 8px;
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 700;
}
.hb-brand img { width: 22px; height: 22px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.32)); }
.home-brand-actions {
  right: 20px;
  bottom: 20px;
  left: 20px;
  gap: 9px;
}
.home-brand-hero .hb-cta, .hb-cta {
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 13px;
  color: var(--accent-ink);
  background: var(--accent-grad);
  box-shadow: 0 10px 28px rgba(44, 34, 121, .26);
  font-size: 12px;
  font-weight: 750;
  transition: transform .18s ease, filter .18s ease;
}
.home-brand-actions .hb-cta:last-child { color: #f7f7ff; border-color: rgba(255,255,255,.17); background: rgba(12,13,22,.58); backdrop-filter: blur(12px); }
.hb-cta:active { transform: scale(.96); filter: brightness(.96); }
.hb-overlay {
  background: linear-gradient(90deg, rgba(7,8,14,.89) 0%, rgba(7,8,14,.48) 48%, rgba(7,8,14,.09) 100%), linear-gradient(0deg, rgba(7,8,14,.54), transparent 62%);
}
.home-banner--chat {
  min-height: 300px;
  align-items: flex-end;
  background-image: url("/shop/assets/lumix-prompt-v2.png?v=1");
  background-position: 72% center;
}
.home-banner--image {
  min-height: 300px;
  align-items: flex-end;
  background-image: url("/shop/assets/lumix-image-v2.png?v=1");
  background-position: 70% center;
}
.home-banner--partner {
  min-height: 300px;
  align-items: flex-start;
  background-image: url("/shop/assets/lumix-studio-v3.png?v=1");
  background-position: 65% center;
}
.home-banner--chat .hb-text, .home-banner--image .hb-text, .home-banner--partner .hb-text { max-width: min(76%, 365px); }
.home-banner--partner .hb-text { padding-top: 52px; }
.home-banner--chat .hb-title, .home-banner--image .hb-title, .home-banner--partner .hb-title { font-size: clamp(24px, 6.6vw, 34px); }
.home-banner--chat .hb-cta, .home-banner--image .hb-cta { right: 18px; bottom: 18px; }
.home-banner--partner .hb-cta { top: 17px; right: 17px; bottom: auto; }
.home-banner--image .hb-overlay { background: linear-gradient(90deg, rgba(8,9,16,.9) 0%, rgba(8,9,16,.58) 50%, rgba(8,9,16,.12) 100%), linear-gradient(0deg, rgba(8,9,16,.52), transparent 60%); }
.hb-levels { bottom: 18px; left: 18px; right: 18px; gap: 7px; }
.hb-levels > span {
  min-height: 58px;
  padding: 9px;
  border-color: rgba(209,205,255,.22);
  border-radius: 12px;
  background: rgba(9,10,16,.56);
  backdrop-filter: blur(12px);
}
.hb-levels b { color: #f0efff; font-size: 17px; }
.hb-levels small { color: #aeb0c2; font-size: 9px; }
.home-banner-dots { min-height: 34px; gap: 4px; margin-top: 7px; }
.home-banner-dot::after { width: 6px; height: 6px; background: rgba(215,215,240,.32); }
.home-banner-dot.active::after { width: 23px; background: var(--accent); }

.home-shortcuts-head { margin: 0 0 13px; }
.home-shortcuts-head h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: var(--tracking-tight); }
.home-shortcuts-all { min-height: 40px; color: var(--accent); font-size: 12px; font-weight: 700; }
.home-shortcuts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 0 27px;
  margin: 0;
}
.home-shortcut { gap: 8px; text-align: left; align-items: stretch; }
.home-shortcut-tile {
  aspect-ratio: 1.22;
  border: 1px solid var(--line-strong);
  border-radius: 17px;
  background: linear-gradient(140deg, rgba(185,177,255,.17), rgba(20,22,34,.92) 58%);
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 8px 20px rgba(0,0,0,.15);
}
.home-shortcut-tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 18%, rgba(203,198,255,.24), transparent 43%); pointer-events: none; }
.home-shortcut-icon { width: 70%; height: 70%; margin: auto; object-fit: contain; }
.home-shortcut-label { min-height: 0; color: #d9dae5; font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; }
.trends-head { margin: 0 0 13px; }
.trends-head .section-title { margin: 0 0 5px; }
.trends-head .link-btn { color: var(--accent); font-size: 12px; font-weight: 700; }
.trends-scroller { gap: 12px; padding-bottom: 4px; }

/* Galleries and works · content is the hero, the interface becomes quiet */
.gallery-grid, .history-grid, .work-grid { gap: 12px; }
.gallery-card, .history-card, .work-card {
  border: 1px solid rgba(230,232,255,.105);
  border-radius: 18px;
  background: #101119;
  box-shadow: 0 10px 26px rgba(0,0,0,.17);
  transition: transform .24s cubic-bezier(.16,1,.3,1), border-color .24s ease, box-shadow .24s ease;
}
.gallery-card:hover, .history-card:hover, .work-card:hover { border-color: rgba(205,201,255,.27); box-shadow: 0 16px 35px rgba(0,0,0,.27); }
.gallery-card:active, .history-card:active, .work-card:active { transform: scale(.975); }
/* Открытие работы не должно сначала зрительно менять её формат. Особенно на
   iPhone этот общий press-scale выглядит как скачок/кроп слева и справа. */
#view-ideas .gallery-card,
#view-trends .gallery-card { touch-action: manipulation; }
#view-ideas .gallery-card:active,
#view-trends .gallery-card:active { transform: none; }
.gallery-card { aspect-ratio: .78; }
.history-card, .work-card { aspect-ratio: .78; }
.gallery-card > img, .gallery-card > .card-preview-poster, .gallery-card > video.card-preview-video,
.history-card img, .history-card video.card-preview-video,
.work-card img, .work-card .card-preview-poster, .work-card video.card-preview-video { transition: transform .45s cubic-bezier(.16,1,.3,1); }
.gallery-card:hover > img, .gallery-card:hover > .card-preview-poster, .history-card:hover img, .work-card:hover img { transform: scale(1.035); }
.gc-overlay { background: linear-gradient(180deg, rgba(6,7,12,.04) 38%, rgba(6,7,12,.84) 100%); }
.gc-tag, .history-tag, .work-badge {
  top: 9px;
  left: 9px;
  right: auto;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(8,9,14,.52);
  border-radius: 999px;
  backdrop-filter: blur(9px);
  color: #eff0fb;
  font-size: 10px;
  font-weight: 650;
}
.gc-author, .gc-author-btn { bottom: 10px; left: 10px; font-size: 11px; }
.gc-like, .gc-repeat, .history-share, .trend-share, .gc-share, .work-share {
  width: 38px; height: 38px;
  border-color: rgba(255,255,255,.18);
  background: rgba(9,10,16,.66);
}
.gc-share { right: 8px; bottom: 47px; }
.history-share, .work-share { right: 8px; bottom: 8px; }
.history-card-play, .work-play, .gallery-card .work-play { background: linear-gradient(180deg, transparent, rgba(0,0,0,.34)); }
.filter-pills { gap: 8px; margin: 0 0 18px; overflow-x: auto; padding: 0 0 2px; scrollbar-width: none; }
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pill {
  flex: 0 0 auto;
  min-height: 39px;
  padding: 9px 13px;
  border-color: var(--line-strong);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: #bbbccc;
  font-size: 12px;
  font-weight: 600;
}
.filter-pill.active { color: var(--accent-ink); border-color: rgba(255,255,255,.42); background: var(--accent-grad); box-shadow: 0 7px 20px rgba(106,91,236,.2); }
.empty-state { min-height: 260px; padding: 38px 20px; border: 1px dashed var(--line-strong); border-radius: 20px; background: rgba(255,255,255,.018); }
.empty-emoji { font-size: 32px; filter: grayscale(1); opacity: .55; }
.info-banner {
  margin: -4px 0 18px;
  padding: 14px 15px;
  border: 1px solid rgba(185,177,255,.17);
  border-radius: 16px;
  background: linear-gradient(112deg, rgba(134,119,245,.13), rgba(255,255,255,.025));
  color: #c7c8d5;
  font-size: 12px;
  line-height: 1.55;
}

/* Create is a composed workspace entry, not a collection of generic tiles. */
.hero, .create-hero {
  min-height: 238px;
  padding: 24px;
  margin-bottom: 18px;
  border: 1px solid rgba(226,228,255,.14);
  border-radius: 24px;
  background-image: url("/shop/assets/lumix-studio-v3.png?v=1") !important;
  background-position: center 53%;
  box-shadow: 0 16px 40px rgba(0,0,0,.21);
}
.hero-overlay { background: linear-gradient(90deg, rgba(8,9,15,.83), rgba(8,9,15,.2) 77%), linear-gradient(0deg, rgba(8,9,15,.58), transparent 70%); }
.hero-text { max-width: 360px; }
.hero-eyebrow { margin-bottom: 9px; }
.hero-title, .create-hero .hero-title { color: #fff; font-size: clamp(27px, 7.6vw, 40px); font-weight: 750; letter-spacing: -.06em; line-height: .99; text-transform: none; }
.mode-toggle { gap: 10px; margin-bottom: 25px; }
.mode-btn { gap: 8px; color: var(--text); }
.mode-btn-visual {
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: linear-gradient(145deg, #222536, #10111b);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.17);
}
.mode-btn-visual img { width: 72%; height: 72%; margin: 14%; object-fit: contain; }
.mode-btn:nth-child(3) .mode-btn-visual img { width: 100%; height: 100%; margin: 0; object-fit: cover; }
.mode-btn.active .mode-btn-visual { border-color: rgba(211,207,255,.63); box-shadow: 0 0 0 3px rgba(169,159,255,.14), 0 12px 26px rgba(81,68,195,.23); }
.mode-btn.active .mode-btn-visual::after { right: 27%; left: 27%; bottom: 7px; height: 2px; background: var(--accent); }
.mode-btn strong { font-size: 12px; font-weight: 700; letter-spacing: -.02em; }
.mode-btn small { color: var(--muted); font-size: 10px; }
.model-banners { gap: 12px; }
.model-banner {
  min-height: 152px;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
}
.model-banner::after { background: linear-gradient(90deg, rgba(9,10,16,.88), rgba(9,10,16,.42) 67%, rgba(9,10,16,.12)); }
.model-banner-title { font-size: 23px; font-weight: 750; letter-spacing: -.05em; }
.model-banner-subtitle { margin-top: 7px; color: rgba(243,244,255,.72); font-size: 12px; }
.model-provider-label { margin: 8px 1px 1px; color: #999aae; font-size: 10px; letter-spacing: .12em; }

/* Conversations, forms, sheets and feedback share the same highly legible surface. */
.chat-head { margin: 4px 0 20px; }
.chat-title { color: var(--text); font-size: clamp(27px, 7.2vw, 40px); font-weight: 750; letter-spacing: -.06em; line-height: 1.02; }
.chat-subtitle { max-width: 390px; margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.chat-reset { width: 44px; height: 44px; border-radius: 14px; border-color: var(--line-strong); background: rgba(255,255,255,.045); }
.chat-model-row { min-height: 46px; margin-bottom: 17px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.chat-model { border-color: var(--line-strong); border-radius: 12px; background-color: rgba(255,255,255,.045); }
.chat-cost { color: var(--accent); font-weight: 700; }
.chat-empty { min-height: 250px; border-radius: 20px; border-color: var(--line-strong); background: rgba(255,255,255,.018); }
.chat-bubble { padding: 13px 15px; border-radius: 17px; font-size: 14px; line-height: 1.55; }
.chat-bubble.user { color: var(--accent-ink); background: var(--accent-grad); }
.chat-bubble.assistant { border-color: var(--line-strong); background: rgba(255,255,255,.045); }
.chat-compose {
  border-color: rgba(216,213,255,.2);
  border-radius: 18px;
  background: rgba(21,23,34,.91);
  box-shadow: 0 12px 30px rgba(0,0,0,.33);
}
.chat-send { border-radius: 13px; color: var(--accent-ink); box-shadow: 0 6px 16px rgba(115,99,244,.24); }
.sheet, .modal { background: rgba(4,5,10,.72); backdrop-filter: blur(7px); }
.sheet-body, .modal-sheet {
  border-color: rgba(226,228,255,.13);
  background: #12141f;
  box-shadow: 0 -20px 60px rgba(0,0,0,.35);
}
.sheet-body { border-radius: 27px 27px 0 0; padding-right: 18px; padding-left: 18px; }
.sheet-head { background: #12141f; }
.sheet-body::before { width: 38px; height: 4px; background: rgba(235,236,255,.26); }
.sheet-foot { border-color: var(--line); background: #12141f; }
.modal-sheet { border-radius: 22px; }
.dropzone, .prompt, .field input, .field-input, .profile-select, .chat-model {
  border-color: var(--line-strong);
  background-color: rgba(255,255,255,.035);
}
.dropzone { padding: 22px; border-radius: 16px; }
.prompt { min-height: 124px; padding: 15px; border-radius: 16px; font-size: 15px; }
.prompt:focus, .field input:focus, .field-input:focus, .profile-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(180,173,255,.12); }
.chips, .aspect-grid { gap: 8px; }
.chip, .aspect-cell { min-height: 42px; border-color: var(--line-strong); background: rgba(255,255,255,.035); }
.chip.active, .aspect-cell.active { color: var(--accent-ink); background: var(--accent-grad); }
.btn-primary {
  min-height: 48px;
  padding: 13px 17px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 14px;
  color: var(--accent-ink);
  box-shadow: 0 10px 26px rgba(108,92,236,.23);
  font-size: 14px;
  font-weight: 750;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-primary:hover { box-shadow: 0 13px 32px rgba(108,92,236,.33); filter: brightness(1.03); }
.btn-primary:active { transform: scale(.982); }
.btn-outline { min-height: 44px; border-color: var(--line-strong); border-radius: 13px; background: rgba(255,255,255,.035); }

/* Purchase flow: plan choice is clear, confident and not price-first noise. */
.plans { gap: 10px; margin-bottom: 24px; }
.plan {
  position: relative;
  padding: 17px;
  overflow: hidden;
  border-color: var(--line-strong);
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.026));
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.plan::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(85% 120% at 100% 0%, rgba(186,180,255,.2), transparent 58%); transition: opacity .22s ease; pointer-events: none; }
.plan > * { position: relative; z-index: 1; }
.plan.selected { border-color: rgba(215,211,255,.7); box-shadow: 0 0 0 3px rgba(172,163,255,.12), 0 15px 35px rgba(75,61,179,.2); }
.plan.selected::before { opacity: 1; }
.plan-tier { font-size: 15px; letter-spacing: -.02em; }
.plan-badge { color: var(--accent-ink); background: var(--accent-grad); }
.plan-volume { font-size: 24px; letter-spacing: -.05em; }
.plan-price, .plan-loki-price strong { color: #dedbff; font-size: 21px; letter-spacing: -.04em; }
.plan-tagline, .plan-old { color: var(--muted); }
.plan-details { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); }
.plan-details-title { font-size: 15px; }
.plan-highlights { gap: 10px; }
.plan-highlights li { padding-left: 25px; font-size: 13px; }
.plan-highlights li.included::before { color: var(--accent); }
.checkout-panel { padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); }
.pay-methods { gap: 8px; }
.pay-method { min-height: 72px; padding: 12px; border-color: var(--line-strong); border-radius: 14px; background: rgba(255,255,255,.035); }
.pay-method.active { border-color: var(--accent); background: rgba(178,169,255,.11); box-shadow: 0 0 0 2px rgba(178,169,255,.1); }
.pay-method-title { font-size: 12px; }
.pay-method-sub { margin-top: 3px; font-size: 10px; }
.checkout-toggle { min-height: 48px; border-color: var(--line-strong); border-radius: 14px; background: rgba(255,255,255,.035); }
.legal { color: var(--muted); font-size: 11px; }

/* Profile: a studio identity, not a settings stack. */
/* The former purple decorative glow here looked like a stuck selection state
   during navigation in Telegram. Profile states use the gold controls only. */
.profile-section-tabs { margin: 1px 0 22px; }
.profile-head { gap: 16px; margin: 9px 0 17px; }
.profile-avatar {
  width: 84px; height: 84px;
  border: 1px solid rgba(230,232,255,.32);
  box-shadow: 0 0 0 5px rgba(183,174,255,.1), 0 13px 30px rgba(0,0,0,.28);
}
.profile-stats { gap: 12px; }
.profile-stat strong { font-size: 20px; letter-spacing: -.05em; }
.profile-stat small { color: var(--muted); font-size: 10px; }
.profile-name { font-size: 28px; font-weight: 750; letter-spacing: -.06em; }
.profile-badge { padding: 5px 9px; border-color: var(--line-strong); background: rgba(255,255,255,.045); color: #d7d6e6; font-size: 11px; }
.profile-bio { margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.profile-balance-row, .account-card, .partner-card, .partner-block-card {
  border-color: var(--line-strong);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.024));
  box-shadow: 0 11px 28px rgba(0,0,0,.13);
}
.profile-balance-row { padding: 12px; }
.profile-balance-label { color: var(--muted); font-size: 12px; }
.profile-balance-row strong { margin-right: auto; font-variant-numeric: tabular-nums; }
.profile-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 23px; }
.profile-actions #profileFollowBtn { grid-column: 1 / -1; }
.profile-actions .profile-quick-action {
  width: 100%;
  min-height: 64px;
  height: auto;
  padding: 7px 4px;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
}
.profile-quick-action > span:first-child { display: grid; place-items: center; min-height: 20px; }
.profile-showcase-edit { border-color: var(--line-strong); border-radius: 13px; background: rgba(255,255,255,.035); }
.profile-pinned-label { color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }

/* A persistent but deliberately quiet navigation rail. */
.bottom-nav {
  left: 50%;
  width: min(760px, 100%);
  height: calc(var(--bottom-nav-height) + var(--bottom-safe-area));
  transform: translateX(-50%);
  border: 1px solid rgba(226,228,255,.1);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: rgba(15,16,25,.82);
  box-shadow: 0 -14px 38px rgba(0,0,0,.25);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}
.nav-item { min-height: 52px; gap: 4px; color: #85889a; font-size: 10px; font-weight: 600; transition: color .18s ease, transform .18s ease; }
.nav-item.active { color: #dfdcff; }
.nav-item.active .nav-ico { color: var(--accent); }
.nav-ico svg { width: 21px; height: 21px; }
.nav-center .nav-plus {
  width: 51px; height: 51px;
  margin-top: -22px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 17px;
  box-shadow: 0 12px 28px rgba(99,82,229,.36);
}
.nav-center .nav-plus svg { width: 24px; height: 24px; }
.nav-center:active .nav-plus { transform: scale(.93); }

@media (min-width: 640px) {
  .app { padding-right: 28px; padding-left: 28px; }
  .topbar { padding-right: 28px; padding-left: 28px; }
  .home-banner--video, .home-brand-hero { min-height: 390px; }
  .home-banner--video .hb-text, .home-brand-hero .hb-text { padding: 82px 32px 0; }
  .home-brand-actions { right: 32px; bottom: 26px; left: 32px; }
  .home-shortcuts { grid-template-columns: repeat(6, 1fr); }
  .home-shortcut-tile { aspect-ratio: 1; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .history-grid, .work-grid { grid-template-columns: repeat(3, 1fr); }
  .pay-methods { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 390px) {
  .topbar { gap: 6px; }
  .brand-logo-wrap { width: 35px; height: 35px; }
  .brand-name { font-size: 16px; }
  .balance-chip { padding: 8px; }
  .buy-pill { min-width: 38px; padding: 9px 11px; }
  .home-banner--video, .home-brand-hero { min-height: 335px; }
  .home-brand-hero .hb-text { padding: 66px 20px 0; }
  .home-brand-actions { right: 16px; bottom: 16px; left: 16px; }
  .home-brand-hero .hb-cta { padding: 10px 11px; font-size: 11px; }
  .home-banner--chat, .home-banner--image, .home-banner--partner { min-height: 280px; }
  .page-title { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ─────────────  FINAL SYSTEM PASS: LUMIX OPTICS  ─────────────
   Semantic tokens keep the production interface coherent: lavender is the
   action colour; gold remains reserved for the mark and the Lumix currency. */
:root {
  --color-background: #090a12;
  --color-background-soft: #10121d;
  --color-surface: #161825;
  --color-surface-elevated: #1d2030;
  --color-text-primary: #f5f5fb;
  --color-text-secondary: #cacbd8;
  --color-text-muted: #9b9dac;
  --color-accent: #d7a950;
  --color-accent-pressed: #ad741e;
  --color-success: #61c89a;
  --color-warning: #efbd66;
  --color-error: #ff7886;
  --color-border: rgba(232, 233, 255, 0.09);
  --color-divider: rgba(232, 233, 255, 0.06);
  --color-overlay: rgba(5, 6, 13, 0.72);
  --brand-gold: #d7a950;
  --brand-gold-grad: linear-gradient(135deg, #f1d486, #c28a2d);
  --bg: var(--color-background);
  --bg-soft: var(--color-background-soft);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-elevated);
  --text: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --muted: var(--color-text-muted);
  --line: var(--color-divider);
  --line-strong: var(--color-border);
  --accent: var(--color-accent);
  --accent-2: var(--color-accent-pressed);
  --accent-grad: var(--brand-gold-grad);
  --accent-ink: #211605;
  --accent-soft: rgba(215, 169, 80, 0.14);
  --accent-line: rgba(241, 212, 134, 0.34);
  --accent-glow: rgba(194, 138, 45, 0.24);
  --danger: var(--color-error);
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-2: 0 16px 40px rgba(0, 0, 0, 0.24);
  --glow: 0 10px 28px rgba(194, 138, 45, 0.22);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-control: 14px;
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html { min-height: 100%; background: var(--color-background); }
body { min-height: 100dvh; overflow-x: hidden; text-size-adjust: 100%; }
.brand-name { background: var(--brand-gold-grad); -webkit-background-clip: text; background-clip: text; }

button, a, input, select, textarea { touch-action: manipulation; }
:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
.section-title--spaced { margin-top: var(--space-6); }

/* Four distinct but related compositions: studio, prompt, image and network. */
.home-banner-carousel { position: relative; }
.home-banner--video, .home-brand-hero {
  background-image: url("/shop/assets/lumix-studio-v3.png?v=1");
  background-position: 72% 50%;
}
.home-banner--chat {
  background-image: url("/shop/assets/lumix-prompt-v2.png?v=1");
  background-position: 73% 50%;
}
.home-banner--image {
  background-image: url("/shop/assets/lumix-image-v2.png?v=1");
  background-position: 72% 50%;
}
.home-banner--partner {
  background-image: url("/shop/assets/lumix-partners-v1.jpg?v=1");
  background-position: 70% 50%;
}
.home-banner--partner .hb-overlay {
  background: linear-gradient(90deg, rgba(7, 8, 17, 0.94) 0%, rgba(7, 8, 17, 0.72) 43%, rgba(7, 8, 17, 0.16) 100%), linear-gradient(0deg, rgba(7, 8, 17, 0.48), transparent 65%);
}
.home-banner--partner .hb-text { max-width: min(62%, 330px); }
.home-banner--partner .hb-sub { max-width: 290px; }
.home-banner-dots { min-height: 44px; padding-right: 0; }
.home-banner-dot { width: 28px; min-height: 44px; }

/* Home entry uses three task types; individual models live in the catalogue. */
.home-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.home-shortcut { min-height: 142px; gap: 7px; }
.home-shortcut-tile { border-color: var(--color-border); border-radius: 18px; }
.home-shortcut-description {
  display: block;
  min-height: 1.3em;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
}

/* Catalog hierarchy makes the task type and the underlying models explicit. */
.catalog-intro { margin: 0 2px 14px; }
.catalog-title {
  margin: 0;
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: 720;
  letter-spacing: var(--tracking-tight);
}
.catalog-copy {
  max-width: 480px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.model-banner {
  min-height: 156px;
  border-color: var(--color-border);
  transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.model-banner:hover { border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.model-banner:active { transform: scale(0.985); }
.model-banner:disabled { opacity: 0.46; box-shadow: none; }
.model-provider-label { color: var(--color-text-secondary); }
.model-banner-subtitle { max-width: 250px; color: rgba(243, 244, 255, 0.76); }
.model-catalog-status { width: 100%; min-height: 56px; }

/* Pricing stays tied to server data and exposes the unit value transparently. */
.plan-unit-price {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.plans-empty {
  display: grid;
  width: 100%;
  min-height: 56px;
  place-items: center;
  color: var(--text-secondary);
  text-align: center;
}
.balance-chip { font-variant-numeric: tabular-nums; }

/* States must give the user a clear next action, never a raw technical error. */
.empty-state, .chat-empty { border-color: var(--color-border); background: rgba(255, 255, 255, 0.024); }
.toast { background: #202335; border-color: var(--accent-line); box-shadow: var(--shadow-2); }
.btn-primary, .buy-pill, .nav-center .nav-plus { background: var(--accent-grad); }
.btn-primary:disabled { opacity: 0.45; box-shadow: none; }

@media (min-width: 640px) {
  .home-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 390px) {
  .home-banner-dots { padding-right: 0; }
  .home-banner--partner .hb-text { max-width: calc(100% - 132px); }
  .home-shortcut-label { font-size: 10px; }
  .home-shortcut-description { font-size: 9px; }
}

/* ─────────────  FINAL MOBILE FLOW GUARDRAILS  ─────────────
   One bottom inset is shared by every scrollable screen. Individual views
   should never guess the tab-bar or Telegram safe-area height. */
:root {
  --bottom-content-inset: var(--page-bottom-inset);
  --focused-flow-inset: calc(var(--bottom-safe-area) + var(--space-6));
}
.app { padding-bottom: var(--bottom-content-inset); }
.topbar-flow-title {
  min-width: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: var(--tracking-tight);
}
body.is-focused-flow .bottom-nav { display: none; }
body.is-focused-flow .app { padding-bottom: var(--focused-flow-inset); }
body.is-focused-flow .topbar {
  justify-content: flex-start;
  min-height: 62px;
}
body.is-focused-flow .topbar-back { flex: 0 0 auto; }
body.is-chat-composing .bottom-nav { display: none; }
body.is-chat-composing .app { padding-bottom: max(var(--space-4), var(--chrome-bottom)); }
body.is-chat-composing .chat-compose { bottom: max(8px, var(--chrome-bottom)); }

/* Chat needs one uninterrupted lower action area: no technical empty-state
   slab and no composer trapped between the tab bar and the software keyboard. */
.chat-empty {
  min-height: 154px;
  border-color: rgba(220, 216, 255, .12);
  background: radial-gradient(circle at 50% 0%, rgba(103, 91, 167, .10), transparent 68%), rgba(255,255,255,.018);
}

/* Chat stays dense on a phone: the model row is the detail, not a hero. */
.chat-head { margin: 2px 0 12px; }
.chat-title { font-size: clamp(23px, 6.2vw, 29px); line-height: 1.08; }
.chat-subtitle { margin-top: 6px; font-size: 12px; line-height: 1.35; }
.chat-model-row { min-height: 42px; margin-bottom: 12px; }
#chatInput {
  touch-action: auto;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

/* Every hero has a copy zone and a separate action zone. No CTA is allowed
   to sit on top of a sentence, including at 320px or enlarged text sizes. */
.home-banner--chat,
.home-banner--image,
.home-banner--partner,
.home-brand-hero {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 318px;
  padding: 0;
}
.home-brand-hero { min-height: 350px; }
.home-banner--chat .hb-text,
.home-banner--image .hb-text,
.home-banner--partner .hb-text,
.home-brand-hero .hb-text {
  width: auto;
  max-width: min(100% - 36px, 410px);
  padding: 54px 18px 10px;
}
.home-brand-hero .hb-text { padding-top: 60px; }
.home-banner--chat .hb-title,
.home-banner--image .hb-title,
.home-banner--partner .hb-title,
.home-brand-hero .hb-title {
  font-size: clamp(25px, 6.7vw, 35px);
  line-height: 1.04;
}
.home-banner--chat .hb-sub,
.home-banner--image .hb-sub,
.home-banner--partner .hb-sub,
.home-brand-hero .hb-sub {
  max-width: 34rem;
  margin-bottom: 0;
  font-size: clamp(12px, 3.35vw, 14px);
  line-height: 1.45;
}
.home-banner--chat .hb-cta,
.home-banner--image .hb-cta,
.home-banner--partner .hb-cta,
.home-brand-actions {
  position: relative;
  inset: auto;
  z-index: 2;
  align-self: flex-start;
  margin: auto 18px 18px;
}
.home-brand-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.home-brand-hero .hb-cta,
.home-banner--chat .hb-cta,
.home-banner--image .hb-cta,
.home-banner--partner .hb-cta {
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 13px;
}
.home-banner--partner { min-height: 366px; }
.home-banner--partner .hb-text { padding-bottom: 12px; }
.home-banner--partner .hb-cta { margin-top: 0; margin-bottom: 12px; }
.home-banner--partner .hb-levels {
  position: relative;
  inset: auto;
  z-index: 2;
  margin: 0 18px 18px;
}
.home-banner--partner .hb-levels > span { min-height: 60px; }
.home-banner-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  margin-top: 7px;
}
.home-banner-controls .home-banner-dots {
  min-height: 48px;
  margin: 0;
  padding-right: 0;
}
.home-banner-dots { min-height: 48px; padding-right: 0; }
.home-banner-dot { min-height: 44px; }

/* Three generated artworks share a square, full-bleed visual language. */
.home-shortcut { min-height: 158px; }
.home-shortcut-tile { aspect-ratio: 1; overflow: hidden; }
.home-shortcut-icon { width: 100%; height: 100%; margin: 0; object-fit: cover; }

/* Checkout is a distinct purchase flow with unambiguous selection and a
   persistent, non-overlapping review of the product before payment. */
#view-shop { padding-bottom: var(--space-5); }
.plan { padding-right: 56px; }
.plan-select-indicator,
.pay-method-check {
  position: absolute;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(224, 222, 255, 0.48);
  border-radius: 50%;
  color: var(--accent-ink);
}
.plan-select-indicator { top: 18px; right: 17px; }
.plan.selected .plan-select-indicator,
.pay-method.active .pay-method-check {
  border-color: var(--accent);
  background: var(--accent-grad);
}
.plan.selected .plan-select-indicator::after,
.pay-method.active .pay-method-check::after { content: "✓"; font-size: 14px; font-weight: 850; }
.pay-method { position: relative; padding-right: 42px; text-align: left; }
.pay-method-check { top: 13px; right: 12px; }
.field-hint { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.field-error { display: block; margin-top: 5px; color: #ffadb5; font-size: 12px; line-height: 1.35; }
.promo-field-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: end;
  margin-top: 10px;
}
.promo-field-wrap .field { min-width: 0; }
.promo-apply { min-height: 44px; padding: 10px 13px; white-space: nowrap; }
.promo-status { grid-column: 1 / -1; margin: 1px 1px 0; font-size: 12px; line-height: 1.4; }
.promo-status.is-success { color: #bceecf; }
.promo-status.is-error { color: #ffadb5; }
.promo-status.is-loading { color: var(--text-secondary); }
.sticky-purchase-bar {
  position: sticky;
  bottom: max(8px, var(--chrome-bottom));
  z-index: 12;
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 13px;
  border: 1px solid rgba(205, 201, 255, 0.25);
  border-radius: 18px;
  background: rgba(20, 22, 34, 0.95);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.purchase-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.purchase-summary-label { min-width: 0; color: var(--text-secondary); font-size: 12px; font-weight: 620; line-height: 1.35; }
.purchase-summary-price { flex: 0 0 auto; color: #ecebff; font-size: 16px; font-variant-numeric: tabular-nums; }
.sticky-purchase-bar .btn-primary { min-height: 50px; }
.purchase-status { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.42; }
.purchase-status.is-error { color: #ffadb5; }
.purchase-status.is-pending { color: #d5d2ff; }
.purchase-status-retry { min-height: 42px; color: var(--text-secondary); border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(255,255,255,.045); font-size: 12px; font-weight: 700; }

@media (max-width: 359px) {
  .home-banner--chat,
  .home-banner--image { min-height: 336px; }
  .home-banner--partner { min-height: 388px; }
  .home-banner--chat .hb-text,
  .home-banner--image .hb-text,
  .home-banner--partner .hb-text,
  .home-brand-hero .hb-text { padding-right: 16px; padding-left: 16px; }
  .home-banner--chat .hb-cta,
  .home-banner--image .hb-cta,
  .home-banner--partner .hb-cta,
  .home-brand-actions { margin-right: 16px; margin-left: 16px; }
  .home-banner--partner .hb-levels { margin-right: 16px; margin-left: 16px; }
  .promo-field-wrap { grid-template-columns: 1fr; }
  .promo-apply { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .view, .home-banner, .home-banner-dot::after, .btn-primary, .plan, .pay-method { animation: none !important; transition: none !important; }
  .home-banner-track { scroll-behavior: auto; }
}

/* ─────────────  HOME BANNER COMPACT / GOLD PASS  ─────────────
   Above-the-fold on a compact Telegram viewport: branding and actions remain
   readable, while the next action stays visible without a pause control. */
.home-banner-carousel,
.home-banner-track { max-width: 100%; min-width: 0; }
.home-banner-track { gap: 10px; }
.home-banner {
  flex-basis: 100%;
  max-width: 100%;
  min-height: 264px;
  border-color: rgba(241, 212, 134, 0.22);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
  background-position: 72% 50%;
}
.home-banner:hover { border-color: rgba(241, 212, 134, 0.5); }
.home-banner--video,
.home-brand-hero {
  min-height: 280px;
  background-image: url("/shop/assets/lumix-studio-v3.png?v=1");
  background-position: 72% 50%;
}
.home-banner--chat,
.home-banner--image { min-height: 264px; }
.home-banner--partner { min-height: 300px; }
.home-banner--video .hb-text,
.home-brand-hero .hb-text {
  max-width: min(78%, 430px);
  padding: 57px 18px 8px;
}
.home-banner--chat .hb-text,
.home-banner--image .hb-text,
.home-banner--partner .hb-text {
  max-width: min(78%, 360px);
  padding: 54px 18px 8px;
}
.home-brand-hero .hb-title,
.home-banner--chat .hb-title,
.home-banner--image .hb-title,
.home-banner--partner .hb-title {
  font-size: clamp(23px, 6.25vw, 33px);
  line-height: 1.02;
}
.home-banner .hb-kicker { color: var(--brand-gold); }
.home-banner .hb-sub { font-size: 12px; line-height: 1.4; }
.hb-brand {
  top: 13px;
  left: 14px;
  padding: 5px 8px 5px 5px;
  border: 1px solid rgba(241, 212, 134, 0.34);
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.52);
  color: #f8e8bd;
  font-size: 10px;
  letter-spacing: .02em;
  text-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hb-brand img { width: 20px; height: 20px; }
.home-brand-actions,
.home-banner--chat .hb-cta,
.home-banner--image .hb-cta,
.home-banner--partner .hb-cta { margin: auto 14px 14px; }
.home-brand-actions { gap: 8px; }
.home-brand-hero .hb-cta,
.home-banner .hb-cta {
  min-height: 44px;
  padding: 10px 13px;
  border-color: rgba(255, 236, 180, 0.64);
  border-radius: 12px;
  background: var(--brand-gold-grad);
  color: #211605;
  box-shadow: 0 8px 20px rgba(120, 77, 12, 0.3);
  font-weight: 780;
}
.home-brand-hero .hb-cta--secondary {
  border-color: rgba(241, 212, 134, 0.58);
  background: rgba(10, 10, 14, 0.74);
  color: #f5d98f;
  box-shadow: none;
}
.home-banner .hb-cta:active { transform: scale(0.97); }
.home-banner-controls { min-height: 44px; margin-top: 4px; }
.home-banner-controls .home-banner-dots { min-height: 44px; }
.home-banner-dot { min-height: 44px; }
.home-banner-dot.active::after { background: var(--brand-gold); }
.home-shortcuts-all,
.trends-head .link-btn { color: var(--brand-gold); }

/* More compact catalogue cards make an extensive model list easy to scan. */
.model-banners { gap: 9px; }
.model-provider-label { margin-top: 10px; color: #e8c879; }
.model-banner {
  min-height: 108px;
  padding: 15px;
  border-color: rgba(241, 212, 134, 0.18);
  background-position: 72% 50%;
}
.model-banner-title { font-size: clamp(18px, 5.2vw, 22px); }
.model-banner-subtitle { margin-top: 4px; font-size: 11px; }
.model-banner-emoji { display: inline-block; margin-right: 7px; font-family: var(--font-ui); font-size: .9em; }

/* Primary actions use the same confident gold treatment throughout the app. */
.btn-primary,
.buy-pill,
.nav-center .nav-plus { background: var(--brand-gold-grad); }
.btn-primary { border-color: rgba(255, 236, 180, 0.64); box-shadow: 0 10px 26px rgba(142, 90, 12, 0.3); }
.btn-primary:hover { box-shadow: 0 13px 32px rgba(142, 90, 12, 0.38); }

@media (min-width: 640px) {
  .home-banner--video,
  .home-brand-hero { min-height: 306px; }
  .home-banner--chat,
  .home-banner--image { min-height: 278px; }
  .home-banner--partner { min-height: 316px; }
  .home-banner--video .hb-text,
  .home-brand-hero .hb-text { padding: 64px 24px 10px; }
}

@media (max-width: 359px) {
  .home-banner--video,
  .home-brand-hero { min-height: 270px; }
  .home-banner--chat,
  .home-banner--image { min-height: 258px; }
  .home-banner--partner { min-height: 292px; }
  .home-brand-hero .hb-text,
  .home-banner--chat .hb-text,
  .home-banner--image .hb-text,
  .home-banner--partner .hb-text { padding-right: 15px; padding-left: 15px; }
  .home-brand-actions,
  .home-banner--chat .hb-cta,
  .home-banner--image .hb-cta,
  .home-banner--partner .hb-cta { margin-right: 14px; margin-left: 14px; }
}

/* ─────────────  FINAL HOME FIT / UNIFIED ACTIONS  ─────────────
   A carousel slide must fit a compact Telegram viewport without clipping its
   copy or its next action. The three secondary artworks deliberately share the
   primary banner's cinematic light language. */
.home-banner--chat { background-image: url("/shop/assets/lumix-assistant-v3.png?v=1"); }
.home-banner--image { background-image: url("/shop/assets/lumix-image-v3.png?v=1"); }
.home-banner--partner { background-image: url("/shop/assets/lumix-partners-v3.png?v=1"); }
.home-banner--chat .hb-overlay,
.home-banner--image .hb-overlay,
.home-banner--partner .hb-overlay {
  background: linear-gradient(90deg, rgba(5, 7, 12, .94) 0%, rgba(5, 7, 12, .66) 49%, rgba(5, 7, 12, .14) 100%), linear-gradient(0deg, rgba(5, 7, 12, .48), transparent 62%);
}
.home-banner {
  min-height: clamp(224px, 42vh, 248px);
  min-height: clamp(224px, 42svh, 248px);
  background-position: 72% 50%;
}
.home-banner--video,
.home-brand-hero {
  min-height: clamp(246px, 46vh, 270px);
  min-height: clamp(246px, 46svh, 270px);
}
.home-banner--chat,
.home-banner--image {
  min-height: clamp(224px, 40vh, 238px);
  min-height: clamp(224px, 40svh, 238px);
}
.home-banner--partner {
  min-height: clamp(248px, 44vh, 264px);
  min-height: clamp(248px, 44svh, 264px);
}
.home-banner--video .hb-text,
.home-brand-hero .hb-text { padding-top: 48px; }
.home-banner--chat .hb-text,
.home-banner--image .hb-text,
.home-banner--partner .hb-text { padding-top: 46px; }
.home-banner .hb-title { font-size: clamp(22px, 6vw, 31px); }
.home-banner .hb-sub { font-size: 11px; line-height: 1.32; }
.home-banner--partner .hb-text { padding-bottom: 6px; }
.home-banner--partner .hb-sub { max-width: 260px; }
.home-banner--partner .hb-cta { min-height: 38px; margin-top: 0; margin-bottom: 8px; }
.home-banner--partner .hb-levels { margin: 0 14px 12px; gap: 6px; }
.home-banner--partner .hb-levels > span { min-height: 44px; }
.home-banner--partner .hb-levels b { font-size: 16px; }
.home-banner--partner .hb-levels small { font-size: 9px; }
.home-banner-controls,
.home-banner-controls .home-banner-dots,
.home-banner-dot { min-height: 36px; }
.home-banner-controls { margin-top: 2px; }

/* The same clear primary/secondary action language is used on Home, Create
   and result actions. The compact labels keep both start paths visible at 320px. */
.lumix-action {
  min-height: 44px;
  border-radius: 13px;
  font-weight: 780;
  letter-spacing: -.012em;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.lumix-action--primary {
  border: 1px solid rgba(255, 236, 180, .68) !important;
  background: var(--brand-gold-grad) !important;
  color: #211605 !important;
  box-shadow: 0 10px 24px rgba(142, 90, 12, .32) !important;
}
.lumix-action--secondary {
  border: 1px solid rgba(241, 212, 134, .58) !important;
  background: rgba(10, 10, 14, .74) !important;
  color: #f5d98f !important;
  box-shadow: none !important;
}
.lumix-action:not(:disabled):active { transform: scale(.975); }
.lumix-action:not(:disabled):hover { filter: brightness(1.04); }
.home-brand-actions { flex-wrap: nowrap; gap: 7px; }
.home-brand-actions .hb-cta {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 8px;
  font-size: clamp(9px, 2.7vw, 12px);
  white-space: nowrap;
}
.detail-action.primary .da-ico {
  border-color: rgba(255, 236, 180, .68);
  background: var(--brand-gold-grad);
  box-shadow: 0 9px 20px rgba(142, 90, 12, .28);
}

/* Audio is available in every video flow: audio-driven models consume it as
   input, while ordinary renderers receive it as the final video soundtrack. */
.audio-reference { margin-top: 14px; }
.audio-reference-badge {
  display: inline-flex;
  margin-left: 6px;
  padding: 3px 7px;
  border: 1px solid rgba(241, 212, 134, .38);
  border-radius: 999px;
  color: #f2d486;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.audio-dropzone { min-height: 78px; padding: 16px; }
.audio-ref-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  padding: 10px 11px;
  border: 1px solid rgba(241, 212, 134, .24);
  border-radius: 13px;
  background: rgba(215, 169, 80, .08);
}
.audio-ref-icon { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: rgba(215, 169, 80, .16); }
.audio-ref-copy { display: grid; min-width: 0; gap: 2px; }
.audio-ref-copy strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.audio-ref-copy small { color: var(--muted); font-size: 11px; }
.audio-ref-remove { display: grid; flex: 0 0 32px; width: 32px; height: 32px; margin-left: auto; place-items: center; border: 1px solid rgba(241, 212, 134, .28); border-radius: 10px; background: rgba(255, 255, 255, .035); color: #f2d486; font-size: 15px; }

@media (max-width: 359px) {
  .home-banner--video,
  .home-brand-hero { min-height: 246px; }
  .home-banner--chat,
  .home-banner--image { min-height: 220px; }
  .home-banner--partner { min-height: 244px; }
  .home-banner--partner .hb-title { font-size: 22px; }
  .home-banner--partner .hb-sub { font-size: 10px; }
  .home-banner--partner .hb-levels > span { min-height: 40px; }
}

/* Mobile screenshot pass: keep the visual hierarchy intentional instead of
   showing two competing brand labels or three differently-cropped tools. */
.home-banner--chat .hb-brand,
.home-banner--image .hb-brand,
.home-banner--partner .hb-brand { display: none; }
.home-banner--chat,
.home-banner--image {
  min-height: clamp(206px, 35vh, 222px);
  min-height: clamp(206px, 35svh, 222px);
}
.home-banner--chat .hb-text,
.home-banner--image .hb-text,
.home-banner--partner .hb-text { padding-top: 24px; }
.home-banner-controls,
.home-banner-controls .home-banner-dots { min-height: 44px; }

/* Home and Create share the same three tactile tool cards. The artwork lives
   in a fixed, contained window, so every option keeps equal visual weight. */
.home-shortcuts,
.mode-toggle { gap: 12px; }
.home-shortcut { min-height: 160px; gap: 6px; }
.home-shortcut-tile,
.mode-btn-visual {
  overflow: hidden;
  border: 1px solid rgba(241, 212, 134, .28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 16%, rgba(237, 191, 83, .15), transparent 46%),
    linear-gradient(145deg, #17151a, #090a10 70%);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 9px 22px rgba(0,0,0,.22);
}
.home-shortcut-icon,
.mode-btn-visual img,
.mode-btn:nth-child(3) .mode-btn-visual img {
  width: 72%;
  height: 72%;
  margin: 14%;
  object-fit: contain;
}
.home-shortcut-label,
.mode-btn strong {
  min-height: 1.25em;
  color: #f2f0f6;
  font-size: 12px;
  font-weight: 740;
  line-height: 1.25;
}
.home-shortcut-description,
.mode-btn small {
  min-height: 1.3em;
  color: #aaa9b6;
  font-size: 10px;
  line-height: 1.3;
}
.mode-btn { gap: 6px; }
.mode-btn.active .mode-btn-visual {
  border-color: rgba(255, 225, 145, .78);
  box-shadow: 0 0 0 3px rgba(201, 149, 39, .16), 0 12px 26px rgba(120, 77, 12, .24);
}
.mode-btn.active .mode-btn-visual::after { background: var(--brand-gold) !important; }

@media (max-width: 359px) {
  .home-shortcuts,
  .mode-toggle { gap: 9px; }
  .home-shortcut { min-height: 150px; }
  .home-shortcut-label,
  .mode-btn strong { font-size: 11px; }
}

/* Gold tactile action buttons: all three are rendered as one intentional
   family, with generated artwork carrying the shared obsidian backdrop. */
.home-banner--chat .hb-text,
.home-banner--image .hb-text,
.home-banner--partner .hb-text { padding-top: 36px; }
.home-shortcut-tile,
.mode-btn-visual {
  border-color: rgba(247, 210, 124, .56);
  background: #0b0b0d;
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 204, .24),
    inset 0 -2px 0 rgba(0, 0, 0, .64),
    0 2px 0 rgba(210, 158, 41, .24),
    0 12px 22px rgba(0, 0, 0, .34);
}
.home-shortcut-tile::before,
.mode-btn-visual::before {
  display: block;
  content: "";
  position: absolute;
  z-index: 1;
  inset: 1px;
  border: 1px solid rgba(255, 244, 210, .12);
  border-radius: inherit;
  box-shadow: inset 0 1px 10px rgba(255, 220, 136, .12), inset 0 -10px 20px rgba(0, 0, 0, .2);
  pointer-events: none;
}
.home-shortcut-icon,
.mode-btn-visual img,
.mode-btn:nth-child(3) .mode-btn-visual img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.home-shortcut:active .home-shortcut-tile,
.mode-btn:active .mode-btn-visual {
  transform: translateY(1px) scale(.975);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .58), 0 4px 11px rgba(0, 0, 0, .3);
}

/* ─────────────  HOME BANNERS: ONE BRAND, FOUR CLEAR TASKS  ─────────────
   The first slide introduces the product only. The following slides each
   lead to one task, so a mobile visitor never has to decode competing names. */
.home-banner--video-promo {
  min-height: clamp(222px, 40svh, 238px);
  align-items: stretch;
  background-image: url("/shop/assets/lumix-video-v4.png?v=1");
  background-position: 72% 50%;
}
.home-banner--video-promo .hb-overlay {
  background: linear-gradient(90deg, rgba(5, 7, 12, .94) 0%, rgba(5, 7, 12, .66) 49%, rgba(5, 7, 12, .14) 100%), linear-gradient(0deg, rgba(5, 7, 12, .48), transparent 62%);
}
.home-brand-hero {
  min-height: clamp(218px, 38svh, 236px);
}
.home-brand-hero .hb-text {
  max-width: min(82%, 420px);
  padding-top: 63px;
}
.home-banner--image .hb-text,
.home-banner--video-promo .hb-text,
.home-banner--partner .hb-text {
  max-width: min(80%, 360px);
  padding-top: 62px;
}
.home-banner--image .hb-text { max-width: min(80%, 360px); }
.home-banner--video-promo .hb-title,
.home-banner--image .hb-title,
.home-banner--partner .hb-title,
.home-brand-hero .hb-title {
  font-size: clamp(22px, 6vw, 31px);
  line-height: 1.04;
}
.home-banner--video-promo .hb-sub,
.home-banner--image .hb-sub,
.home-banner--partner .hb-sub,
.home-brand-hero .hb-sub {
  max-width: 270px;
  font-size: 11px;
  line-height: 1.36;
}
.home-banner--video-promo .hb-cta,
.home-banner--image .hb-cta,
.home-banner--partner .hb-cta {
  min-height: 40px;
  margin: auto 14px 13px;
  padding: 8px 12px;
  border-radius: 11px;
  font-size: 11px;
  box-shadow: 0 6px 15px rgba(120, 77, 12, .24);
}
.home-banner--partner { min-height: clamp(254px, 44svh, 272px); }
.home-banner--partner .hb-text { padding-top: 59px; }
.home-banner--partner .hb-cta { margin-top: 0; margin-bottom: 8px; }
.home-banner--partner .hb-levels { margin-bottom: 11px; }

/* Gold tool cards remain tactile, but the visual now leaves more breathing
   room and no longer dominates the first mobile viewport. */
.home-shortcuts,
.mode-toggle { gap: 10px; }
.home-shortcut { min-height: 146px; }
.home-shortcut-tile,
.mode-btn-visual { aspect-ratio: 1.10; }
.home-shortcut-tile,
.mode-btn-visual {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% -8%, rgba(110, 106, 138, .22), transparent 60%),
    linear-gradient(145deg, #292a34, #171820 74%);
  border-color: rgba(225, 190, 92, .42);
  box-shadow: inset 0 1px 0 rgba(255, 244, 211, .12), 0 7px 17px rgba(0, 0, 0, .28);
}
.home-shortcut-tile::before,
.mode-btn-visual::before {
  display: none;
}
.home-shortcut-tile::after {
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, transparent 46%, rgba(3, 4, 8, .10) 100%);
}
.home-shortcut-icon,
.mode-btn-visual img,
.mode-btn:nth-child(3) .mode-btn-visual img {
  position: relative;
  z-index: 1;
  width: 76%;
  height: 76%;
  margin: 12%;
  border-radius: 20%;
  object-fit: contain;
  opacity: 1;
  transform: translateY(-4px);
  filter: saturate(.98) contrast(1.05) drop-shadow(0 8px 12px rgba(0, 0, 0, .28));
  mix-blend-mode: screen;
}
.mode-btn.active .mode-btn-visual {
  box-shadow: 0 0 0 2px rgba(201, 149, 39, .13), 0 9px 20px rgba(120, 77, 12, .19);
}
@media (max-width: 359px) {
  .home-brand-hero { min-height: 224px; }
  .home-banner--image,
  .home-banner--video-promo { min-height: 224px; }
  .home-banner--partner { min-height: 264px; }
  .home-shortcut { min-height: 138px; }
}

/* ─────────────  LUMIX VOICE  ─────────────
   Audio is a fourth peer action, not a decorative banner. Four compact,
   equal controls keep the first decision visible without a horizontal rail. */
.home-shortcuts,
.mode-toggle {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home-shortcut { min-height: 118px; }
.mode-btn strong { font-size: 11px; }
.mode-btn small { font-size: 9px; }
.create-hero.audio {
  background-image: url("/shop/assets/home/lumix-action-audio-v1.png?v=1") !important;
  background-position: 76% 48%;
}
.audio-studio {
  overflow: hidden;
  margin-top: 2px;
  padding: 18px;
  border: 1px solid rgba(225, 190, 92, .34);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 82% -14%, rgba(192, 135, 35, .22), transparent 52%),
    linear-gradient(145deg, rgba(31, 29, 27, .94), rgba(10, 11, 16, .96));
  box-shadow: inset 0 1px 0 rgba(255, 245, 217, .08), 0 15px 30px rgba(0, 0, 0, .26);
}
.audio-studio-head { max-width: 420px; }
.audio-studio-eyebrow {
  margin: 0 0 6px;
  color: var(--brand-gold);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .13em;
  line-height: 1.2;
}
.audio-studio h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(23px, 6.4vw, 32px);
  font-weight: 760;
  letter-spacing: -.055em;
  line-height: 1.04;
}
.audio-studio-head > p:last-child {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.audio-form { display: grid; gap: 16px; margin-top: 19px; }
.audio-field > label,
.audio-voices > legend {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  color: #f2efe7;
  font-size: 12px;
  font-weight: 700;
}
.audio-field textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 136px;
  resize: vertical;
  padding: 14px;
  border: 1px solid rgba(230, 213, 166, .24);
  border-radius: 15px;
  outline: none;
  color: var(--text);
  background: rgba(5, 6, 9, .64);
  font: inherit;
  font-size: 16px;
  line-height: 1.46;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.audio-field textarea::placeholder { color: rgba(202, 202, 214, .58); }
.audio-field textarea:focus {
  border-color: rgba(225, 190, 92, .82);
  background: rgba(7, 8, 12, .84);
  box-shadow: 0 0 0 3px rgba(198, 146, 66, .16);
}
.audio-field-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
#audioPrice { color: #dec182; }
.audio-voices { min-width: 0; margin: 0; padding: 0; border: 0; }
.audio-voice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.audio-voice {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid rgba(232, 227, 207, .14);
  border-radius: 13px;
  color: var(--text);
  background: rgba(255, 255, 255, .035);
  text-align: left;
  touch-action: manipulation;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.audio-voice:active { transform: scale(.98); }
.audio-voice:focus-visible,
.audio-generate:focus-visible,
.audio-download:focus-visible {
  outline: 2px solid #f0ce78;
  outline-offset: 3px;
}
.audio-voice.active {
  border-color: rgba(236, 198, 104, .8);
  background: linear-gradient(135deg, rgba(202, 151, 55, .24), rgba(65, 44, 15, .34));
  box-shadow: inset 0 1px rgba(255, 243, 201, .17), 0 5px 15px rgba(0, 0, 0, .19);
}
.audio-voice-mark {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(246, 215, 136, .45);
  border-radius: 50%;
  color: #f6d98e;
  background: radial-gradient(circle at 35% 25%, rgba(255, 235, 178, .24), rgba(86, 52, 8, .34));
  font-size: 12px;
  font-weight: 800;
}
.audio-voice-name {
  overflow: hidden;
  min-width: 0;
  color: inherit;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audio-provider-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
}
.audio-status {
  margin: -2px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(230, 199, 116, .25);
  border-radius: 12px;
  color: #ead6a2;
  background: rgba(125, 83, 18, .13);
  font-size: 12px;
  line-height: 1.42;
}
.audio-status.is-error {
  border-color: rgba(236, 128, 117, .35);
  color: #ffd2ca;
  background: rgba(132, 43, 34, .22);
}
.audio-result {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(230, 199, 116, .25);
  border-radius: 15px;
  background: rgba(5, 6, 9, .55);
}
.audio-result p { margin: 0; color: #ddd9ce; font-size: 12px; line-height: 1.4; }
.audio-result audio { width: 100%; min-height: 44px; }
.audio-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  color: var(--text);
  text-decoration: none;
}
.audio-generate { min-height: 52px; }
@media (min-width: 640px) {
  .home-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mode-toggle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .audio-voice-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .home-shortcuts,
  .mode-toggle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-shortcut { min-height: 138px; }
}

/* ─────────────  ART DIRECTION: OBSIDIAN / CHAMPAGNE  ─────────────
   The visual language is intentionally built around a dark editorial canvas:
   artwork gets the stage, while gold acts as a precise edge-light rather than
   a blanket fill. This makes every start action feel like entering a studio. */
:root {
  --bg: #0a0c17;
  --bg-soft: #101322;
  --surface: #121622;
  --surface-2: #1a1f2d;
  --control-dark: rgba(14, 17, 29, .86);
  --control-dark-border: rgba(190, 199, 236, .18);
  --text: #fbfaf6;
  --text-secondary: #d4d0c3;
  --muted: #a2a7bb;
  --line: rgba(190, 199, 236, .09);
  --line-strong: rgba(190, 199, 236, .18);
  --accent: #c69242;
  --accent-2: #8e5a18;
  --brand-gold: #c69242;
  --accent-grad: linear-gradient(135deg, #e0bc73 0%, #b88031 47%, #855316 100%);
  --brand-gold-grad: var(--accent-grad);
  --accent-ink: #171004;
  --accent-soft: rgba(198, 146, 66, .12);
  --accent-line: rgba(215, 171, 91, .32);
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(100% 44% at 100% -10%, rgba(180, 128, 40, .15), transparent 58%),
    radial-gradient(76% 38% at -12% 38%, rgba(111, 84, 37, .1), transparent 63%),
    linear-gradient(180deg, #0b0b09 0%, var(--bg) 28rem);
}

.topbar {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.brand-logo-wrap {
  border-color: rgba(246, 218, 143, .42);
  background: linear-gradient(145deg, rgba(255, 238, 184, .18), rgba(46, 35, 15, .12));
  box-shadow: inset 0 1px rgba(255, 247, 220, .32), 0 8px 24px rgba(0, 0, 0, .3);
}
.brand-name {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
}
.brand-caption { color: #aaa189; }
.balance-chip,
.topbar-back {
  border-color: var(--control-dark-border);
  background: var(--control-dark);
}
.buy-pill {
  border-color: rgba(255, 241, 192, .76);
  background: var(--accent-grad);
  box-shadow: inset 0 1px rgba(255, 255, 238, .7), 0 9px 23px rgba(154, 98, 16, .28);
}

/* Home is a campaign: every slide uses the same illuminated frame, but the
   real visual asset remains the focal point. */
.home-banners { margin-bottom: 25px; }
.home-banner-track { gap: 12px; }
.home-banner {
  min-height: clamp(238px, 40svh, 272px);
  border: 1px solid rgba(245, 220, 148, .29);
  border-radius: 24px;
  background-color: #0c0c0a;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 244, 212, .07);
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), border-color .22s ease, box-shadow .22s ease;
}
.home-banner::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 7px;
  border: 1px solid rgba(255, 236, 177, .19);
  border-radius: calc(24px - 7px);
  box-shadow: inset 0 1px rgba(255, 251, 232, .11);
  pointer-events: none;
}
.home-banner:hover {
  border-color: rgba(255, 225, 139, .6);
  box-shadow: 0 22px 46px rgba(0, 0, 0, .38), 0 0 0 1px rgba(235, 190, 79, .08);
}
.home-banner:active { transform: scale(.982); }
.home-banner .hb-text { z-index: 2; }
.home-banner .hb-kicker {
  color: #f0cd80;
  font-size: 9px;
  letter-spacing: .16em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .54);
}
.home-banner .hb-title {
  color: #fffdf6;
  font-weight: 760;
  letter-spacing: -.058em;
  text-shadow: 0 5px 28px rgba(0, 0, 0, .72);
}
.home-banner .hb-sub {
  color: rgba(248, 241, 221, .77);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}
.home-brand-hero {
  min-height: clamp(274px, 42svh, 314px);
  background-image: url("/shop/assets/lumix-studio-v3.png?v=1");
  background-position: 68% center;
}
.home-brand-hero .hb-overlay {
  z-index: 0;
  background:
    radial-gradient(circle at 76% 22%, rgba(253, 214, 113, .21), transparent 26%),
    linear-gradient(90deg, rgba(5, 5, 4, .94) 0%, rgba(5, 5, 4, .72) 47%, rgba(5, 5, 4, .13) 100%),
    linear-gradient(0deg, rgba(5, 5, 4, .72), transparent 60%);
}
.home-brand-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 231, 158, .48);
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px rgba(10, 10, 8, .36), 0 0 24px rgba(225, 183, 84, .15);
  pointer-events: none;
}
.home-brand-hero .hb-text {
  max-width: min(84%, 420px);
  padding: 51px 21px 22px;
}
.home-brand-hero .hb-title { font-size: clamp(29px, 8vw, 42px); line-height: .96; }
.home-brand-hero .hb-sub { max-width: 274px; margin-top: 10px; }
.home-banner .hb-cta {
  position: static;
  min-height: 44px;
  margin: 0;
  padding: 10px 11px;
  border-radius: 13px;
  font-size: 11px;
  font-weight: 790;
  line-height: 1.1;
  white-space: nowrap;
}
.lumix-action--primary,
.home-banner .lumix-action--primary {
  border: 1px solid rgba(255, 244, 202, .82) !important;
  background: var(--accent-grad) !important;
  box-shadow: inset 0 1px rgba(255, 255, 241, .76), 0 10px 22px rgba(145, 91, 10, .3) !important;
}
.lumix-action--secondary,
.home-banner .lumix-action--secondary {
  border: 1px solid rgba(246, 220, 145, .56) !important;
  background: rgba(11, 11, 9, .67) !important;
  color: #f3d88e !important;
  box-shadow: inset 0 1px rgba(255, 248, 220, .08) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.home-banner--image,
.home-banner--video-promo { min-height: clamp(232px, 39svh, 260px); }
.home-banner--partner { min-height: clamp(264px, 43svh, 292px); }
.home-banner--image .hb-overlay,
.home-banner--video-promo .hb-overlay,
.home-banner--partner .hb-overlay {
  z-index: 0;
  background: linear-gradient(90deg, rgba(5, 5, 4, .94), rgba(5, 5, 4, .64) 51%, rgba(5, 5, 4, .11)), linear-gradient(0deg, rgba(5, 5, 4, .5), transparent 62%);
}
.home-banner--image .hb-text,
.home-banner--video-promo .hb-text,
.home-banner--partner .hb-text { padding-top: 45px; }
.home-banner--image .hb-cta,
.home-banner--video-promo .hb-cta,
.home-banner--partner .hb-cta {
  position: relative;
  z-index: 3;
  align-self: flex-start;
  margin: auto 14px 14px;
}
.home-banner--partner .hb-levels { z-index: 3; }
.hb-levels > span {
  border-color: rgba(244, 214, 130, .3);
  background: rgba(10, 10, 8, .64);
  box-shadow: inset 0 1px rgba(255, 244, 210, .07);
}
.hb-levels b { color: #f2cf7b; }
.home-banner-dot::after { background: rgba(245, 224, 167, .27); }
.home-banner-dot.active::after { background: var(--accent); box-shadow: 0 0 12px rgba(226, 187, 97, .42); }

.home-shortcuts-head { margin-bottom: 12px; }
.home-shortcuts-head h2,
.trends-head .section-title,
#view-home > .section-title {
  color: #fcf8eb;
  font-weight: 730;
}
.home-shortcuts-all,
.trends-head .link-btn { color: #edca78; }
.home-shortcuts { gap: 10px; padding-bottom: 26px; }
.home-shortcut { min-height: 150px; gap: 7px; }
.home-shortcut-tile,
.mode-btn-visual {
  border-color: rgba(243, 213, 132, .38);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 188, 87, .17), transparent 44%),
    linear-gradient(145deg, #201e19, #0c0c0a 75%);
  box-shadow: inset 0 1px rgba(255, 246, 213, .14), inset 0 -24px 35px rgba(0, 0, 0, .28), 0 10px 22px rgba(0, 0, 0, .26);
}
.home-shortcut-tile::after {
  background: radial-gradient(circle at 50% 50%, transparent 44%, rgba(0, 0, 0, .21) 100%);
}
.home-shortcut-icon,
.mode-btn-visual img,
.mode-btn:nth-child(3) .mode-btn-visual img {
  filter: saturate(.92) contrast(1.06) drop-shadow(0 10px 13px rgba(0, 0, 0, .38));
}
.home-shortcut-label,
.mode-btn strong { color: #f8f4e7; }
.home-shortcut-description,
.mode-btn small {
  color: #a9a18f;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.home-shortcut:active .home-shortcut-tile,
.mode-btn:active .mode-btn-visual { border-color: rgba(255, 225, 146, .78); }

/* Community work stays colourful; the container merely gives it a gallery edge. */
.trend-card,
.gallery-card,
.history-card,
.work-card {
  border: 1px solid rgba(245, 224, 167, .15);
  background: #0d0d0b;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}
.trend-card { border-radius: 18px; }
.gallery-card:hover,
.history-card:hover,
.work-card:hover { border-color: rgba(245, 211, 120, .48); }
.gc-tag,
.history-tag,
.work-badge {
  border-color: rgba(245, 224, 167, .28);
  background: rgba(8, 8, 7, .72);
  color: #f8edce;
}

.hero,
.create-hero {
  border-color: rgba(245, 220, 148, .29);
  background-position: 68% center !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 244, 212, .08);
}
.hero-overlay {
  background: linear-gradient(90deg, rgba(5, 5, 4, .9), rgba(5, 5, 4, .35) 72%, rgba(5, 5, 4, .08)), linear-gradient(0deg, rgba(5, 5, 4, .58), transparent 70%);
}
.model-banner {
  border-color: rgba(245, 220, 148, .24);
  background-color: #10100e;
  background-position: center 48%;
  box-shadow: inset 0 1px rgba(255, 244, 212, .07), 0 12px 27px rgba(0, 0, 0, .24);
}
.model-banner::after { background: linear-gradient(90deg, rgba(7, 7, 6, .9), rgba(7, 7, 6, .48) 65%, rgba(7, 7, 6, .13)); }
.model-provider-label { color: #cfad64; }

.btn-primary,
.filter-pill.active,
.nav-center .nav-plus {
  border-color: rgba(255, 243, 197, .76);
  background: var(--accent-grad);
  box-shadow: inset 0 1px rgba(255, 255, 240, .7), 0 10px 24px rgba(145, 91, 10, .28);
}
.filter-pill { border-color: rgba(245, 224, 167, .18); background: rgba(255, 248, 225, .028); color: #c2bbaa; }
.bottom-nav {
  border-color: var(--control-dark-border);
  background: var(--control-dark);
  box-shadow: 0 -14px 36px rgba(0, 0, 0, .28);
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
}
.nav-item { color: #8f8a7d; }
.nav-item.active { color: #fbf2d7; }
.nav-item.active .nav-ico { color: #e0bb68; }
.nav-center .nav-plus {
  border-radius: 16px;
  box-shadow: inset 0 1px rgba(255, 255, 240, .72), 0 12px 27px rgba(145, 91, 10, .34);
}

@media (max-width: 359px) {
  .home-brand-hero { min-height: 270px; }
  .home-brand-hero .hb-text { padding: 43px 17px 20px; }
  .home-brand-hero .hb-title { font-size: 27px; }
  .home-banner--image,
  .home-banner--video-promo { min-height: 226px; }
  .home-banner--partner { min-height: 258px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-banner,
  .home-shortcut-tile,
  .mode-btn-visual { transition: none; }
}

/* ─────────────  HOME BANNERS · OBSIDIAN GALLERY  ─────────────
   One precise outer gold line gives every slide a common gallery treatment.
   There is deliberately no inset rim: the earlier double frame looked like a
   crop on a narrow Telegram viewport. */
.home-banner {
  min-height: clamp(260px, 40svh, 300px);
  border: 1px solid rgba(232, 198, 117, .64);
  border-radius: 24px;
  background-color: #080807;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 72% center;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 246, 220, .07);
}
.home-banner::before { display: none; }
.home-banner:hover {
  border-color: rgba(249, 219, 143, .9);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .42), 0 0 0 1px rgba(185, 135, 45, .12);
}
.home-brand-hero {
  min-height: clamp(286px, 40svh, 300px);
  background-image: url("/shop/assets/home/lumix-banner-network.jpeg?v=1");
}
.home-brand-hero .hb-overlay {
  background:
    linear-gradient(90deg, rgba(5, 5, 4, .93) 0%, rgba(5, 5, 4, .72) 43%, rgba(5, 5, 4, .18) 100%),
    linear-gradient(0deg, rgba(5, 5, 4, .52), transparent 62%);
}
.home-brand-hero::after { display: none; }
.home-banner--image,
.home-banner--video-promo,
.home-banner--voice,
.home-banner--chat-promo { min-height: clamp(254px, 37svh, 276px); }
.home-banner--partner { min-height: clamp(272px, 39svh, 292px); }
.home-brand-hero,
.home-banner--image,
.home-banner--video-promo,
.home-banner--voice,
.home-banner--chat-promo,
.home-banner--partner {
  /* Portrait references are shown as the artwork itself on the right; cover
     would crop their subject beyond recognition on the short mobile card. */
  background-repeat: no-repeat;
  background-size: auto 118%;
  background-position: right center;
}
.home-banner--image { background-image: url("/shop/assets/home/lumix-banner-image.jpeg?v=1"); }
.home-banner--video-promo { background-image: url("/shop/assets/home/lumix-banner-video.jpeg?v=1"); }
.home-banner--voice { background-image: url("/shop/assets/home/lumix-banner-voice.jpeg?v=1"); }
.home-banner--chat-promo { background-image: url("/shop/assets/home/lumix-action-assistant-v2.png?v=3"); }
.home-banner--partner { background-image: url("/shop/assets/home/lumix-banner-partner.jpeg?v=1"); }
.home-banner--image .hb-text,
.home-banner--video-promo .hb-text,
.home-banner--voice .hb-text,
.home-banner--chat-promo .hb-text,
.home-banner--partner .hb-text { padding-top: 42px; }

/* The names are the first thing the eye should read.  The shorter measure
   protects each title from the portrait artwork on every phone width. */
.home-banner .hb-text { max-width: min(84%, 410px); padding: 42px 22px 24px; }
.home-banner .hb-kicker { font-size: 10px; font-weight: 750; letter-spacing: .15em; }
.home-banner .hb-title {
  margin-top: 7px;
  font-size: clamp(29px, 8.3vw, 42px);
  line-height: .99;
  letter-spacing: -.052em;
}
.home-banner .hb-sub {
  max-width: 258px;
  margin-top: 11px;
  color: rgba(255, 250, 238, .84);
  font-size: 13px;
  line-height: 1.42;
}
.home-brand-hero .hb-text { padding-top: 34px; }
.home-brand-hero .hb-kicker { margin-top: 0; }
.home-brand-hero .hb-title { font-size: clamp(33px, 9.2vw, 46px); }
.home-banner--partner .hb-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-banner--partner .hb-levels > span { min-width: 0; padding-right: 8px; padding-left: 8px; }
.home-banner--partner .hb-levels small { white-space: nowrap; }

/* Service terms are an explicit, calm first-open decision; Telegram's own
   Mini App terms remain a separate system dialog managed by Telegram. */
.legal-consent-modal {
  z-index: 1200;
  align-items: flex-end;
  padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.legal-consent-sheet {
  width: min(100%, 520px);
  max-height: min(760px, calc(100svh - 28px));
  overflow: auto;
  padding: 24px 20px 18px;
  border: 1px solid rgba(243, 207, 120, .45);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(32, 27, 17, .98), rgba(12, 12, 11, .99));
  box-shadow: 0 24px 72px rgba(0, 0, 0, .62), inset 0 1px rgba(255, 241, 200, .09);
}
.legal-consent-mark {
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 12px;
  border: 1px solid rgba(247, 211, 126, .68);
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(211, 158, 58, .2);
}
.legal-consent-kicker { color: #e9c573; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.legal-consent-sheet h2 { margin: 7px 0 8px; color: #fff9e9; font-size: 23px; line-height: 1.1; }
.legal-consent-lead { margin: 0 0 14px; color: rgba(255, 249, 233, .75); font-size: 14px; line-height: 1.45; }
.legal-consent-details {
  margin: 0 0 14px;
  border: 1px solid rgba(255, 242, 207, .12);
  border-radius: 13px;
  background: rgba(0, 0, 0, .19);
}
.legal-consent-details summary { min-height: 44px; padding: 13px 14px; color: #f4d289; cursor: pointer; font-size: 13px; font-weight: 700; }
.legal-document { padding: 0 14px 14px; color: rgba(255, 249, 233, .7); font-size: 12px; line-height: 1.48; }
.legal-document h3 { margin: 13px 0 6px; color: #fff8e6; font-size: 13px; }
.legal-document p { margin: 0 0 9px; }
.legal-document a { color: #f3cd76; text-decoration: underline; }
.legal-operator-details { display: grid; gap: 8px; margin: 0 0 10px; }
.legal-operator-details > div { display: grid; grid-template-columns: minmax(68px, .42fr) minmax(0, 1fr); gap: 8px; }
.legal-operator-details dt { color: rgba(255, 249, 233, .58); }
.legal-operator-details dd { min-width: 0; margin: 0; color: rgba(255, 249, 233, .86); overflow-wrap: anywhere; }
.legal-consent-status { margin: 0 0 10px; color: #ffb6b6; font-size: 12px; line-height: 1.35; }
.legal-consent-accept { min-height: 48px; }
.legal-consent-cancel {
  display: block;
  width: 100%;
  min-height: 42px;
  margin-top: 6px;
  border: 0;
  color: rgba(255, 249, 233, .64);
  background: transparent;
  font: inherit;
  font-size: 13px;
}
.legal-consent-cancel:focus-visible, .legal-consent-details summary:focus-visible { outline: 2px solid #f1ca71; outline-offset: 2px; }

/* A wider canvas can reveal more of the supplied vertical artwork without
   taking the text column away. Phones keep the full composition at the edge. */
@media (min-width: 640px) {
  .home-brand-hero,
  .home-banner--image,
  .home-banner--video-promo,
  .home-banner--voice,
  .home-banner--chat-promo,
  .home-banner--partner { background-size: 54% auto; }
}

@media (max-width: 359px) {
  .home-brand-hero { min-height: 286px; }
  .home-banner--image,
  .home-banner--video-promo,
  .home-banner--voice,
  .home-banner--chat-promo { min-height: 252px; }
  .home-banner--partner { min-height: 276px; }
}

/* The supplied gold control reference belongs to the three front actions,
   not to banner CTAs. The inset sits inside the rim, so no black outer edge
   is left visible around the artwork. */
.home-shortcut-tile,
.mode-btn-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(224, 187, 112, .88) !important;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(235, 203, 131, .72) 0%, rgba(190, 142, 54, .90) 10%, rgba(95, 58, 10, .96) 45%, rgba(214, 171, 87, .80) 100%) border-box !important;
  box-shadow:
    inset 0 1px rgba(240, 215, 159, .58),
    inset 0 -1px rgba(62, 36, 4, .76),
    0 2px 0 rgba(72, 42, 5, .88),
    0 11px 22px rgba(0, 0, 0, .32) !important;
}
.home-shortcut-tile::before,
.mode-btn-visual::before {
  display: block;
  content: "";
  position: absolute;
  z-index: 0;
  inset: 4px;
  height: auto;
  border: 1px solid rgba(203, 157, 75, .64);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(39, 35, 27, .98), rgba(7, 7, 6, .98) 62%, rgba(31, 25, 14, .98));
  box-shadow:
    inset 0 1px rgba(234, 209, 153, .10),
    inset 0 0 0 1px rgba(0, 0, 0, .54),
    0 0 0 1px rgba(88, 51, 5, .62);
  pointer-events: none;
}
.home-shortcut-tile::after,
.mode-btn-visual::after { z-index: 0; }
.mode-btn.active .mode-btn-visual {
  border-color: rgba(229, 195, 123, .92) !important;
  box-shadow:
    inset 0 1px rgba(241, 218, 166, .64),
    inset 0 -1px rgba(62, 36, 4, .76),
    0 2px 0 rgba(72, 42, 5, .88),
    0 0 0 3px rgba(190, 142, 54, .13),
    0 11px 22px rgba(0, 0, 0, .32) !important;
}
.mode-btn.active .mode-btn-visual::after { z-index: 2; }
.home-shortcut:active .home-shortcut-tile,
.mode-btn:active .mode-btn-visual {
  transform: translateY(1px) scale(.975);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, .55),
    inset 0 -1px rgba(255, 238, 183, .15),
    0 5px 12px rgba(0, 0, 0, .28) !important;
}
.home-hero-logo {
  display: inline-flex;
  width: 44px;
  height: 44px;
  margin: 0 0 12px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .32);
}
.home-hero-logo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
}
.home-brand-hero .hb-text { padding-top: 38px; }

/* Model choice is a decision grid, not a tall feed: provider labels still
   span the catalogue, while the touch-safe model cards use two columns. */
.model-banners {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
}
.model-provider-label {
  grid-column: 1 / -1;
  margin: 8px 1px 0;
}
.model-banner {
  min-height: 88px;
  padding: 12px;
  align-items: center;
  border-radius: 16px;
}
.model-banner-copy { min-width: 0; }
.model-banner-title {
  font-size: 16px;
  line-height: 1.08;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .74);
}
.model-banner-emoji { margin-right: 4px; }
.model-banner-subtitle {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (min-width: 640px) {
  .model-banners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .model-banners { gap: 7px; }
  .model-banner { min-height: 82px; padding: 10px; }
  .model-banner-title { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-banner:hover { box-shadow: 0 18px 42px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .035); }
}

/* ─────────────  LUMIX VOICE · LISTENING CONTROLS  ─────────────
   The warm studio surface now sets the application foundation as well:
   graphite first, then champagne only for meaningful actions and edges. */
:root {
  --color-background: #090a0b;
  --color-background-soft: #11110f;
  --color-surface: #171611;
  --color-surface-elevated: #211e16;
  --color-text-primary: #fbfaf5;
  --color-text-secondary: #d8d2c4;
  --color-text-muted: #aaa291;
  --color-border: rgba(244, 227, 181, .12);
  --color-divider: rgba(244, 227, 181, .075);
  --color-overlay: rgba(5, 5, 4, .74);
  --bg: var(--color-background);
  --bg-soft: var(--color-background-soft);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-elevated);
  --text: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --muted: var(--color-text-muted);
  --line: var(--color-divider);
  --line-strong: var(--color-border);
  --control-dark: rgba(11, 11, 9, .84);
  --control-dark-border: rgba(240, 218, 156, .17);
}
html { background: var(--color-background); }
body {
  background:
    radial-gradient(88% 43% at 100% -10%, rgba(183, 130, 40, .13), transparent 59%),
    radial-gradient(60% 35% at -12% 52%, rgba(124, 88, 31, .08), transparent 65%),
    linear-gradient(180deg, #0b0b09 0%, var(--color-background) 31rem);
}
.bottom-nav {
  border-color: var(--control-dark-border);
  background: var(--control-dark);
}
.topbar {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.audio-voice {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 58px;
  padding: 5px;
  border: 1px solid rgba(232, 227, 207, .14);
  border-radius: 14px;
  color: var(--text);
  background: rgba(255, 255, 255, .035);
  text-align: left;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.audio-voice:focus-within {
  border-color: rgba(236, 198, 104, .8);
  box-shadow: inset 0 1px rgba(255, 243, 201, .15), 0 5px 15px rgba(0, 0, 0, .19);
}
.audio-voice.active {
  border-color: rgba(236, 198, 104, .8);
  background: linear-gradient(135deg, rgba(202, 151, 55, .24), rgba(65, 44, 15, .34));
  box-shadow: inset 0 1px rgba(255, 243, 201, .17), 0 5px 15px rgba(0, 0, 0, .19);
}
.audio-voice-select {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  flex: 1 1 auto;
  gap: 9px;
  padding: 0 3px;
  color: inherit;
  text-align: left;
}
.audio-voice-select:active { transform: scale(.98); }
.audio-voice-preview {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(246, 215, 136, .35);
  border-radius: 50%;
  color: #f4d78f;
  background: linear-gradient(145deg, rgba(241, 207, 124, .18), rgba(90, 56, 10, .38));
  box-shadow: inset 0 1px rgba(255, 246, 213, .12);
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.audio-voice-preview svg { width: 18px; height: 18px; fill: currentColor; }
.audio-voice-preview.is-loading svg {
  fill: none;
  animation: lumix-audio-preview-spin .72s linear infinite;
}
.audio-voice-preview.is-playing {
  color: #1d1305;
  border-color: rgba(255, 238, 181, .84);
  background: var(--accent-grad);
}
.audio-voice-preview:active:not(:disabled) { transform: scale(.93); }
.audio-voice-preview:disabled { opacity: .58; }
.audio-voice-select:focus-visible,
.audio-voice-preview:focus-visible {
  outline: 2px solid #f0ce78;
  outline-offset: 2px;
}
@keyframes lumix-audio-preview-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .audio-voice,
  .audio-voice-select,
  .audio-voice-preview { transition: none; }
  .audio-voice-preview.is-loading svg { animation: none; }
}

/* ─────────────  OBSIDIAN SURFACES · NO COOL LEGACY TINTS  ─────────────
   Sheets used to inherit a blue-grey layer from the earlier studio skin.
   All app windows now use the same warm graphite foundation as the canvas;
   gold remains an edge/action colour rather than a second background. */
:root {
  /* The voice studio supplied the reference: warm bronze graphite, with a
     quiet top-light and a deeper lower edge. Every app window shares it. */
  --lumix-window: #252019;
  --lumix-window-elevated: #2b251c;
  --lumix-window-gradient:
    radial-gradient(ellipse at 84% -18%, rgba(192, 135, 35, .18), transparent 54%),
    linear-gradient(145deg, #2a241b 0%, #17140f 78%);
  --lumix-sheet: var(--lumix-window);
  --lumix-field: #15130f;
  --lumix-overlay: rgba(5, 5, 4, .88);
  --lumix-overlay-opaque: #050504;
  --lumix-sheet-border: rgba(244, 227, 181, .14);
  --color-background: #090806;
  --color-background-soft: #100e0b;
  --color-surface: var(--lumix-window);
  --color-surface-elevated: var(--lumix-window-elevated);
  --bg: var(--color-background);
  --bg-soft: var(--color-background-soft);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-elevated);
}
.audio-studio {
  background: var(--lumix-window-gradient);
}
body {
  background:
    radial-gradient(90% 46% at 104% -12%, rgba(181, 126, 39, .11), transparent 58%),
    radial-gradient(68% 38% at -14% 50%, rgba(102, 71, 23, .07), transparent 64%),
    radial-gradient(76% 44% at 50% 22%, rgba(70, 26, 45, .11), transparent 67%),
    linear-gradient(180deg, #0d0b08 0%, var(--color-background) 31rem);
}
.sheet,
.modal {
  background: var(--lumix-overlay);
  backdrop-filter: blur(12px) saturate(.82);
  -webkit-backdrop-filter: blur(12px) saturate(.82);
}
.sheet-body,
.modal-sheet {
  border-color: var(--lumix-sheet-border);
  background: var(--lumix-window-gradient);
}
.sheet-head,
.sheet-foot {
  border-color: var(--lumix-sheet-border);
  background: var(--lumix-window-elevated);
}
.sheet-body::before {
  background: rgba(244, 227, 181, .28);
}
.dropzone,
.prompt,
.field input,
.field-input,
.profile-select,
.chat-model,
.chat-thread-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.chat-thread-row select { flex: 1; min-width: 0; }
.chat-thread-row button { flex-shrink: 0; }
.chat-attachment { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.chat-attachment img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }
.chat-message-photo { display: block; max-width: min(100%, 300px); max-height: 260px; object-fit: contain; border-radius: 12px; margin-bottom: 8px; }
.chat-compose,
.toast {
  border-color: var(--lumix-sheet-border);
  background: var(--lumix-field);
}
.info-banner {
  border-color: rgba(230, 193, 104, .2);
  background: linear-gradient(112deg, rgba(135, 91, 28, .18), rgba(255, 248, 225, .025));
  color: var(--text-secondary);
}

/* The profile editor is a focused workspace, not a translucent peek at the
   profile below. It reaches the safe top edge and blocks scroll chaining, so
   the page behind cannot shimmer or move while fields are being edited. */
#profileEditSheet {
  padding-top: var(--chrome-top);
  background: var(--lumix-overlay-opaque);
  animation: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#profileEditSheet .sheet-body {
  min-height: calc(100dvh - var(--chrome-top));
  max-height: calc(100dvh - var(--chrome-top));
  overscroll-behavior: contain;
  background: var(--lumix-window-gradient);
  animation: lumix-profile-editor-in .22s cubic-bezier(.22, 1, .36, 1);
}
#profileEditSheet .sheet-head {
  background: var(--lumix-window-elevated);
}

/* Compact profile controls are windows too.  Keeping the same material as the
   voice studio makes the small controls from the profile reference feel like
   deliberate parts of one interface instead of flat dark buttons. */
.profile-balance-row,
.profile-actions .profile-quick-action,
.profile-showcase-edit {
  border-color: var(--lumix-sheet-border);
  background:
    linear-gradient(145deg, rgba(255, 246, 220, .045), transparent 46%),
    var(--lumix-window-gradient);
  box-shadow: inset 0 1px 0 rgba(255, 244, 209, .055), 0 8px 20px rgba(0, 0, 0, .18);
}
.profile-actions .profile-quick-action:hover,
.profile-actions .profile-quick-action:focus-visible,
.profile-showcase-edit:hover,
.profile-showcase-edit:focus-visible {
  border-color: rgba(227, 190, 99, .52);
  background:
    linear-gradient(145deg, rgba(210, 162, 69, .12), transparent 50%),
    var(--lumix-window-gradient);
}
.profile-actions .profile-quick-action:active,
.profile-showcase-edit:active {
  transform: scale(.985);
}
.profile-actions .profile-quick-action > span:first-child,
.profile-showcase-edit > span:first-child {
  color: #d7b56c;
}
@keyframes lumix-profile-editor-in {
  from { transform: translateY(18px); }
  to { transform: none; }
}
@media (min-width: 640px) {
  #profileEditSheet {
    align-items: center;
    justify-content: center;
    padding: 32px;
  }
  #profileEditSheet .sheet-body {
    width: min(100%, 620px);
    min-height: 0;
    max-height: calc(100dvh - 64px);
    padding: 6px 24px 24px;
    border: 1px solid var(--lumix-sheet-border);
    border-radius: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #profileEditSheet .sheet-body { animation: none; }
}

/* ─────────────  STUDIO MODE ART · FINAL PASS  ─────────────
   The selected mode must be legible before a model is chosen.  The artwork
   is deliberately placed at the far edge, leaving a quiet, high-contrast
   copy column instead of adding another framed panel inside the hero. */
.create-hero {
  background-image: url("/shop/assets/home/lumix-action-image-v2.png?v=1") !important;
  background-size: auto 132% !important;
  background-position: right center !important;
}
.create-hero.video {
  background-image: url("/shop/assets/home/lumix-action-video-v2.png?v=2") !important;
}
.create-hero.audio {
  background-image: url("/shop/assets/home/lumix-action-audio-v1.png?v=1") !important;
}
.create-hero.chat {
  background-image: url("/shop/assets/home/lumix-action-assistant-v2.png?v=3") !important;
}

/* Model choice stays a compact grid, but the assigned artwork belongs to the
   active medium and is visibly present at the right of every tile. */
.model-banner {
  background-repeat: no-repeat;
  background-size: auto 128%;
  background-position: right center;
}
.model-banner::after {
  background:
    linear-gradient(90deg, rgba(7, 7, 6, .93) 0%, rgba(7, 7, 6, .76) 48%, rgba(7, 7, 6, .32) 76%, rgba(7, 7, 6, .08) 100%);
}
@media (min-width: 640px) {
  .create-hero { background-size: auto 148% !important; }
  .model-banner { background-size: auto 144%; }
}

/* ─────────────  HOME BANNERS · SEAMLESS ARTWORK  ─────────────
   Supplied vertical artwork is intentionally retained, but it now enters
   through a feathered mask.  The black canvas reaches into the image instead
   of meeting it at a visible straight seam, while a one-pixel inner rail keeps
   the gold border clear of the scroll viewport on every snapped position. */
.home-banner-track {
  padding: 1px;
  scroll-padding-inline: 1px;
}
.home-banner.home-brand-hero { --home-banner-art: url("/shop/assets/home/lumix-banner-network.jpeg?v=1"); }
.home-banner.home-banner--image { --home-banner-art: url("/shop/assets/home/lumix-banner-image.jpeg?v=1"); }
.home-banner.home-banner--video-promo { --home-banner-art: url("/shop/assets/home/lumix-banner-video.jpeg?v=1"); }
.home-banner.home-banner--voice { --home-banner-art: url("/shop/assets/home/lumix-banner-voice.jpeg?v=1"); }
.home-banner.home-banner--chat-promo { --home-banner-art: url("/shop/assets/home/lumix-action-assistant-v2.png?v=3"); }
.home-banner.home-banner--partner { --home-banner-art: url("/shop/assets/home/lumix-banner-partner.jpeg?v=1"); }
.home-banner.home-brand-hero,
.home-banner.home-banner--image,
.home-banner.home-banner--video-promo,
.home-banner.home-banner--voice,
.home-banner.home-banner--chat-promo,
.home-banner.home-banner--partner {
  background-image: none !important;
}
.home-banner.home-brand-hero::after,
.home-banner.home-banner--image::after,
.home-banner.home-banner--video-promo::after,
.home-banner.home-banner--voice::after,
.home-banner.home-banner--chat-promo::after,
.home-banner.home-banner--partner::after {
  display: block;
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: var(--home-banner-art);
  background-repeat: no-repeat;
  /* The art deliberately extends under the fade. At its former contained
     size the bitmap began after the transparent part of the mask, leaving a
     visible vertical cut exactly where the artwork started. */
  background-size: auto 190%;
  background-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 29%, #000 62%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 29%, #000 62%, #000 100%);
  pointer-events: none;
}
.home-banner .hb-overlay {
  z-index: 1;
  background:
    linear-gradient(90deg, #080807 0%, rgba(8, 8, 7, .98) 30%, rgba(8, 8, 7, .86) 46%, rgba(8, 8, 7, .48) 64%, rgba(8, 8, 7, .12) 86%, transparent 100%),
    linear-gradient(0deg, rgba(5, 5, 4, .5), transparent 65%);
}
.home-banner .hb-text,
.home-banner .hb-levels { z-index: 2; }
@media (min-width: 640px) {
  .home-banner.home-brand-hero::after,
  .home-banner.home-banner--image::after,
  .home-banner.home-banner--video-promo::after,
  .home-banner.home-banner--voice::after,
  .home-banner.home-banner--chat-promo::after,
  .home-banner.home-banner--partner::after { background-size: 64% auto; }
}

/* The helper copy is part of the scenario section, not a caption tucked into
   the title.  Its own rhythm separates the heading from the first group. */
.preset-home-sub {
  margin-top: 5px;
  margin-bottom: 16px;
}

/* ─────────────  CREATE · SINGLE-ART CATALOGUE  ─────────────
   Each surface owns one artwork layer only. This avoids a repeated bitmap
   appearing beside itself when an earlier inline/background rule also wins. */
.create-hero {
  --create-hero-art: url("/shop/assets/home/lumix-action-image-v2.png?v=1");
  position: relative;
  min-height: 224px;
  overflow: hidden;
  border: 1px solid rgba(232, 198, 117, .58);
  background:
    radial-gradient(76% 118% at 50% -24%, rgba(184, 131, 42, .19), transparent 64%),
    linear-gradient(145deg, #211c14 0%, #0e0d0a 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 241, 200, .12), 0 16px 34px rgba(0, 0, 0, .28);
}
.create-hero,
#createHero,
#createHero.video,
#createHero.audio,
#createHero.chat {
  background-color: #17120e !important;
  background-image: none !important;
}
.create-hero.video { --create-hero-art: url("/shop/assets/home/lumix-action-video-v2.png?v=2"); }
.create-hero.audio { --create-hero-art: url("/shop/assets/home/lumix-action-audio-v1.png?v=1"); }
.create-hero.chat { --create-hero-art: url("/shop/assets/home/lumix-action-assistant-v2.png?v=3"); }
.create-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 10px 16px 44px;
  background: var(--create-hero-art) 72% 38% / auto 78% no-repeat;
  filter: saturate(.9) contrast(1.02);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 66% 78% at 65% 44%, #000 36%, rgba(0, 0, 0, .68) 60%, transparent 88%);
  mask-image: radial-gradient(ellipse 66% 78% at 65% 44%, #000 36%, rgba(0, 0, 0, .68) 60%, transparent 88%);
  pointer-events: none;
}
.create-hero .hero-overlay {
  z-index: 1;
  background:
    radial-gradient(80% 104% at 100% -18%, rgba(186, 129, 37, .16), transparent 62%),
    linear-gradient(180deg, rgba(8, 7, 5, .04) 5%, rgba(8, 7, 5, .36) 58%, rgba(8, 7, 5, .92) 100%),
    linear-gradient(90deg, rgba(8, 7, 5, .5), transparent 46%, rgba(8, 7, 5, .22));
}
.create-hero .hero-text { z-index: 2; }
.create-hero .hero-title {
  font-size: clamp(26px, 7.15vw, 34px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.03;
}

.model-banners {
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  width: min(100%, 548px);
  margin-inline: auto;
}
.model-provider-label { grid-column: 1; }
.model-banner {
  min-height: 84px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid rgba(232, 198, 117, .48);
  border-radius: 15px;
  background:
    linear-gradient(90deg, rgba(15, 13, 10, .76), rgba(15, 13, 10, .57)),
    url("/shop/assets/home/model-catalogue-texture.jpeg?v=1") center 48% / cover no-repeat !important;
  box-shadow: inset 0 1px 0 rgba(255, 244, 211, .12), 0 8px 18px rgba(0, 0, 0, .18);
}
.model-banner::before {
  display: none;
}
.model-banner::after {
  z-index: 0;
  background: linear-gradient(90deg, rgba(10, 9, 7, .21), rgba(10, 9, 7, .05));
}
.model-banner-copy { position: relative; z-index: 1; padding-right: 0; }
.model-banner-title {
  font-family: var(--font-ui);
  font-size: clamp(16px, 4.45vw, 18px);
  font-weight: 600;
  letter-spacing: -.025em;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .62);
}
.model-banner-emoji { color: #e9c97b; }
.model-banner-subtitle { color: rgba(239, 224, 187, .68); }
@media (min-width: 640px) {
  .model-banners { width: min(100%, 620px); }
  .create-hero::before { inset: 14px 30px 52px; }
}

/* The checkout keeps the same bronze graphite window as profile and studio;
   selection never falls back to the old violet surface. */
#view-shop .plan,
#view-shop .plan-details,
#view-shop .checkout-panel,
#view-shop .pay-method,
#view-shop .checkout-toggle,
#view-shop .sticky-purchase-bar {
  border-color: rgba(232, 198, 117, .2);
  background:
    linear-gradient(145deg, rgba(255, 241, 204, .045), transparent 48%),
    var(--lumix-window-gradient);
}
#view-shop .plan::before {
  background: radial-gradient(85% 120% at 100% 0%, rgba(212, 166, 75, .2), transparent 58%);
}
#view-shop .plan.selected {
  border-color: rgba(232, 198, 117, .68);
  box-shadow: 0 0 0 3px rgba(196, 145, 49, .12), 0 15px 35px rgba(91, 57, 12, .22);
}
#view-shop .plan-price,
#view-shop .plan-loki-price strong,
#view-shop .purchase-summary-price { color: #f0cd7e; }
#view-shop .pay-method.active {
  border-color: rgba(232, 198, 117, .62);
  background:
    linear-gradient(145deg, rgba(218, 174, 81, .13), transparent 52%),
    var(--lumix-window-gradient);
  box-shadow: 0 0 0 2px rgba(196, 145, 49, .11);
}
#view-shop .plan-select-indicator,
#view-shop .pay-method-check { border-color: rgba(232, 198, 117, .48); }
#view-shop .purchase-status.is-pending { color: #e5c982; }

/* CHECKOUT · UNIFIED PAYMENT TILES */
#view-shop .pay-methods {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
}
#view-shop .pay-method {
  display: grid;
  grid-template-rows: 32px auto 1fr;
  align-content: start;
  gap: 7px;
  min-height: 112px;
  padding: 12px 9px 10px;
  border-radius: 16px;
}
#view-shop .pay-method-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(232, 198, 117, .32);
  border-radius: 10px;
  background: rgba(232, 198, 117, .055);
  color: #e8c675;
}
#view-shop .pay-method-icon svg { display: block; }
#view-shop .payment-icon-animation {
  display: block;
  width: 30px;
  height: 30px;
  pointer-events: none;
}
#view-shop .pay-method-title {
  overflow: hidden;
  color: #f2e7c9;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-shop .pay-method-sub {
  align-self: end;
  margin: 0;
  color: rgba(222, 207, 169, .66);
  font-size: 9px;
  line-height: 1.28;
}
#view-shop .pay-method-check {
  top: 10px;
  right: 9px;
  width: 18px;
  height: 18px;
}
#view-shop .pay-method.active .pay-method-icon {
  border-color: rgba(248, 219, 145, .66);
  background: rgba(226, 180, 79, .12);
  color: #ffe0a0;
}
#view-shop .pay-method.active .pay-method-check::after { font-size: 11px; }
.account-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.account-buy-token {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ─────────────  VIDEO SHOWCASE REFERENCES  ───────────── */
.showcase-references {
  display: grid;
  gap: 8px;
  margin: 7px 0 2px;
  padding: 11px 12px;
  border: 1px solid rgba(232, 198, 117, .3);
  border-radius: 18px;
  background:
    radial-gradient(110% 120% at 100% 0%, rgba(199, 145, 47, .15), transparent 60%),
    rgba(255, 255, 255, .025);
}
.showcase-references-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.showcase-references-kicker {
  margin: 0 0 2px;
  color: rgba(232, 198, 117, .72);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
}
.showcase-references h3 { margin: 0; color: var(--text); font-size: 16px; letter-spacing: -.025em; }
.showcase-references-count {
  flex: 0 0 auto;
  padding: 5px 8px;
  color: #edd18a;
  border: 1px solid rgba(232, 198, 117, .3);
  border-radius: 999px;
  background: rgba(232, 198, 117, .07);
  font-size: 11px;
  font-weight: 700;
}
.showcase-references-copy { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.38; }
.showcase-references-grid {
  display: grid;
  grid-auto-columns: minmax(86px, 1fr);
  grid-auto-flow: column;
  gap: 8px;
  overflow-x: auto;
  min-height: 0;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
}
.showcase-references-grid::-webkit-scrollbar { display: none; }
.showcase-reference-card { display: grid; gap: 6px; min-width: 86px; scroll-snap-align: start; }
.showcase-reference-thumb {
  min-width: 86px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(232, 198, 117, .24);
  border-radius: 12px;
  background: #15120d;
}
.showcase-reference-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.showcase-reference-thumb:active { transform: scale(.975); }
.showcase-reference-prompt { min-height: 32px; padding: 5px 8px; color: #ecd291; border: 1px solid rgba(232, 198, 117, .28); border-radius: 8px; background: rgba(232, 198, 117, .06); font-size: 11px; font-weight: 700; }
.showcase-reference-flow { display: grid; gap: 8px; }
.showcase-reference-step { min-width: 0; }
.showcase-references-use { min-height: 44px; padding-inline: 9px; border-color: rgba(232, 198, 117, .48); color: #efd38f; font-size: 12px; }
.showcase-references-use:disabled { opacity: .62; }
.showcase-reference-state { margin: -2px 1px 0; color: var(--muted); font-size: 11px; line-height: 1.42; }
.showcase-reference-state.is-ready { color: rgba(235, 213, 152, .94); }
.showcase-generate { min-height: 48px; }
/* Пошаговый CTA живёт в закреплённом подвале листа. Он не исчезает при
   переходе между шагами — пользователь не должен прокручивать экран назад. */
#genSheet.gen-sheet--guided .showcase-reference-flow { display: none; }
/* У витринного сценария — одна задача за раз. Референс и промпт хранятся
   в состоянии генерации, но после подтверждения не остаются вторым полем
   на экране: следующая кнопка появляется на том же месте. Сводка находится
   в шапке модели, до любого действия. */
#genSheet.gen-sheet--guided .showcase-references {
  display: block;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#genSheet.gen-sheet--guided .showcase-references-head,
#genSheet.gen-sheet--guided .showcase-references-copy,
#genSheet.gen-sheet--guided .showcase-references-grid,
#genSheet.gen-sheet--guided .showcase-reference-state { display: none; }
#genSheet.gen-sheet--guided .showcase-references-use,
#genSheet.gen-sheet--guided .showcase-generate {
  width: 100%;
  min-height: 48px;
  font-size: 14px;
}
#genSheet.gen-sheet--guided #sheetRefBlock,
#genSheet.gen-sheet--guided #promptBlock { display: none; }
/* The second guided action temporarily reveals the real prompt textarea.
   Keep this narrow override after the hiding rule so it wins on mobile too. */
#genSheet.gen-sheet--guided.gen-sheet--prompt-entry #promptBlock { display: block; }
#genSheet.gen-sheet--guided .sheet-model-badge {
  max-width: min(100%, 360px);
  margin-top: 5px;
  padding: 5px 8px;
  overflow-wrap: anywhere;
}

/* The moderator sees the same packet of source frames that will be visible
   to visitors. Small thumbnails make an accidental duplicate obvious before
   publishing a video example. */
.mod-preset-reference-field,
.mod-preset-hidden-reference-field { display: grid; gap: 9px; margin-top: 14px; }
.mod-home-reference-field + .mod-preset-hidden-reference-field { margin-top: 12px; }
.mod-preset-hidden-reference-field .btn-outline { min-height: 44px; justify-content: center; }
.mod-preset-reference-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; min-height: 48px; }
.mod-preset-reference-empty { align-self: center; color: var(--muted); font-size: 12px; }
.mod-preset-reference-thumb {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  min-height: 76px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid rgba(232, 198, 117, .28);
  border-radius: 9px;
  background: var(--surface);
}
.mod-preset-reference-thumb img { display: block; grid-row: 1; width: 54px; height: 68px; border-radius: 6px; object-fit: cover; }
.mod-preset-reference-thumb button {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #fff4d9;
  border: 1px solid rgba(255, 244, 217, .48);
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  font-size: 12px;
}
.mod-reference-prompt { display: grid; gap: 4px; min-width: 0; padding-right: 22px; color: var(--text); font-size: 11px; font-weight: 650; line-height: 1.25; }
.mod-reference-prompt textarea { width: 100%; min-height: 48px; resize: vertical; color: var(--text); border: 1px solid rgba(232, 198, 117, .25); border-radius: 7px; background: rgba(0, 0, 0, .18); padding: 7px 8px; font: inherit; font-weight: 400; line-height: 1.35; }
.mod-reference-prompt textarea:focus { outline: 2px solid rgba(232, 198, 117, .42); outline-offset: 1px; }
.mod-preset-hidden-reference-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px dashed rgba(232, 198, 117, .28);
  border-radius: 10px;
  background: rgba(232, 198, 117, .045);
}
.mod-preset-hidden-reference-label { color: #ead7a4; font-size: 12px; line-height: 1.35; }
.mod-preset-hidden-reference-state .btn-sm { flex: 0 0 auto; min-height: 32px; }
.mod-preset-duration-field { display: grid; gap: 6px; margin-top: 14px; }
@media (max-width: 359px) {
  .showcase-references { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-reference-thumb:active { transform: none; }
}

/* ─────────────  SOCIAL BOTTOM NAVIGATION  ─────────────
   Пять равных зон как у привычной ленты: дом, лента, создать, история,
   свой профиль. Подписи спрятаны визуально, но остаются доступны VoiceOver. */
.bottom-nav {
  width: min(760px, 100%);
  height: calc(var(--bottom-nav-height) + var(--bottom-safe-area));
  padding: 0 max(10px, env(safe-area-inset-right, 0px)) var(--bottom-safe-area) max(10px, env(safe-area-inset-left, 0px));
  border: 0;
  border-top: 1px solid rgba(244, 222, 158, .09);
  border-radius: 0;
  background: rgba(10, 10, 8, .38);
  box-shadow: 0 -10px 26px rgba(0, 0, 0, .2);
  backdrop-filter: blur(12px) saturate(1.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
}
.nav-item {
  position: relative;
  min-width: 44px;
  min-height: 56px;
  padding: 6px 8px;
  justify-content: center;
  gap: 0;
  color: rgba(241, 232, 208, .62);
  touch-action: manipulation;
}
.nav-item:active { transform: scale(.92); }
.nav-item.active { color: #fff8e6; }
.nav-item.active .nav-ico { color: #f0cb75; }
.nav-ico { width: 28px; height: 28px; }
.nav-ico svg { width: 24px; height: 24px; }
.nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nav-center .nav-plus {
  width: 48px;
  height: 48px;
  margin-top: 0;
  border-radius: 15px;
  box-shadow: inset 0 1px rgba(255, 255, 240, .75), 0 7px 18px rgba(145, 91, 10, .32);
}
.nav-center .nav-plus svg { width: 25px; height: 25px; }
.nav-center .nav-lumix-mark {
  display: grid;
  place-items: center;
  padding: 4px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
.nav-center .nav-lumix-mark img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.nav-profile-avatar {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(240, 226, 184, .42);
  border-radius: 50%;
  background: rgba(255, 248, 224, .08);
  color: #f5ddb0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.nav-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav-item.active .nav-profile-avatar {
  border-color: rgba(242, 201, 103, .95);
  box-shadow: 0 0 0 2px rgba(242, 201, 103, .13);
}
.nav-profile-avatar > span { display: grid; place-items: center; }
.nav-profile-avatar > span svg { width: 18px; height: 18px; }
.nav-item:focus-visible,
.nav-center:focus-visible .nav-plus {
  outline: 2px solid #f1c967;
  outline-offset: 3px;
}

/* ─────────────  HOME BANNERS · 16:9 MEDIA MASTER  ─────────────
   Campaign artwork is delivered horizontally.  Keep that promise all the
   way through the carousel: no portrait-only masks, no stretched video and
   no duplicate copy over a graphic which already contains its own headline. */
.home-banner.home-brand-hero,
.home-banner.home-banner--image,
.home-banner.home-banner--video-promo,
.home-banner.home-banner--voice,
.home-banner.home-banner--chat-promo {
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
}

.home-banner.home-brand-hero::after,
.home-banner.home-banner--image::after,
.home-banner.home-banner--video-promo::after,
.home-banner.home-banner--voice::after,
.home-banner.home-banner--chat-promo::after {
  background-position: center;
  background-size: cover;
  -webkit-mask-image: none;
  mask-image: none;
}

.home-brand-hero::after { display: none !important; }
.home-banner-main-video {
  display: none;
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #080807;
  pointer-events: none;
}
.home-banner-main-motion {
  display: none;
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #080807;
  pointer-events: none;
}

/* The first card is a text-free campaign film, shared by every locale. */
html[lang] .home-brand-hero .home-banner-main-video { display: block; }

/* Four matching campaign scenes keep the entry cards consistent with the
   primary 16:9 hero. The artwork deliberately has no embedded wording, so
   every interface language continues to use its own live, translated copy. */
.home-banner.home-banner--image {
  --home-banner-art: url("/shop/assets/home/lumix-banner-image-wide.webp?v=20260825-3");
}
.home-banner.home-banner--video-promo {
  --home-banner-art: url("/shop/assets/home/lumix-banner-video-wide.webp?v=20260825-3");
}
.home-banner.home-banner--voice {
  --home-banner-art: url("/shop/assets/home/lumix-banner-voice-wide.webp?v=20260825-3");
}
.home-banner.home-banner--chat-promo {
  --home-banner-art: url("/shop/assets/home/lumix-banner-chat-wide.webp?v=20260825-3");
}

.create-hero {
  --create-hero-art: url("/shop/assets/home/lumix-banner-image-wide.webp?v=20260825-3");
  aspect-ratio: 16 / 9;
  min-height: 0;
}
.create-hero.video {
  --create-hero-art: url("/shop/assets/home/lumix-banner-video-wide.webp?v=20260825-3");
}
.create-hero.audio {
  --create-hero-art: url("/shop/assets/home/lumix-banner-voice-wide.webp?v=20260825-3");
}
.create-hero.chat {
  --create-hero-art: url("/shop/assets/home/lumix-banner-chat-wide.webp?v=20260825-3");
}
.create-hero::before {
  inset: 0;
  background: var(--create-hero-art) center / cover no-repeat;
  filter: none;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}
.create-hero .hero-overlay {
  background:
    linear-gradient(90deg, rgba(4, 4, 3, .92) 0%, rgba(4, 4, 3, .68) 42%, rgba(4, 4, 3, .22) 73%, transparent 100%),
    linear-gradient(0deg, rgba(4, 4, 3, .34), transparent 62%);
}

/* Partner uses the same 16:9 canvas as every carousel slide. Its compact
   level row is layered inside the card, so it cannot stretch the whole track
   and leave a blank area below the other banners. */
.home-banner.home-banner--partner {
  --home-banner-art: url("/shop/assets/home/lumix-banner-partner-wide.webp?v=20260825-1");
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
}
.home-banner.home-banner--partner::after {
  background-position: center;
  background-size: cover;
  /* Lift the handshake slightly without changing the 16:9 card geometry. */
  transform: translateY(-3%) scale(1.025);
  -webkit-mask-image: none;
  mask-image: none;
}
.home-banner.home-banner--image::after,
.home-banner.home-banner--video-promo::after,
.home-banner.home-banner--voice::after,
.home-banner.home-banner--chat-promo::after,
.home-banner.home-banner--partner::after {
  filter: brightness(1.2) saturate(1.06);
}
.home-banner.home-banner--image .hb-overlay,
.home-banner.home-banner--video-promo .hb-overlay,
.home-banner.home-banner--voice .hb-overlay,
.home-banner.home-banner--chat-promo .hb-overlay {
  background:
    linear-gradient(90deg, rgba(4, 4, 3, .70) 0%, rgba(4, 4, 3, .54) 34%, rgba(4, 4, 3, .28) 54%, rgba(4, 4, 3, .08) 76%, transparent 100%),
    linear-gradient(0deg, rgba(4, 4, 3, .26), transparent 65%);
}
.home-banner.home-banner--partner .hb-overlay {
  background:
    linear-gradient(90deg, rgba(4, 4, 3, .64) 0%, rgba(4, 4, 3, .46) 42%, rgba(4, 4, 3, .14) 68%, rgba(4, 4, 3, .02) 100%),
    linear-gradient(0deg, rgba(4, 4, 3, .26), transparent 64%);
}
.home-banner.home-banner--partner .hb-text {
  max-width: min(76%, 330px);
  padding: 27px 20px 0;
}
.home-banner.home-banner--partner .hb-kicker { font-size: 8px; }
.home-banner.home-banner--partner .hb-title {
  margin-top: 6px;
  font-size: clamp(24px, 7.1vw, 34px);
  line-height: .96;
}
.home-banner.home-banner--partner .hb-sub {
  max-width: 276px;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.25;
}
.home-banner.home-banner--partner .hb-levels {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 13px;
  left: 14px;
  margin: 0;
  gap: 6px;
}
.home-banner.home-banner--partner .hb-levels > span {
  min-height: 0;
  padding: 6px 7px;
  gap: 1px;
  border-radius: 9px;
}
.home-banner.home-banner--partner .hb-levels b { font-size: 14px; }
.home-banner.home-banner--partner .hb-levels small { font-size: 8px; }

/* ─────────────  HOME · SECTION SPACING  ─────────────
   Do not change the campaign card, dot control or action-card geometry here.
   Only tighten the two blank intervals the home screen has between sections. */
#view-home .home-banners { margin-bottom: 14px; }
#view-home .home-shortcuts { padding-bottom: 18px; }

/* ─────────────  HOME · CAMPAIGN COMPOSITION / LOCALES  ─────────────
   Each scene has its own visual focal point.  Position copy independently
   instead of inheriting the old flex-end layout: Image remains the reference
   composition, while Voice, Video and GPT gain the unused left-side space. */
.home-banner.home-banner--image .hb-text,
.home-banner.home-banner--video-promo .hb-text,
.home-banner.home-banner--voice .hb-text,
.home-banner.home-banner--chat-promo .hb-text {
  position: absolute;
  z-index: 2;
  left: 5.7%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.home-banner.home-banner--image .hb-text {
  top: 18%;
  max-width: 47%;
}
.home-banner.home-banner--video-promo .hb-text {
  top: 27%;
  max-width: 51%;
}
.home-banner.home-banner--voice .hb-text {
  /* Long EN/KZ descriptions need an actual bottom safe area, rather than
     being aligned to the decorative waveform at the bottom of the artwork. */
  top: 15%;
  max-width: 48%;
}
.home-banner.home-banner--chat-promo .hb-text {
  top: 31%;
  max-width: 48%;
}

/* Poster is the immediate fallback while the 10-second campaign clip starts. */
.home-banner.home-brand-hero {
  background-image: url("/shop/assets/home/lumix-hero-campaign-v1-poster.jpg?v=20260921-1");
}
.home-brand-hero::after { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .home-brand-hero .home-banner-main-video { display: none !important; }
}

/* ─────────────  MANAGER ASSETS · 2026-09-21  ─────────────
   The supplied campaign art already contains its own copy. Keeping the live
   duplicate text over it makes the message unreadable, so buttons retain
   their accessible labels while the visual copy is provided by the artwork. */
.brand.brand--lockup {
  min-width: 0;
  gap: 0;
}
.brand-lockup {
  display: block;
  width: clamp(120px, 32vw, 154px);
  height: auto;
  max-height: 58px;
  object-fit: contain;
  object-position: left center;
}
.home-banner.home-banner--image {
  --home-banner-art: url("/shop/assets/home/lumix-banner-image-manager-20260921.png?v=1");
}
.home-banner.home-banner--video-promo {
  --home-banner-art: url("/shop/assets/home/lumix-banner-video-manager-20260921.png?v=1");
}
.home-banner.home-banner--voice {
  --home-banner-art: url("/shop/assets/home/lumix-banner-voice-manager-20260921.png?v=1");
}
.home-banner.home-banner--chat-promo {
  --home-banner-art: url("/shop/assets/home/lumix-banner-chat-manager-20260921.png?v=1");
}
.home-banner.home-banner--partner {
  --home-banner-art: url("/shop/assets/home/lumix-banner-partner-manager-20260921.png?v=1");
}
.home-banner.home-banner--image .hb-text,
.home-banner.home-banner--video-promo .hb-text,
.home-banner.home-banner--voice .hb-text,
.home-banner.home-banner--chat-promo .hb-text,
.home-banner.home-banner--partner .hb-text,
.home-banner.home-banner--partner .hb-levels {
  display: none;
}
.home-banner.home-banner--image .hb-overlay,
.home-banner.home-banner--video-promo .hb-overlay,
.home-banner.home-banner--voice .hb-overlay,
.home-banner.home-banner--chat-promo .hb-overlay,
.home-banner.home-banner--partner .hb-overlay {
  display: none;
}
.home-banner.home-banner--image::after,
.home-banner.home-banner--video-promo::after,
.home-banner.home-banner--voice::after,
.home-banner.home-banner--chat-promo::after,
.home-banner.home-banner--partner::after {
  filter: none;
  transform: none;
}
.partner-stat-direct {
  margin: -2px 0 10px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}
.create-hero { --create-hero-art: url("/shop/assets/home/lumix-banner-image-manager-20260921.png?v=1"); }
.create-hero.video { --create-hero-art: url("/shop/assets/home/lumix-banner-video-manager-20260921.png?v=1"); }
.create-hero.audio { --create-hero-art: url("/shop/assets/home/lumix-banner-voice-manager-20260921.png?v=1"); }
.create-hero.chat { --create-hero-art: url("/shop/assets/home/lumix-banner-chat-manager-20260921.png?v=1"); }
.create-hero .hero-overlay { background: none; }
.create-hero .hero-text { visibility: hidden; }
.partner-stat-direct > span:first-child {
  color: var(--text);
  font-weight: 700;
}
@media (max-width: 359px) {
  .brand-lockup { width: 96px; }
}
/* Do not sample scrolling native video surfaces into the navigation backdrop.
   On iOS those sampled frames can remain as rectangular patches after exit. */
body:not(.is-feed-view) .bottom-nav {
  background: #100e09;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.link-share-dialog { width: min(90vw, 420px); padding: 24px; border: 1px solid #786139; border-radius: 20px; background: #15130f; color: #fff; }
.link-share-dialog::backdrop { background: rgba(0,0,0,.75); }
.link-share-dialog .modal-close { position: absolute; top: 12px; right: 12px; }
.link-share-dialog h3 { margin: 0 28px 12px 0; }
.link-share-dialog p { font-size: 14px; line-height: 1.5; }
.link-share-dialog input { width: 100%; box-sizing: border-box; margin: 12px 0; padding: 12px; font-size: 16px; color: #fff; background: #26221a; border: 1px solid #786139; border-radius: 8px; user-select: text; -webkit-user-select: text; }
.link-share-dialog .btn-block { margin-top: 10px; }
.link-share-dialog [hidden] { display: none !important; }

/* Generation choices retain their original handlers and price calculations. */
[data-choice-source="true"] { display: none !important; }
.choice-panel-trigger { width:100%; padding:14px 16px; border:1px solid var(--border, #34343c); border-radius:14px; background:var(--card, #19191f); color:var(--text, #fff); text-align:left; font:inherit; cursor:pointer; }
.choice-panel-dialog { width:min(440px, calc(100vw - 32px)); max-height:75vh; overflow:auto; border:1px solid #34343c; border-radius:20px; padding:18px; background:#17171d; color:#fff; }
.choice-panel-dialog::backdrop { background:rgba(0,0,0,.6); }
.choice-panel-dialog h2 { margin:0 0 14px; font-size:20px; }
.choice-panel-close { float:right; margin-bottom:12px; padding:8px; border:0; border-radius:8px; background:#303039; color:#fff; }
.choice-panel-option { display:block; width:100%; padding:14px; margin-top:8px; border:1px solid #303039; border-radius:12px; background:#22222a; color:#fff; font:inherit; text-align:left; cursor:pointer; }
.choice-panel-option[aria-pressed="true"] { border-color:#7788ff; background:#30334e; }
.choice-panel-option:disabled { opacity:.5; }

/* A complete entry card remains available if a generation form is dismissed. */
.create-launch-card { display:flex; align-items:center; gap:18px; width:100%; padding:24px; border:1px solid #705831; border-radius:22px; background:linear-gradient(135deg,#282015,#15120e); color:var(--text,#fff); text-align:left; font:inherit; cursor:pointer; }
.create-launch-card > img { width:88px; height:88px; flex:none; object-fit:contain; }
.create-launch-copy { display:flex; flex-direction:column; gap:10px; min-width:0; }
.pinterest-reference-import { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.pinterest-reference-import > label { font-size:13px; color:var(--text-secondary,#b9b1a1); }
.pinterest-reference-row { display:flex; gap:8px; align-items:center; }
.pinterest-reference-row > input { min-width:0; flex:1; padding:12px; border-radius:12px; border:1px solid var(--border,#39352d); background:var(--bg-secondary,#191815); color:inherit; font:inherit; font-size:14px; }
.pinterest-reference-row > button { flex-shrink:0; }
.pinterest-reference-status { font-size:12px; line-height:1.4; color:var(--text-secondary,#b9b1a1); }
.create-launch-copy > strong { font-size:20px; line-height:1.25; }
.create-launch-copy > span { color:var(--text-secondary,#b9b1a1); font-size:14px; line-height:1.5; }
.create-launch-copy > .create-launch-action { color:#f2cf88; font-weight:700; }
.create-launch-card:focus-visible { outline:2px solid #f2cf88; outline-offset:4px; }
@media (max-width:420px) {
  .create-launch-card { padding:20px 16px; gap:14px; }
  .create-launch-card > img { width:64px; height:64px; }
  .create-launch-copy > strong { font-size:18px; }
}