:root{
  --tg-safe-top: 0px;
  --tg-safe-right: 0px;
  --tg-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tg-safe-left: 0px;

  /* Palette (palitra.jpeg) */
  --bg0:#0b0b0e;
  --bg1:#1B192B;
  --bg2:#2C2A3C;
  --bg3:#2B2959;
  --line:#55515F;
  --line2:#6D6974;
  --muted:#86858F;
  --muted2:#A6A1A8;
  --primary:#8E9EE6;

  /* System */
  --glass:rgba(44,42,60,.58);
  --glass2:rgba(27,25,43,.55);
  --stroke:rgba(109,105,116,.55);
  --stroke2:rgba(85,81,95,.45);
  --text:rgba(255,255,255,.92);
  --text-soft:rgba(255,255,255,.78);
  --text-dim:rgba(255,255,255,.62);

  --accent:var(--primary);
  --accent2:var(--bg3);
  --danger:#ff4d6d;
  --ok:#39d98a;
  --radius:18px;
  --radius2:24px;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --shadow2:0 8px 20px rgba(0,0,0,.35);
  --blur:18px;
  --gap:14px;
  --max:1100px;
  --phone:420px;
  font-synthesis-weight:none;
}

*{box-sizing:border-box}
html,body{height:100%;padding-top:var(--tg-safe-top);padding-left:var(--tg-safe-left);padding-right:var(--tg-safe-right);}
body{
  margin:0;
  color:var(--text);
  font-family:ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  background:var(--bg0);
}
body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:url("/static/img/bg2.png");
  background-repeat:repeat;
  background-size:32px 51px;
  background-position:left top;
  opacity:.2;
  z-index:-1;
  pointer-events:none;
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}

.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:linear-gradient(135deg, rgba(11,11,14,.18), rgba(11,11,14,.10) 45%, rgba(11,11,14,0) 78%)}
.bg__glow{position:absolute;inset:-120px;filter:blur(70px);
  background:
    radial-gradient(820px 520px at 20% 28%, rgba(43,41,89,.58), transparent 62%),
    radial-gradient(660px 460px at 82% 12%, rgba(142,158,230,.40), transparent 60%),
    radial-gradient(580px 460px at 78% 88%, rgba(44,42,60,.55), transparent 66%);
  opacity:0;
}
.bg__noise{position:absolute;inset:0;opacity:.14;mix-blend-mode:overlay;background-image:url("/static/img/noise.svg");background-size:240px 240px;}

.shell{min-height:100%;display:flex;align-items:center;justify-content:center;padding:26px 16px;}

/* The app "screen" is centered like in your mocks */
.screen{
  width:min(var(--max), 100%);
  border:1px solid rgba(142,158,230,.30);
  border-radius:var(--radius2);
  background:rgba(10,10,16,.35);
  box-shadow:0 20px 80px rgba(0,0,0,.55);
  padding:18px;
  position:relative;
}

/* On small devices we keep it phone-like */
@media (max-width: 520px){
  /* Mobile should feel like a real phone display (no "frame" lines inside) */
  .shell{padding:0;align-items:stretch;justify-content:flex-start}
  .screen{width:100%;padding:14px 14px 0;border-radius:0;border:none;background:transparent;box-shadow:none}
  /*body.is-tg-host .screen{padding-top:calc(14px + var(--tg-safe-top));}
  body.is-tg-host .topbar{margin-top:max(0px, calc(var(--tg-safe-top) - 10px));}*/
}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;letter-spacing:.2px}
.brand__logo{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.brand__logo svg{
  width:100%;
  height:100%;
  display:block;
}
.brand__arrow{
  width: 20px;
  height: 20px;
  flex: 0 0 30px;
  display: none;
  cursor: pointer;
  background: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M111.213,165.004L250.607,25.607c5.858-5.858,5.858-15.355,0-21.213c-5.858-5.858-15.355-5.858-21.213,0.001l-150,150.004C76.58,157.211,75,161.026,75,165.004c0,3.979,1.581,7.794,4.394,10.607l150,149.996C232.322,328.536,236.161,330,240,330s7.678-1.464,10.607-4.394c5.858-5.858,5.858-15.355,0-21.213L111.213,165.004z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 330'%3E%3Cpath d='M111.213,165.004L250.607,25.607c5.858-5.858,5.858-15.355,0-21.213c-5.858-5.858-15.355-5.858-21.213,0.001l-150,150.004C76.58,157.211,75,161.026,75,165.004c0,3.979,1.581,7.794,4.394,10.607l150,149.996C232.322,328.536,236.161,330,240,330s7.678-1.464,10.607-4.394c5.858-5.858,5.858-15.355,0-21.213L111.213,165.004z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.brand.is-back .brand__arrow{display:inline-block}
.brand.is-back .brand__logo{display:none}
.brand__name{opacity:.9;font-size:26px;line-height:1}

.topbar__right{display:flex;align-items:center;gap:10px}
.avatar{width:28px;height:28px;border-radius:10px;overflow:hidden;border:1px solid var(--stroke);background:var(--glass2)}
.avatar img{width:100%;height:100%;display:block}

.desktopNotice{
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255, 186, 77, .12);
  color: rgba(255,255,255,.92);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
}

body.desktop-notice-only #app-header,
body.desktop-notice-only #app-view,
body.desktop-notice-only #app-nav{
  display:none !important;
}

body.desktop-notice-only .shell{
  min-height:100vh;
  padding:24px;
  align-items:center;
  justify-content:center;
}

body.desktop-notice-only .screen{
  width:min(var(--max), 100%);
  min-height:calc(100vh - 48px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

body.desktop-notice-only #desktop-notice{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:min(880px, 100%);
  min-height:160px;
  margin:0;
  padding:24px 28px;
  border-radius:16px;
  font-size:clamp(20px, 2.2vw, 34px);
  line-height:1.3;
}

.content{padding-bottom:76px}

.bottomnav{
  position:absolute;left:18px;right:18px;bottom:18px;
  display:flex;justify-content:space-between;gap:8px;
  padding:10px 12px;border-radius:16px;
  /* Fallback for old iOS / Telegram WKWebView without backdrop-filter support */
  background:linear-gradient(180deg, rgba(22,22,28,.94), rgba(16,16,22,.90));
  border:1px solid var(--stroke2);
}

@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .bottomnav{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter:blur(var(--blur));
  }
}

/* --- Bottom nav iOS-style indicator (Telegram-like) --- */
.bottomnav__indicator{
  position:absolute;
  top:6px;
  left:0;
  height:calc(100% - 12px);
  width:0px;
  border-radius:12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.28);
  pointer-events:none;
  opacity:0;
  transform:translateX(0px);
  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1),
    width 220ms cubic-bezier(.2,.8,.2,1),
    opacity 120ms linear;
}

/* Enable "indicator mode" only after JS activates it (so server-render fallback stays the same) */
.bottomnav.bottomnav--enhanced .bottomnav__item.is-active{
  background:transparent;
  border-color:transparent;
  color:var(--text);
}

.bottomnav.bottomnav--enhanced .bottomnav__item .ico{
  transition: transform 150ms ease, opacity 150ms ease;
  opacity:.8;
}
.bottomnav.bottomnav--enhanced .bottomnav__item .lbl{
  transition: opacity 150ms ease;
  opacity:.85;
}
.bottomnav.bottomnav--enhanced .bottomnav__item.is-active .ico{
  transform: scale(1.08);
  opacity:1;
}
.bottomnav.bottomnav--enhanced .bottomnav__item.is-active .lbl{
  opacity:1;
}/* Responsive helpers */
.mobile-only{display:none}
.desktop-only{display:block}

@media (max-width: 520px){
  .desktop-only{display:none !important}
  .mobile-only{display:block !important}

  /* Fixed bottom navigation for mobile (always доступен) */
  .bottomnav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(6px + env(safe-area-inset-bottom));
    z-index:50;
  }

  .content{padding-bottom:104px}
}

/* iOS Safari/WebKit: визуально приближаем таббар к нижней строке браузера */
@media (max-width: 520px){
  @supports (-webkit-touch-callout: none) {
    .bottomnav{
      bottom:calc(2px + env(safe-area-inset-bottom));
    }
  }
}
.bottomnav__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border-radius:12px;color:var(--text-dim);font-size:11px}
.bottomnav__item{min-width:0;box-sizing:border-box}
.bottomnav__item .ico{font-size:15px;opacity:.9}
.bottomnav__item .lbl{
  display:block;
  width:100%;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.bottomnav .ico__svg{
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.bottomnav__item.is-active{
  background:rgba(255,255,255,.07);
  color:var(--text);
  border:1px solid rgba(255,255,255,.28);
}

@supports (view-transition-name: foo) {
  /* таббар = отдельная группа */
  .bottomnav { view-transition-name: bottomnav; }

  /* убираем fade для таббара */
  view-transition-group(bottomnav),
  view-transition-old(bottomnav),
  view-transition-new(bottomnav) {
    animation: none !important;
  }
}

@media (max-width: 375px){
  .bottomnav{
    left:10px;
    right:10px;
    padding:8px 8px;
    gap:4px;
    border-radius:14px;
  }
  .bottomnav__indicator{
    top:4px;
    height:calc(100% - 8px);
    border-radius:10px;
  }
  .bottomnav__item{
    gap:3px;
    padding:7px 3px;
    font-size:10px;
    border-radius:10px;
  }
  .bottomnav__item .ico{
    font-size:14px;
  }
  .bottomnav .ico__svg{
    width:18px;
    height:18px;
  }
  .bottomnav__item .lbl{
    font-size:10px;
    letter-spacing:-.01em;
  }
}

/* Доп. ужатие для 375px на базе mobile-правил (520px), без изменения визуальной концепции */
@media (max-width: 375px){
  .screen{
    padding:12px 12px 0;
  }
  .content{
    padding-bottom:98px;
  }
  .brand__name{
    font-size:22px;
  }
  .pill--balance{
    font-size:14px;
    padding:8px 10px;
  }
  .pill--balance .pill__label{
    font-size:12px;
  }
  .pill--balance .pill__value{
    font-size:14px;
  }
}

/* Generic cards */
.card{
  background: #1a1a1b; /* linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));  #111018;  var(--glass); */
  border:1px solid var(--stroke2);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  backdrop-filter:blur(var(--blur));
  padding:14px;
}
.card__title{font-size:20px;color:var(--text-soft);font-weight:600;letter-spacing:.2px;margin-bottom:10px}
.divider{height:1px;background:rgba(255,255,255,.06);margin:14px 0}
.muted{color:var(--text-dim);font-size:15px;line-height:1.35}

.promptCard {
  background: #0b0b0e;
}

.anotherVariantsCard {
  background: #0b0b0e;
}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;border:1px solid var(--stroke2);background:rgba(255,255,255,.035);font-size:11px;color:var(--text-dim)}
.pill__label{opacity:.85}
.pill__value{color:var(--text);font-weight:600}
.pill--ghost{background:rgba(255,255,255,.03)}
.pill--balance{font-size:16px;padding:10px 14px}
.pill--balance .pill__coin{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.pill--balance .pill__coin-icon{width:16px;height:16px;fill:#ee204d;display:block}
.pill--balance .pill__label{font-size:14px}
.pill--balance .pill__value{font-size:16px}
.pill__balance_with_coins{
  display: flex;
  align-content: center;
}
.studioPriceCoin{width:16px;height:16px;fill:#ee204d;display:inline-block;vertical-align:-2px}


/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--stroke2);background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;transition:.15s transform, .15s filter, .15s background;user-select:none}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn--block{width:100%;}
.btn--xl{padding:14px 14px;border-radius:14px;font-weight:600}
.btn--primary {color: #0b0b0c;

  /* Платиновый цвет */background: #E5E4E2;border: 1px solid rgba(255,255,255,0.6);border-radius: 16px;box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -2px 4px rgba(0,0,0,0.25),
    0 8px 20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.15);transition: all 0.15s ease;position: relative;overflow: hidden;font-weight: 500;}

/* линии */
.btn--primary::before {

  content: "";

  position: absolute;
  inset: 0;

  background-color: #000; /* цвет линий */

  -webkit-mask-image: url("/static/img/bg2.png");
  -webkit-mask-repeat: repeat;
  -webkit-mask-size: 32px 51px;

  mask-image: url("/static/img/bg2.png");
  mask-repeat: repeat;
  mask-size: 32px 51px;

  opacity: 0.4;

  pointer-events: none;
}

.btn--ghost{background:rgba(255,255,255,.035)}
.btn--danger{border-color:rgba(255,77,109,.35);background:rgba(255,77,109,.12)}
.btn--balance{max-height:none;}
.btn--support{width:100%}

.btn--dark{
  color: #E5E4E2;
  background: #0b0b0e;
  border: 1px solid #0b0b0e;
  border-radius: 16px;
  box-shadow:
    inset 0 0px 0 rgba(255,255,255,0.9),
    inset 0 -2px 4px rgba(0,0,0,0.25),
    0 8px 20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.15);
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
  font-weight: 500;
  background-image:url("/static/img/bg2.png");
  background-repeat:repeat;
  background-size:32px 51px;
  background-position:left top;
}

/* Form */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.field--inline{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.field__lbl{font-size:16px;color:var(--text-dim)}
.textarea{
  width:100%;
  resize:none;
  border-radius:14px;
  padding:12px 12px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
  min-height:125px
}
.textarea:focus{border-color:rgba(142,158,230,.30);box-shadow:0 0 0 4px rgba(142,158,230,.12)}
.select{width:160px;max-width:100%;border-radius:12px;padding:9px 10px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.18);color:var(--text);outline:none}
.range{width:100%}

/* Segmented */
/*.seg{display:flex;gap:8px;padding:6px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05)}*/
.seg{
  display:flex;gap:8px;padding:6px;border-radius:14px;
  background: #1a1a1b; /* linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)); */
  border:1px solid rgba(255,255,255,.05)}
.seg__item{
  flex:1;
  text-align:center;
  padding:8px 10px;
  border-radius:12px;
  font-size:15px;
  font-weight:600;
  color:var(--text-dim);
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
}
/*.seg__item.is-active{color:var(--text);background:rgba(109,105,116,.55);border-color:rgba(142,158,230,.18)}*/
.seg__item.is-active{
  color:var(--text);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.28);
}
.seg--small.seg__item{font-size:12px;padding:7px 8px}
.seg--wide{width:100%}

.studioTabs{}

/* Chips */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.chips .chip{
  flex: 1 1 120px;   /* 120px — минимальная ширина; дальше растягиваются */
  text-align:center;
  white-space:nowrap;
}
.chips--wrap{justify-content:flex-start}
.chip{padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.035);color:var(--text-dim);font-size:14px;cursor:pointer;transition:.15s}
.chip:hover{filter:brightness(1.06)}
.chip.is-active{background:rgba(142,158,230,.20);color:var(--text);border-color:rgba(142,158,230,.18)}

/* Switch */
.switch{position:relative;display:inline-flex;align-items:center;}
.switch input{display:none}
.switch__ui{
  width:44px;
  height:24px;
  border-radius:999px;
  background:rgba(229,228,226,.75);
  position:relative;transition:.15s;
} /* border:1px solid rgba(255,255,255,.08) */
.switch__ui::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(11,11,14,1);
  transition:.15s;
}
.switch input:checked + .switch__ui{
  background:#E5E4E2;
  border-color:#E5E4E2;
}
.switch input:checked + .switch__ui::after{left:22px;background:#0b0b0e}

/* Stepper */
.stepper{display:inline-flex;align-items:center;gap:10px;padding:6px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.16)}
.stepper__btn{width:28px;height:28px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.035);color:var(--text);cursor:pointer}
.stepper__val{font-weight:600;font-size:12px;min-width:10px;text-align:center}

/* Welcome */
.welcome{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 120px)}
.card--welcome{width:min(420px,100%);text-align:center;padding:26px 18px;border-radius:24px}
.welcome__logo{font-weight:800;font-size:46px;letter-spacing:.2px;margin-bottom:10px;
  background:linear-gradient(90deg, rgba(142,158,230,1), rgba(166,161,168,.95));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 16px 70px rgba(142,158,230,.18);
}
.welcome__title{margin:0 0 10px;font-size:22px;line-height:1.15}
.welcome__sub{margin:0 0 16px;color:var(--text-dim);font-size:12px}
.welcome__icons{display:flex;justify-content:center;gap:14px;margin:18px 0}
.iconbtn{width:64px;height:54px;
  /* border-radius:14px;border:1px solid rgba(255,255,255,.06); */
  background:rgba(255,255,255,.035);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.iconbtn__ico{font-size:20px;opacity:.9}

/* Studio */
.studio__header{margin-bottom:12px}
.studio__title{font-weight:700;letter-spacing:.2px;opacity:.95}

.studio__grid{display:grid;grid-template-columns: 1.35fr .85fr;gap:var(--gap);align-items:start}
.studio__grid--one{grid-template-columns:1fr}
.studio,.studio__grid,.studio__grid--one{min-width:0;}
.studioPane{display:none}
.studioPane.is-active{display:block}
.studioQuickActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 12px}
.studioQuickActions > *{min-width:0}
.studioQuickBtn{
  width:100%;
  min-width:0;
  padding-left:10px;
  padding-right:10px;
  white-space:nowrap;
  font-size:clamp(13px,14px,16px);
}
.videoRefsBlock{margin:0 0 12px}
.videoRefsDrop{
  width:100%;
  min-height:180px;
  border-radius:22px;
  border:1px dashed rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:rgba(255,255,255,.74);
  padding:20px;
  cursor:pointer;
}
.videoRefsDrop__icon{font-size:32px;line-height:1;transform:translateY(-8px)}
.videoRefsDrop__text{max-width:560px;font-size:15px;line-height:1.35;transform:translateY(4px)}
.studioPhotoRefs{margin-top:10px}
.studioPhotoDrop{min-height:240px}
.studioPhotoDrop__count{
  margin-top:10px;
  font-weight:700;
  font-size:16px;
  color:rgba(255,255,255,.88);
}
.videoRefsDrop.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  border-color:rgba(255,255,255,.09);
}
.studio[data-studio-media-type="video"] .js-ref-state,
.studio[data-studio-media-type="video"] .js-ref-video-state,
.studio[data-studio-media-type="video"] .js-tail-image-state{
  display:none !important;
}
.videoRefsDrop{
  position:relative;
  overflow:hidden;
}
.videoRefsDrop.is-filled .videoRefsDrop__icon,
.videoRefsDrop.is-filled .videoRefsDrop__text{
  display:none;
}
.reviveShowcase{
  margin:0 0 12px;
}
.reviveShowcase__inner{
  min-height:180px;
  padding:0;
  cursor:default;
}
.reviveShowcase__video,
.reviveShowcase__image{
  width:100%;
  height:100%;
  max-height:250px;
  display:block;
  object-fit:cover;
  border-radius:22px;
}
.videoInlineRef{
  position:absolute;
  inset:0;
  display:block;
}
.videoInlineRef__media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.videoInlineRef__clear{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.62);
  color:#fff;
  font-size:20px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:2;
}
.studioTrendManyRefs{
  margin:0;
  padding:2px 0 8px;
}
.studioTrendManyRefs .hubTrendSection__track > .hubTrendTile{
  flex:0 0 clamp(132px, 38vw, 190px);
  width:clamp(132px, 38vw, 190px);
  height:clamp(132px, 38vw, 190px);
  min-width:clamp(132px, 38vw, 190px);
  max-width:clamp(132px, 38vw, 190px);
}
.studioTrendManyRefs__item{
  position:relative;
  overflow:hidden;
}
.studioTrendManyRefs__media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.studioTrendManyRefs__remove{
  position:absolute;
  top:8px;
  right:8px;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(0,0,0,.64);
  color:#fff;
  font-size:20px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:2;
}
.studioTrendManyRefs__add{
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color:rgba(255,255,255,.84);
}
.studioTrendManyRefs__addIcon{
  font-size:48px;
  font-weight:300;
  line-height:1;
  transform:translateY(-3px);
}
.studioFxCarousel{
  margin:10px 0 10px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.studioFxCarousel::-webkit-scrollbar{display:none}
.studioFxTrack{
  display:inline-flex;
  gap:10px;
  align-items:flex-start;
  height:fit-content;
}
.studioFxCard{
  scroll-snap-align:start;
  flex:0 0 auto;
  width:152px;
  min-width:152px;
  max-width:152px;
  aspect-ratio:1 / 1;
  display:flex;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  background:rgba(0,0,0,.14);
  color:inherit;
  text-align:left;
  padding:0;
  cursor:pointer;
}
.studioFxCard__imgwrap{
  width:100%;
  height:100%;
  background:rgba(255,255,255,.04);
}
.studioFxCard__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.studioFxCard__name{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:28px 12px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 42%, rgba(0,0,0,0) 100%);
  font-size:13px;
  font-weight:800;
  color:#fff;
  line-height:1.2;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}
