/* Превью: геометрия шторки и плиток как в конструкторе и сборщике. */
:root body[data-studio="preview"] #sbdy[data-t="col"]{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;padding:2px 16px calc(max(env(safe-area-inset-bottom,0px),var(--tg-safe-b,0px)) + 20px)!important}
:root body[data-studio="preview"] #sbdy[data-t="col"] .sit{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;min-width:0!important;min-height:0!important;height:auto!important;padding:12px 6px 10px!important;margin:0!important;border-radius:18px!important;overflow:visible!important;background:var(--s2)!important;contain-intrinsic-size:auto!important}
:root body[data-studio="preview"] #sbdy[data-t="col"] .sit.pk{background:var(--tint)!important;box-shadow:inset 0 0 0 2px var(--ac)!important}
.preview-col-pic{position:relative;display:block;flex:none;width:76%;aspect-ratio:1;isolation:isolate}
.preview-col-pic::before{content:"";position:absolute;inset:16%;z-index:-1;border-radius:50%;background:rgba(255,255,255,.035)}
:root body[data-studio="preview"] #sbdy[data-t="col"] .preview-col-pic .sth-img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:0!important;padding:0!important}
:root body[data-studio="preview"] #sbdy[data-t="col"] .sit>div:not(.sth):not(.sth-lottie):not(.ssub){width:100%;min-height:0!important;margin:0!important;justify-content:center!important}
:root body[data-studio="preview"] #sbdy[data-t="col"] .snm{display:block;max-width:100%;width:100%;font:600 13px/16px var(--ui-font)!important;white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere;text-align:center}
:root body[data-studio="preview"] #sbdy[data-t="col"] .badge-new:not(.exclusive):not(.giveaway){left:auto!important;right:7px!important;top:7px!important;min-height:18px!important;padding:0 6px!important;border:1px solid rgba(var(--brand-rgb),.3)!important;border-radius:9px!important;background:rgba(var(--brand-rgb),.12)!important;color:var(--ac)!important}
@media(min-width:560px){:root body[data-studio="preview"] #sbdy[data-t="col"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
/* Сначала изображение и заголовок, затем три полноценные строки на всю ширину. */
:root body[data-studio="preview"] .nac.is-ok{grid-template-columns:112px minmax(0,1fr)!important;gap:12px!important;align-items:center!important}
:root body[data-studio="preview"] .nac.is-ok .nac-art{grid-column:1;grid-row:1;width:112px!important;min-width:0!important;height:auto!important;aspect-ratio:1}
:root body[data-studio="preview"] .nac.is-ok .nac-t{display:contents!important}
:root body[data-studio="preview"] .nac.is-ok .nac-h{grid-column:2;grid-row:1;height:auto!important;min-height:0!important;align-self:center;font:650 16px/1.3 var(--ui-font)!important;white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere!important}
:root body[data-studio="preview"] .nac.is-ok .nac-rows{grid-column:1/-1;grid-row:2;display:flex!important;flex-direction:column;gap:2px!important;min-width:0}
:root body[data-studio="preview"] .nac.is-ok .nac-r{display:grid!important;grid-template-columns:62px minmax(0,1fr) auto!important;min-height:34px!important;height:auto!important;align-items:center!important;gap:8px!important}
:root body[data-studio="preview"] .nac.is-ok .nac-l{display:contents!important}
:root body[data-studio="preview"] .nac.is-ok .nac-l small{grid-column:1!important;grid-row:1!important;font:500 13px/1.3 var(--ui-font)!important;color:var(--ink2)!important}
:root body[data-studio="preview"] .nac.is-ok .nac-v{grid-column:2!important;grid-row:1!important;display:flex!important;gap:7px!important;min-width:0;white-space:normal!important}
:root body[data-studio="preview"] .nac.is-ok .nac-th{width:22px!important;height:22px!important;flex:none}
:root body[data-studio="preview"] .nac.is-ok .nac-v b{font:600 14px/1.3 var(--ui-font)!important;overflow-wrap:anywhere!important;white-space:normal!important;color:var(--ink)!important}
:root body[data-studio="preview"] .nac.is-ok .nac-rar{grid-column:3!important;grid-row:1!important;min-width:0;font:600 13px/1.3 var(--ui-font)!important;color:var(--ink2)!important;white-space:nowrap}
:root body[data-studio="preview"] .nac.is-ok .nac-note,:root body[data-studio="preview"] .nac.is-ok .nac-retry{grid-column:1/-1}
@media(max-width:350px){:root body[data-studio="preview"] .nac.is-ok{grid-template-columns:94px minmax(0,1fr)!important}:root body[data-studio="preview"] .nac.is-ok .nac-art{width:94px!important}}
/* Полный прямоугольный бегунок в каждой ячейке, как в конструкторе. */
:root body[data-studio="preview"] #nftp-act-grid::before{border-radius:14px!important;top:3px!important;bottom:3px!important;left:3px!important;width:calc((100% - 6px)/4)!important}
:root body[data-studio="preview"] #nftp-act-grid button{border-radius:14px!important}
.np-subformat{position:relative;isolation:isolate;overflow:hidden;min-width:0}
.np-subformat::before{content:"";position:absolute;z-index:0;left:3px;top:3px;bottom:3px;width:calc((100% - 6px)/3);border-radius:13px;background:var(--s3);transform:translateX(calc(100% * var(--sub-index,0)));transition:transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.np-subformat button{position:relative;z-index:1;background:transparent!important;min-width:0}
/* Никакой ярко-синей рамки вокруг ввода номера при касании. */
:root body[data-studio="preview"] #nftp-num:focus,:root body[data-studio="preview"] #nftp-num:focus-visible{outline:none!important;box-shadow:none!important}
:root body[data-studio="preview"] #nftp-manual .row-num:focus-within .row-th{background:var(--s2)!important;color:var(--ink2)!important}
/* r33: обводку у поля номера убрали — фокус показывает сама строка */
/* Когда вкладки скрыты, не оставлять под ними пустой тёмный блок. */
html.np-choose .app-scroll{padding-bottom:calc(max(env(safe-area-inset-bottom,0px),var(--tg-safe-b,0px)) + 24px)!important}
html.perf-low .np-tabs{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--s1)!important}
@media(prefers-reduced-motion:reduce){:root #nftp-act-grid::before,.np-subformat::before{transition:none!important}}
html.anim-off #nftp-act-grid::before,html.anim-off .np-subformat::before,html.studio-no-motion #nftp-act-grid::before,html.studio-no-motion .np-subformat::before{transition:none!important}
/* Та же высота шторки, что и у конструктора; список занимает остальное место. */
:root body[data-studio="preview"] #ovl>.sht{height:min(780px,calc(100% - var(--tg-top,0px) - 8px))!important;max-height:calc(100% - var(--tg-top,0px) - 8px)!important}
:root body[data-studio="preview"] #sbdy{min-height:0}
@keyframes r30-card-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
#nftp-card-options:not([hidden]){animation:r30-card-enter .26s cubic-bezier(.2,.8,.2,1) both}
@media(prefers-reduced-motion:reduce){#nftp-card-options:not([hidden]){animation:none!important}}
html.anim-off #nftp-card-options:not([hidden]),html.studio-no-motion #nftp-card-options:not([hidden]){animation:none!important}