/* ==== Evalute — общий дизайн (liquid glass + dot matrix) ==== */
@font-face {
  font-family: 'Bryndan Write';
  src: url('/assets/fonts/BryndanWrite-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
html { scroll-behavior: smooth; }
body {
  background-color: #03040a;
  background-image:
    radial-gradient(circle at 48% 18%, rgba(117,91,230,.17), transparent 34%),
    radial-gradient(circle at 14% 66%, rgba(64,140,210,.11), transparent 31%),
    radial-gradient(circle at 88% 72%, rgba(189,90,211,.09), transparent 34%),
    linear-gradient(145deg, #060713 0%, #020308 52%, #05030a 100%);
  background-attachment: fixed;
  color: #fff;
  font-family: 'Bryndan Write', Georgia, serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
body.font-body, .font-body, .font-heading { font-family: 'Bryndan Write', Georgia, serif !important; }
body > :not(.cosmic-video-bg):not(.cosmic-video-veil):not(.smoke):not(.tpl-modal):not(.splash):not(.install-aurora) { position: relative; z-index: 2; }

/* Единая кинематографичная система движения для лендинга. */
.page-progress {
  height: 1px;
  background: linear-gradient(90deg, rgba(220,210,255,.5), rgba(150,180,255,.5));
  box-shadow: none;
  opacity: .35;
  transform-origin: 0 50%;
}
.section-transition { isolation: isolate; }
.section-transition::after {
  content: "";
  position: absolute;
  z-index: 40;
  top: 0;
  left: 7%;
  right: 7%;
  height: 1px;
  pointer-events: none;
  opacity: .72;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42) 24%, rgba(183,164,255,.76) 50%, rgba(114,203,255,.42) 76%, transparent);
  box-shadow: 0 0 28px rgba(143,119,255,.28);
  animation: sectionSeam 7s ease-in-out infinite;
}
.cta-stage {
  overflow: hidden;
  background:
    radial-gradient(620px 320px at 50% 48%, rgba(132,104,255,.16), transparent 72%),
    radial-gradient(420px 260px at 68% 58%, rgba(81,170,255,.08), transparent 74%),
    #000;
}
.cta-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(680px, 84vw);
  height: min(680px, 84vw);
  left: 50%;
  top: 50%;
  border: 1px solid rgba(177,157,255,.11);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(137,109,255,.08), transparent 64%);
  transform: translate3d(-50%,-50%,0) scale(.82);
  animation: ctaAura 11s cubic-bezier(.45,0,.55,1) infinite alternate;
  pointer-events: none;
}
.cta-stage > div { position: relative; z-index: 1; }
@keyframes sectionSeam {
  0%, 100% { opacity: .45; transform: scaleX(.82); }
  50% { opacity: .92; transform: scaleX(1); }
}
@keyframes ctaAura {
  to { opacity: .85; transform: translate3d(-50%,-50%,0) scale(1.08) rotate(5deg); }
}
.cosmic-video-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  opacity: 0;
  filter: saturate(.92) contrast(1.08) brightness(.72);
  transform: scale(1.015);
  transition: opacity .42s cubic-bezier(.22,.7,.25,1);
  will-change: opacity;
}
.cosmic-video-bg.is-media-ready:not(.is-hidden) { opacity: .82; }
.hero-preroll { object-position: top center; }
html.hero-preroll-active #top.instant-media-surface { background: transparent; }
html.hero-preroll-active #top.instant-media-surface::before { opacity: 0; animation: none; }
.cosmic-video-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 58%, rgba(0,0,0,.4) 100%),
    linear-gradient(180deg, rgba(1,2,8,.52) 0%, rgba(0,0,5,.34) 36%, rgba(0,0,0,.78) 100%),
    radial-gradient(circle at 18% 18%, rgba(123,92,255,.22), transparent 32%),
    radial-gradient(circle at 83% 28%, rgba(71,162,255,.16), transparent 30%),
    radial-gradient(circle at 50% 110%, rgba(196,84,255,.14), transparent 42%);
}
.cosmic-video-veil::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 110deg, transparent 0 28%, rgba(177,142,255,.08) 36%, transparent 44% 68%, rgba(91,193,255,.07) 76%, transparent 84%);
  filter: blur(52px);
  animation: cosmicDrift 42s linear infinite;
}
.cosmic-video-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: radial-gradient(rgba(255,255,255,.75) .7px, transparent .7px);
  background-size: 37px 37px;
  mask-image: linear-gradient(to bottom, #000, transparent 74%);
  animation: starFloat 32s linear infinite;
}
@keyframes cosmicDrift { to { transform: rotate(360deg) scale(1.08); } }
@keyframes starFloat { to { background-position: 37px 74px; } }

/* Instant visual state for video-led sections: never expose a black frame. */
.instant-media-surface {
  isolation: isolate;
  background:
    radial-gradient(circle at 48% 42%, rgba(162,132,255,.2), transparent 31%),
    radial-gradient(circle at 22% 28%, rgba(83,166,255,.14), transparent 29%),
    radial-gradient(circle at 78% 68%, rgba(239,134,203,.1), transparent 30%),
    linear-gradient(145deg, #090a18 0%, #03050d 54%, #090611 100%);
}
.instant-media-surface::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  opacity: .72;
  background:
    radial-gradient(ellipse at 42% 44%, rgba(255,212,151,.2), transparent 20%),
    radial-gradient(ellipse at 54% 58%, rgba(102,83,244,.22), transparent 29%);
  transform: translate3d(0,0,0) scale(1.05);
  animation: ambientBreathe 10s ease-in-out infinite alternate;
}
.capability-card {
  background: linear-gradient(155deg, rgba(7,8,17,.72), rgba(4,5,12,.5));
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 22px 54px rgba(0,0,0,.2);
}
.capability-card::after {
  content: "";
  position: absolute;
  inset: -35% -20%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 28% 15%, rgba(180,160,255,.18), transparent 42%);
  transform: translate3d(-5%,4%,0) scale(.92);
  transition: opacity .42s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.capability-card:hover::after, .capability-card:focus-within::after {
  opacity: 1;
  transform: translate3d(4%,-3%,0) scale(1.06);
}
.cinematic-video {
  opacity: 0;
  transition: opacity .48s cubic-bezier(.22,.7,.25,1);
  will-change: opacity;
}
.cinematic-video.is-media-ready { opacity: 1; }
@keyframes ambientBreathe {
  to { opacity: .92; transform: translate3d(1.5%,-1%,0) scale(1.1); }
}
* { box-sizing: border-box; }
a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 3px;
}
button[role="checkbox"]:focus-visible { outline: none; }
button[role="checkbox"]:focus-visible > span:first-child {
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 3px;
}
::selection { background: rgba(255,255,255,0.92); color: #000; }

.brand-mark {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255,255,255,.08));
}

/* Меню слева скрыто по умолчанию — выезжает как drawer */
.app-shell {
  display: block;
  min-height: 100vh;
  background: radial-gradient(circle at 55% 10%, rgba(60,52,110,.07), transparent 42%);
}
.app-drawer {
  border-right: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(9,10,20,.97), rgba(4,5,12,.94));
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  box-shadow: 34px 0 100px rgba(0,0,0,.55);
}
.app-workspace { min-width: 0; position: relative; }
.app-workspace::before {
  content: "";
  position: fixed;
  inset: 82px 0 0 0;
  pointer-events: none;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 28%, #000, transparent 72%);
}
.workspace-topbar { left: 0; }
.workspace-panel {
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(150deg, rgba(12,14,29,.78), rgba(4,5,13,.46));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 24px 80px rgba(0,0,0,.26);
}
.usage-track { height: 4px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.12); }
.usage-fill { height: 100%; border-radius: inherit; background: #fff; transition: width .45s ease; }
.brand-breathe { animation: brandBreathe 4.2s ease-in-out infinite; }
@keyframes brandBreathe {
  0%,100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); transform: scale(.98); opacity: .72; }
  50% { filter: drop-shadow(0 0 28px rgba(255,255,255,.2)); transform: scale(1.025); opacity: 1; }
}
.brand-wordmark {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-shadow: 0 0 26px rgba(180,159,255,.34);
}
.brand-wordmark::after {
  content: "";
  width: .32em;
  height: .32em;
  margin-left: .22em;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, #a889ff 55%, #68cfff);
  box-shadow: 0 0 18px rgba(159,130,255,.9);
}
.neural-orbit {
  position: relative;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.12), rgba(125,92,255,.09) 28%, transparent 64%);
  box-shadow: 0 0 60px rgba(111,80,255,.24), inset 0 0 40px rgba(128,174,255,.08);
  animation: coreFloat 5.6s ease-in-out infinite;
}
.neural-orbit::before,
.neural-orbit__ring {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px dashed rgba(218,211,255,.36);
  animation: orbitSpin 12s linear infinite;
}
.neural-orbit__ring--two { inset: 26px; border-style: solid; border-color: rgba(118,206,255,.32); animation-direction: reverse; animation-duration: 8s; }
.neural-orbit__core {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(154,124,255,.82) 58%, rgba(72,183,255,.76));
  box-shadow: 0 0 32px rgba(174,150,255,.8);
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes coreFloat { 50% { transform: translateY(-8px) scale(1.02); } }