.studioFxCard--ideas{
  border-color:rgba(255,255,255,.14);
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.2));
  display: none; /* REMOVE THIS STYLE LATER */
}
.manualPanel{
}
.manualPanel__title{
  margin:0 0 12px;
  font-size:18px;
  line-height:1.06;
  letter-spacing:-.01em;
}
.manualSection{margin-top:14px}
.manualSection:first-of-type{margin-top:0}
.manualSection__title{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
  font-size:16px;
  font-weight: 600;
  color:rgba(255,255,255,.9);
}
.manualInfoBtn{
  position:relative;
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.65);
  cursor:pointer;
}
.manualInfoBtn:hover{color:rgba(255,255,255,.92)}
.manualInfoBtn:active{transform:scale(.96)}
.manualInfoBtn::after,
.manualInfoBtn::before{
  position:absolute;
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .14s ease, transform .14s ease;
  z-index:12;
}
.manualInfoBtn::after{
  content:attr(data-tooltip);
  left:calc(100% + 8px);
  top:50%;
  transform:translateY(-50%) translateY(4px);
  width:min(240px, calc(100vw - 72px));
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(12,12,16,.96);
  color:rgba(255,255,255,.92);
  font-size:12px;
  font-weight:500;
  line-height:1.28;
  text-align:left;
  white-space:normal;
  box-shadow:0 10px 24px rgba(0,0,0,.36);
}
.manualInfoBtn::before{
  content:"";
  left:calc(100% + 3px);
  top:50%;
  width:8px;
  height:8px;
  border-left:1px solid rgba(255,255,255,.16);
  border-top:1px solid rgba(255,255,255,.16);
  background:rgba(12,12,16,.96);
  transform:translateY(-50%) rotate(-45deg) translateY(4px);
}
.manualInfoBtn:hover::after,
.manualInfoBtn:hover::before,
.manualInfoBtn:focus-visible::after,
.manualInfoBtn:focus-visible::before,
.manualInfoBtn.is-open::after,
.manualInfoBtn.is-open::before{
  opacity:1;
}
.manualInfoBtn:hover::after,
.manualInfoBtn:focus-visible::after,
.manualInfoBtn.is-open::after{
  transform:translateY(-50%);
}
.manualInfoBtn:hover::before,
.manualInfoBtn:focus-visible::before,
.manualInfoBtn.is-open::before{
  transform:translateY(-50%) rotate(-45deg);
}
.manualInfoBtn svg{
  width:18px;
  height:18px;
  display:block;
}
.manualInfoBtn:focus-visible{
  outline:2px solid rgba(255,255,255,.24);
  outline-offset:2px;
}
@media (max-width: 520px){
  .manualInfoBtn::after{
    left:-35px;
    right:auto;
    top:calc(100% + 8px);
    width:min(240px, calc(100vw - 56px));
    transform:translateY(4px);
  }
  .manualInfoBtn::before{
    left:5px;
    right:auto;
    top:calc(100% + 4px);
    transform:rotate(45deg) translateY(4px);
  }
  .manualInfoBtn:hover::after,
  .manualInfoBtn:focus-visible::after,
  .manualInfoBtn.is-open::after{
    transform:translateY(0);
  }
  .manualInfoBtn:hover::before,
  .manualInfoBtn:focus-visible::before,
  .manualInfoBtn.is-open::before{
    transform:rotate(45deg);
  }
}
.manualInfoBtn--up::after{
  top:auto;
  bottom:calc(100% + 8px);
}
.manualInfoBtn--up::before{
  top:auto;
  bottom:calc(100% + 4px);
  transform:translateY(50%) rotate(135deg) translateY(4px);
}
.manualInfoBtn--up:hover::before,
.manualInfoBtn--up:focus-visible::before,
.manualInfoBtn--up.is-open::before{
  transform:translateY(50%) rotate(135deg);
}
@media (max-width: 520px){
  .manualInfoBtn--up::after{
    top:auto;
    bottom:calc(100% + 8px);
  }
  .manualInfoBtn--up::before{
    top:auto;
    bottom:calc(100% + 4px);
    transform:rotate(225deg) translateY(4px);
  }
  .manualInfoBtn--up:hover::before,
  .manualInfoBtn--up:focus-visible::before,
  .manualInfoBtn--up.is-open::before{
    transform:rotate(225deg);
  }
}
.manualAspectRow{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.manualAspectBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.88);
  font-weight:700;
  font-size:16px;
  cursor:pointer;
}
.manualAspectBtn.is-active{
  color:#fff;
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.08);
}
.manualAspectBtn:disabled{
  opacity:.42;
  cursor:not-allowed;
}
.manualModelCarousel{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.manualModelCarousel::-webkit-scrollbar{display:none}
.manualModelGrid{
  display:grid;
  grid-template-rows:repeat(2,minmax(0,1fr));
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 40px) / 2);
  gap:8px;
  align-items:stretch;
}
.manualModelCard{
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  padding:10px 10px 9px;
  cursor:pointer;
  text-align:left;
  color:inherit;
  scroll-snap-align:start;
}
.manualModelCard.is-active{
  border-color:rgba(229,228,226,.8);
  box-shadow:0 0 0 1px rgba(229,228,226,.22) inset;
  background:rgba(255,255,255,.07);
}
.manualModelCard.is-locked{
  opacity:.78;
}
.manualModelCard__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.manualModelCard__ico{
  width:32px;
  height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:18px;
  background:transparent;
}
.manualModelCard__ico svg {
  width:1em;
  height:1em;
  display:block;
  color:currentColor;
}
.manualModelCard__radio{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.32);
  background:transparent;
}
.manualModelCard.is-active .manualModelCard__radio{
  background: #e5e4e2;
  border-color:#e5e4e2;
  box-shadow:inset 0 0 0 4px #e5e4e2;
}
.manualModelCard__lock{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:18px;
  padding:7px 7px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.9);
  font-size:10px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  max-width:88px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.manualModelCard__name{
  font-weight:800;
  font-size:16px;
  line-height:1.2;
  margin-bottom:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.manualModelCard__sub{
  font-size:13px;
  line-height:1.2;
  color:var(--text-dim);
}
.manualModelCard__sub--locked{
  color:rgba(255,255,255,.5);
}
.manualQualityRow{
  display:grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap:8px;
}
.manualQualityBtn{
  min-height:46px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.92);
  font-weight:800;
  font-size:18px;
  cursor:pointer;
}
.manualQualityBtn.is-active{
  color: #e5e4e2;
  background: #0b0b0c;
  border-color: #0b0b0c;
  box-shadow: inset 0 0px 0 rgba(255,255,255,0.9),    inset 0 -2px 4px rgba(0,0,0,0.25),    0 8px 20px rgba(0,0,0,0.6),    0 0 0 1px rgba(255,255,255,0.15);
}
.manualQualityBtn:disabled{
  opacity:.42;
  cursor:not-allowed;
}
.manualDurationRow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.manualDurationBtn{
  min-height:46px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.92);
  font-weight:800;
  font-size:18px;
  cursor:pointer;
}
.manualDurationBtn.is-active{
  color: #e5e4e2;
  background: #0b0b0c;
  border-color: #0b0b0c;
  box-shadow: inset 0 0px 0 rgba(255,255,255,0.9),    inset 0 -2px 4px rgba(0,0,0,0.25),    0 8px 20px rgba(0,0,0,0.6),    0 0 0 1px rgba(255,255,255,0.15);
}
.manualDurationHint{
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.76);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  padding: 10px 12px;
}
.manualQtyRow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.manualQtyBtn{
  min-height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.92);
  font-weight:800;
  font-size:17px;
  cursor:pointer;
}
.manualQtyBtn.is-active{
  color: #e5e4e2;
  background: #0b0b0c;
  border-color: #0b0b0c;
  box-shadow: inset 0 0px 0 rgba(255,255,255,0.9),    inset 0 -2px 4px rgba(0,0,0,0.25),    0 8px 20px rgba(0,0,0,0.6),    0 0 0 1px rgba(255,255,255,0.15);
}
.card--form{
  min-height:420px;
  overflow-x:hidden;
  border-radius: 10px;
  background: transparent;
  border: 0px;
  padding: 0px;
}
.studioCreateCard{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  background: #1a1a1b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.28);
  padding:20px;
}
.studioCreateCard:first-child{margin-top:0}
.studioCreateCard .manualSection{margin-top:18px}
.studioCreateCard .manualSection:first-of-type{margin-top:0}
.studioCreateCard--options.quality-hidden .manualSection{margin:0}
.studioCreateCard .manualSection__title{
  margin-bottom:12px;
  font-size:15px;
  font-weight:600;
}
.studioCreateCard--prompt{
  padding:22px 20px 16px;
  margin: 0px;
}
.studioCreatePromptTitle{
  font-size: 18px;
  line-height:1.15;
  color:rgba(255,255,255,.95);
  margin-bottom:8px;
}
.studioCreatePromptHint{
  font-size:16px;
  color:rgba(255,255,255,.45);
}
.studioCreatePromptInput{
  /* margin-top:14px; */
  min-height:220px;
  border:none;
  border-radius: 0;
  padding:0;
  background:transparent;
  box-shadow:none;
  resize:none;
  /* border-radius: 0; */
}
.studioCreatePromptInput:focus{
  border:none;
  box-shadow:none;
}
.studioCreatePromptFoot{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.studioCreatePromptCount{
  font-size:12px;
  color:rgba(255,255,255,.55);
}
.studioCreateImprove{
  border:none;
  background:transparent;
  color:rgba(255,255,255,.74);
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:10px;
  cursor:pointer;
}
.studioCreateImprove svg{
  width:18px;
  height:18px;
}
.studioCreateImprove__label{
  font-size:12px;
  line-height:1;
}
.studioCreateImprove:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}
.studioRefAdd{
  width:88px;
  height:88px;
  border:1px dashed rgba(255,255,255,.2);
  border-radius:18px;
  background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.65);
  display:grid;
  place-items:center;
  font-size:48px;
  line-height:1;
  cursor:pointer;
}
.studioRefAdd:hover{
  color:#fff;
  border-color:rgba(255,255,255,.38);
}
.studioRefLimit{
  display:block;
  margin-top:10px;
  font-size:12px;
  color:rgba(255,255,255,.55);
}
.studioRefGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,88px));
  gap:10px;
}
.studioCreateCard--ref {background: transparent;border: 0;box-shadow: none;padding: 0;}
.studioCreateCard--ref .refPickerItem{
  width:88px;
  aspect-ratio:1/1;
  border-radius:18px;
}
.studioCreateCard--options .manualQualityRow{
  gap:10px;
}
.studioCreateCard--options .manualQualityBtn{
  /* min-height:74px; */
  border-radius:16px;
  font-size: 18px;
  border:1px solid rgba(255,255,255,.12);
}
.studioCreateCard--options .manualQualityBtn.is-active{
  border-color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.08);
  box-shadow:none;
}
.studioCreateCard--options .manualAspectRow{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
}
.studioCreateCard--options .manualAspectRow::-webkit-scrollbar{
  display:none;
}
.studioCreateCard--options .manualAspectBtn{
  max-width: 76px;
  flex:0 0 88px;
  border-radius:16px;
  font-size: 16px;
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 0px;
}
.studioCreateCard--options .manualAspectBtn.is-active{
  border-color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.08);
}
.manualAspectBtn__icon{
  display:block;
  border:2px solid rgba(255,255,255,.65);
  border-radius:5px;
}
.manualAspectBtn__icon.is-square{
  width: 24px;
  height: 24px;
}
.manualAspectBtn__icon.is-portrait{
  width:20px;
  height:30px;
}
.manualAspectBtn__icon.is-landscape{
  width:32px;
  height:20px;
}
.manualAspectBtn__label{
  font-size:16px;
  line-height:1;
  color:rgba(255,255,255,.9);
}
.card--params{position:relative}
.last{margin-top:12px}
.last__title{font-size:11px;color:var(--text-dim);margin-bottom:8px}
.thumbs{display:flex;gap:8px}
.thumbs--grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.thumb{width:100%;height:54px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.18);object-fit:cover}

.upload{margin:10px 0 12px;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12)}
.upload__title{font-size:11px;color:var(--text-dim);margin-bottom:8px}

.acc{border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12);margin-bottom:10px;overflow:hidden}
.acc__sum{
  padding:10px 12px;
  cursor:pointer;
  list-style:none;
  font-size:16px;
  color:var(--text-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.acc__sum::-webkit-details-marker{display:none}
.acc__sum::after{
  content:"\203A";
  font-size:24px;
  line-height:1;
  color:rgba(255,255,255,.72);
  transform:rotate(0deg);
  transition:transform .18s ease;
}

.acc[open] > .acc__sum::after{
  transform:rotate(90deg);
}
.acc__body{padding:12px;border-top:1px solid rgba(255,255,255,.05)}

.genbar{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.genbar__meta{font-size:11px;color:var(--text-dim);text-align:center}
.genbar .btn {
  gap: 0;
}

.videoRow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 10px}
.miniSel{padding:10px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12)}
.miniSel__lbl{font-size:11px;color:var(--text-dim)}
.miniSel__val{font-weight:700;margin-top:3px}

.audioTiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12);color:var(--text-dim);cursor:pointer}
.tile.is-active{background:rgba(142,158,230,.18);color:var(--text);border-color:rgba(142,158,230,.18)}
.tile__ico{font-size:16px}
.tile__lbl{font-size:11px}

@media (max-width: 860px){
  .studio__grid{grid-template-columns:1fr}
  .content{padding-bottom:92px}
}

/* Progress */
.progressPage{justify-content:center}
.card--progress{width:min(520px,100%);background: transparent;border: 0;padding: 0;}
.progressHead{
  margin:2px 0 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.card--progress .card__title{margin-bottom:0;color: rgba(255,255,255,.92);}
.progressPlanBadge{
  min-width:160px;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  text-align:center;
}
.progressPlanBadge b{
  color:rgba(255,255,255,.92);
  font-weight:900;
  font-size:22px;
  line-height:1;
  letter-spacing:.4px;
}
@media (max-width: 520px){
  .progressPlanBadge{min-width:80px;padding:8px 0px}
  .progressPlanBadge b{font-size:20px}
}
.steps{display:flex;justify-content:space-between;gap:8px;margin:6px 0 12px}
.step{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-dim)}
.step .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.step.is-done{color:rgba(255,255,255,.78)}
.step.is-done .dot{background:rgba(142,158,230,.75)}
.step.is-active{color:rgba(255,255,255,.9)}
.step.is-active .dot{background:rgba(142,158,230,.75)}
.bar{height:10px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;border:1px solid rgba(255,255,255,.05)}
.bar__fill{height:100%;background:linear-gradient(90deg, rgba(142,158,230,.65), rgba(43,41,89,.95));}
.progressEta{
  margin:8px 2px 2px;
  font-size:12px;
  color:rgba(255,255,255,.68);
}
.progressPrev{margin:14px 0}
.skeleton{height:auto;aspect-ratio: 1 / 1;border-radius:16px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.08), rgba(255,255,255,.04));background-size:200% 100%;animation:shimmer 1.2s infinite}
.skeleton.ar-16-9 { aspect-ratio: 16 / 9; }
.skeleton.ar-9-16 { aspect-ratio: 9 / 16; }
.skeleton.ar-1-1  { aspect-ratio: 1 / 1; }
.skeleton.is-portrait{height:460px;}

/* When generation is completed, we render an <img> into the skeleton */
.progressPrev .skeleton{display:flex;align-items:center;justify-content:center;overflow:hidden}
.progressPrev .skeleton.is-filled{animation:none;background:rgba(0,0,0,.18)}
.progressPrev .skeleton img,
.progressPrev .skeleton video{width:100%;height:100%;object-fit:contain;display:block}
.progressPrev .skeleton.is-video{
  background:#0b0b0e;
  border-color:rgba(255,255,255,.09);
}
.progressVideoFrame{
  position:relative;
  width:100%;
  height:100%;
}
.progressPrev .skeleton .progressPreviewImg--video{
  object-fit:cover;
  background:#0b0b0e;
}
.progressPreviewMeta{
  left:12px;
  bottom:12px;
  max-width:75%;
}

