*{box-sizing:border-box}

html,body{margin:0;min-height:100%;color:var(--ink);font-family:Inter,Arial,sans-serif}html{background:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{background:var(--preview-canvas)}
body{overflow:auto}
body.card-owner-preview{overflow:hidden;background:transparent}
body.admin-card-review{overflow:hidden;background:transparent}
.page{min-height:100vh;display:grid;place-items:center;padding:45px 18px;position:relative;background:var(--preview-canvas)}body.card-owner-preview .page,body.admin-card-review .page{background:transparent}
.card{width:min(820px,100%);min-height:540px;border-radius:var(--card-radius);background:var(--bg1-fill);box-shadow:var(--preview-outline),0 24px 70px rgba(18,35,30,.22),var(--card-shadow);border:1px solid var(--border);position:relative;overflow:hidden}
.theme-bg2-layer{position:absolute;left:var(--bg2-left);top:var(--bg2-top);width:var(--bg2-width);height:var(--bg2-height);z-index:0;pointer-events:none;opacity:var(--bg2-active);background:var(--bg2-fill)}.theme-symbol-layer{position:absolute;left:var(--theme-symbol-x);top:var(--theme-symbol-y);width:var(--theme-symbol-size);height:0;padding-top:var(--theme-symbol-size);transform:translate(-50%,-50%);z-index:1;pointer-events:none;background:var(--theme-symbol-color);opacity:var(--theme-symbol-opacity);-webkit-mask-image:var(--theme-symbol-mask);mask-image:var(--theme-symbol-mask);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.card-content{position:relative;z-index:2;height:100%;min-height:540px}
.directions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}.direction{font-weight:700;opacity:.78}.direction.primary{font-weight:900;opacity:1}.direction-sep{opacity:.45}
.identity h1{margin:13px 0 8px;line-height:1.02;letter-spacing:-.04em}.subtitle{font-size:20px;color:var(--muted);opacity:.72}.lead{font-size:17px;line-height:1.7;color:var(--muted);opacity:.82}.description{line-height:1.75;color:var(--muted);opacity:.75}.fakebtn{display:inline-flex;position:relative;width:62px;height:44px;padding:0;border:2px solid var(--button-text);border-radius:9px;background:var(--button-bg);color:var(--button-text);font-size:0;line-height:0;font-weight:800;text-decoration:none;overflow:hidden;vertical-align:middle}.fakebtn:before{content:'';position:absolute;left:50%;top:0;width:0;height:0;border-left:29px solid transparent;border-right:29px solid transparent;border-top:22px solid currentColor;transform:translateX(-50%);pointer-events:none}.fakebtn:after{content:'';position:absolute;left:50%;top:-1px;width:0;height:0;border-left:26px solid transparent;border-right:26px solid transparent;border-top:19px solid var(--button-bg);transform:translateX(-50%);pointer-events:none}

/* Step 7.1.9.4.19 — свободное позиционирование SVG в редакторе темы */
body.symbol-drag-enabled .card-content{pointer-events:none}body.symbol-drag-enabled .theme-symbol-layer{pointer-events:auto;cursor:grab;touch-action:none}body.symbol-drag-enabled .theme-symbol-layer.is-dragging{cursor:grabbing}
@supports (color:color-mix(in srgb,#000 50%,#fff)){.card{background:radial-gradient(circle at 18% 22%,color-mix(in srgb,var(--accent) 22%,transparent) 0,transparent 42%),radial-gradient(circle at 86% 76%,color-mix(in srgb,var(--soft) 68%,transparent) 0,transparent 44%),var(--bg1-fill)}.theme-bg2-layer{background:radial-gradient(circle at 18% 22%,color-mix(in srgb,var(--accent) 18%,transparent) 0,transparent 42%),radial-gradient(circle at 86% 76%,color-mix(in srgb,var(--soft) 56%,transparent) 0,transparent 44%),var(--bg2-fill)}}
@supports (aspect-ratio:1){.theme-symbol-layer{height:auto;padding-top:0;aspect-ratio:1}}

/* Step 7.1.9.4.26 — раздельное Desktop/Mobile положение основной кнопки */
@media(min-width:701px){.card.theme-button-desktop-free .fakebtn{position:absolute;left:var(--theme-button-x,50%);top:var(--theme-button-y,85%);transform:translate(-50%,-50%);margin:0!important;z-index:4}}
@media(max-width:700px){.card,.card-content{min-height:var(--mobile-card-height,500px)}.card.theme-button-mobile-free .fakebtn{position:absolute;left:var(--theme-button-mobile-x,50%);top:var(--theme-button-mobile-y,85%);transform:translate(-50%,-50%);margin:0!important;z-index:4}}
body.button-drag-enabled .fakebtn{pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}body.button-drag-enabled .fakebtn.is-dragging{cursor:grabbing}
@media(max-width:700px){.theme-bg2-layer{left:var(--bg2-mobile-left,var(--bg2-left));top:var(--bg2-mobile-top,var(--bg2-top));width:var(--bg2-mobile-width,var(--bg2-width));height:var(--bg2-mobile-height,var(--bg2-height))}.theme-symbol-layer{left:var(--theme-symbol-mobile-x,var(--theme-symbol-x));top:var(--theme-symbol-mobile-y,var(--theme-symbol-y));width:var(--theme-symbol-mobile-size,var(--theme-symbol-size));padding-top:var(--theme-symbol-mobile-size,var(--theme-symbol-size));background:var(--theme-symbol-mobile-color,var(--theme-symbol-color));opacity:var(--theme-symbol-mobile-opacity,var(--theme-symbol-opacity))}}
@supports (aspect-ratio:1){@media(max-width:700px){.theme-symbol-layer{padding-top:0}}}

/* Step 7.1.9.4.30/4.37 — пользовательский renderer: служебные watermark/status вынесены в parent preview UI. */

/* Step 7.1.9.4.34 — независимая пользовательская композиция Mobile. */
@media(max-width:700px){
.card.card-user-viewport-style{
    --page:var(--theme-mobile-page);
    --surface:var(--theme-mobile-surface);
    --ink:var(--theme-mobile-ink);
    --muted:var(--theme-mobile-muted);
    --accent:var(--theme-mobile-accent);
    --soft:var(--theme-mobile-soft);
    --button-bg:var(--theme-mobile-button-bg);
    --button-text:var(--theme-mobile-button-text);
    --bg1-gradient-enabled:var(--bg1-mobile-gradient-enabled);
    --bg1-fill:var(--bg1-mobile-fill);
    --bg2-active:var(--bg2-mobile-active);
    --bg2-start:var(--bg2-mobile-start);
    --bg2-end:var(--bg2-mobile-end);
    --bg2-gradient-enabled:var(--bg2-mobile-gradient-enabled);
    --bg2-fill:var(--bg2-mobile-fill);
}
.card.card-user-viewport-style .theme-symbol-layer{
    -webkit-mask-image:var(--theme-symbol-mobile-mask);
    mask-image:var(--theme-symbol-mobile-mask);
}
}


/* Step 7.1.9.4.83/4.84 — real scrollable mobile viewport.
   Browser/user text scaling is respected; 4.84 adapts the card height instead of fighting text zoom. */
@media(max-width:700px){
body.card-owner-preview,body.admin-card-review{overflow:auto}
body.card-owner-preview .generator-flip-page .generator-flip-stage{min-height:max(calc(100vh - 48px),var(--mobile-card-height,500px))}
}