: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}
}
.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__dot{
width:30px;
height:30px;
flex:0 0 30px;
display:inline-flex;
align-items:center;
justify-content:center;
}
.brand__dot::before{
content:"";
width:16px;
height:16px;
border-radius:50%;
background:radial-gradient(circle at 30% 30%, #fff, var(--accent));
box-shadow:0 0 0 3px rgba(110,90,255,.18);
}
.brand__arrow{
width: 30px;
height: 30px;
flex: 0 0 30px;
display: none;
cursor: pointer;
background: radial-gradient(circle at 30% 30%, #fff, var(--accent));
box-shadow:
0 0 0 3px rgba(110,90,255,.18),
inset 0 8px 14px rgba(255,255,255,.14),
inset 0 -8px 14px rgba(0,0,0,.2);
outline: 4px solid rgba(16, 16, 30, 0.85);
outline-offset: -4px;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M26 14 L10 32 L26 50 Q28.8 53 32 50.6 Q34.4 48.8 33.2 46 L31 40 H52 Q56 40 56 36 V28 Q56 24 52 24 H31 L33.2 18 Q34.4 15.2 32 13.4 Q28.8 11 26 14 Z'/%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 64 64'%3E%3Cpath d='M26 14 L10 32 L26 50 Q28.8 53 32 50.6 Q34.4 48.8 33.2 46 L31 40 H52 Q56 40 56 36 V28 Q56 24 52 24 H31 L33.2 18 Q34.4 15.2 32 13.4 Q28.8 11 26 14 Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.brand.is-back .brand__arrow{display:inline-block}
.brand.is-back .brand__dot{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}
.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(12px + env(safe-area-inset-bottom));
z-index:50;
}
.content{padding-bottom:110px}
}
.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;
}
}
/* 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: 800;
}
/* линии */
.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: 800;
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)}
.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));
}
.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(3,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;
}
.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%)}
.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 ![]()
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:
radial-gradient(120% 120% at 100% 0%, rgba(142,158,230,.20) 0%, rgba(142,158,230,0) 55%),
linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
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}
}
@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__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);
}
@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:12px;align-items:stretch}
.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__price{
font-size:16px;
font-weight:600;
display:flex;
align-items:baseline;
gap:6px;
margin: 0 0 6px;
}
.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}
/* 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:#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}
.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;}
.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: 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;
}
@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}
}
/* --- 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: ;
--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__dot{
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;
}
}
@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;
}
}
@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;
}
}
@media (max-width: 375px) {
.seg__item {
font-size: 13px;
}
.balance__current{
font-size: 19px;
}
}
/* стили именно для 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;
}
}
/* стили именно для 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;
}
}
@media (max-width: 340px) {
.hubTrends__sub {
}
.balance__current{
font-size: 16px;
}
.planCard__name{
font-size: 6vw;
}
}
/* стили именно для 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;
}
.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;
}
}
/* --- 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;}
}
}