/* Utility */
.is-hidden{display:none !important;}

/* Prompt header with paste button */
.field__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.miniBtn{border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);color:rgba(255,255,255,.92);border-radius:10px;padding:8px 10px;font-size:14px;line-height:1;cursor:pointer}
.miniBtn:hover{background:rgba(0,0,0,.26)}
.miniBtn:active{transform:translateY(1px)}

/* Reference state chip */
.refState{margin-top:10px;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(0,0,0,.16);cursor:pointer}
.refState__thumb{width:44px;height:44px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);flex:0 0 auto;background:rgba(255,255,255,.04)}
.refState__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.refState__text{min-width:0;flex:1}
.refState__title{font-size:12px;color:rgba(255,255,255,.92)}
.refState__sub{font-size:11px;color:rgba(255,255,255,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;}
.refState .iconBtn{
  border-color: transparent;
}
.iconBtn{
    width:32px;
    height:32px;
    border:2px solid transparent;
    border-color: rgb(84 84 84) rgb(0 0 0) rgb(0 0 0) rgb(84 84 84);
    border-radius:10px;
    background:rgba(0,0,0,.14);
    color:rgba(255,255,255,.85);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.iconBtn:hover{
  background:rgba(0,0,0,.22)
}

.iconBtn:active{
    border-color: rgb(0 0 0) rgb(84 84 84) rgb(84 84 84) rgb(0 0 0);
    box-shadow:0 8px 20px rgba(0,0,0,.28), inset 0 2px 6px rgba(0,0,0,.45);
}

/* Reference picker modal */
.refPickerModal{position:fixed;inset:0;z-index:70;display:grid;place-items:end center;padding:16px calc(16px + var(--tg-safe-right, 0px)) calc(16px + var(--tg-safe-bottom, 0px)) calc(16px + var(--tg-safe-left, 0px))}
.refPickerModal.is-hidden{display:none}
.refPickerModal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.52);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.refPickerModal__sheet{position:relative;width:min(100%,520px);border-radius:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(34,34,40,.96), rgba(18,18,22,.96));box-shadow:0 18px 50px rgba(0,0,0,.45);padding:12px}
.refPickerModal__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.refPickerModal__title{font-weight:700;color:rgba(255,255,255,.94);font-size:14px}
.refPickerModal__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:min(46vh,360px);overflow:auto;padding-right:2px}
.refPickerItem{position:relative;aspect-ratio:1/1;border-radius:14px;border:1px solid rgba(255,255,255,.1);overflow:hidden;background:rgba(255,255,255,.03)}
.refPickerItem img{width:100%;height:100%;object-fit:cover;display:block}
.refPickerItem__remove{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.62);color:#fff;font-size:13px;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer}
.refPickerItem--add{display:grid;place-items:center;background:rgba(255,255,255,.02);border-style:dashed;cursor:pointer}
.refPickerItem--add .refPickerItem__plus{font-size:28px;color:rgba(255,255,255,.85);line-height:1}
.refPickerModal__actions{margin-top:12px;}
@media (max-width: 420px){
  .refPickerModal__grid{
    gap:8px;
    max-height:42vh;
  }
  .refPickerModal__sheet{
    padding:10px;
  }
}

/* Style strength disabled state */
.range.is-disabled{opacity:.45;filter:saturate(.6)}

/* multi-variants grid (1..4) */
.progressPrev .skeleton.is-multi{
  padding:10px;
}

.progressPrev .skeleton.is-multi .progressGrid{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
}

.progressPrev .skeleton.is-multi .progressThumb{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  background:rgba(0,0,0,.12);
  cursor:pointer;
  padding:0;
}

.progressPrev .skeleton.is-multi .progressThumb.is-active{
  border-color: rgba(142,158,230,.75);
}

.progressPrev .skeleton.is-multi .progressThumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.progressPrev .skeleton.is-multi .progressThumb video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.progressHintCard{
  margin-top:12px;
  width:100%;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg,#2f2f2f 0%,#2b2b2b 100%);
  color:var(--text);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  transition:transform .12s ease, border-color .12s ease, background .12s ease, opacity .12s ease;
}
.progressHintCard:active{transform:scale(.995)}
.progressHintCard:hover{border-color:rgba(255,255,255,.16)}
.progressHintCard__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.progressHintCard__badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:22px;padding:0 8px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.14);color:var(--text-soft);background:rgba(255,255,255,.03);
}
.progressHintCard__meta{font-size:11px;color:var(--muted)}
.progressHintCard__title{font-weight:800;font-size:16px;line-height:1.15}
.progressHintCard__text{
  font-size:13px;
  line-height:1.28;
  color:var(--text-dim);
  text-align: justify;
}
.progressHintCard.is-promo{
  border-color:rgba(255,77,109,.25);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255,77,109,.18) 0%, rgba(255,77,109,0) 58%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.progressHintCard.is-promo .progressHintCard__badge{
  color:#ffd3dc;
  border-color:rgba(255,77,109,.35);
  background:rgba(255,77,109,.12);
}
.progressHintCard.is-locked{cursor:default}
.progressHintCard.is-locked:not(.is-promo){opacity:.82}
.progressHintCard.is-locked:not(.is-promo):hover{border-color:rgba(255,255,255,.08)}
@media (max-width: 420px){
  .progressHintCard{padding:11px 12px;border-radius:14px}
  .progressHintCard__title{font-size:15px}
  .progressHintCard__text{font-size:13px}
  .progressHintCard__meta{font-size:11px}
}

/* force-hide utility used by progress page server template */
.is-force-hidden{display:none !important}

/* Progress feedback card (post-generation rating) */
.progressFeedbackCard{
  margin-top:12px;
  width:100%;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#2f2f2f 0%,#2b2b2b 100%);
  color:var(--text);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.progressFeedbackCard.is-hidden{display:none}
.progressFeedbackCard__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.progressFeedbackCard__title{
  font-weight:700;
  font-size: clamp(12px, 2.95vw + 2px, 16px);
  color:#f3f3f3;
  line-height:1.08;
  letter-spacing:-.03em;
}
.progressFeedbackCard__text{
  font-size:13px;
  line-height:1.3;
  color:rgba(255,255,255,.72);
}
.progressFeedbackStars{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
}
.progressFeedbackStar{
  border:0;
  background:transparent;
  color:rgba(255,255,255,.55);
  font-size: clamp(20px, 5vw + 2px, 30px);
  line-height:1;
  padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.progressFeedbackStar:hover,
.progressFeedbackStar.is-active{
  color:#f7c154;
}
.progressFeedbackForm{
  display:flex;
  align-items:center;
  gap:8px;
}
.progressFeedbackInput{
  flex:1 1 auto;
  min-width:0;
  height:38px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.2);
  color:#fff;
  padding:0 12px;
}
.progressFeedbackInput::placeholder{color:rgba(255,255,255,.45)}
.progressFeedbackSend{
  flex:0 0 auto;
  height:38px;
  padding:0 14px;
}
@media (max-width: 420px){
  .progressFeedbackCard{padding:11px 12px;border-radius:14px}
  .progressFeedbackCard__title{font-size: clamp(12px, 3vw + 1px, 16px);}
  .progressFeedbackStar{font-size: clamp(18px, 5vw + 2px, 30px);}
}

@keyframes shimmer{0%{background-position:0 0}100%{background-position:-200% 0}}
.row{display:flex;gap:10px}
.row .btn{flex:1}

/* Viewer */
.viewer{display:grid;grid-template-columns: 1.3fr .7fr;gap:var(--gap);align-items:start}
.viewer__top{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-start}
.iconbtn--back{width:44px;height:44px;border-radius:14px}
.viewer__media{position:relative;padding: 0;}
.viewer__stage{position:relative;width:100%;aspect-ratio:var(--ar, 1 / 1);border-radius:16px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.18);overflow:hidden;touch-action:pan-y}
.viewer__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;border:none;transform:translateX(0);will-change:transform}

.viewerDots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:4;display:flex;gap:8px;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.18);backdrop-filter:blur(10px)}
.viewerMeta{
  position:absolute;
  left:0;
  bottom:0;
  z-index:4;
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;

  /* чтобы выглядело "влитым" в угол снизу-слева */
  border-top-left-radius:999px;
  border-bottom-left-radius:999px;
  border-top-right-radius:999px;
  border-bottom-right-radius:999px;

  background:rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
  font-size:11px;
  color:rgba(255,255,255,.86);
  letter-spacing:.2px;
  max-width:70%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Viewer: media + action bar as a single connected block */
.viewer__media--stack{overflow:hidden}
.viewer__media--stack .viewer__stage{border:none;border-radius:16px 16px 0 0}
.viewer__media--stack .viewer__img{border-radius:16px 16px 0 0}
.viewer__media--stack .viewerDots{bottom:10px}
.viewer__media--stack .viewerMeta{
  left:0;
  bottom:0;
}

.viewerBar{display:flex;align-items:center;gap:10px;padding:12px 12px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  background: #0b0b0e;
  border-bottom-left-radius:16px;border-bottom-right-radius:16px;
}
.viewerBar__btn{width:38px;height:38px;border-radius:12px;
  /* border:1px solid rgba(255,255,255,.07); */
  background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.9);
  border:2px solid transparent;
  border-color: rgb(84 84 84) rgb(0 0 0) rgb(0 0 0) rgb(84 84 84); /* top right bottom left */
  box-shadow:0 10px 26px rgba(0,0,0,.32);
}
.viewerBar__btn:active{
  border-color: rgb(0 0 0) rgb(84 84 84) rgb(84 84 84) rgb(0 0 0);
  box-shadow:0 10px 26px rgba(0,0,0,.32), inset 0 2px 6px rgba(0,0,0,.45);
  transform:translateY(1px);
}
.viewerBar__spacer{flex:1}
.viewerBar__date{font-size:14px;color:rgba(255,255,255,.55)}


.viewerBar__btn:active,
.viewerBar__btn.is-pressed,
.iconbtn:active,
.iconbtn.is-pressed,
.iconbtn--sm:active,
.iconbtn--sm.is-pressed{
  border-color: rgb(0 0 0) rgb(84 84 84) rgb(84 84 84) rgb(0 0 0);
  box-shadow:0 10px 26px rgba(0,0,0,.32), inset 0 2px 6px rgba(0,0,0,.45);
  transform:translateY(1px);
}


.size-4 {
 width:18px;
 height:18px;
}

/* Fix for inline SVG icons in iOS/Telegram WebView */
.size-6{
  width:24px;
  height:24px;
  display:block;
  flex:0 0 auto;
}

.size-8{
  width:40px;
  height:40px;
  display:block;
  flex:0 0 auto;
}

/* на всякий случай — чтобы SVG точно не схлопывался внутри flex-кнопок */
.viewerBar__btn svg,
.iconbtn svg{
  width:24px;
  height:24px;
  display:block;
}

.viewerBar__btn.is-loading{
  position:relative;
  pointer-events:none;
}
.btn.is-loading{
  position:relative;
  pointer-events:none;
  color:transparent !important;
}
.btn.is-loading > *{
  opacity:0;
}
.viewerBar__btn.is-loading svg{
  opacity:0;
}
.viewerBar__btn.is-loading::after,
.btn.is-loading::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.32);
  border-top-color:#fff;
  animation:ipixSpin .8s linear infinite;
}
.btn.is-loading::after{
  border-color: rgba(0,0,0,.18);
  border-top-color: #000;
}
.progressPage .btn.is-loading::after{
  border-color: rgba(255,255,255,.32);
  border-top-color: #fff;
}

@keyframes ipixSpin{
  to{ transform:translate(-50%, -50%) rotate(360deg); }
}


/* Prompt card header with copy icon */
.card__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}


.iconbtn--sm{width:38px;height:38px;border-radius:12px;
  border:2px solid transparent;
  border-color: rgb(84 84 84) rgb(0 0 0) rgb(0 0 0) rgb(84 84 84);
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.iconbtn--sm:active{
  border-color: rgb(0 0 0) rgb(84 84 84) rgb(84 84 84) rgb(0 0 0);
  box-shadow:0 8px 20px rgba(0,0,0,.28), inset 0 2px 6px rgba(0,0,0,.45);
}

.viewerDot{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.45);border:none;padding:0;cursor:pointer;transition:transform .18s ease, background-color .18s ease}
.viewerDot.is-active{background:rgba(255,255,255,.95);transform:scale(1.35)}
.viewerDot:focus{outline:none;box-shadow:0 0 0 2px rgba(142,158,230,.45)}
.viewer__back{position:absolute;top:14px;left:14px;z-index:3;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;margin:0;border:none;background:transparent;box-shadow:none;border-radius:0;
  color:rgba(255,255,255,.92);text-decoration:none}
.viewer__back:active{transform:translateX(-1px)}
.viewer__side{display:flex;flex-direction:column;gap:var(--gap)}
.actions{display:flex;flex-direction:column;gap:8px}
.videoMock{height:340px;border-radius:16px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.20);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.videoMock__play{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);font-size:22px}
.videoMock__bar{position:absolute;left:18px;right:18px;bottom:34px;height:8px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.videoMock__fill{height:100%;background:linear-gradient(90deg, rgba(142,158,230,.85), rgba(43,41,89,.75));}
.videoMock__time{position:absolute;left:18px;right:18px;bottom:12px;display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim)}
.wave{height:340px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px}
.wave__img{width:100%;max-width:560px;opacity:.95}
.wave__ctrl{display:flex;gap:10px}

@media (max-width: 860px){
  .viewer{grid-template-columns:1fr}
  .videoMock,.wave{height:320px}
}

/* History */
.history__top{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.14)}
.search__ico{color:var(--text-dim)}
.search__inp{width:100%;border:none;background:transparent;outline:none;color:var(--text)}
.history__grid{display:grid;grid-template-columns: 1fr .55fr;gap:var(--gap);align-items:start}
.gridCards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.miniCard{display:flex;gap:10px;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12)}
.miniCard__img{width:72px;height:56px;border-radius:12px;border:1px solid rgba(255,255,255,.06);object-fit:cover}
.miniCard__meta{display:flex;flex-direction:column;justify-content:center;gap:3px}
.miniCard__t{font-size:11px;color:rgba(255,255,255,.84);font-weight:600}
.miniCard__d{font-size:10px;color:var(--text-dim)}
.card--details .btn{margin-top:10px}
.kv__row{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--text-dim);margin:8px 0}
.badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:10px;border:1px solid rgba(255,255,255,.08)}
.badge--ok{background:rgba(57,217,138,.12);border-color:rgba(57,217,138,.22);color:rgba(200,255,230,.9)}

@media (max-width: 860px){
  .history__grid{grid-template-columns:1fr}
  .gridCards{grid-template-columns:1fr}
}

/* History (square cards layout) */
.history2{display:flex;flex-direction:column;gap:12px}
.histGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.histCard{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12);text-decoration:none;color:inherit}
.histCard__imgwrap{width:100%;aspect-ratio:1 / 1;background:rgba(255,255,255,.04)}
.histCard__img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:1 / 1;}
.histCard__body{padding:12px 12px 14px;background: #0b0b0e;}
.histCard__name{font-size:14px;font-weight:800;color:rgba(255,255,255,.9);margin-bottom:8px}
.histCard__meta{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--text-dim)}

/* Sets cards: title over image (no body) */
.histCard--set .histCard__imgwrap{position:relative}
.histCard--set .histCard__overlayTitle{
  position:absolute;left:14px;bottom:14px;right:14px;
  font-size:clamp(14px, 3.4vw, 18px);
  font-weight:900;
  letter-spacing:.2px;
  color:rgba(255,255,255,.95);
  text-shadow:0 10px 22px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.55);
  line-height:1.1;
  pointer-events:none;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}


.histPager{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 2px}
.histPager[hidden]{display:none !important}
.histPager__meta{font-size:12px;color:var(--text-dim);text-align:center;flex:1}



/* History: pending generation card */
.histCard--pending .histCard__name{opacity:.95}
.histPendingBar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:10px}
.histPendingBar__fill{height:100%;background:rgba(255,255,255,.28);width:12%;border-radius:999px;transition:width .35s ease}

@media (min-width: 860px){
  .histGrid{grid-template-columns:repeat(4,1fr)}
}

/* Balance */
.balance__top{display:grid;grid-template-columns: 1.2fr .4fr .4fr;gap:var(--gap);margin-bottom:var(--gap)}
.balanceCard__lbl{font-size:12px;color:var(--text-dim)}
.balanceCard__val{font-size:34px;font-weight:800;margin:8px 0 12px}
.smallStat{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.smallStat__lbl{font-size:12px;color:var(--text-dim)}
.smallStat__val{font-size:22px;font-weight:700}
.table{width:100%}
.table__row{display:grid;grid-template-columns: 1.1fr .9fr .8fr .6fr;gap:10px;padding:10px 8px;border-top:1px solid rgba(255,255,255,.06);font-size:11px;color:var(--text-dim)}
.table__head{border-top:none;color:rgba(255,255,255,.74);font-weight:600}
.right{text-align:right}
.pos{color:rgba(200,255,230,.85)}
.neg{color:rgba(255,150,170,.9)}

@media (max-width: 860px){
  .balance__top{grid-template-columns:1fr;}
  .table__row{grid-template-columns:1fr .8fr .7fr .6fr}
}

/* Pricing */
.planRow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.plan{padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12)}
.plan__top{display:flex;justify-content:space-between;align-items:center}
.plan__name{font-size:22px;font-weight:900}
.plan__badge{font-size:10px;color:var(--text-dim);padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.035)}
.plan__meta{margin:10px 0 12px;color:rgba(255,255,255,.86);font-weight:700}
.plan--best{background:rgba(142,158,230,.16);border-color:rgba(142,158,230,.18)}

@media (max-width: 860px){
  .planRow{grid-template-columns:1fr}
}

/* Referrals */
.referrals__grid{display:grid;grid-template-columns: 1.1fr .9fr;gap:var(--gap)}
.refLink{display:flex;gap:10px;margin:12px 0}
.refLink__inp{flex:1;border-radius:12px;padding:10px 10px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.16);color:var(--text)}
.qrWrap{display:flex;justify-content:center;margin-top:10px}
.qr{width:210px;height:210px;border-radius:18px;border:1px solid rgba(255,255,255,.06);background:white;padding:10px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12);text-align:center}
.stat__n{font-size:22px;font-weight:900}
.stat__l{font-size:10px;color:var(--text-dim)}
.feed{display:flex;flex-direction:column;gap:10px}
.feed__item{display:flex;gap:10px;align-items:flex-start}
.feed__t{font-size:12px;font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.20);margin-top:5px}
.dot--ok{background:rgba(57,217,138,.8)}