/* лаборатории */
.lab-hero {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: clamp(24px, 3.5vw, 46px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  background:
    linear-gradient(120deg, rgba(7,8,20,.88), rgba(17,13,35,.62)),
    radial-gradient(circle at 84% 20%, rgba(134,96,255,.28), transparent 38%);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 35px 100px rgba(0,0,0,.34);
}
.lab-hero::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -100px;
  top: -160px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 38px rgba(255,255,255,.02), 0 0 0 78px rgba(137,105,255,.025);
  animation: labOrbit 10s ease-in-out infinite alternate;
}
.lab-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  padding: 7px 11px;
  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.035);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lab-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #bda7ff; box-shadow: 0 0 14px #9f7cff; animation: pulseSoft 1.8s ease-in-out infinite; }
.lab-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.lab-metric { border-radius: 999px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); color: rgba(255,255,255,.64); font-size: 11px; }
.lab-console {
  position: relative;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(145deg, rgba(8,9,22,.88), rgba(3,4,12,.68));
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 30px 90px rgba(0,0,0,.28);
}
.lab-console::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 0 42%, rgba(182,161,255,.07) 50%, transparent 58% 100%);
  background-size: 220% 100%;
  animation: consoleShimmer 7s ease-in-out infinite;
}
.lab-step { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.56); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.lab-step::before { content: attr(data-step); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); color: #fff; background: rgba(255,255,255,.05); }
.choice-card {
  position: relative;
  min-height: 72px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.025);
  text-align: left;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease;
}
.choice-card:hover { transform: translateY(-3px); color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.05); }
.choice-card.is-active { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); box-shadow: inset 0 1px rgba(255,255,255,.14); }
.choice-card.is-active::after { content: ""; position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.7); }
.cosmic-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #0a0a0f;
  border: 1px solid rgba(255,255,255,.7);
  background: linear-gradient(180deg, #ffffff, #ececf1);
  box-shadow: 0 10px 30px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.9);
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
}
.cosmic-button::before {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 50%; left: -80%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .7s ease;
}
.cosmic-button:hover::before { left: 128%; }
.cosmic-button:disabled::before { display: none; }
.cosmic-button:hover { transform: translateY(-1px); box-shadow: 0 16px 42px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.95); }
.cosmic-button:active { transform: translateY(0); }
.cosmic-button:disabled {
  opacity: 1; filter: none; transform: none; box-shadow: none;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.16);
  cursor: not-allowed;
}
.brand-orb {
  position: relative;
  color: #fff;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.26), transparent 30%),
    linear-gradient(145deg, rgba(155,126,255,.24), rgba(71,164,255,.12));
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 0 28px rgba(137,107,255,.18);
}
.brand-orb::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 9px rgba(169,139,255,.95);
}
.lab-empty {
  min-height: 250px;
  border: 1px dashed rgba(255,255,255,.13);
  border-radius: 24px;
  background: radial-gradient(circle at 50% 45%, rgba(127,93,255,.12), transparent 38%), rgba(4,5,13,.42);
}
@keyframes labOrbit { to { transform: translate(-22px, 24px) rotate(16deg); } }
@keyframes consoleShimmer { 50% { background-position: -120% 0; } }
@keyframes buttonShimmer { 0%, 35% { transform: translateX(-55%); } 70%, 100% { transform: translateX(55%); } }