@media (max-width: 860px){
  .referrals__grid{grid-template-columns:1fr}
}

/* Profile */
.profile__grid{display:grid;grid-template-columns: .8fr 1.2fr;gap:var(--gap)}
.profileCard{display:flex;flex-direction:column;align-items:center;text-align:center}
.profileCard__avatar{width:74px;height:74px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}
.profileCard__name{font-weight:800;margin-top:10px}
.profileCard__row{display:flex;gap:10px;width:100%;margin-top:14px}
.setRow{display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12);margin:10px 0;color:rgba(255,255,255,.84)}
.linkRow{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12);margin-top:10px;color:rgba(255,255,255,.84)}

/* New profile layout (mobile-like, per design) */
.profile{max-width:920px;margin:0 auto}
.profileHeader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 12px 10px;text-align:center}
.profileHeader__avatar{width:110px;height:110px;border-radius:28px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(135deg, rgba(43,41,89,.55), rgba(142,158,230,.22));box-shadow:0 18px 40px rgba(0,0,0,.28)}
.profileHeader__name{margin-top:12px;font-size:28px;font-weight:900;letter-spacing:.2px}

.profileSettings.card{background:transparent;border:none;box-shadow:none;padding:0 18px 6px}
.profileSettings__title{font-size:20px;font-weight:900;margin:4px 0 10px;border-top:1px solid rgba(255,255,255,.08);padding-top:12px;}

.ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:rgba(255,255,255,.55)}
.ico svg{width:20px;height:20px}

.setRow__left{display:flex;align-items:center;gap:12px}
.setRow__label{color:rgba(255,255,255,.86)}

/* Flat rows like in the mock (no separate "Links" blocks) */
.setRow--flat{background:transparent;border:none;border-radius:0;margin:0;padding:14px 0;border-top:none;}

.linkRow__left{display:flex;align-items:center;gap:12px}
.linkRow--flat{background:transparent;border:none;border-radius:0;margin:0;padding:14px 0;border-top:none;}
.chev{color:rgba(255,255,255,.55);font-size:18px;line-height:1}

/* Community (profile tab redesign) */
.community{max-width:940px;}
.communityHeader{padding:12px 18px 8px}
.communityHeader__title{font-size:28px;font-weight:950;letter-spacing:.2px}
.communityHeader__sub{margin-top:4px;font-size:13px}
.communityCard.communityCard--compact{
  margin:0 18px 12px;
  padding:12px 14px;
  border-radius:18px;
}
.communityCard__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.communityCard__left{display:flex;align-items:center;gap:12px;min-width:0}
.communityCard__left .ico{
  width:28px;height:28px;flex:0 0 28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
}
.communityCard__left .ico svg{width:16px;height:16px}
.communityCard__label{font-weight:800;color:rgba(255,255,255,.92);line-height:1.1}
.communityCard__hint{font-size:12px;margin-top:2px}

.communityGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:0 18px 18px;
}
.communityLink{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:118px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:#1a1a1b;
  color:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.communityLink:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.13)}
.communityLink:active{transform:translateY(0)}
.communityLink__head{display:flex;align-items:center;gap:8px;min-width:0}
.communityLink__badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:22px;padding:0 8px;border-radius:999px;
  font-size:11px;font-weight:900;letter-spacing:.5px;
  color:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}
.communityLink__title{
  font-size:16px;font-weight:900;line-height:1.15;
  color:rgba(255,255,255,.94);
}
.communityLink__desc{
  font-size:12px;line-height:1.3;
  color:rgba(255,255,255,.62);
  flex:1 1 auto;
}
.communityLink__cta{
  font-size:12px;font-weight:850;letter-spacing:.2px;
  color:rgba(255,255,255,.88);
}
.communityLink--tg .communityLink__badge,
.communityLink--chat .communityLink__badge{
  background:rgba(40, 145, 255, .12);
  border-color:rgba(80, 175, 255, .28);
}
.communityLink--faq .communityLink__badge{
  background:rgba(255,255,255,.06);
}
.communityLink--soon::after{
  content:"Скоро";
  position:absolute;top:12px;right:12px;
  height:22px;padding:0 9px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;letter-spacing:.4px;
  color:#0b0b0e;background:#E5E4E2;border:1px solid rgba(255,255,255,.65);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.communityLogoutCard{
  margin:0 18px 18px;
  padding:12px 14px;
  border-radius:18px;
}

.communityLogoutCard__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.communityLogoutCard__title{
  font-size:15px;
  font-weight:800;
  color:rgba(255,255,255,.9);
}

.communityLogoutCard [data-auth-logout]{
  min-width:108px;
  justify-content:center;
}

@media (max-width: 680px){
  .communityGrid{grid-template-columns:1fr}
  .communityLink{min-height:104px}
  .communityHeader__title{font-size:24px}
}

/* Toast */
.toast{
  position:fixed;left:50%;transform:translateX(-50%) translateY(10px);bottom:88px;z-index:60;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255, 255, 255, 0.6);
  text-align: center;
  background:#E5E4E2;
  backdrop-filter: blur(10px);
  color:#0b0b0e;
  font-size:14px;
  font-weight:700;
  opacity:0;
  box-shadow:0 18px 40px rgba(0,0,0,.30);
  transition:opacity .18s ease, transform .18s ease;
}
.toast.is-in{opacity:1;transform:translateX(-50%) translateY(0)}

body.is-modal-open{overflow:hidden}

/* ------------------------------
   Balance: subscriptions carousel + modals
   (Scoped by classes to avoid breaking other pages)
------------------------------ */

.balance__current{
  margin:6px 0 12px;
  text-align:center;
  font-size: 20px;
}
.balance__plan{
  color:ivory;
  font-weight:800;
}

.creditCard--coins{display:flex;align-items:center;justify-content:center}
.creditCard--coins .creditCard__val{display:flex;align-items:center;gap:8px}
.creditCard--coins .creditCard__num{font-size:34px;font-weight:900;letter-spacing:.2px}
.creditCard--coins .creditCard__coin{font-size:20px;opacity:.95}

.balancePlans{margin-top:12px}
.balancePlans__title{font-size:13px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;margin:10px 2px 10px;color:rgba(255,255,255,.78)}

.planCarousel{overflow:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.planTrack{display:flex;gap: 10px;align-items:stretch}
.balance.balance--subscriptions-hidden .planTrack{display:grid}
.planTrack.planTrack--single-center{justify-content:center}
.planCard{
  scroll-snap-align:center;
  min-width:78%;
  max-width:78%;
  border:1px solid rgba(255,255,255,.08);
  background:#1a1a1b;
  backdrop-filter: blur(10px);
  border-radius:20px;
  padding:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  position:relative
  }
.planCard__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:16px;
}
.planCard__name{
  font-weight:900;
  letter-spacing:.7px;
  font-size:6.3vw;
  color:ivory;
}
.planCard__badge{font-size:13px;font-weight:900;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:rgba(255,255,255,.85)}
.planCard__badge--accent{background:rgba(142,158,230,.12);border-color:rgba(142,158,230,.28)}
.planCard__badge--recommended{
  color: transparent;
  background-image: linear-gradient(90deg, #f598a8, #f6edb2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.planCard__badge--maximum{
  color: transparent;
  background-image: linear-gradient(90deg,#8ea2ff,#7ee1ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.planCard__price{
  font-size:clamp(13px,4.2vw,16px);
  font-weight:600;
  display:flex;
  align-items:baseline;
  gap:6px;
  margin: 0 0 6px;
  line-height:1.2;
  flex-wrap:wrap;
  word-break:break-word;
}
.planCard__coin{font-size:16px;opacity:.9}
.planCard__per{font-size:15px;font-weight:800;color:rgba(255,255,255,.58)}
.planCard__list{margin:0 0 6px;padding:0;list-style:none;display:grid;gap:8px}
.planCard__list li{
  font-size:15px;
  line-height:1.28;
}
.planCard__note{font-size:12px;text-align:center;margin-top:15px}
.planCard__cta{margin-top:auto;padding-top:12px;position:relative}
.planCard--token-locked{
  /* min-height:330px; */
  justify-content:center;
}
.planCard--token-locked .planCard__head{
  justify-content:center;
}
.planCard--token-locked .planCard__name{
  text-align:center;
}
.planCard--token-locked .planCard__note{
  font-size:15px;
  line-height:1.35;
  max-width:320px;
  margin: 0;
}

/* Balance subscriptions -> landing-like plans */
.balance [data-balance-section="subscriptions"] .planTrack{
  gap: 10px;
}
.balance [data-balance-section="subscriptions"] .planCard{
  min-width: 90%;
  max-width: 90%;
}
.balance [data-balance-section="subscriptions"] .planCard--subscription{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,#2f2f2f 0%,#2b2b2b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  padding: 20px;
}
.balance [data-balance-section="subscriptions"] .planCard--subscription.is-current{
  border-color:rgba(229,228,226,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(229,228,226,.18);
}
.balance [data-balance-section="subscriptions"] .plan__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}
.balance [data-balance-section="subscriptions"] .plan__icon,
.balance [data-balance-section="subscriptions"] .planCard__icon{
  width:64px;
  height:64px;
  display:block;
  flex:0 0 64px;
}
.balance [data-balance-section="subscriptions"] .plan__quota{
  margin-top:4px;
  background:#0f0f0f;
  border-radius: 12px;
  padding:10px 18px;
  min-width:150px;
  font-size: 14px;
  line-height:18px;
  font-weight: 500;
  color:#b9b7b1;
  text-align:center;
  white-space:normal;
  flex:0 1 auto;
}
.balance [data-balance-section="subscriptions"] .plan__quota div{
  white-space:nowrap;
}
.balance [data-balance-section="subscriptions"] .plan__name{
  margin:16px 0 0;
  font-size:20px;
  line-height:28px;
  font-weight:600;
  color:#f3f2ef;
  letter-spacing:0;
}
.balance [data-balance-section="subscriptions"] .plan__desc{
  margin:8px 0 0;
  font-size:14px;
  line-height:20px;
  color:#bab8b2;
}
.balance [data-balance-section="subscriptions"] .plan__price-row{
  margin-top:8px;
  display:flex;
  align-items:flex-end;
  gap:8px;
}
.balance [data-balance-section="subscriptions"] .plan__price{
  margin:0;
  font-size:30px;
  line-height:36px;
  font-weight:600;
  color:#f3f2ef;
}
.balance [data-balance-section="subscriptions"] .plan__per,
.balance [data-balance-section="subscriptions"] .planCard__per{
  font-size:12px;
  line-height:15px;
  color:#bab8b2;
  font-weight:500;
  transform:translateY(-6px);
}
.balance [data-balance-section="subscriptions"] .plan__period{
  font-size:12px;
  line-height:15px;
  color:#bab8b2;
  font-weight:500;
  transform:translateY(-6px);
}
.balance [data-balance-section="subscriptions"] .plan__button{
  margin-top:26px;
  border:0;
  border-radius:9.6px;
  min-height:44px;
  background:#ecebe7;
  color:#2a2a2a;
  font-size:16px;
  line-height:24px;
  font-weight:500;
  cursor:pointer;
}
.balance [data-balance-section="subscriptions"] .plan__button:hover{
  opacity:.92;
}
.balance [data-balance-section="subscriptions"] .plan__button--current{
  background:#3c3b39;
  color:#ecebe7;
  cursor:default;
  opacity:1;
}
.balance [data-balance-section="subscriptions"] .plan__features{
  margin: 16px -24px 0;
  border-top:1px solid rgba(255,255,255,.10);
  padding: 24px 24px 0px 24px;
}
.balance [data-balance-section="subscriptions"] .plan__lead{
  margin:0 0 8px;
  font-size:14px;
  line-height:20px;
  font-weight:500;
  color:#bab8b2;
}
.balance [data-balance-section="subscriptions"] .feature-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:4px;
}
.balance [data-balance-section="subscriptions"] .feature-list li{
  position:relative;
  padding-left:24px;
  font-size:14px;
  line-height:20px;
  color:#bab8b2;
}
.balance [data-balance-section="subscriptions"] .feature-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:16px;
  height:16px;
  background:url("/static/media/landing/subscriptions/check.svg") center / 16px 16px no-repeat;
}

/* Balance token packs -> same visual language as subscriptions */
.balance [data-balance-section="token_packs"] .planTrack{
  gap: 10px;
}
.balance [data-balance-section="token_packs"] .planCard{
  min-width: 90%;
  max-width: 90%;
}
.balance.balance--subscriptions-hidden [data-balance-section="token_packs"] .planCard{
  min-width: 100%;
  max-width: 100%;
}
.balance [data-balance-section="token_packs"] .planCard--token-pack,
.balance [data-balance-section="token_packs"] .planCard--token-locked{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,#2f2f2f 0%,#2b2b2b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  padding:24px;
}
.balance [data-balance-section="token_packs"] .planCard__head{
  margin-bottom:14px;
  align-items:flex-start;
}
.balance [data-balance-section="token_packs"] .planCard__name{
  margin:0;
  font-size: clamp(24px,9vw,30px);
  line-height:1;
  font-weight:600;
  letter-spacing:0;
  color:#f3f2ef;
}
.balance [data-balance-section="token_packs"] .planCard__badge{
  background:#2f2f2f;
  border:1px solid rgba(255,255,255,.16);
  color:#f3f2ef;
}
.balance [data-balance-section="token_packs"] .planCard__list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.balance [data-balance-section="token_packs"] .planCard__list li{
  font-size:14px;
  line-height:20px;
  color:#bab8b2;
}
.balance [data-balance-section="token_packs"] .planCard__cta{
  margin-top:26px;
  padding-top:0;
}
.balance [data-balance-section="token_packs"] .plan__button{
  width:100%;
  border:0;
  border-radius:9.6px;
  min-height:44px;
  background:#ecebe7;
  color:#2a2a2a;
  font-size:16px;
  line-height:24px;
  font-weight:500;
  cursor:pointer;
}
.balance [data-balance-section="token_packs"] .plan__button:hover{
  opacity:.92;
}

/* Balance CTA like in reference: solid accent, strong contrast, larger tap target */
.balance .planCard__buyBtn{
  position:relative;
  min-height:46px;
  height:46px;
  padding:0 16px;
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,138,59,.9);
  background:#FF6A00;
  color:#fff;
  font-weight:900;
  font-size:17px;
  line-height:1;
  letter-spacing:.2px;
  text-align:center;
  box-shadow:0 2px 4px rgba(0,0,0,.45), 0 4px 12px rgba(255,106,0,.35);
}
.balance .planCard__buyBtn::before{
  display:none !important; /* disable textured overlay from .btn--primary */
}
.balance .planCard__buyBtn::after{
  content:"";
  position:absolute;
  inset:-10px; /* larger invisible tap area */
}
.balance .planCard__buyBtn:hover{
  filter:brightness(1.04);
}
.balance .planCard__buyBtn:active{
  transform:translateY(1px);
  filter:brightness(.98);
}


/* Keep swipe/scroll, but hide the scrollbar bar */
.planCarousel{
  overflow-x: auto;
  overflow-y: hidden;

  -ms-overflow-style: none;  /* IE/old Edge */
  scrollbar-width: none;     /* Firefox */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.planCarousel.is-dragging{cursor:grabbing}

.planCarousel::-webkit-scrollbar{
  height: 0;
  display: none;             /* Chrome/Safari */
}

@media (min-width: 520px){
  .planCard{
    min-width:340px;
    max-width:340px;
  }
  .balance__current{
    font-size: 20px;
  }
}

/* Modal (balance only)
   Use .ipxModal* classes so we don't touch any other overlays */
.ipxModal[hidden]{display:none}
.ipxModal{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:
    calc(12px + var(--tg-safe-top))
    12px
    calc(12px + var(--tg-safe-bottom))
    12px;
}
.ipxModal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.52);backdrop-filter: blur(6px)}
.ipxModal__sheet{
  position:relative;
  width:100%;
  max-width:520px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg,#2f2f2f 0%,#2b2b2b 100%); /* #1a1a1b; */
  backdrop-filter: blur(14px);
  box-shadow:0 22px 60px rgba(0,0,0,.40);
  padding:14px;
  max-height: calc(100dvh - var(--tg-safe-top) - var(--tg-safe-bottom) - var(--kb-offset, 0px) - 24px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
/* iOS Telegram WebView: --kb-offset can overestimate and over-shrink the modal.
   In keyboard mode keep the sheet near the top and let it scroll instead. */
body.is-modal-open.kb-open .ipxModal{
  place-items:start center;
  padding-top:calc(8px + var(--tg-safe-top));
  padding-bottom:8px;
}
body.is-modal-open.kb-open .ipxModal__sheet{
  margin-top:0;
  /* Old iOS/TG WebView can report tiny dynamic viewport while keyboard is open.
     Force a usable sheet height and keep scrolling inside the modal. */
  height:calc(100dvh - var(--tg-safe-top) - var(--tg-safe-bottom) - 16px);
  min-height:320px;
  max-height:none;
}
/* Payment promo input UX: opening keyboard should not resize or scroll the pay modal.
   Keep the block visually stable and let keyboard simply overlay lower page area. */
body.is-modal-open.kb-open #modal-pay.ipxModal{
  place-items:center;
  padding:
    calc(12px + var(--tg-safe-top))
    12px
    calc(12px + var(--tg-safe-bottom))
    12px;
}
body.is-modal-open.kb-open #modal-pay .ipxModal__sheet{
  height:auto;
  min-height:0;
  max-height:none;
  overflow:visible;
}
.ipxModal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ipxModal__title{font-weight:950;letter-spacing:.2px}
.ipxModeration18__title{
  font-size:20px;
  line-height:1.2;
}
.ipxModeration18__body{
  text-align:justify;
}
.ipxModal__close{appearance:none;border:0;background:transparent;color:rgba(255,255,255,.88);
  font-size:22px;line-height:1;cursor:pointer;padding:6px 10px;border-radius:12px}
.ipxForm{display:grid;gap:10px}
.ipxPay__plan{font-weight:900;color:rgba(255,255,255,.92);margin:2px 2px 6px}
.ipxPay__planTitle{
  font-size:28px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:.2px;
  margin-bottom:10px;
}
.ipxPay__planDesc{
  display:grid;
  gap:6px;
  font-size:16px;
  line-height:1.2;
  font-weight:700;
  color:rgba(255,255,255,.9);
}

.ipxOfferCard{
  border:0;
  border-radius:0;
  background:transparent;
  padding:4px 0 0;
}
.ipxOfferCard__head{
  margin-bottom:14px;
}
.ipxOfferCard__title{
  font-size:30px;
  line-height:1.02;
  font-weight:950;
}
.ipxOfferCard__list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
  font-size:18px;
  font-weight:700;
}
.ipxOfferCard__hint{
  margin-top:16px;
  font-size:13px;
  line-height:1.35;
  color:rgba(255,255,255,.7);
}
.ipxOfferCard__cta{
  margin-top:18px;
  min-height:54px;
  font-size:17px;
  font-weight:900;
}
.ipxOffer .ipxModal__title{
  color:ivory;
}
.ipxOffer .new{
  color:#a989fc;
  font-weight:900;
}
.ipxOfferTokenIcon{
  width:.62em;
  height:.76em;
  fill:#a989fc;
  vertical-align:-.03em;
  margin-left:-.1em;
  display:inline-block;
}
.ipxOfferCard__cta .new{
  color:#0b0b0c;
}

@media (max-width: 520px){
  .ipxOfferCard__title{font-size:28px;}
  .ipxOfferCard__list{font-size:17px;}
  .ipxOfferCard__hint{font-size:12px;}
}


[data-action="export-prompts"].is-busy{opacity:.65;pointer-events:none}

@media (max-width: 860px){
  .profile__grid{grid-template-columns:1fr}
}

/* Support */
.support__grid{display:grid;grid-template-columns: 1.2fr .8fr;gap:var(--gap)}
.faq{border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12);overflow:hidden;margin-top:10px}
.faq summary{padding:10px 12px;cursor:pointer;list-style:none;font-size:16px;color:rgba(255,255,255,.84)}
.faq summary::-webkit-details-marker{display:none}
.faq__body{padding:12px;border-top:1px solid rgba(255,255,255,.05)}
.state{display:flex;flex-direction:column;gap:10px}
.state__row{display:flex;align-items:center;gap:10px;color:var(--text-soft);font-size:12px}

@media (max-width: 860px){
  .support__grid{grid-template-columns:1fr}
}

/* Page title like in the mocks */
.pageTitle{font-size:22px;font-weight:900;color:rgba(255,255,255,.92);text-align:center;margin:6px 0 14px;}

/* Hide page titles on specific pages per product requirements */
.balance .pageTitle,
.history .pageTitle,
.history2 .pageTitle,
.profile .pageTitle,
.community .pageTitle{
  display:none !important;
}

/* Hide current balance summary on /balance */
.balance .balance__current{
  display:none !important;
}

.setsTitle{
  margin:10px 0 10px;
}

.studioHubV2{padding-top:4px}
.hubTopCarousel{overflow:hidden;padding-bottom:2px}
.hubTopCarousel::-webkit-scrollbar{display:none}
.hubTopCarousel__track{display:flex;gap:12px;transform:translate3d(0,0,0);will-change:transform;touch-action:pan-y}
.hubTopCarousel{cursor:grab;user-select:none}
.hubTopCarousel.is-dragging{cursor:grabbing}
.hubTrendCard{
  position:relative;
  flex:0 0 74vw;
  min-width:74vw;
  max-width:74vw;
  min-height:74vw;
  max-height:74vw;
  aspect-ratio:1.18/1;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  display:block;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.hubTrendCard__img,.hubTrendCard__video{width:100%;height:100%;object-fit:cover;display:block}
.mediaBlend{
  position:relative;
  display:grid;
  width:100%;
  height:100%;
}
.mediaBlend__preview,
.mediaBlend__video{
  grid-area:1 / 1;
  width:100%;
  display:block;
  object-fit:cover;
  transition:opacity .28s ease;
}
.mediaBlend__preview{
  pointer-events:none;
  opacity:1;
}
.mediaBlend__video{
  opacity:0;
}
.mediaBlend.is-video-ready .mediaBlend__preview{
  opacity:0;
}
.mediaBlend.is-video-ready .mediaBlend__video{
  opacity:1;
}
.imageBlend{
  position:relative;
  display:block;
  width:100%;
  height:100%;
}
.imageBlend__base,
.imageBlend__mid,
.imageBlend__full{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:opacity .24s ease;
}
.imageBlend__base{
  opacity:1;
}
.imageBlend__mid,
.imageBlend__full{
  opacity:0;
}
.imageBlend.is-mid-ready .imageBlend__base{
  opacity:0;
}
.imageBlend.is-mid-ready .imageBlend__mid{
  opacity:1;
}
.imageBlend.is-full-ready .imageBlend__mid{
  opacity:0;
}
.imageBlend.is-full-ready .imageBlend__full{
  opacity:1;
}
.hubTrendCard__overlay{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.52))}
.hubTrendCard__title{margin:0;font-size:22px;font-weight:800;line-height:1.08;color:rgba(255,255,255,.95);max-width:88%}
.hubTrendCard__btn{
  width:max-content;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(10,10,15,.48);
  color:rgba(255,255,255,.94);
  font-weight:700;
  padding:10px 20px;
  display:inline-flex;
}
/* Prevent text flicker on iOS/Telegram WebView while transform animates carousel track. */
.hubTrendCard__overlay,
.hubTrendCard__title,
.hubTrendCard__btn{
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.hubCreateTitle{margin-top:14px;margin-bottom:2px;text-align:left}

.hubModes{
  display:flex;
  gap:3vw;
  overflow:auto;
  padding:16px 0 16px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.hubModes.is-dragging{cursor:grabbing}
.hubModes::-webkit-scrollbar{display:none}
.hubModeCard{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  max-width:100px;
  scroll-snap-align:start;
}
.hubModeCard__ico{
  width:21vw;
  height:21vw;
  max-width: 100px;
  max-height: 100px;
  border-radius:24px;
  display:grid;
  place-items:center;
  font-size:34px;
  border:1px solid rgba(255,255,255,.14);
  background: #1a1a1b;/* radial-gradient(90% 90% at 50% 5%, rgba(232,236,242,.28), rgba(232,236,242,0) 44%),  linear-gradient(180deg, rgba(46,47,58,.92), rgba(24,24,29,.92)); */
  /* box-shadow:inset 0 0 22px rgba(255,255,255,.07); */
}
.hubModeCard__lbl{
  font-size:18px;
  font-weight:700;
  color:rgba(255,255,255,.94);
  text-align:center;
  line-height:1.1;
  max-width: 21vw;
}
.hubTrends{
  margin-top:0;
  padding:0px 0 12px;
}
.hubTrends__head{
  margin-bottom:12px;
}
.hubTrends__title{
  margin:0 0 6px;
  font-size:24px;
  line-height:1;
  font-weight:900;
  color:rgba(255,255,255,.96);
}
.hubTrends__sub{
  margin:0;
  font-size:3.6vw;
  line-height:1.25;
  color:rgba(255,255,255,.7);
  max-width:640px;
}
.hubTrends__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.hubTrendTile{
  position:relative;
  display:block;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  min-height:250px;
  aspect-ratio:3 / 4;
}
.hubTrendTile--link{
  text-decoration:none;
  color:inherit;
}
.hubTrendTile__media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hubTrendTile__overlay{
  position:absolute;
  inset:0;
  padding:10px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.58));
}
.hubTrendTile__chips{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.hubTrendTile__chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.95);
  background:rgba(0,0,0,.46);
  border:1px solid rgba(255,255,255,.2);
}
.hubTrendTile__chip--popular{
  color:#111;
  background:#ee7e44;
  border-color:#ee7e44;
  padding:0;              /* keep this chip square */
  width:32px;
  height:32px;
  min-width:32px;
  border-radius:10px;
  justify-content:center;
  gap:0;
}

/*
.hubTrendTile__chip--popular{
  color:#111;
  background:#f3c466;
  border-color:rgba(243,196,102,.88);
}
*/
.hubTrendTile__name{
  margin:0;
  font-size:18px;
  line-height:1.05;
  font-weight:800;
  color:rgba(255,255,255,.96);
}
.hubTrendTile--custom{
  border-style:dashed;
  border-color:rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}
.hubTrendTile__overlay--center{
  align-items:center;
  justify-content:center;
}
.hubTrends__more{
  margin:-28px 0 0;
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:rgba(255,255,255,.94);
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  padding:14px 16px;
  background:#1a1a1b;
  box-shadow:
    0 -12px 28px rgba(0,0,0,.42),
    0 10px 24px rgba(0,0,0,.28);
  font-size:16px;
  font-weight:800;
}
.hubTrends__moreIco{
  width:0px;
  height:0px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  border:0px solid rgba(255,255,255,.14);
  font-size:18px;
}
.hubTrends__moreText{
  text-align:center;
}
.hubTrends__moreArrow{
  font-size:34px;
  line-height:1;
  opacity:.9;
}

.hubTrendSections{
  display:grid;
  gap:20px;
  overflow:hidden;
}

.hubTrendShowcase{
  margin-top:22px;
  position:relative;
  z-index:1;
  overflow:hidden;
  --hub-showcase-card-w-desktop: clamp(150px, 24vw, 220px);
  --hub-showcase-card-w-tablet: clamp(150px, 40vw, 210px);
  --hub-showcase-card-w-mobile: clamp(140px, 58vw, 190px);
}

.studioHubV2 [data-studio-trends] .hubTrends__more{
  margin-top:10px;
  z-index:1;
}

.hubTrendSection__head{
  margin-bottom:10px;
}

.hubTrendSection{
  overflow:hidden;
}

.hubTrendSection__more{
  margin:6px 0 0;
  z-index:1;
}

.hubTrendSection__title{
  margin:0;
  font-size:36px;
  line-height:1.05;
  font-weight:900;
  color:rgba(255,255,255,.96);
}

.hubTrendSection__desc{
  margin:6px 0 0;
  font-size:16px;
  line-height:1.35;
  color:rgba(255,255,255,.68);
}

.hubTrendSection__row{
  --hub-showcase-card-w: var(--hub-showcase-card-w-desktop);
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:100%;
  padding:2px 0 10px;
  touch-action:pan-y;
  cursor:grab;
  user-select:none;
}

.hubTrendSection__track{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  transform:translate3d(0,0,0);
  will-change:transform;
}

.hubTrendSection__track > .hubTrendTile{
  flex:0 0 40vw;
  width:40vw;
  height:40vw;
  min-width:40vw;
  max-width:40vw;
  min-height:0;
}

.hubTrendSection__row.is-dragging{
  cursor:grabbing;
}

@media (max-width: 980px){
  .hubTrendSection__title{font-size:28px}
  .hubTrendSection__row{--hub-showcase-card-w: var(--hub-showcase-card-w-tablet)}
}

@media (max-width: 640px){
  .hubTrendSection__title{font-size:22px}
  .hubTrendSection__desc{font-size:15px}
  .hubTrendSection__row{--hub-showcase-card-w: var(--hub-showcase-card-w-mobile)}
}

.studioTrendCollection__desc{
  margin:4px 0 14px;
  color:rgba(255,255,255,.7);
  font-size:16px;
  line-height:1.35;
}

.studioTrendCollection .hubTrends__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.studioTrendCollectionTile{
  position:relative;
  display:block;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  min-height:150px;
  aspect-ratio:3 / 4;
  text-decoration:none;
  color:inherit;
}

.studioTrendCollectionTile__media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.studioTrendCollectionTile--custom{
  border-style:dashed;
  border-color:rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.studioTrendCollectionTile__customText{
  font-size:22px;
  line-height:1.1;
  font-weight:800;
  color:rgba(255,255,255,.94);
  padding:0 14px;
}

.studioTrendCreate__hero{
  margin-bottom:12px;
  position:relative;
}

.studioTrendCreate__heroMedia{
  width:100%;
  max-height:86vw;
  display:block;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
}

.studioTrendCreate__audioToggle{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(10,11,14,.56);
  color:rgba(255,255,255,.95);
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:2;
}
.studioTrendCreate__audioToggle:active{
  transform:translateY(1px);
}
.studioTrendCreate .card .manualDurationRow {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

/* Support states */
.supportBtn{margin-top:14px}
.supportState{margin-top:14px;text-align:center;font-weight:700}
.supportState__v{color:rgba(255,255,255,.88)}
.serviceState{margin-top:10px;text-align:center;font-weight:900;color:rgba(142,238,230,.86)}

/* Balance / Credits */
.creditCard{text-align:center;padding:18px;margin-bottom:var(--gap);background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));}
.creditCard__lbl{font-size:12px;color:var(--text-dim);letter-spacing:.02em}
.creditCard__val{font-size:42px;font-weight:900;margin:10px 0 14px}

.ledger{margin-top:8px;display:flex;flex-direction:column}
.ledger__row{display:flex;align-items:center;gap:12px;padding:12px 6px;border-top:1px solid rgba(255,255,255,.06)}
.ledger__row:first-child{border-top:1px solid rgba(255,255,255,.08)}
.ledger__ico{width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65)}
.ledger__main{flex:1;min-width:0}
.ledger__name{font-weight:900;color:rgba(255,255,255,.9)}
.ledger__sub{margin-top:2px;font-size:11px}
.ledger__sum{font-weight:900}


/* Skeleton loader (SPA navigation) */
#app-view.is-loading{min-height:420px}
.skel{display:flex;flex-direction:column;gap:14px}
.skelCard{border-radius:18px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.14);padding:14px;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.skel--generic{gap:12px}
.skelToolbar{display:flex;flex-direction:column;gap:10px}
.skelGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.skelTile{border-radius:16px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12);padding:10px}
.skelThumb{height:110px;border-radius:12px}
.skelLine{height:12px;border-radius:999px;margin-top:10px}
.skelLine--sm{width:40%}
.skelLine--md{width:60%}
.skelLine--lg{width:78%;height:16px}
.skelBlock{height:120px;border-radius:14px;margin-top:12px}
.skelBtn{height:44px;border-radius:14px;margin-top:12px}

.skelChips{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.skelPill{width:74px;height:26px;border-radius:999px}

.skelLine,.skelThumb,.skelBlock,.skelBtn,.skelPill{
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  background-size: 220% 100%;
  animation: skelShimmer 1.2s ease-in-out infinite;
}

/* --- Test page (/test) --- */
.testPage{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.testPage__filters{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items:center;
  gap: 15px;
}

.testPage__filtersLabel{
  flex:0 0 auto;
  color:rgba(255,255,255,.82);
  font-size:clamp(12px, 1.35vw, 18px);
  white-space:nowrap;
  font-size: 18px;
}

.testChip{
  width: 100%;
  min-height:44px;
  padding: 0 15px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:rgba(255,255,255,.62);
  font-size:16px;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
}

.testChip.is-active{
  color:#fff;
  border-color:rgba(255,255,255,.54);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}

.testChip--price{
  width:auto;
  justify-self:end;
}

.testGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.testCard{
  position:relative;
  aspect-ratio:1 / 1;
  border-radius:30px;
  /* border:1px solid rgba(255,255,255,.2); */
  overflow:hidden;
  background:#101425;
}

.testCard.is-selected{
  border-color:rgba(255,255,255,.72);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
}

.testCard__img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
}

.testCard__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(6,8,16,.14) 0%, rgba(6,8,16,.28) 38%, rgba(6,8,16,.92) 100%);
}

.testCard--locked .testCard__img{
  filter:brightness(.45) saturate(.75);
}

.testCard--locked .testCard__body{
  filter:brightness(.45) saturate(.75);
}

.testCard__lockOverlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.testCard__lockPill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:clamp(13px, 1.5vw, 30px);
  line-height:1;
  backdrop-filter:blur(4px);
}

.testCard__lockPill svg{
  width:20px;
  height:20px;
  flex:0 0 20px;
}

.testCard__badge{
  position:absolute;
  z-index:2;
  top:clamp(8px, 1.1vw, 14px);
  right:clamp(8px, 1.1vw, 14px);
  padding:clamp(5px, .6vw, 8px) clamp(10px, 1.3vw, 16px);
  border-radius:999px;
  font-size:clamp(12px, 1.5vw, 20px);
  border:1px solid transparent;
}