/* премиальный чат */
.soft-chip {
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: rgba(255,255,255,.48);
  background: rgba(8,9,20,.54);
  backdrop-filter: blur(18px);
  font-size: 11px;
}
.icon-action {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: rgba(255,255,255,.6);
  background: rgba(8,9,20,.58);
  transition: transform .25s ease, color .25s ease, border-color .25s ease, background .25s ease;
}
.icon-action:hover { transform: translateY(-2px); color: #fff; border-color: rgba(197,178,255,.35); background: rgba(144,111,255,.1); }
.model-picker { position: relative; width: min(250px, 64vw); }
.model-picker__trigger {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, rgba(12,14,29,.88), rgba(4,5,13,.72));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.22);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.model-picker__trigger:hover { transform: translateY(-1px); border-color: rgba(190,171,255,.36); box-shadow: 0 18px 50px rgba(64,39,130,.18); }
.model-picker__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: min(320px, 88vw);
  padding: 7px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(6,7,17,.94);
  backdrop-filter: blur(34px);
  box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.08);
}
.model-picker__option { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 9px 11px; border-radius: 12px; color: rgba(255,255,255,.66); transition: color .2s ease, background .2s ease; }
.model-picker__option:hover, .model-picker__option.is-active { color: #fff; background: rgba(255,255,255,.06); }
.model-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 18px currentColor; }
.model-dot--violet { color: #b79cff; background: #b79cff; }
.model-dot--blue { color: #79adff; background: #79adff; }
.model-dot--cyan { color: #70e4ff; background: #70e4ff; }
.model-dot--amber { color: #ffc985; background: #ffc985; }
.chat-scroll { min-height: 360px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.chat-empty { position: relative; min-height: 470px; }
.chat-empty::before {
  content: "";
  position: absolute;
  inset: 8% 8% 18%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(118,84,255,.13), transparent 64%);
  filter: blur(22px);
  animation: sceneBreathe 6s ease-in-out infinite;
}
.holo-model { position: relative; width: 142px; height: 142px; display: grid; place-items: center; perspective: 700px; }
.holo-cube { position: relative; width: 52px; height: 52px; transform-style: preserve-3d; animation: holoRotate 12s linear infinite; }
.holo-cube i { position: absolute; inset: 0; border: 1px solid rgba(224,216,255,.52); background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(112,78,221,.08)); box-shadow: inset 0 0 20px rgba(155,127,255,.1); backdrop-filter: blur(4px); }
.holo-cube i:nth-child(1) { transform: translateZ(26px); }
.holo-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(26px); }
.holo-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(26px); }
.holo-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(26px); }
.holo-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(26px); }
.holo-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(26px); }
.holo-model::before, .holo-model::after { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(181,159,255,.2); border-radius: 50%; animation: orbitSpin 16s linear infinite; }
.holo-model::after { inset: 31px; border-style: dashed; animation-duration: 10s; animation-direction: reverse; }
.holo-shadow { position: absolute; bottom: 18px; width: 70px; height: 12px; border-radius: 50%; background: rgba(139,103,255,.42); filter: blur(12px); animation: shadowPulse 3.4s ease-in-out infinite; }
.prompt-card { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; color: rgba(255,255,255,.64); background: rgba(7,8,18,.5); text-align: left; font-size: 12px; line-height: 1.35; backdrop-filter: blur(16px); transition: border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; }
.prompt-card:hover { color: #fff; border-color: rgba(195,176,255,.3); background: rgba(123,92,219,.08); box-shadow: 0 16px 40px rgba(36,23,78,.18); }
.message-row { display: flex; flex-direction: column; width: 100%; }
.message-row.is-user { align-items: flex-end; }
.message-row.is-assistant { align-items: flex-start; }
.user-message { max-width: min(82%, 720px); padding: 13px 17px; border-radius: 18px 18px 5px 18px; color: #07070b; background: rgba(255,255,255,.92); box-shadow: 0 12px 35px rgba(0,0,0,.18); font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.assistant-message { max-width: min(88%, 820px); padding: 18px 19px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px 18px 18px 5px; color: rgba(255,255,255,.88); background: linear-gradient(145deg, rgba(10,12,27,.78), rgba(5,6,14,.62)); box-shadow: inset 0 1px rgba(255,255,255,.045), 0 18px 50px rgba(0,0,0,.2); backdrop-filter: blur(20px); font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.message-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 7px; padding-left: 4px; }
.message-actions button { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border-radius: 9px; color: rgba(255,255,255,.3); font-size: 10px; transition: color .2s ease, background .2s ease; }
.message-actions button:hover, .message-actions button.is-active { color: #fff; background: rgba(255,255,255,.06); }
.message-actions button.is-active { color: #c8b5ff; }
.thinking-card { min-width: 230px; display: flex; align-items: center; gap: 13px; padding: 15px 17px; border: 1px solid rgba(184,160,255,.17); border-radius: 18px 18px 18px 5px; background: linear-gradient(145deg, rgba(14,13,34,.82), rgba(5,6,15,.68)); box-shadow: 0 18px 55px rgba(54,33,115,.18); }
.thinking-loader { display: flex; align-items: center; gap: 4px; }
.thinking-loader span { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #fff, #a888ff); box-shadow: 0 0 12px rgba(169,137,255,.55); animation: thinkingDot 1.2s ease-in-out infinite; }
.thinking-loader span:nth-child(2) { animation-delay: .15s; }
.thinking-loader span:nth-child(3) { animation-delay: .3s; }
.composer-shell { border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: linear-gradient(145deg, rgba(12,14,29,.88), rgba(5,6,14,.76)); box-shadow: inset 0 1px rgba(255,255,255,.055), 0 26px 80px rgba(0,0,0,.35); backdrop-filter: blur(28px); transition: border-color .25s ease, box-shadow .25s ease; }
.composer-shell:focus-within { border-color: rgba(198,180,255,.32); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 28px 90px rgba(25,14,58,.38); }
.send-button { width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #0a0a0f; background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.9); transition: filter .2s ease, box-shadow .2s ease, transform .2s ease; }
.send-button svg { width: 15px; height: 15px; }
.send-button:hover { filter: brightness(1.14); box-shadow: 0 15px 42px rgba(106,78,207,.46); }
.send-button:disabled { opacity: .28; filter: grayscale(.5); box-shadow: none; }
.mention-menu { position: absolute; left: 0; bottom: calc(100% + 12px); z-index: 75; width: min(360px, calc(100vw - 32px)); max-height: min(320px, 45vh); overflow-y: auto; padding: 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; color: rgba(255,255,255,.78); background: rgba(6,7,17,.96); backdrop-filter: blur(34px); box-shadow: 0 28px 80px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.07); }
.mention-menu > button { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 12px; text-align: left; transition: color .2s ease, background .2s ease; }
.mention-menu > button:hover { color: #fff; background: rgba(255,255,255,.06); }
.mention-type { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(190,171,255,.22); border-radius: 9px; color: #d7c8ff; background: linear-gradient(135deg, rgba(137,100,239,.2), rgba(76,135,223,.12)); font-size: 11px; }
.composer-chips, .message-context-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.composer-chips { margin: 0 0 9px; }
.composer-chips > span, .message-context-chips > span { max-width: min(260px, 78vw); display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: rgba(255,255,255,.62); background: rgba(255,255,255,.045); font-size: 10px; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-chips button { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: rgba(255,255,255,.35); font-size: 14px; line-height: 1; }
.composer-chips button:hover { color: #fff; background: rgba(255,255,255,.09); }
.composer-tools { display: flex; align-items: center; gap: 4px; padding-bottom: 3px; }
.composer-tools > button { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: rgba(255,255,255,.45); background: transparent; transition: color .2s ease, background .2s ease, transform .2s ease; }
.composer-tools > button:hover { color: #fff; background: rgba(255,255,255,.07); transform: translateY(-1px); }
.composer-tools svg { width: 15px; height: 15px; }
.message-context-chips { margin-top: 9px; }
.user-message .message-context-chips > span { color: rgba(7,7,11,.6); border-color: rgba(7,7,11,.12); background: rgba(7,7,11,.05); }
.chat-history-panel { width: 100%; min-height: 100%; display: flex; flex-direction: column; }
.new-chat-button { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 0 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.035); font-size: 12px; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.new-chat-button:hover { color: #fff; border-color: rgba(195,177,255,.3); background: rgba(132,101,226,.09); }
.history-list { max-height: 48vh; overflow-y: auto; padding-right: 2px; content-visibility: auto; }
.history-row { display: flex; align-items: center; gap: 7px; min-height: 58px; padding: 8px 6px 8px 11px; border: 1px solid transparent; border-radius: 13px; color: rgba(255,255,255,.48); transition: color .2s ease, background .2s ease, border-color .2s ease; }
.history-row:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.035); }
.history-row.is-active { color: #fff; border-color: rgba(189,169,255,.16); background: linear-gradient(120deg, rgba(137,103,235,.1), rgba(71,134,224,.05)); }
@keyframes holoRotate { from { transform: rotateX(-18deg) rotateY(0); } to { transform: rotateX(342deg) rotateY(360deg); } }
@keyframes shadowPulse { 50% { transform: scale(.7); opacity: .45; } }
@keyframes thinkingDot { 0%, 70%, 100% { transform: translateY(0); opacity: .32; } 35% { transform: translateY(-5px); opacity: 1; } }
@keyframes sceneBreathe { 50% { transform: scale(1.08); opacity: .72; } }

/* точечная сетка на фоне (в духе шрифта Doto) */
.dot-grid {
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}

.liquid-glass {
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.liquid-glass-strong {
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border: none;
  box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}
.liquid-glass-strong::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.navlink { transition: background-color .35s ease, color .35s ease, opacity .35s ease; }
.site-nav .navlink {
  position: relative;
  isolation: isolate;
}
.site-nav .navlink::after {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 5px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.88), rgba(255,255,255,0));
  opacity: 0;
  transform: translateY(3px) scaleX(.55);
  transition: opacity .28s ease, transform .38s cubic-bezier(.16,1,.3,1);
}
.site-nav .navlink:hover::after, .site-nav .navlink:focus-visible::after {
  opacity: .8;
  transform: translateY(0) scaleX(1);
}

.cta-glow { animation: ctaGlow 3.6s ease-in-out infinite; }
@keyframes ctaGlow {
  0%, 100% { box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15), 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15), 0 0 36px rgba(255,255,255,0.2); }
}

/* поля ввода */
.glass-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  outline: none;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.glass-input::placeholder { color: rgba(255,255,255,0.35); }
.glass-input:focus {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 24px rgba(255,255,255,0.08);
}

/* плавное появление для статичных страниц */
.fade-up { opacity: 0; transform: translate3d(0,18px,0); transition: opacity .62s ease, transform .62s cubic-bezier(.22,.7,.25,1); }
.fade-up.visible { opacity: 1; transform: translate3d(0,0,0); }

/* тонкий скроллбар */
/* Ползунки скрыты везде — премиальный чистый вид, прокрутка сохраняется */
* { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }
html, body { overflow-x: hidden; }

/* мигающий курсор набора текста в чате */
.typing-caret::after { content: "▌"; animation: caretBlink 1s steps(1) infinite; opacity: .8; }
@keyframes caretBlink { 50% { opacity: 0; } }

/* пульс загрузки */
.pulse-soft { animation: pulseSoft 1.6s ease-in-out infinite; }
@keyframes pulseSoft { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

@media (max-width: 899px) {
  .app-workspace { min-height: 100vh; padding-bottom: 78px; }
  .app-workspace::before { inset: 82px 0 0; background-size: 42px 42px; }
  .app-workspace main { padding-bottom: 112px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  /* Фоновое видео не прячем — assets/fx.js ставит его на паузу (статичный кадр). */
}

@media (max-width: 900px), (update: slow) {
  body { background-attachment: scroll; }
  .smoke { display: none; }
  .cosmic-video-veil::before { display: none; }
  .cosmic-video-veil::after { animation: none; opacity: .13; }
  .instant-media-surface::before { animation: none; }
  .capability-card { min-height: 310px !important; }
}

/* ==== Переливающиеся анимации (iridescent) ==== */
.iridescent-text {
  background: linear-gradient(100deg, #ffffff 0%, #c9bbff 22%, #8fc6ff 45%, #ffd9ee 68%, #ffffff 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: iridShift 7s ease-in-out infinite;
}
@keyframes iridShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* бегущий блик по кнопкам */
.shimmer-sweep { position: relative; overflow: hidden; }
.shimmer-sweep::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 55%;
  left: -85%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.26) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: sweepGlide 4.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sweepGlide {
  0%, 55% { left: -85%; }
  90%, 100% { left: 135%; }
}

/* переливающаяся вращающаяся кромка (работает и внутри overflow:hidden) */
@property --evolve-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.aurora-border { position: relative; }
.aurora-border::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: conic-gradient(from var(--evolve-ang, 0deg),
    rgba(255,255,255,0.65), rgba(168,148,255,0.4), rgba(126,196,255,0.55),
    rgba(255,176,224,0.4), rgba(255,255,255,0.65));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: auroraSpin 5.5s linear infinite;
}
@keyframes auroraSpin { to { --evolve-ang: 360deg; } }

/* медленно дрейфующее переливающееся свечение для панелей */
.aurora-glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  opacity: .5;
  background: conic-gradient(from 0deg, rgba(148,120,255,.5), rgba(96,180,255,.4), rgba(255,150,214,.4), rgba(148,120,255,.5));
  animation: glowDrift 11s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glowDrift {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(6%, -8%) scale(1.12) rotate(40deg); }
  66% { transform: translate(-7%, 6%) scale(.94) rotate(-30deg); }
}

/* ==== Telegram-минимал composer ==== */
.tg-composer {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background: linear-gradient(150deg, rgba(15,17,34,.92), rgba(6,7,16,.86));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 22px 65px rgba(0,0,0,.42);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.tg-composer:focus-within {
  border-color: rgba(190,168,255,.42);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 0 0 1px rgba(160,130,255,.14), 0 26px 80px rgba(28,16,64,.44);
}
.tg-round-btn {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  color: rgba(255,255,255,.52);
  background: transparent;
  transition: color .2s ease, background .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.tg-round-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.tg-round-btn svg { width: 21px; height: 21px; }
.tg-round-btn.is-open { transform: rotate(45deg); color: #fff; background: rgba(255,255,255,.12); }
.tg-send-btn {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  color: #0a0a0f;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.9);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.tg-send-btn svg { width: 17px; height: 17px; }
.tg-send-btn:hover { transform: scale(1.05); box-shadow: 0 11px 28px rgba(0,0,0,.42); }
.tg-send-btn:disabled { opacity: .28; box-shadow: none; }
.tg-tools-pop {
  position: absolute;
  left: 0; bottom: calc(100% + 10px);
  z-index: 75;
  width: 232px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 17px;
  background: rgba(7,8,18,.96);
  backdrop-filter: blur(34px);
  box-shadow: 0 26px 78px rgba(0,0,0,.56), inset 0 1px rgba(255,255,255,.07);
}
.tg-tools-pop > button {
  width: 100%; min-height: 46px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px; border-radius: 12px;
  color: rgba(255,255,255,.78); font-size: 13px; text-align: left;
  transition: color .2s ease, background .2s ease;
}
.tg-tools-pop > button:hover { color: #fff; background: rgba(255,255,255,.07); }
.tg-tools-pop > button svg { width: 18px; height: 18px; opacity: .8; }
.tg-composer textarea { scrollbar-width: none; }
.tg-composer textarea::-webkit-scrollbar { display: none; }

/* переливающийся ценник на странице тарифов */
.plan-card-selected { box-shadow: 0 24px 70px rgba(88,58,190,.26), inset 0 1px rgba(255,255,255,.1); }
.plan-price { font-variant-numeric: tabular-nums; }

/* ==== Markdown-рендер ответов ИИ (как в Claude/ChatGPT) ==== */
.md { font-size: 14px; line-height: 1.68; color: rgba(255,255,255,.9); word-wrap: break-word; }
.md > *:first-child { margin-top: 0 !important; }
.md > *:last-child { margin-bottom: 0 !important; }
.md p { margin: 0 0 .75em; }
.md h1, .md h2, .md h3, .md h4 { font-weight: 700; line-height: 1.3; margin: 1.1em 0 .5em; color: #fff; }
.md h1 { font-size: 1.5em; } .md h2 { font-size: 1.3em; } .md h3 { font-size: 1.13em; } .md h4 { font-size: 1em; }
.md ul, .md ol { margin: 0 0 .75em; padding-left: 1.35em; }
.md li { margin: .25em 0; }
.md ul li { list-style: disc; } .md ol li { list-style: decimal; }
.md a { color: #b9a6ff; text-decoration: underline; text-underline-offset: 2px; }
.md a:hover { color: #d6c9ff; }
.md strong { color: #fff; font-weight: 700; }
.md em { font-style: italic; }
.md blockquote { margin: 0 0 .75em; padding: .1em 0 .1em 1em; border-left: 3px solid rgba(168,148,255,.5); color: rgba(255,255,255,.72); }
.md hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 1.1em 0; }
.md :not(pre) > code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em; padding: .12em .4em; border-radius: 6px; background: rgba(255,255,255,.1); color: #efe9ff; }
.md table { width: 100%; border-collapse: collapse; margin: 0 0 .85em; font-size: .92em; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid rgba(255,255,255,.14); padding: 7px 11px; text-align: left; }
.md th { background: rgba(255,255,255,.06); font-weight: 700; }
.md .katex { font-size: 1.04em; }
.md .katex-display { margin: .6em 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }

.code-block { position: relative; margin: 0 0 .85em; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; overflow: hidden; background: #0a0b14; }
.code-block__bar { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); }
.code-block__lang { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.code-block__copy { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,255,255,.6); padding: 3px 8px; border-radius: 7px; transition: color .2s ease, background .2s ease; }
.code-block__copy:hover { color: #fff; background: rgba(255,255,255,.08); }
.code-block pre { margin: 0; padding: 13px 15px; overflow-x: auto; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.6; color: #e6e1f5; }
.code-block pre code { background: none; padding: 0; font-size: inherit; color: inherit; }

/* картинки-вложения в сообщениях */
.msg-image { display: block; max-width: 260px; max-height: 260px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); object-fit: cover; }
.msg-image-wrap { position: relative; display: inline-block; overflow: hidden; border-radius: 12px; }
.msg-image-wrap .msg-image-dl { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .2s ease; }
.msg-image-wrap:hover .msg-image-dl { opacity: 1; }

/* гамбургер открытия меню */
.menu-btn { width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); transition: background .2s ease, border-color .2s ease; flex: 0 0 auto; }
.menu-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
.menu-btn span { width: 18px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.85); transition: background .2s ease; }
.menu-btn:hover span { background: #fff; }

/* ==== Дым / туман (лёгкий, GPU-friendly) ==== */
.smoke { position: fixed; inset: -25%; z-index: 1; pointer-events: none; opacity: .9; will-change: transform; }
.smoke::before, .smoke::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  filter: blur(60px); mix-blend-mode: screen; will-change: transform;
}
.smoke::before {
  background:
    radial-gradient(closest-side at 28% 32%, rgba(176,166,224,.16), transparent 62%),
    radial-gradient(closest-side at 72% 58%, rgba(120,150,214,.13), transparent 60%);
  animation: smokeA 34s ease-in-out infinite alternate;
}
.smoke::after {
  background:
    radial-gradient(closest-side at 55% 80%, rgba(206,180,232,.12), transparent 60%),
    radial-gradient(closest-side at 40% 18%, rgba(150,140,210,.10), transparent 58%);
  animation: smokeB 46s ease-in-out infinite alternate;
}
@keyframes smokeA {
  0% { transform: translate3d(-4%, 1%, 0) scale(1.05); }
  100% { transform: translate3d(5%, -3%, 0) scale(1.2); }
}
@keyframes smokeB {
  0% { transform: translate3d(3%, -2%, 0) scale(1.12); }
  100% { transform: translate3d(-4%, 3%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .smoke { display: none; } }

/* ==== Галерея шаблонов сайтов ==== */
.templates-section {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(860px 440px at 50% -130px, rgba(124,96,255,.16), transparent 68%),
    radial-gradient(520px 360px at 8% 36%, rgba(76,111,190,.055), transparent 72%),
    #080809;
}
.templates-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .32;
  background-image: radial-gradient(rgba(255,255,255,.11) .7px, transparent .8px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 84%, transparent);
}
.templates-kicker span { color: rgba(214,208,255,.58); }
.templates-heading {
  text-wrap: balance;
  text-shadow: 0 12px 48px rgba(125,100,255,.13);
}
.templates-copy { text-wrap: pretty; }
.tpl-filter-rail {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(18,18,21,.86);
  box-shadow: 0 16px 46px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.tpl-grid { align-items: start; }
.tpl-card-layout { min-width: 0; height: 100%; }
.tpl-card-shell {
  position: relative;
  height: 100%;
  transform: translateZ(0);
}
.tpl-card-shell::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 8% 10% -5%;
  border-radius: 32px;
  pointer-events: none;
  opacity: 0;
  background: color-mix(in srgb, var(--tpl-accent) 23%, transparent);
  filter: blur(28px);
  transform: translateY(12px) scale(.92);
  transition: opacity .42s ease, transform .72s cubic-bezier(.16,1,.3,1);
}
.tpl-card-shell:hover::before, .tpl-card-shell:focus-within::before {
  opacity: .52;
  transform: translateY(4px) scale(1);
}
.templates-section.is-gallery-ready .tpl-card-shell {
  animation: tplBatchIn .46s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes tplBatchIn {
  from { opacity: .72; transform: translateY(9px) scale(.993); }
  to { opacity: 1; transform: none; }
}
.tpl-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-top-color: color-mix(in srgb, var(--tpl-accent) 28%, rgba(255,255,255,.08));
  border-radius: 24px;
  background: #161618;
  box-shadow: 0 1px rgba(255,255,255,.035) inset, 0 20px 54px rgba(0,0,0,.22);
  transform: translateZ(0);
  transition: transform .38s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .38s ease;
}
.tpl-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px rgba(255,255,255,.055);
}
.tpl-card::after {
  content: "";
  position: absolute;
  z-index: 8;
  top: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  pointer-events: none;
  background: var(--tpl-accent);
  opacity: .32;
  box-shadow: 0 0 20px color-mix(in srgb, var(--tpl-accent) 45%, transparent);
}
.tpl-card:hover, .tpl-card:focus-within {
  transform: translateY(-8px) scale(1.006);
  border-color: color-mix(in srgb, var(--tpl-accent) 28%, rgba(255,255,255,.16));
  box-shadow: 0 32px 78px rgba(0,0,0,.54), 0 1px rgba(255,255,255,.07) inset;
}
.tpl-shot {
  position: relative;
  aspect-ratio: 1.34 / 1;
  overflow: hidden;
  background: #111113;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
/* мини-шапка «браузера» с трафик-лайтами поверх превью */
.tpl-shot::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 24px; z-index: 4;
  background:
    radial-gradient(circle at 15px 12px, #ff5f57 3px, transparent 3.8px),
    radial-gradient(circle at 28px 12px, #febc2e 3px, transparent 3.8px),
    radial-gradient(circle at 41px 12px, #28c840 3px, transparent 3.8px),
    rgba(11,11,13,.9);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.tpl-shot::after {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(5,5,7,.12) 45%, rgba(5,5,7,.8));
  opacity: .35;
  transition: opacity .3s ease;
}
.tpl-card:hover .tpl-shot::after, .tpl-card:focus-within .tpl-shot::after { opacity: .76; }
.tpl-preview { position: absolute; inset: 0; overflow: hidden; }
.tpl-preview__poster {
  position: absolute;
  top: 24px;
  left: 0;
  width: 100%;
  height: calc(100% - 24px);
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transform: scale(1.015) translateZ(0);
  pointer-events: none;
  transition: opacity .28s ease, transform .7s cubic-bezier(.2,.8,.2,1), filter .4s ease;
}
.tpl-preview.is-ready .tpl-preview__poster { opacity: 1; }
.tpl-card:hover .tpl-preview__poster, .tpl-card:focus-within .tpl-preview__poster { transform: scale(1.055) translateY(-3px); filter: saturate(1.06) contrast(1.02); }
.tpl-preview__skeleton {
  position: absolute;
  inset: 24px 0 0;
  padding: 20px;
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--tpl-accent) 14%, transparent), transparent 34%),
    #17171b;
  transition: opacity .2s ease;
}
.tpl-preview.is-ready .tpl-preview__skeleton { opacity: 0; }
.tpl-preview__skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 24%, rgba(255,255,255,.055), transparent 76%);
  animation: tplSkeleton 1.25s ease-in-out infinite;
}
.tpl-preview__skeleton span { display: block; height: 9px; margin-top: 11px; border-radius: 999px; background: rgba(255,255,255,.07); }
.tpl-preview__skeleton span:nth-child(1) { width: 44%; height: 20px; margin-top: 22px; }
.tpl-preview__skeleton span:nth-child(2) { width: 72%; }
.tpl-preview__skeleton span:nth-child(3) { width: 58%; }
@keyframes tplSkeleton { to { transform: translateX(100%); } }
.tpl-preview-trigger { position: absolute; inset: 0; z-index: 3; border-radius: 0; cursor: pointer; }
.tpl-preview-trigger:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.tpl-shot__badge {
  position: absolute;
  top: 36px;
  left: 12px;
  z-index: 5;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--tpl-accent) 34%, rgba(255,255,255,.13));
  border-radius: 999px;
  color: rgba(255,255,255,.84);
  background: rgba(7,7,9,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.tpl-quick-actions {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 6;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .26s ease, transform .32s cubic-bezier(.2,.8,.2,1);
}
.tpl-card:hover .tpl-quick-actions, .tpl-card:focus-within .tpl-quick-actions { opacity: 1; transform: translateY(0); }
.tpl-quick-btn {
  flex: 1;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  color: #0a0a0d;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.32);
  font-size: 11px;
  font-weight: 750;
  transition: transform .2s ease, background-color .2s ease;
}
.tpl-quick-btn:hover { transform: translateY(-1px); }
.tpl-quick-btn--ghost { color: #fff; background: rgba(18,18,22,.78); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); }
.tpl-quick-btn svg { width: 13px; height: 13px; }
.tpl-body { min-height: 86px; padding: 16px 17px 17px; }
.tpl-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tpl-name { overflow: hidden; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.18; letter-spacing: .005em; text-overflow: ellipsis; white-space: nowrap; }
.tpl-tag { overflow: hidden; margin-top: 7px; color: rgba(255,255,255,.48); font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.tpl-arrow {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.035);
  transition: color .2s ease, background-color .2s ease, transform .25s ease;
}
.tpl-card:hover .tpl-arrow { color: #09090c; background: #fff; border-color: #fff; transform: rotate(4deg) scale(1.03); }
.tpl-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 999px; padding: 9px 12px; font-size: 12px; font-weight: 700;
  color: #0a0a0f; background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tpl-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.tpl-btn--ghost { color: rgba(255,255,255,.8); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.tpl-btn--ghost:hover { color: #fff; background: rgba(255,255,255,.12); box-shadow: none; }
.tpl-btn svg { width: 13px; height: 13px; }
.tpl-chip {
  position: relative; isolation: isolate;
  border: 1px solid transparent; border-radius: 999px; padding: 8px 15px;
  font-size: 12px; color: rgba(255,255,255,.6);
  transition: color .3s ease, border-color .3s ease, background-color .3s ease, transform .3s ease;
}
.tpl-chip:hover { color: #fff; background: rgba(255,255,255,.055); }
.tpl-chip.is-active {
  background: transparent;
  color: #0a0a0f;
  border-color: transparent;
  font-weight: 700;
}
.tpl-chip__active {
  position: absolute;
  z-index: -1;
  inset: -1px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: inherit;
  background: linear-gradient(135deg, #ffffff, #eeeaff 62%, #ddd7ff);
  box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 24px rgba(159,139,255,.12);
}
.tpl-chip__label { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .templates-section.is-gallery-ready .tpl-card-shell { animation: none; }
  .tpl-card:hover .tpl-preview__poster { transform: scale(1.02); }
  .tpl-preview__skeleton::after { animation: none; }
}

/* модалка предпросмотра шаблона */
.tpl-modal {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  background:
    radial-gradient(720px 460px at 50% 42%, rgba(116,91,255,.12), transparent 68%),
    rgba(3,4,9,.9);
  backdrop-filter: blur(22px);
}
.tpl-modal__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(6,7,14,.58);
  backdrop-filter: blur(22px);
}
.tpl-modal__stage { flex: 1; min-height: 0; padding: 14px; display: flex; justify-content: center; }
.tpl-modal__frame { position: relative; width: 100%; height: 100%; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; overflow: hidden; background: #0a0a12; box-shadow: 0 36px 110px rgba(0,0,0,.58), 0 0 70px rgba(127,99,255,.08); transition: max-width .52s cubic-bezier(.16,1,.3,1), border-radius .4s ease; }
.tpl-modal__frame iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; background: #fff; }
.tpl-modal__poster { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #0a0a12; pointer-events: none; opacity: 1; transition: opacity .42s ease; }
.tpl-modal__poster.is-hidden { opacity: 0; }

/* ==== чат: защита от горизонтального переполнения (сообщения не обрезаются) ==== */
.chat-scroll { overflow-x: hidden; }
.message-row { min-width: 0; max-width: 100%; }
.user-message, .assistant-message { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

/* ==== реакции: пружинка при выборе ==== */
.message-actions button { transition: color .2s ease, background .2s ease, transform .15s ease; }
.message-actions button:active { transform: scale(.85); }
.message-actions button.is-active svg { animation: reactPop .5s cubic-bezier(.2,.8,.2,1); }
@keyframes reactPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.55) rotate(-10deg); }
  100% { transform: scale(1); }
}

/* ==== всплеск после успешной оплаты ==== */
.pay-burst { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; pointer-events: none; }
.pay-burst::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(124,96,255,.26), transparent 44%); animation: burstFade 2.8s ease forwards; }
.pay-burst__core {
  position: relative; z-index: 2; width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center; color: #0a0a0f; background: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 30px 90px rgba(0,0,0,.55), 0 0 90px rgba(163,132,255,.6);
  animation: burstCore 2.8s cubic-bezier(.2,.8,.2,1) forwards;
}
.pay-burst__core svg { width: 42px; height: 42px; }
.pay-burst__ring { position: absolute; width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); animation: burstRing 1.7s ease-out forwards; }
.pay-burst__ring--two { animation-delay: .22s; }
.pay-burst__spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #fff, #a889ff); animation: burstSpark 1.5s cubic-bezier(.2,.8,.3,1) forwards; }
.pay-burst__label { position: absolute; z-index: 2; margin-top: 168px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.9); letter-spacing: .05em; animation: burstFade 2.8s ease forwards; }
@keyframes burstCore {
  0% { transform: scale(0); }
  16% { transform: scale(1.14); }
  26% { transform: scale(1); }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.9); opacity: 0; }
}
@keyframes burstRing { 0% { transform: scale(.6); opacity: .95; } 100% { transform: scale(3.6); opacity: 0; } }
@keyframes burstSpark { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.35); opacity: 0; } }
@keyframes burstFade { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pay-burst { display: none; } }

/* ==== кроссфейд фоновых видео (вкладки студии) ==== */
.cosmic-video-bg { transition: opacity 1s ease; }
.cosmic-video-bg.is-hidden { opacity: 0; }

/* ==== мягкий пульс кнопки отправки ==== */
.tg-send-btn:not(:disabled) { animation: sendPulse 3.6s ease-in-out infinite; }
@keyframes sendPulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.9); }
  50% { box-shadow: 0 8px 26px rgba(0,0,0,.42), 0 0 26px rgba(170,140,255,.4), inset 0 1px rgba(255,255,255,.9); }
}
@media (prefers-reduced-motion: reduce) { .tg-send-btn:not(:disabled) { animation: none; } }

/* ==== карточка сборки сайта в чате: одна рамка, без пузыря-обёртки ==== */
.chat-site-card {
  width: min(100%, 820px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(6,7,15,.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.chat-site-card__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.35);
}
.chat-site-card__url {
  flex: 1; min-width: 0; margin: 0 4px;
  border-radius: 999px; background: rgba(255,255,255,.05);
  padding: 3px 12px; font-size: 10px; color: rgba(255,255,255,.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-site-card__stage { height: min(44vh, 400px); background: #0a0b12; }
.chat-site-card__stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.chat-site-card__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.3);
}

/* компактная полоска неудачной сборки */
.chat-site-fail {
  width: min(100%, 660px);
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  background: rgba(8,9,18,.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.chat-site-fail__icon {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.7);
}

/* ==== киноэффекты: плёночное зерно поверх всего ==== */
body::after {
  content: "";
  position: fixed;
  inset: -80px;
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: .06;
  mix-blend-mode: screen;
  animation: grainShift 3.2s steps(1, end) infinite;
}
@keyframes grainShift {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-26px, 18px); }
  40% { transform: translate(20px, -24px); }
  60% { transform: translate(-14px, -12px); }
  80% { transform: translate(24px, 10px); }
}

/* ==== третий слой дыма — медленный дрейф самого контейнера ==== */
.smoke {
  background:
    radial-gradient(closest-side at 68% 22%, rgba(150,128,230,.08), transparent 64%),
    radial-gradient(closest-side at 20% 78%, rgba(96,140,220,.06), transparent 60%);
  animation: smokeC 56s ease-in-out infinite alternate;
}
@keyframes smokeC {
  0% { transform: translate3d(2%, 1%, 0) scale(1.04); }
  100% { transform: translate3d(-3%, -2%, 0) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; opacity: .04; }
}

@media (max-width: 900px), (update: slow) {
  body::after { animation: none; opacity: .035; }
}

/* ==== тарифы: дым и киносвет ==== */
.pricing-fog { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.pricing-fog span { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; will-change: transform; }
.pricing-fog span:nth-child(1) { width: 560px; height: 380px; left: -140px; top: 80px; background: radial-gradient(closest-side, rgba(139,110,255,.15), transparent 70%); animation: fogA 26s ease-in-out infinite alternate; }
.pricing-fog span:nth-child(2) { width: 640px; height: 420px; right: -180px; top: 280px; background: radial-gradient(closest-side, rgba(84,150,255,.12), transparent 70%); animation: fogB 33s ease-in-out infinite alternate; }
.pricing-fog span:nth-child(3) { width: 520px; height: 360px; left: 32%; bottom: -140px; background: radial-gradient(closest-side, rgba(214,120,255,.1), transparent 70%); animation: fogC 39s ease-in-out infinite alternate; }
.pricing-fog span:nth-child(4) { width: 720px; height: 300px; left: 50%; top: -60px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(190,170,255,.14), transparent 72%); animation: fogD 22s ease-in-out infinite alternate; }
@keyframes fogA { to { transform: translate3d(70px, 40px, 0) scale(1.16); } }
@keyframes fogB { to { transform: translate3d(-80px, -34px, 0) scale(1.1); } }
@keyframes fogC { to { transform: translate3d(54px, -48px, 0) scale(1.2); } }
@keyframes fogD { 0% { transform: translateX(-50%) scale(1); } 100% { transform: translateX(-44%) scale(1.12); } }

/* световой блик по карте тарифа при наведении */
.plan-card { position: relative; }
.plan-card::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -72%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
  transform: skewX(-16deg); pointer-events: none; transition: left .9s ease;
}
.plan-card:hover::after { left: 132%; }

@media (prefers-reduced-motion: reduce) { .pricing-fog span { animation: none; } }

/* ==== мобильный кинематограф (сенсорные устройства) ==== */
@media (hover: none) {
  .tpl-quick-actions { opacity: 1; transform: none; }
  .tpl-shot::after { opacity: .5; }
  /* тактильный отклик на касание */
  .tpl-btn:active, .tpl-quick-btn:active, .cosmic-button:active, .tpl-chip:active, .navlink:active, .icon-action:active { transform: scale(.95); }
  /* легче блюры — плавность на слабых GPU */
  .smoke::before, .smoke::after { filter: blur(44px); }
  .pricing-fog span { filter: blur(50px); }
  .tpl-card:hover { transform: none; }
}
@media (max-width: 639px) {
  .site-nav { position: absolute !important; padding-left: 16px !important; padding-right: 16px !important; }
  .templates-section { padding-left: 16px !important; padding-right: 16px !important; }
  .tpl-filter-rail {
    width: auto;
    max-width: none;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    margin-left: -16px;
    margin-right: -16px;
    padding: 5px 16px 10px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background: rgba(13,13,15,.82);
    box-shadow: none;
    scrollbar-width: none;
  }
  .tpl-filter-rail::-webkit-scrollbar { display: none; }
  .tpl-chip { flex: 0 0 auto; }
  .tpl-shot { aspect-ratio: 1.38 / 1; }
  .tpl-body { min-height: 78px; padding: 14px 15px 15px; }
  .tpl-name { font-size: 18px; }
}

/* ==== УЛЬТРА-анимация «ИИ думает» (GPU-friendly: rotate/opacity/bg-position) ==== */
.think {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 20px 14px 15px;
  border: 1px solid rgba(184,160,255,.2);
  border-radius: 20px 20px 20px 6px;
  background: linear-gradient(145deg, rgba(16,14,38,.86), rgba(6,7,17,.72));
  box-shadow: 0 20px 60px rgba(60,36,128,.24), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  position: relative; overflow: hidden;
}
.think::after { /* пробегающий блик */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
  transform: translateX(-100%); animation: thinkSweep 2.4s ease-in-out infinite;
}
@keyframes thinkSweep { 0%,60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.think__orb { position: relative; width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; }
.think__orb::before { /* мягкая аура */
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(150,124,255,.5), transparent 68%);
  animation: thinkAura 1.8s ease-in-out infinite;
}
.think__ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 30%, #a889ff 55%, #68cfff 78%, transparent 92%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: thinkSpin 1.05s linear infinite;
}
.think__core { width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, #fff, #a889ff 55%, #68cfff);
  box-shadow: 0 0 16px rgba(168,148,255,.9);
  animation: thinkPulse 1.4s ease-in-out infinite;
}
.think__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.think__title { font-size: 13px; font-weight: 700; line-height: 1;
  background: linear-gradient(100deg, #cfc4ff 0%, #ffffff 30%, #9fd0ff 55%, #ffffff 78%, #cfc4ff 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: thinkShimmer 2.6s linear infinite;
}
.think__phase { font-size: 10.5px; color: rgba(255,255,255,.4); line-height: 1.2; }
@keyframes thinkSpin { to { transform: rotate(360deg); } }
@keyframes thinkPulse { 0%,100% { transform: scale(.82); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes thinkAura { 0%,100% { opacity: .4; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.15); } }
@keyframes thinkShimmer { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) {
  .think::after, .think__ring, .think__core, .think__orb::before, .think__title { animation-duration: 3s; }
}

/* ==== чат: только вертикальная прокрутка, без горизонтального «возюканья» ==== */
.chat-scroll { overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; }
.app-shell, .app-workspace { overflow-x: clip; }
.message-row { max-width: 100%; }

/* ==== полировка пузырей сообщений ==== */
.assistant-message { border-radius: 20px 20px 20px 6px; }
.user-message { border-radius: 20px 20px 6px 20px; }
.message-row.is-assistant .assistant-message { animation: msgIn .4s cubic-bezier(.2,.7,.2,1) both; }
.message-row.is-user .user-message { animation: msgInR .4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes msgInR { from { opacity: 0; transform: translateY(8px) translateX(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .message-row .assistant-message, .message-row .user-message { animation: none; } }

/* ==== иконка в карточке-примере запроса ==== */
.prompt-card__ic {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 9px; color: rgba(200,186,255,.9);
  background: rgba(140,120,255,.1); border: 1px solid rgba(160,140,255,.16);
}
.prompt-card__ic svg { width: 15px; height: 15px; }
.prompt-card:hover .prompt-card__ic { color: #fff; background: rgba(150,124,255,.2); }
@media (max-width: 640px) {
  .prompt-card { min-height: 56px; padding: 12px 13px; gap: 12px; font-size: 13px; }
}

/* ==== безопасный вход контента (CSS — корректно мгновенно показывается при reduce-motion) ==== */
.fade-rise { animation: fadeRise .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fadeRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.animated-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .26em;
  row-gap: .03em;
  /* Шрифт НЕ переопределяем — берётся фирменный из font-heading/font-body */
}
.animated-word {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.prompt-card { transition: border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, transform .18s ease; }
.prompt-card:hover { transform: translateY(-3px); }
.prompt-card:active { transform: scale(.975); }

/* ==== курсор печати ответа ИИ ==== */
.stream-caret {
  display: inline-block; width: 8px; height: 1.05em; margin-left: 2px;
  vertical-align: -2px; border-radius: 2px;
  background: linear-gradient(180deg, #cdbcff, #7fb4ff);
  box-shadow: 0 0 10px rgba(150,124,255,.8);
  animation: caretBlink 1s steps(1,end) infinite;
}
.assistant-message.is-streaming :is(p,li,h1,h2,h3,pre):last-child { display: inline; }
@keyframes caretBlink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stream-caret { animation: none; opacity: .8; } }

/* ============================================================
   Апдейт: кино-тарифы, скрытие кнопок паузы видео, режим слабого
   устройства (.low-power), плавность. GPU-friendly (transform/opacity).
   ============================================================ */

/* ---- фоновые видео: убрать нативные кнопки паузы/плей (моб. Safari/Chrome) ---- */
.cosmic-video-bg, .hero-preroll { pointer-events: none; }
video.cosmic-video-bg::-webkit-media-controls,
video.cosmic-video-bg::-webkit-media-controls-enclosure,
video.cosmic-video-bg::-webkit-media-controls-panel,
video.cosmic-video-bg::-webkit-media-controls-start-playback-button,
video.cosmic-video-bg::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
}

/* ---- тарифы: кино-свет за заголовком ---- */
#pricing::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 6%; width: 130%; height: 360px; transform: translateX(-50%);
  background: radial-gradient(60% 100% at 50% 0%, rgba(150,124,255,.16), transparent 70%);
  animation: priceBeam 9s ease-in-out infinite;
}
@keyframes priceBeam { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ---- карточки тарифа: мягкое парение + свечение выделенной ---- */
.plan-card { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
.pricing-grid .plan-wrap { animation: planFloat 7s ease-in-out infinite; }
.pricing-grid .plan-wrap:nth-child(2) { animation-delay: -2.3s; }
.pricing-grid .plan-wrap:nth-child(3) { animation-delay: -4.6s; }
@keyframes planFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.aurora-border { box-shadow: 0 0 0 0 rgba(150,124,255,0); animation: featuredGlow 4.5s ease-in-out infinite; }
@keyframes featuredGlow {
  0%,100% { box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 40px rgba(150,124,255,.14); }
  50% { box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 70px rgba(140,170,255,.34); }
}

/* ---- бейдж тарифа: встроен в заголовок карточки, без отдельной полосы ---- */
.plan-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
}
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.plan-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  opacity: .88;
}
.plan-badge--featured {
  border-color: rgba(255,255,255,.72);
  color: #090910;
  background: #fff;
  box-shadow: 0 8px 24px rgba(255,255,255,.08);
}
.plan-badge--featured::before {
  color: #7d68ff;
}
.plan-badge--premium {
  border-color: rgba(183,168,255,.24);
  color: #e8e3ff;
  background: linear-gradient(135deg, rgba(170,148,255,.12), rgba(111,150,255,.055));
}
.plan-badge--premium::before {
  color: #c9bcff;
}
@media (max-width: 380px) {
  .plan-card__heading { align-items: flex-start; flex-direction: column; gap: 10px; }
}

/* ============ Режим слабого устройства: отключаем тяжёлое, чтобы не лагало ============ */
.low-power .pricing-fog span { animation: none !important; filter: blur(34px); opacity: .7; }
.low-power .smoke { display: none !important; }
.low-power body::after { display: none !important; }            /* плёночное зерно */
.low-power #pricing::before,
.low-power .plan-card,
.low-power .aurora-border,
.low-power .pricing-grid .plan-wrap { animation: none !important; }
.low-power .plan-badge::before { box-shadow: none; }
.low-power .cosmic-video-veil::before { animation: none !important; }
.low-power .liquid-glass, .low-power .liquid-glass-strong { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.low-power .think::after { animation: none !important; }

/* ============================================================
   Секция «Возможности»: вместо второго видео — глубокий чёрный фон
   с реалистичным дрейфующим дымом (никаких повторов/переходов видео).
   Скрытое видео не грузится (IntersectionObserver не срабатывает на display:none).
   ============================================================ */
.section-transition.instant-media-surface {
  background: radial-gradient(ellipse at 50% 26%, #0a0b13 0%, #050609 55%, #020306 100%) !important;
}
.section-transition.instant-media-surface > video,
.section-transition.instant-media-surface video { display: none !important; }

.section-transition.instant-media-surface::before {
  content: ""; position: absolute; inset: -22%; z-index: 0; pointer-events: none;
  opacity: .85;
  background:
    radial-gradient(closest-side at 30% 38%, rgba(150,140,180,.11), transparent 60%),
    radial-gradient(closest-side at 68% 60%, rgba(110,124,168,.09), transparent 60%),
    radial-gradient(closest-side at 50% 82%, rgba(96,84,140,.08), transparent 62%);
  filter: blur(46px);
  mix-blend-mode: screen;
  transform: translateZ(0);
  animation: capSmokeA 34s ease-in-out infinite alternate;
}
.section-transition.instant-media-surface::after {
  content: ""; position: absolute; inset: -26%; z-index: 0; pointer-events: none;
  opacity: .7;
  background:
    radial-gradient(closest-side at 62% 30%, rgba(126,116,170,.10), transparent 58%),
    radial-gradient(closest-side at 24% 72%, rgba(92,104,156,.08), transparent 60%);
  filter: blur(62px);
  mix-blend-mode: screen;
  transform: translateZ(0);
  animation: capSmokeB 46s ease-in-out infinite alternate;
}
@keyframes capSmokeA {
  0%   { transform: translate3d(-4%, 2%, 0) scale(1.05); }
  100% { transform: translate3d(6%, -3%, 0) scale(1.24); }
}
@keyframes capSmokeB {
  0%   { transform: translate3d(4%, -2%, 0) scale(1.16); }
  100% { transform: translate3d(-5%, 4%, 0) scale(1.02); }
}
/* слабое устройство / reduce-motion: дым статичный и легче */
.low-power .section-transition.instant-media-surface::before,
.low-power .section-transition.instant-media-surface::after { animation: none !important; filter: blur(30px); }
@media (prefers-reduced-motion: reduce) {
  .section-transition.instant-media-surface::before,
  .section-transition.instant-media-surface::after { animation: none !important; }
}

/* ============================================================
   Кинематографичный отклик контролов: локальный свет следует за
   курсором, а короткий блик проходит без transform и без reflow.
   ============================================================ */
.cinema-control {
  --cinema-x: 50%;
  --cinema-y: 50%;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.cinema-control:not(.cinema-control--positioned) { position: relative; }
.cinema-control::after {
  content: "";
  position: absolute;
  z-index: 12;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(110px circle at var(--cinema-x) var(--cinema-y), rgba(255,255,255,.2), rgba(174,153,255,.075) 42%, transparent 72%),
    linear-gradient(104deg, transparent 14%, rgba(255,255,255,.18) 48%, transparent 82%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 34% 100%;
  background-position: 0 0, -62% 0;
  box-shadow: inset 0 0 0 1px rgba(223,215,255,.08);
  mix-blend-mode: screen;
  transition:
    opacity .2s ease,
    background-position .72s cubic-bezier(.18,.74,.2,1),
    box-shadow .26s ease;
}
@media (hover: hover) and (pointer: fine) {
  .cinema-control:not(:disabled):hover::after,
  .cinema-control:focus-visible::after {
    opacity: .92;
    background-position: 0 0, 164% 0;
    box-shadow: inset 0 0 0 1px rgba(236,231,255,.16), inset 0 -10px 32px rgba(127,105,255,.055);
  }
}
.cinema-control:not(:disabled):active::after {
  opacity: .68;
  background-position: 0 0, 164% 0;
  box-shadow: inset 0 3px 16px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.12);
}
.cinema-control:disabled::after { display: none; }
.low-power .cinema-control::after { display: none !important; }

/* ============================================================
   Шаблоны внутри конструктора: статичные готовые постеры вместо
   12 iframe. Быстрее, ровнее и визуально ближе к продуктовой галерее.
   ============================================================ */
.site-template-section {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 26px;
  background:
    radial-gradient(440px 190px at 18% 0%, rgba(144,117,255,.1), transparent 72%),
    linear-gradient(145deg, rgba(13,14,24,.82), rgba(7,8,15,.66));
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 24px 70px rgba(0,0,0,.2);
}
.site-template-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 2px 16px;
}
.site-template-kicker {
  display: block;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .015em;
}
.site-template-count {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.035);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-template-rail {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, calc(50% - 6px));
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  padding: 4px 4px 14px;
  margin: -4px -4px -8px;
}
.site-template-card {
  --site-tpl-accent: #a998ff;
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,.09);
  border-top-color: color-mix(in srgb, var(--site-tpl-accent) 35%, rgba(255,255,255,.12));
  border-radius: 20px;
  color: #fff;
  background: rgba(17,18,24,.94);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 16px 36px rgba(0,0,0,.2);
  text-align: left;
  transform: translateZ(0);
  transition:
    transform .36s cubic-bezier(.16,1,.3,1),
    border-color .3s ease,
    box-shadow .36s ease,
    background-color .3s ease;
}
.site-template-card::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  pointer-events: none;
  opacity: .55;
  background: linear-gradient(90deg, transparent, var(--site-tpl-accent), transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--site-tpl-accent) 45%, transparent);
}
.site-template-preview {
  position: relative;
  display: block;
  aspect-ratio: 720 / 520;
  overflow: hidden;
  background: #0d0e14;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-template-preview::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 36% 0 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(4,5,9,.12) 42%, rgba(4,5,9,.74));
  transition: opacity .3s ease;
}
.site-template-preview > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: saturate(.94) contrast(1.02);
  transform: scale(1.015);
  transition: transform .72s cubic-bezier(.16,1,.3,1), filter .35s ease;
}
.site-template-browser {
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(8,9,13,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-template-browser i {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
}
.site-template-browser i:first-child { background: #ff6b63; }
.site-template-browser i:nth-child(2) { background: #f6c758; }
.site-template-browser i:nth-child(3) { background: #48cb72; }
.site-template-browser b {
  width: 36%;
  height: 4px;
  margin-left: auto;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
}
.site-template-category {
  position: absolute;
  z-index: 3;
  top: 34px;
  left: 10px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--site-tpl-accent) 36%, rgba(255,255,255,.12));
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(7,8,12,.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.site-template-use {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.64);
  border-radius: 999px;
  color: #0b0b0e;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  font-size: 9px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .24s ease, transform .32s cubic-bezier(.16,1,.3,1);
}
.site-template-meta {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 11px;
  align-items: start;
  min-height: 72px;
  padding: 13px 14px 14px;
}
.site-template-index {
  padding-top: 2px;
  color: color-mix(in srgb, var(--site-tpl-accent) 75%, white);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}
.site-template-name,
.site-template-tagline { display: block; }
.site-template-name {
  overflow: hidden;
  color: rgba(255,255,255,.96);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-template-tagline {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 5px;
  color: rgba(255,255,255,.43);
  font-size: 9.5px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.site-template-card:hover,
.site-template-card:focus-visible {
  border-color: color-mix(in srgb, var(--site-tpl-accent) 44%, rgba(255,255,255,.16));
  background: rgba(21,22,30,.97);
  box-shadow: 0 26px 56px rgba(0,0,0,.38), 0 0 32px color-mix(in srgb, var(--site-tpl-accent) 10%, transparent);
  transform: translateY(-4px);
}
.site-template-card:hover .site-template-preview > img,
.site-template-card:focus-visible .site-template-preview > img {
  filter: saturate(1.03) contrast(1.03);
  transform: scale(1.055) translateY(-2px);
}
.site-template-card:hover .site-template-use,
.site-template-card:focus-visible .site-template-use {
  opacity: 1;
  transform: translateY(0);
}
.site-template-card:focus-visible {
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 3px;
}
.site-template-card:active { transform: translateY(-1px) scale(.985); }
.site-template-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 9px;
  color: rgba(255,255,255,.27);
  font-size: 9px;
  letter-spacing: .04em;
}
.site-template-scroll-hint span {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35));
}

@media (hover: none) {
  .cinema-control:not(:disabled):active::after { opacity: .52; }
  .site-template-use { opacity: 1; transform: none; }
  .site-template-card:hover { transform: none; }
}
@media (max-width: 639px) {
  .site-template-section { margin-left: -4px; margin-right: -4px; padding: 14px; border-radius: 22px; }
  .site-template-heading { align-items: flex-start; padding-bottom: 13px; }
  .site-template-count { margin-top: 1px; }
  .site-template-rail { grid-auto-columns: minmax(246px, 84%); }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-control::after {
    background-image: radial-gradient(110px circle at var(--cinema-x) var(--cinema-y), rgba(255,255,255,.16), transparent 74%);
    transition: opacity .12s ease;
  }
  .site-template-card,
  .site-template-preview > img,
  .site-template-use { transition: none !important; }
  .site-template-card:hover,
  .site-template-card:focus-visible,
  .site-template-card:hover .site-template-preview > img,
  .site-template-card:focus-visible .site-template-preview > img { transform: none; }
}
.low-power .site-template-preview > img { transition: none; }
.low-power .site-template-card:hover .site-template-preview > img { transform: none; }