.testCard__badge--green{color:#92f0a0;background:rgba(44,120,56,.34);border-color:rgba(128,238,146,.58)}
.testCard__badge--gold{color:#ffd96b;background:rgba(126,92,24,.35);border-color:rgba(255,212,88,.6)}
.testCard__badge--purple{color:#d8a5ff;background:rgba(109,63,158,.34);border-color:rgba(208,147,255,.58)}
.testCard__badge--blue{color:#9ac8ff;background:rgba(47,94,172,.35);border-color:rgba(132,182,255,.58)}

.testCard__body{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  padding:clamp(10px, 1.5vw, 16px) clamp(10px, 1.6vw, 18px) clamp(10px, 1.6vw, 18px);
}

.testCard__title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
  margin:0;
  color:#fff;
  font-size: clamp(16px, 3vw + 2px, 18px);
  line-height:1.08;
  letter-spacing:-.03em;
}

.testCard__cost{
  display:inline-flex;
  align-items:center;
  gap:clamp(3px, .5vw, 8px);
  color:#fff;
  font-size:clamp(16px, 3.1vw, 38px);
  line-height:1;
  white-space:nowrap;
}

.testCard__costIcon{
  width:clamp(14px, 2.1vw, 24px);
  height:clamp(14px, 2.1vw, 24px);
  fill:#ee204d;
}

.testCard__stats{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:clamp(8px, 1vw, 12px);
  color:rgba(255,255,255,.7);
  font-size:clamp(13px, 1.35vw, 18px);
}

.qualityDots{
  display:inline-flex;
  align-items:center;
  gap:clamp(4px, .5vw, 7px);
}

.qualityDots i{
  display:block;
  width:clamp(7px, .8vw, 11px);
  aspect-ratio:1 / 1;
  border-radius:50%;
  background:rgba(255,255,255,.2);
}

.qualityDots.q1 i:nth-child(-n+1){background:#f04a4a}
.qualityDots.q2 i:nth-child(-n+2){background:#ff8b3d}
.qualityDots.q3 i:nth-child(-n+3){background:#f2a43b}
.qualityDots.q4 i:nth-child(-n+4){background:#67cf7a}
.qualityDots.q5 i:nth-child(-n+5){background:#4bd16a}

.speedTime{
  color:rgba(255,255,255,.92);
  font-weight:600;
  font-size:clamp(12px, 1.35vw, 18px);
  margin-right: 4%;
}


@keyframes skelShimmer{
  0%{background-position: 0% 0%}
  100%{background-position: 200% 0%}
}

@media (prefers-reduced-motion: reduce){
  .skelLine,.skelThumb,.skelBlock,.skelBtn,.skelPill{animation:none}
}

@media (max-width: 860px){
  .skelGrid{grid-template-columns:repeat(2,1fr)}
  #app-view.is-loading{min-height:520px}
}

@media (max-width: 520px){
  .brand__name{font-size:24px}
  .pill--balance{font-size:15px;padding:9px 12px}
  .pill--balance .pill__value{font-size:15px}
}

/* 375px baseline = дублируем все мобильные правила 520px, затем ниже точечно ужимаем */
@media (max-width: 375px){
  /* from @media (max-width: 520px) near top */
  .shell{padding:0;align-items:stretch;justify-content:flex-start}
  .screen{width:100%;padding:14px 14px 0;border-radius:0;border:none;background:transparent;box-shadow:none}

  /* from responsive helpers 520 */
  .desktop-only{display:none !important}
  .mobile-only{display:block !important}
  .bottomnav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(6px + env(safe-area-inset-bottom));
    z-index:50;
  }
  .content{padding-bottom:104px}

  /* iOS Safari/WebKit refinement */
  @supports (-webkit-touch-callout: none) {
    .bottomnav{
      bottom:calc(2px + env(safe-area-inset-bottom));
    }
  }

  /* from manualInfoBtn 520 */
  .manualInfoBtn::after{
    left:-35px;
    right:auto;
    top:calc(100% + 8px);
    width:min(240px, calc(100vw - 56px));
    transform:translateY(4px);
  }
  .manualInfoBtn::before{
    left:5px;
    right:auto;
    top:calc(100% + 4px);
    transform:rotate(45deg) translateY(4px);
  }
  .manualInfoBtn:hover::after,
  .manualInfoBtn:focus-visible::after,
  .manualInfoBtn.is-open::after{
    transform:translateY(0);
  }
  .manualInfoBtn:hover::before,
  .manualInfoBtn:focus-visible::before,
  .manualInfoBtn.is-open::before{
    transform:rotate(45deg);
  }

  /* from manualInfoBtn--up 520 */
  .manualInfoBtn--up::after{
    top:auto;
    bottom:calc(100% + 8px);
  }
  .manualInfoBtn--up::before{
    top:auto;
    bottom:calc(100% + 4px);
    transform:rotate(225deg) translateY(4px);
  }
  .manualInfoBtn--up:hover::before,
  .manualInfoBtn--up:focus-visible::before,
  .manualInfoBtn--up.is-open::before{
    transform:rotate(225deg);
  }

  /* from progress badge 520 */
  .progressPlanBadge{min-width:80px;padding:8px 0px}
  .progressPlanBadge b{font-size:20px}

  /* from offer card 520 */
  .ipxOfferCard__title{font-size:28px;}
  .ipxOfferCard__list{font-size:17px;}
  .ipxOfferCard__hint{font-size:12px;}

  /* from typography 520 */
  .brand__name{font-size:24px}
  .pill--balance{font-size:15px;padding:9px 12px}
  .pill--balance .pill__value{font-size:15px}
}

/* --- Sets --- */
.setsGrid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px;}

/* Sets: bigger card + bigger square thumbnail + optional background image/color
   - default stays the same (glass)
   - to customize per-card background set CSS vars on .setCard:
       --set-bg-color: <color>;
       --set-bg-image: url('...');
*/
.setCard{
  position:relative;
  display:flex;
  gap:0;
  padding:0;
  align-items:stretch;
  max-height: 150px;
  border-radius:22px;
  border:1px solid var(--line);
  background-color: rgba(15,12,30,.56); /* var(--set-bg-color, var(--glass)); */
  background-image: var(--set-bg-image, none);
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  text-decoration:none;
  color:inherit;
  overflow:hidden;
}

/* subtle overlay for readability when a background image is used */
.setCard::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.16);
  pointer-events:none;
}

.setCard__imgwrap{
  height:100%;
  aspect-ratio: 1 / 1;
  width:auto;
  border-radius:22px 0 0 22px;
  overflow:hidden;
  flex:0 0 auto;
  background:rgba(255,255,255,.04);
  border-right:1px solid rgba(255,255,255,.06);
  position:relative;
  z-index:1;
}

.setCard__img{width:100%;height:100%;object-fit:cover;display:block;}

.setCard__body{
  display:flex;
  align-items:center;
  justify-content: center;
  flex:1 1 auto;
  padding:18px;
  min-width:0;
  position:relative;
  z-index:1;
}

.setCard__name{font-size:20px;font-weight:900;letter-spacing:-.015em;line-height:1.1;}

.setTheme .pageTitleRow{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.setThemeCard{margin-top:14px;}
.setPromptList{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.setPrompt{text-align:left;width:100%;padding:12px 12px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:inherit;}
.setPrompt__title{font-weight:800;font-size:14px;margin-bottom:6px;}
.setPrompt__text{font-size:12px;line-height:1.35;max-height:2.7em;overflow:hidden;}
.setPrompt__cta{margin-top:8px;font-size:12px;font-weight:800;color:var(--accent);}

/* Sets: back arrow in title row (no absolute positioning) */
.pageBack{
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: rgba(255,255,255,.92);
  text-decoration: none;
}
.pageBack:active{transform:translateX(-1px)}
body.tg-system-back .viewer__back,
body.tg-system-back .pageBack,
body.tg-system-back .brand__arrow{
  display:none !important;
}
body.tg-system-back .brand.is-back .brand__logo{
  display:inline-flex;
}

/* Sets: prompt preview */
.setPrompt__preview{
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}


/* Sets (new): filters row + prompts grid */
.setsFilters{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  padding:4px 2px 10px;
  margin:-6px 0 2px;
  scroll-snap-type:x mandatory;

  /* hide scrollbar (Firefox/old Edge) */
  scrollbar-width:none;
  -ms-overflow-style:none;
}

/* hide scrollbar (WebKit: iOS Safari/Chrome/Safari) */
.setsFilters::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.setsFilter{
  flex:0 0 auto;
  scroll-snap-align:start;
  appearance:none;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  color:rgba(255,255,255,.86);
  padding:8px 12px;
  border-radius:10px;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}

.setsFilter:active{transform:translateY(1px)}
.setsFilter.is-active{
  color: #0b0b0c;

  /* платиновый цвет */
  background: #E5E4E2;

  border: 1px solid rgba(255,255,255,0.6);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -2px 4px rgba(0,0,0,0.25),
    0 8px 20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.15);

  transition: all 0.15s ease;

  position: relative;
  overflow: hidden;
}
.setsFilter.is-active::before {

  content: "";

  position: absolute;
  inset: 0;

  background-color: #000; /* цвет линий */

  -webkit-mask-image: url("/static/img/bg2.png");
  -webkit-mask-repeat: repeat;
  -webkit-mask-size: 32px 51px;

  mask-image: url("/static/img/bg2.png");
  mask-repeat: repeat;
  mask-size: 32px 51px;

  opacity: 0.4; /* прозрачность линий */

  pointer-events: none;
}

.setsMore{text-align:center;margin-top:10px}
.setsSentinel{height:1px}


/* --- Mobile keyboard: avoid bottomnav jumping over iOS keyboard --- */
body.kb-open .bottomnav{display:none !important}
body.kb-open .content{padding-bottom:18px !important}
body.is-modal-open .bottomnav{display:none !important}

/* --- Tablet / small laptop layout --- */
@media (min-width: 521px) and (max-width: 1024px){
  .shell{padding:18px 16px;}
  .screen{width:min(520px, 100%);}
}

@media (max-width: 440px) {
  /* Studio */
  .hubTrendCard{
    min-width:74vw;
    max-width:74vw;
    max-height:74vw;
    min-height:74vw;
    border-radius:20px
  }
  .hubTrendCard__overlay{
    padding: 18px;
    padding-bottom: 10px;
  }
  .hubTrendCard__title{
    font-size:22px
  }
  .hubTrendCard__btn{
    font-size:16px
  }
  .hubModeCard{
  }
  .hubModeCard__ico{
  }
  .hubModeCard__lbl{
    font-size:14px
  }
  .hubTrends__title{font-size:24px}
  .hubTrends__sub{
    font-size:3.5vw
  }
  .hubTrendTile__name{font-size:17px}
  .hubTrendTile{border-radius:20px}
  .hubTrends__more{padding:12px 14px;font-size:15px}
  .hubTrends__moreArrow{font-size:30px}

  /* Also studio, blocks under trends*/
  .hubTrendSection__track > .hubTrendTile{
    flex:0 0 40vw;
    width:40vw;
    height:40vw;
    min-width:40vw;
    max-width:40vw;
    min-height:0;
  }
  .balance__current{
    font-size: 20px;
  }

  /* --- studio/photo/create --- */
  .studioCreateCard{
  border-radius: 10px;
  }
  .studioCreateCard--prompt{
  }
  .studioCreatePromptTitle{
  font-size: 16px;
  }
  .studioCreatePromptHint{
  }
  .studioCreatePromptInput{
  font-size: 14px;
  }
  .studioCreatePromptCount{
  }
  .studioCreateImprove{
  }
  .studioCreateImprove svg{
  }
  .studioCreateCard .manualSection{
  }
  .studioCreateCard .manualSection__title{
  }
  .studioRefGrid{
  }
  .studioCreateCard--ref .refPickerItem{
  }
  .studioRefLimit{
  }
  .studioCreateCard--options .manualQualityRow{
  }
  .studioCreateCard--options .manualQualityBtn{
  font-size: 14px;
  max-width: 60px;
  border-radius: 10px;
  }
  .studioCreateCard--options .manualAspectRow{
  }
  .studioCreateCard--options .manualAspectBtn{
  max-width: 66px;
  max-height: 66px;
  }
  .manualAspectBtn__icon.is-square{
  }
  .manualAspectBtn__icon.is-portrait{
  }
  .manualAspectBtn__icon.is-landscape{
  }
  .manualAspectBtn__label{
  font-size: 14px;
  }
  .genbar{
  }

  .studioCreateCard:first-child{
  }
  .studioCreatePromptFoot{
  }
  .studioCreateImprove__label{
  }
  .studioCreateCard--options .manualQualityBtn.is-active{
  }
  .studioCreateCard--options .manualAspectBtn.is-active{
  }
  .manualAspectBtn__icon {
  }
  .studioCreateCard--options .manualAspectRow::-webkit-scrollbar{
  }
  .studioCreateCard--ref .refPickerItem .refPickerItem__remove{
  }
  .studioCreateCard--ref .refPickerItem.refPickerItem--add{
  }
  .studioCreateCard--ref .refPickerItem .refPickerItem__plus{
  }

  .genbar .btn {
    border-radius: 10px;
  }

  /* --- /studio/photo  --- */
  .studio {}
  .studio__grid {}
  .studio__grid--one {}
  .studioPane {}
  .studioPane.is-active {}

  .studioCreateCard {}
  .studioCreateCard--prompt {}
  .studioCreateCard--ref {}
  .studioCreateCard--options {}

  .studioCreatePromptHead {}
  .studioCreatePromptTitle {}
  .studioCreatePromptInput {}
  .studioCreatePromptFoot {}
  .studioCreatePromptCount {}
  .studioCreateImprove {}
  .studioCreateImprove__label {}

  .manualSection {}
  .manualSection__title {}

  .studioRefGrid {}
  .studioRefLimit {}
  .refPickerItem {}
  .refPickerItem--add {}
  .refPickerItem__plus {}
  .refPickerItem__remove {}

  .refPickerModal {}
  .refPickerModal__backdrop {}
  .refPickerModal__sheet {}
  .refPickerModal__head {}
  .refPickerModal__title {}
  .refPickerModal__grid {}
  .refPickerModal__actions {}

  .manualModelCarousel {}
  .manualModelGrid {}
  .manualModelCard {}
  .manualModelCard.is-active {}
  .manualModelCard.is-locked {}
  .manualModelCard__top {}
  .manualModelCard__ico {}
  .manualModelCard__radio {}
  .manualModelCard__lock {}
  .manualModelCard__name {}
  .manualModelCard__sub {}
  .manualModelCard__sub--locked {}

  .manualQualityRow {}
  .manualQualityBtn {}
  .manualQualityBtn.is-active {}
  .manualQualityBtn:disabled {}

  .manualAspectRow {}
  .manualAspectBtn {}
  .manualAspectBtn.is-active {}
  .manualAspectBtn:disabled {}
  .manualAspectBtn__icon {}
  .manualAspectBtn__icon.is-square {}
  .manualAspectBtn__icon.is-portrait {}
  .manualAspectBtn__icon.is-landscape {}
  .manualAspectBtn__label {}

  .manualDurationRow {}
  .manualDurationBtn {}
  .manualDurationBtn.is-active {}
  .manualDurationHint {}

  .stepper {}
  .stepper__btn {}
  .stepper__val {}

  .genbar {}
  .genbar__meta {}
  .studioPriceCoin {}

  .refState {}
  .refState__thumb {}
  .refState__text {}
  .refState__title {}
  .refState__sub {}

  .testPage {}
  .testPage__filters {
    gap: 10px;
}
  .testPage__filtersLabel {}
  .testChip {
    padding: 0;
    min-height: 40px;
    font-size: 3.5vw;
}
  .testChip.is-active {
}
  .testChip--price {
    padding: 0 10px;
}
  .testGrid {}
  .testCard {}
  .testCard.is-selected {}
  .testCard--locked {}
  .testCard__badge {}
  .testCard__img {}
  .testCard__overlay {}
  .testCard__body {}
  .testCard__title {
    font-size: clamp(14px, 2.5vw + 4px, 16px);
}
  .testCard__cost {}
  .testCard__costIcon {}
  .testCard__stats {}
  .testCard__lockOverlay {}
  .testCard__lockPill {
    font-size: 12px;
    padding: 7.5px 15px;
}
  .qualityDots {}
  .qualityDots i {}
  .qualityDots.q1 i:nth-child(-n+1) {}
  .qualityDots.q2 i:nth-child(-n+2) {}
  .qualityDots.q3 i:nth-child(-n+3) {}
  .qualityDots.q4 i:nth-child(-n+4) {}
  .qualityDots.q5 i:nth-child(-n+5) {}
  .speedTime {}

  .studio {}
  .studio__grid {}
  .studio__grid--one {}
  .studioPane {}
  .studioPane.is-active {}

  .studioCreateCard {}
  .studioCreateCard--prompt {}
  .studioCreateCard--ref {}
  .studioCreateCard--options {}

  .studioCreatePromptHead {}
  .studioCreatePromptTitle {}
  .studioCreatePromptInput {}
  .studioCreatePromptFoot {}
  .studioCreatePromptCount {}
  .studioCreateImprove {}
  .studioCreateImprove__label {}

  .manualSection {}
  .manualSection__title {}

  .studioRefGrid {}
  .studioRefLimit {}
  .refPickerItem {}
  .refPickerItem--add {}
  .refPickerItem__plus {}
  .refPickerItem__remove {}

  .refPickerModal {}
  .refPickerModal__backdrop {}
  .refPickerModal__sheet {}
  .refPickerModal__head {}
  .refPickerModal__title {}
  .refPickerModal__grid {}
  .refPickerModal__actions {}

  .manualModelCarousel {}
  .manualModelGrid {}
  .manualModelCard {}
  .manualModelCard.is-active {}
  .manualModelCard.is-locked {}
  .manualModelCard__top {}
  .manualModelCard__ico {}
  .manualModelCard__radio {}
  .manualModelCard__lock {}
  .manualModelCard__name {}
  .manualModelCard__sub {}
  .manualModelCard__sub--locked {}

  .manualQualityRow {}
  .manualQualityBtn {}
  .manualQualityBtn.is-active {}
  .manualQualityBtn:disabled {}

  .manualAspectRow {}
  .manualAspectBtn {}
  .manualAspectBtn.is-active {}
  .manualAspectBtn:disabled {}
  .manualAspectBtn__icon {}
  .manualAspectBtn__icon.is-square {}
  .manualAspectBtn__icon.is-portrait {}
  .manualAspectBtn__icon.is-landscape {}
  .manualAspectBtn__label {}

  .manualDurationRow {}
  .manualDurationBtn {}
  .manualDurationBtn.is-active {}
  .manualDurationHint {}

  .stepper {}
  .stepper__btn {}
  .stepper__val {}

  .genbar {}
  .genbar__meta {}
  .studioPriceCoin {}

  .refState {}
  .refState__thumb {}
  .refState__text {}
  .refState__title {}
  .refState__sub {}

  .testCard__lockPill svg{
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 420px) {
  /* Studio */
  .hubTrendCard{
    min-width:70vw;
    max-width:70vw;
    max-height:70vw;
    min-height:70vw;
    border-radius:20px
  }
  .hubTrendCard__overlay{
    padding: 16px;
    padding-bottom: 10px;
  }
  .hubTrendCard__title{
    font-size:20px
  }
  .hubTrendCard__btn{
    font-size:15px
  }
  .hubModeCard{
  }
  .hubModeCard__ico{
  }
  .hubModeCard__lbl{
    font-size:14px
  }
  .hubTrends__title{font-size:22px}
  .hubTrends__sub{}
  .hubTrendTile{min-height:220px}
  .hubTrendTile__name{font-size:15px}
  .hubTrendTile__chip{font-size:11px;padding:5px 8px}
  .hubTrendTile__chip--popular{
    width:30px;
    height:30px;
    min-width:30px;
    padding:0;
  }
  .hubTrends__more{font-size:14px}
  .hubTrends__moreIco{width:0px;height:0px;font-size:16px}
  .hubTrends__moreArrow{font-size:28px}

  /* Video settings page */
  .manualModelCard__name{
    font-size: 14px;
  }
  .manualQualityBtn{
    font-size: 16px;
  }
  .manualDurationBtn{
    font-size: 16px;
  }
  .balance__current{
    font-size: 20px;
  }

  .progressFeedbackSend{
  font-size: 14px;
  }
  .progressFeedbackInput{
  font-size: 14px;
  }
}

@media (max-width: 411px) {
  .hubModeCard{
  }
  .hubModeCard__ico{
  }
}

@media (max-width: 390px) {
  .seg__item {
    font-size: 14px;
  }
  .hubModes {
    gap: 2.9vw;
  }
  .hubModeCard{
  }
  .hubModeCard__ico {
  }
  .hubTrends__sub {
  }

  /* Video settings page */
  .manualModelCard__name{
    font-size: 12px;
  }
  .manualModelCard__sub{
    font-size: 12px;
  }
  .manualQualityRow {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
  .manualQualityBtn{
    font-size: 14px;
    min-height: 40px;
  }

  .manualDurationBtn{
    font-size: 14px;
    min-height: 40px;
  }
  .manualAspectBtn{
    font-size: 14px;
    min-height: 40px;
  }
  .manualModelCard__ico{
    width: 26px;
    height: 26px;
    font-size: 15px;
  }
  .manualModelCard__radio{
    width: 14px;
    height: 14px;
  }
  .balance__current{
    font-size: 20px;
  }
  .progressFeedbackSend{
  font-size: 13px;
  }
  .progressFeedbackInput{
  font-size: 13px;
  }
}
@media (max-width: 375px) {
  .seg__item {
    font-size: 13px;
  }
  .balance__current{
    font-size: 19px;
  }
  .progressFeedbackSend{
  font-size: 12px;
  }
  .progressFeedbackInput{
  font-size: 12px;
  }
}

/* стили именно для 375x667 и меньше */
@media (max-width: 375px){ /* and (max-height: 667px) { */
  .pageTitle{
    font-size: 20px;
  }
  .topbar {
    margin-bottom: 10px;
  }
  .studio__grid {
    gap: 10px;
  }
  .studioQuickActions {
    margin: 0;
  }
  .studioQuickBtn {
    font-size: 13px;
    padding: 8px;
  }
  .studioFxTrack {
    height: 120px;
    width: 120px;
  }
  .studioFxCard {
  height: 100%;
  width: 100%;
  min-width: 0;
  }
  /* Studio */
  .hubTrendCard{
    min-width:70vw;
    max-width:70vw;
    max-height:70vw;
    min-height:70vw;
    border-radius:20px
  }
  .hubTrendCard__overlay{
    padding: 12px;
    padding-bottom: 8px;
  }
  .hubTrendCard__title{
    font-size:20px
  }
  .hubTrendCard__btn{font-size:14px}
  .hubModeCard{
  }
  .hubModeCard__ico{
    width:20.5vw;
    height:20.5vw;
    border-radius:20px;
  }
  .hubModeCard__lbl{
    font-size:13px;
  }
  .hubTrends__title {
    font-size: 20px;
  }
  .font-size {
    font-size: 13px;
  }
  .hubTrends__sub {
  }

  /* Video settings page */
  .manualModelCard__name{
    font-size: 11px;
  }
  .manualModelCard__sub{
    font-size: 11px;
  }
  .manualQualityBtn{
    font-size: 14px;
    min-height: 40px;
  }
  .videoRefsDrop__text{
    font-size: 14px;
  }
  .manualSection__title{
    font-size: 15px;
  }
  .field__lbl{
    font-size: 15px;
  }
  .miniBtn{
    font-size: 13px;
  }
  .field .textarea {
    font-size: 15px;
  }
  .genbar .btn {
    font-size: 15px;
  }
  .size-8{
    width: 35px;
    height: 35px;
  }
  .manualAspectBtn{
    min-height:40px;
  }
  .manualDurationHint{
    font-size: 13px;
  }
  .balance__current{
    font-size: 18px;
  }
  .studioCreateCard{
  }
  .studioCreateCard--prompt{
  }
  .studioCreatePromptTitle{
  font-size: 14p;
  }
  .studioCreatePromptHint{
  }
  .studioCreatePromptInput{
  }
  .studioCreatePromptCount{
  }
  .studioCreateImprove{
  }
  .studioCreateImprove svg{
  }
  .studioCreateCard .manualSection{
  }
  .studioCreateCard .manualSection__title{
  }
  .studioRefGrid{
  }
  .studioCreateCard--ref .refPickerItem{
  }
  .studioRefLimit{
  }
  .studioCreateCard--options .manualQualityRow{
  }
  .studioCreateCard--options .manualQualityBtn{
  }
  .studioCreateCard--options .manualAspectRow{
  }
  .studioCreateCard--options .manualAspectBtn{
  }
  .manualAspectBtn__icon.is-square{
  }
  .manualAspectBtn__icon.is-portrait{
  }
  .manualAspectBtn__icon.is-landscape{
  }
  .manualAspectBtn__label{
  }
  .genbar{
  }

  .studioCreateCard:first-child{
  }
  .studioCreatePromptFoot{
  }
  .studioCreateImprove__label{
  }
  .studioCreateCard--options .manualQualityBtn.is-active{
  }
  .studioCreateCard--options .manualAspectBtn.is-active{
  }
  .manualAspectBtn__icon {
  }
  .studioCreateCard--options .manualAspectRow::-webkit-scrollbar{
  }
  .studioCreateCard--ref .refPickerItem .refPickerItem__remove{
  }
  .studioCreateCard--ref .refPickerItem.refPickerItem--add{
  }
  .studioCreateCard--ref .refPickerItem .refPickerItem__plus{
  }

  /* --- /studio/photo  --- */
  .studio {}
  .studio__grid {}
  .studio__grid--one {}
  .studioPane {}
  .studioPane.is-active {}

  .studioCreateCard {}
  .studioCreateCard--prompt {}
  .studioCreateCard--ref {}
  .studioCreateCard--options {}

  .studioCreatePromptHead {}
  .studioCreatePromptTitle {}
  .studioCreatePromptInput {}
  .studioCreatePromptFoot {}
  .studioCreatePromptCount {}
  .studioCreateImprove {}
  .studioCreateImprove__label {}

  .manualSection {}
  .manualSection__title {}

  .studioRefGrid {}
  .studioRefLimit {}
  .refPickerItem {}
  .refPickerItem--add {}
  .refPickerItem__plus {}
  .refPickerItem__remove {}

  .refPickerModal {}
  .refPickerModal__backdrop {}
  .refPickerModal__sheet {}
  .refPickerModal__head {}
  .refPickerModal__title {}
  .refPickerModal__grid {}
  .refPickerModal__actions {}

  .manualModelCarousel {}
  .manualModelGrid {}
  .manualModelCard {}
  .manualModelCard.is-active {}
  .manualModelCard.is-locked {}
  .manualModelCard__top {}
  .manualModelCard__ico {}
  .manualModelCard__radio {}
  .manualModelCard__lock {}
  .manualModelCard__name {}
  .manualModelCard__sub {}
  .manualModelCard__sub--locked {}

  .manualQualityRow {}
  .manualQualityBtn {}
  .manualQualityBtn.is-active {}
  .manualQualityBtn:disabled {}

  .manualAspectRow {}
  .manualAspectBtn {}
  .manualAspectBtn.is-active {}
  .manualAspectBtn:disabled {}
  .manualAspectBtn__icon {}
  .manualAspectBtn__icon.is-square {}
  .manualAspectBtn__icon.is-portrait {}
  .manualAspectBtn__icon.is-landscape {}
  .manualAspectBtn__label {}

  .manualDurationRow {}
  .manualDurationBtn {}
  .manualDurationBtn.is-active {}
  .manualDurationHint {}

  .stepper {}
  .stepper__btn {}
  .stepper__val {}

  .genbar {}
  .genbar__meta {}
  .studioPriceCoin {}

  .refState {}
  .refState__thumb {}
  .refState__text {}
  .refState__title {}
  .refState__sub {}

  .testPage {}
  .testPage__filters {}
  .testPage__filtersLabel {
    font-size: 16px;
}
  .testChip {
    min-height: 35px;
    /* font-size: 14px; */
}
  .testChip.is-active {}
  .testChip--price {}
  .testGrid {}
  .testCard {}
  .testCard.is-selected {}
  .testCard--locked {}
  .testCard__badge {}
  .testCard__img {}
  .testCard__overlay {}
  .testCard__body {
    padding: 8px;
}
  .testCard__title {
    font-size: clamp(12px, 2.5vw + 4px, 14px);
}
  .testCard__cost {
    font-size: 13px;
}
  .testCard__costIcon {
    width: 12px;
    height: 12px;
}
  .testCard__stats {
    font-size: 11px;
}
  .testCard__lockOverlay {}
  .testCard__lockPill {
    font-size: 10px;
    padding: 7px 12px 7px 12px;
}
  .qualityDots {}
  .qualityDots i {width: 5px;}
  .qualityDots.q1 i:nth-child(-n+1) {}
  .qualityDots.q2 i:nth-child(-n+2) {}
  .qualityDots.q3 i:nth-child(-n+3) {
}
  .qualityDots.q4 i:nth-child(-n+4) {}
  .qualityDots.q5 i:nth-child(-n+5) {}
  .speedTime {
    font-size: 11px;
}

  .studio {}
  .studio__grid {}
  .studio__grid--one {}
  .studioPane {}
  .studioPane.is-active {}

  .studioCreateCard {}
  .studioCreateCard--prompt {}
  .studioCreateCard--ref {}
  .studioCreateCard--options {}

  .studioCreatePromptHead {}
  .studioCreatePromptTitle {}
  .studioCreatePromptInput {}
  .studioCreatePromptFoot {}
  .studioCreatePromptCount {}
  .studioCreateImprove {}
  .studioCreateImprove__label {}

  .manualSection {}
  .manualSection__title {}

  .studioRefGrid {}
  .studioRefLimit {}
  .refPickerItem {}
  .refPickerItem--add {}
  .refPickerItem__plus {}
  .refPickerItem__remove {}

  .refPickerModal {}
  .refPickerModal__backdrop {}
  .refPickerModal__sheet {}
  .refPickerModal__head {}
  .refPickerModal__title {}
  .refPickerModal__grid {}
  .refPickerModal__actions {}

  .manualModelCarousel {}
  .manualModelGrid {}
  .manualModelCard {}
  .manualModelCard.is-active {}
  .manualModelCard.is-locked {}
  .manualModelCard__top {}
  .manualModelCard__ico {}
  .manualModelCard__radio {}
  .manualModelCard__lock {}
  .manualModelCard__name {}
  .manualModelCard__sub {}
  .manualModelCard__sub--locked {}

  .manualQualityRow {}
  .manualQualityBtn {}
  .manualQualityBtn.is-active {}
  .manualQualityBtn:disabled {}

  .manualAspectRow {}
  .manualAspectBtn {}
  .manualAspectBtn.is-active {}
  .manualAspectBtn:disabled {}
  .manualAspectBtn__icon {}
  .manualAspectBtn__icon.is-square {}
  .manualAspectBtn__icon.is-portrait {}
  .manualAspectBtn__icon.is-landscape {}
  .manualAspectBtn__label {}

  .manualDurationRow {}
  .manualDurationBtn {}
  .manualDurationBtn.is-active {}
  .manualDurationHint {}

  .stepper {}
  .stepper__btn {}
  .stepper__val {}

  .genbar {}
  .genbar__meta {}
  .studioPriceCoin {}

  .refState {}
  .refState__thumb {}
  .refState__text {}
  .refState__title {}
  .refState__sub {}

  .testCard__lockPill svg{
    width: 14px;
    height: 14px;
  }
}

/* стили именно для 360x740 и меньше */
@media (max-width: 360px){ /*  and (max-height: 745px) { */
  /* main */
  .pageTitle{
    font-size: 20px;
  }
  .topbar {
    margin-bottom: 10px;
  }
  .seg__item {
    font-size: 13px;
  }
  .studio__grid {
    gap: 10px;
  }
  .studioQuickActions {
    margin: 0;
  }
  .studioQuickBtn {
    font-size: 13px;
    padding: 8px;
  }
  .studioFxTrack {
    height: 120px;
    width: 120px;
  }
  .studioFxCard {
    height: 100%;
    width: 100%;
    min-width: 0;
  }
  /* Studio */
  .hubTrendCard{
    min-width:65vw;
    max-width:65vw;
    max-height:65vw;
    min-height:65vw;
    border-radius:20px
  }
  .hubTrendCard__overlay{
    padding: 12px;
    padding-bottom: 8px;
  }
  .hubTrendCard__title{
    font-size:18px;
  }
  .hubTrendCard__btn{
    font-size:14px;
  }
  .hubModeCard{
  }
  .hubModeCard__ico{
    border-radius: 18px;
  }
  .hubModeCard__lbl{font-size:13px}
  .hubModes{
    padding: 12px 0 12px;
  }
  .hubTrends__sub {
    font-size: 3.4vw;
  }
  .hubTrends__title {
    font-size: 18px;
  }
  .hubTrendTile {
    min-height: 180px;
  }
  .hubTrendTile__chip {
    padding: 3px 5px;
    border-radius: 8px;
  }
  .hubTrendTile__chip--popular{
    width:28px;
    height:28px;
    min-width:28px;
    padding:0;
    border-radius:8px;
  }
  .hubTrendTile__chip .size-6 {
    width: 22px;
    height: 22px;
  }
  .hubTrendTile__name {
    font-size: 14px;
  }
  .hubTrends__more {
    padding: 10px 12px;
  }
  .hubTrendSection__track > .hubTrendTile{
    flex:0 0 40vw;
    width:40vw;
    height:40vw;
    min-width:40vw;
    max-width:40vw;
    min-height:0;
  }

  /* Video settings page */
  .manualModelCard__name{
    font-size: 10px;
  }
  .manualModelCard__sub{
    font-size: 10px;
  }
  .manualModelCard__ico{
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
  .manualModelCard__radio{
    width: 13px;
    height: 13px;
  }
  .manualQualityBtn{
    font-size: 14px;
    min-height: 35px;
  }
  .manualDurationBtn{
    font-size: 14px;
    min-height: 35px;
  }
  .manualAspectBtn{
    font-size: 14px;
    min-height: 40px;
  }
  .videoRefsDrop__text{
    font-size: 13px;
  }
  .manualSection__title{
    font-size: 15px;
  }
  .field__lbl{
    font-size: 15px;
  }
  .miniBtn{
    font-size: 13px;
  }
  .field .textarea {
    font-size: 15px;
  }
  .genbar .btn {
    font-size: 14px;
  }
  .size-8{
    width: 32px;
    height: 32px;
  }
  .balance__current{
    font-size: 17px;
  }
  .planCard__name{
    font-size: 6.2vw;
  }
  .progressFeedbackSend{
  }
  .progressFeedbackInput{
  }
}

@media (max-width: 340px) {
  .hubTrends__sub {
  }
  .balance__current{
    font-size: 16px;
  }
  .planCard__name{
    font-size: 6vw;
  }

  .balance [data-balance-section="subscriptions"] .planCard--subscription {
    padding: 16px;
  }

  .balance [data-balance-section="subscriptions"] .plan__features {
    margin: 16px -16px 0;
    padding: 16px 16px 0px 16px;
  }

  .studioCreateCard{
  border-radius: 10px;
  }
  .studioCreateCard--prompt{
  }
  .studioCreatePromptTitle{
  font-size: 14px;
  }
  .studioCreatePromptHint{
  }
  .studioCreatePromptInput{
  }
  .studioCreatePromptCount{
  }
  .studioCreateImprove{
  }
  .studioCreateImprove svg{
  }
  .studioCreateCard .manualSection{
  }
  .studioCreateCard .manualSection__title{
  }
  .studioRefGrid{
  }
  .studioCreateCard--ref .refPickerItem{
  }
  .studioRefLimit{
  }
  .studioCreateCard--options .manualQualityRow{
  }
  .studioCreateCard--options .manualQualityBtn{
  }
  .studioCreateCard--options .manualAspectRow{
  }
  .studioCreateCard--options .manualAspectBtn{
  }
  .manualAspectBtn__icon.is-square{
  }
  .manualAspectBtn__icon.is-portrait{
  }
  .manualAspectBtn__icon.is-landscape{
  }
  .manualAspectBtn__label{
  font-size: 12px;
  }
  .genbar{
  border-radius: 0px;
  }

  .studioCreateCard:first-child{
  }
  .studioCreatePromptFoot{
  }
  .studioCreateImprove__label{
  }
  .studioCreateCard--options .manualQualityBtn.is-active{
  min-height: 40px;
  }
  .studioCreateCard--options .manualAspectBtn.is-active{
  }
  .manualAspectBtn__icon {
  }
  .studioCreateCard--options .manualAspectRow::-webkit-scrollbar{
  }
  .studioCreateCard--ref .refPickerItem .refPickerItem__remove{
  }
  .studioCreateCard--ref .refPickerItem.refPickerItem--add{
  }
  .studioCreateCard--ref .refPickerItem .refPickerItem__plus{
  }

  /* --- /studio/photo  --- */
  .studio {}
  .studio__grid {}
  .studio__grid--one {}
  .studioPane {}
  .studioPane.is-active {}

  .studioCreateCard {}
  .studioCreateCard--prompt {}
  .studioCreateCard--ref {}
  .studioCreateCard--options {}

  .studioCreatePromptHead {}
  .studioCreatePromptTitle {}
  .studioCreatePromptInput {}
  .studioCreatePromptFoot {}
  .studioCreatePromptCount {}
  .studioCreateImprove {}
  .studioCreateImprove__label {}

  .manualSection {}
  .manualSection__title {}

  .studioRefGrid {}
  .studioRefLimit {}
  .refPickerItem {}
  .refPickerItem--add {}
  .refPickerItem__plus {}
  .refPickerItem__remove {}

  .refPickerModal {}
  .refPickerModal__backdrop {}
  .refPickerModal__sheet {}
  .refPickerModal__head {}
  .refPickerModal__title {}
  .refPickerModal__grid {}
  .refPickerModal__actions {}

  .manualModelCarousel {}
  .manualModelGrid {}
  .manualModelCard {}
  .manualModelCard.is-active {}
  .manualModelCard.is-locked {}
  .manualModelCard__top {}
  .manualModelCard__ico {}
  .manualModelCard__radio {}
  .manualModelCard__lock {}
  .manualModelCard__name {}
  .manualModelCard__sub {}
  .manualModelCard__sub--locked {}

  .manualQualityRow {}
  .manualQualityBtn {}
  .manualQualityBtn.is-active {}
  .manualQualityBtn:disabled {}

  .manualAspectRow {}
  .manualAspectBtn {}
  .manualAspectBtn.is-active {}
  .manualAspectBtn:disabled {}
  .manualAspectBtn__icon {}
  .manualAspectBtn__icon.is-square {}
  .manualAspectBtn__icon.is-portrait {}
  .manualAspectBtn__icon.is-landscape {}
  .manualAspectBtn__label {}

  .manualDurationRow {}
  .manualDurationBtn {}
  .manualDurationBtn.is-active {}
  .manualDurationHint {}

  .stepper {}
  .stepper__btn {}
  .stepper__val {}

  .genbar {}
  .genbar__meta {}
  .studioPriceCoin {}

  .refState {}
  .refState__thumb {}
  .refState__text {}
  .refState__title {}
  .refState__sub {}

  .testPage {}
  .testPage__filters {}
  .testPage__filtersLabel {
    font-size: 14px;
}
  .testChip {
    min-height: 30px;
    font-size: 10px;
}
  .testChip.is-active {}
  .testChip--price {}
  .testGrid {}
  .testCard {}
  .testCard.is-selected {}
  .testCard--locked {}
  .testCard__badge {}
  .testCard__img {}
  .testCard__overlay {}
  .testCard__body {
    padding: 7px;
}
  .testCard__title {
    font-size: clamp(10px, 2.3vw + 4px, 12px);
}
  .testCard__cost {
    font-size: 12px;
}
  .testCard__costIcon {
    width: 10px;
    height: 10px;
}
  .testCard__stats {}
  .testCard__lockOverlay {}
  .testCard__lockPill {
}
  .qualityDots {}
  .qualityDots i {}
  .qualityDots.q1 i:nth-child(-n+1) {}
  .qualityDots.q2 i:nth-child(-n+2) {}
  .qualityDots.q3 i:nth-child(-n+3) {}
  .qualityDots.q4 i:nth-child(-n+4) {}
  .qualityDots.q5 i:nth-child(-n+5) {}
  .speedTime {}

  .studio {}
  .studio__grid {}
  .studio__grid--one {}
  .studioPane {}
  .studioPane.is-active {}

  .studioCreateCard {}
  .studioCreateCard--prompt {}
  .studioCreateCard--ref {}
  .studioCreateCard--options {}

  .studioCreatePromptHead {}
  .studioCreatePromptTitle {}
  .studioCreatePromptInput {}
  .studioCreatePromptFoot {}
  .studioCreatePromptCount {}
  .studioCreateImprove {}
  .studioCreateImprove__label {}

  .manualSection {}
  .manualSection__title {}

  .studioRefGrid {}
  .studioRefLimit {}
  .refPickerItem {}
  .refPickerItem--add {}
  .refPickerItem__plus {}
  .refPickerItem__remove {}

  .refPickerModal {}
  .refPickerModal__backdrop {}
  .refPickerModal__sheet {}
  .refPickerModal__head {}
  .refPickerModal__title {}
  .refPickerModal__grid {}
  .refPickerModal__actions {}

  .manualModelCarousel {}
  .manualModelGrid {}
  .manualModelCard {}
  .manualModelCard.is-active {}
  .manualModelCard.is-locked {}
  .manualModelCard__top {}
  .manualModelCard__ico {}
  .manualModelCard__radio {}
  .manualModelCard__lock {}
  .manualModelCard__name {}
  .manualModelCard__sub {}
  .manualModelCard__sub--locked {}

  .manualQualityRow {}
  .manualQualityBtn {}
  .manualQualityBtn.is-active {}
  .manualQualityBtn:disabled {}

  .manualAspectRow {}
  .manualAspectBtn {}
  .manualAspectBtn.is-active {}
  .manualAspectBtn:disabled {}
  .manualAspectBtn__icon {}
  .manualAspectBtn__icon.is-square {}
  .manualAspectBtn__icon.is-portrait {}
  .manualAspectBtn__icon.is-landscape {}
  .manualAspectBtn__label {}

  .manualDurationRow {}
  .manualDurationBtn {}
  .manualDurationBtn.is-active {}
  .manualDurationHint {}

  .stepper {}
  .stepper__btn {}
  .stepper__val {}

  .genbar {}
  .genbar__meta {}
  .studioPriceCoin {}

  .refState {}
  .refState__thumb {}
  .refState__text {}
  .refState__title {}
  .refState__sub {}

  .testCard__lockPill svg{
    width: 14px;
    height: 14px;
  }
  .progressFeedbackSend{
  font-size: 11px;
  height: 30px;
  border-radius: 10px;
  }
  .progressFeedbackInput{
  font-size: 11px;
  height: 30px;
  }
}

/* стили именно для 320x660 и меньше */
@media (max-width: 320px){ /*  and (max-height: 660px) { */
  /* --- Create Page --- */
  .seg__item {
    font-size: 11px;
  }
  .field__lbl {
    font-size: 14px;
  }
  .miniBtn {
    font-size: 12px;
  }
  .textarea {
    font-size: 14px;
  }
  .studioQuickBtn {
    font-size: 12px;
    gap: 2px;
  }
  .ico svg {
    width: 15px;
    height: 15px;
  }
  .bottomnav {
    max-height: 70px;
  }
  .btn--primary {
    font-size: 14px;
  }
  .studioPriceCoin {
    width:14px;
    height:14px;
  }

  .manualAspectBtn {
    min-height: 36px;
    font-size: 14px;
  }
  .manualModelCard__name {
    font-size: 12px;
  }
  .manualModelCard__ico {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
  .manualModelCard__radio {
    width: 16px;
    height: 16px;
  }
  .manualQualityBtn {
    min-height: 36px;
    font-size: 14px;
  }
  .manualDurationBtn {
    min-height: 36px;
    font-size: 14px;
  }
  .manualQtyBtn{
    min-height: 36px;
    font-size: 14px;
  }

  /* --- Balance --- */
  .planCard__head {
    align-items: center;
  }
  .planCard__name {
    font-size: 5.5vw;
  }
  .planCard__badge {
    font-size: 12px;
  }
  .planCard__list li {
    font-size: 12px;
  }
  .planCard__price {
    font-size: 15px;
  }
  .planCard__per {
    font-size: 14px;
  }
  .balance .planCard__buyBtn{
    min-height:46px;
    height:46px;
    font-size:16px;
  }

  /* --- History --- */
  .pageTitle {
    font-size: 18px;
    margin-top: 0;
  }
  .histCard__body {
    padding-left: 4px;
    padding-right: 4px;
  }
  .histCard__meta {
    font-size: 10px;
    gap: 0px;
  }
  .histGrid {
    margin-top: -10px;
  }

  /* --- Viewer page --- */
  .viewerBar {
    padding: 8px 8px 10px;
  }
  .viewerBar__btn{
    width: 30px;
    height: 30px;
  }
  .viewerBar__btn svg, .iconbtn svg {
    width: 20px;
    height: 20px;
  }
  .viewerBar__date {
    font-size: 12px;
  }
  .card__title {
    font-size: 18px;
  }
  .iconbtn--sm {
    width: 30px;
    height: 30px;
  }
  .viewerBar__btn svg, .iconbtn svg {
    width: 20px;
    height: 20px;
  }
  .js-prompt-text {
    font-size: 14px;
    margin: 0;
  }

  /* --- Sets (Ideas) --- */
  .setsFilter {
    font-size: 13px;
  }
  .histCard--set .histCard__overlayTitle {
    left: 8px;
    bottom: 8px;
  }

  /* --- Top Navbar --- */
  .brand__name {
    font-size: 20px
  }
  .pill--balance .pill__label {
    font-size: 13px;
  }
  .pill--balance .pill__value{
    font-size: 13px
  }
  .pill--balance .pill__coin-icon{
    width:14px;
    height:14px;
  }

  /* --- Bottom Navbar --- */
  .bottomnav__item .lbl {
    font-size: 9.5px;
  }

  /* --- Profile Page --- */
  .profileHeader__name {
    font-size: 22px;
  }
  .profileSettings__title {
    font-size: 18px;
  }
  .setRow__left {
    font-size: 14px;
  }
  .linkRow {
    font-size: 14px;
  }
  .switch__ui {
    width: 40px;
    height: 22px;
  }
  .switch__ui::after {
    width: 16px;
    height: 16px;
  }

  /* --- Support --- */
  .faq--first {
    margin-top: 0;
  }
  .faq summary {
    font-size: 14px;
  }
  .faq__body {
    font-size: 14px;
    text-align: justify;
  }
  .supportHelpActions .muted {
    font-size: 13px;
  }

  /* --- Progress --- */
  .progressHead .card__title {
    font-size: 16px;
  }
  .progressPlanBadge {
    min-width: 60px;
    padding: 6px 0px;
  }
  .progressPlanBadge b {
    font-size: 18px;
  }
  .step {
    font-size: 10px;
    gap: 4px;
  }
  .dot {
    margin: 0;
  }
  .btn--dark {
    font-size: 14px;
  }

  /* Studio */
  .size-8 {
    width: 30px;
    height: 30px;
  }
  .hubTopCarousel {
    margin-bottom: 16px;
  }
  .hubModes {
    padding: 12px 0 2px;
  }
  .hubModeCard{
  }
  .hubModeCard__ico{
    border-radius: 16px;
  }
  .hubModeCard__lbl{
    font-size:12px;
  }
  .hubTrendCard{
    min-width:70vw;
    max-width:70vw;
    max-height:70vw;
    min-height:70vw;
    border-radius:20px
  }
  .hubTrendCard__title{
    font-size:18px;
  }
  .hubTrendCard__btn{
    font-size: 12px;
  }
  .hubTrends__title {
    font-size: 18px;
  }
  .hubTrendTile {
    min-height: 180px;
  }
  .hubTrendTile__chip {
    padding: 2px;
    border-radius: 6px;
  }
  .hubTrendTile__chip--popular{
    width:24px;
    height:24px;
    min-width:24px;
    padding:0;
    border-radius:6px;
  }
  .hubTrendTile__chip .size-6 {
    width: 20px;
    height: 20px;
  }
  .hubTrendTile__name {
    font-size: 14px;
  }
  .hubTrends__more {
    padding: 7px 12px;
  }
  .hubTrends__sub {
    font-size: 3.3vw;
  }

  /* --- Video settings page --- */
  .manualModelCard__name{
    font-size: 10px;
  }
  .manualModelCard__sub{
    font-size: 10px;
  }
  .manualModelCard__ico{
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
  .manualModelCard__radio{
    width: 12px;
    height: 12px;
  }
  .manualQualityBtn{
    font-size: 12px;
    min-height: 30px;
  }
  .manualDurationBtn{
    font-size: 12px;
    min-height: 30px;
  }
  .manualAspectBtn{
    font-size: 12px;
    min-height: 35px;
  }
  .videoRefsDrop__text{
    font-size: 11px;
  }
  .manualSection__title{
    font-size: 14px;
  }
  .field__lbl{
    font-size: 14px;
  }
  .miniBtn{
    font-size: 12px;
  }
  .field .textarea {
    font-size: 13px;
  }
  .genbar .btn {
    font-size: 13px;
    border-radius: 10px;
  }
  .size-8{
    width: 28px;
    height: 28px;
  }
  .manualDurationHint{
    font-size: 12px;
  }

  /* --- Revive page --- */
  .reviveShowcase__video, .reviveShowcase__image{
    width:100%;
    height:100%;
    max-height:200px;
  }

  /* --- Community Page --- */
  .communityCard__row {
    gap: 0px;
  }
  .communityCard__label {
    font-size: 14px;
  }
  .communityCard__hint {
    font-size: 11px;
  }
  .communityLink__title {
    font-size: 14px;
  }
  .communityLink__desc {
    font-size: 11px;
  }
  .communityLink__cta {
    font-size: 11px;
  }
  .switch input:checked + .switch__ui::after {
    left: 15px;
  }
  .switch__ui {
    width: 32px;
    height: 20px;
  }
  .switch__ui::after {
    width: 14px;
    height: 14px;
  }

  .communityLink {
    min-height: 80px;
    gap: 6px;
  }
  .balance__current{
    font-size: 16px;
  }

  /* --- /studio/photo  --- */
  .studio {}
  .studio__grid {}
  .studio__grid--one {}
  .studioPane {}
  .studioPane.is-active {}

  .studioCreateCard {}
  .studioCreateCard--prompt {}
  .studioCreateCard--ref {}
  .studioCreateCard--options {}

  .studioCreatePromptHead {}
  .studioCreatePromptTitle {}
  .studioCreatePromptInput {}
  .studioCreatePromptFoot {}
  .studioCreatePromptCount {}
  .studioCreateImprove {}
  .studioCreateImprove__label {}

  .manualSection {}
  .manualSection__title {}

  .studioRefGrid {}
  .studioRefLimit {}
  .refPickerItem {}
  .refPickerItem--add {}
  .refPickerItem__plus {}
  .refPickerItem__remove {}

  .refPickerModal {}
  .refPickerModal__backdrop {}
  .refPickerModal__sheet {}
  .refPickerModal__head {}
  .refPickerModal__title {}
  .refPickerModal__grid {}
  .refPickerModal__actions {}

  .manualModelCarousel {}
  .manualModelGrid {}
  .manualModelCard {}
  .manualModelCard.is-active {}
  .manualModelCard.is-locked {}
  .manualModelCard__top {}
  .manualModelCard__ico {}
  .manualModelCard__radio {}
  .manualModelCard__lock {}
  .manualModelCard__name {}
  .manualModelCard__sub {}
  .manualModelCard__sub--locked {}

  .manualQualityRow {}
  .manualQualityBtn {}
  .manualQualityBtn.is-active {}
  .manualQualityBtn:disabled {}

  .manualAspectRow {}
  .manualAspectBtn {}
  .manualAspectBtn.is-active {}
  .manualAspectBtn:disabled {}
  .manualAspectBtn__icon {}
  .manualAspectBtn__icon.is-square {}
  .manualAspectBtn__icon.is-portrait {}
  .manualAspectBtn__icon.is-landscape {}
  .manualAspectBtn__label {}

  .manualDurationRow {}
  .manualDurationBtn {}
  .manualDurationBtn.is-active {}
  .manualDurationHint {}

  .stepper {}
  .stepper__btn {}
  .stepper__val {}

  .genbar {}
  .genbar__meta {}
  .studioPriceCoin {}

  .refState {}
  .refState__thumb {}
  .refState__text {}
  .refState__title {}
  .refState__sub {}

  .testPage {}
  .testPage__filters {}
  .testPage__filtersLabel {
    font-size: 12px;
}
  .testChip {}
  .testChip.is-active {}
  .testChip--price {}
  .testGrid {}
  .testCard {}
  .testCard.is-selected {}
  .testCard--locked {}
  .testCard__badge {}
  .testCard__img {}
  .testCard__overlay {}
  .testCard__body {}
  .testCard__title {}
  .testCard__cost {}
  .testCard__costIcon {}
  .testCard__stats {}
  .testCard__lockOverlay {}
  .testCard__lockPill {}
  .qualityDots {}
  .qualityDots i {}
  .qualityDots.q1 i:nth-child(-n+1) {}
  .qualityDots.q2 i:nth-child(-n+2) {}
  .qualityDots.q3 i:nth-child(-n+3) {}
  .qualityDots.q4 i:nth-child(-n+4) {}
  .qualityDots.q5 i:nth-child(-n+5) {}
  .speedTime {}

  .studio {}
  .studio__grid {}
  .studio__grid--one {}
  .studioPane {}
  .studioPane.is-active {}

  .studioCreateCard {}
  .studioCreateCard--prompt {}
  .studioCreateCard--ref {}
  .studioCreateCard--options {}

  .studioCreatePromptHead {}
  .studioCreatePromptTitle {}
  .studioCreatePromptInput {}
  .studioCreatePromptFoot {}
  .studioCreatePromptCount {}
  .studioCreateImprove {}
  .studioCreateImprove__label {}

  .manualSection {}
  .manualSection__title {}

  .studioRefGrid {}
  .studioRefLimit {}
  .refPickerItem {}
  .refPickerItem--add {}
  .refPickerItem__plus {}
  .refPickerItem__remove {}

  .refPickerModal {}
  .refPickerModal__backdrop {}
  .refPickerModal__sheet {}
  .refPickerModal__head {}
  .refPickerModal__title {}
  .refPickerModal__grid {}
  .refPickerModal__actions {}

  .manualModelCarousel {}
  .manualModelGrid {}
  .manualModelCard {}
  .manualModelCard.is-active {}
  .manualModelCard.is-locked {}
  .manualModelCard__top {}
  .manualModelCard__ico {}
  .manualModelCard__radio {}
  .manualModelCard__lock {}
  .manualModelCard__name {}
  .manualModelCard__sub {}
  .manualModelCard__sub--locked {}

  .manualQualityRow {}
  .manualQualityBtn {}
  .manualQualityBtn.is-active {}
  .manualQualityBtn:disabled {}

  .manualAspectRow {}
  .manualAspectBtn {}
  .manualAspectBtn.is-active {}
  .manualAspectBtn:disabled {}
  .manualAspectBtn__icon {}
  .manualAspectBtn__icon.is-square {}
  .manualAspectBtn__icon.is-portrait {}
  .manualAspectBtn__icon.is-landscape {}
  .manualAspectBtn__label {}

  .manualDurationRow {}
  .manualDurationBtn {}
  .manualDurationBtn.is-active {}
  .manualDurationHint {}

  .stepper {}
  .stepper__btn {}
  .stepper__val {}

  .genbar {}
  .genbar__meta {}
  .studioPriceCoin {}

  .refState {}
  .refState__thumb {}
  .refState__text {}
  .refState__title {}
  .refState__sub {}

  .testCard__lockPill svg{
    /* width:20px; */
    /* height:20px; */
  }
  .progressFeedbackSend{
  }
  .progressFeedbackInput{
  }
}

/* --- SPA transitions (progressive enhancement) --- */
#app-view{ view-transition-name: app-view; }

@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(app-view){
    animation: ipx-vt-out 160ms cubic-bezier(0.39, 0.58, 0.57, 1) both;
  }
  ::view-transition-new(app-view){
    animation: ipx-vt-in 160ms cubic-bezier(0.39, 0.58, 0.57, 1) both;
  }
  ::view-transition-group(bottomnav){
    border-radius:16px;
  }
  @keyframes ipx-vt-out{
    from{ opacity:1;}
    to  { opacity:0;}
  }
  @keyframes ipx-vt-in{
    from{ opacity:0;}
    to  { opacity:1;}
  }

}