/* NOVA Studio v10: Full native phone viewport in a scaled preview shell.
   Matches the storefront device dimensions while keeping live editor messaging. */
:root{--bg:#0a1020;--bar:#0b1324;--panel:#121c30;--card:#1a2940;--card2:#233451;--line:rgba(150,179,219,.2);--line2:rgba(150,205,239,.36);--muted:#b4c5db;--a:#85e2ed;--b:#b1b4f5}
.bar{background:rgba(11,20,36,.97);border-bottom-color:rgba(160,185,224,.23)}
.app{background:#0c1528}
.rail{background:#10192b}
.panel{background:#121d31}
.rail button{min-height:64px}
.rail button.on{background:linear-gradient(120deg,#90e9ee,#aaa9f1)}
.panel .inp,.panel textarea,.panel select{background:#1b2a43;border-color:#3e536c}
.panel .tip{border:1px solid #41566e;background:#1b2c45}
.panel h2{color:#f5f9ff}
.canvas{isolation:isolate;background:radial-gradient(ellipse 65% 70% at 50% 40%,rgba(87,114,185,.15),transparent),linear-gradient(90deg,rgba(132,165,215,.042) 1px,transparent 1px),linear-gradient(rgba(132,165,215,.042) 1px,transparent 1px),#0e1728;background-size:auto,32px 32px,32px 32px,auto}
.canvas-label{position:absolute;top:13px;left:18px;right:18px;display:flex;align-items:center;gap:9px;color:#bfd2ea;font:800 10px/1.4 'Plus Jakarta Sans',sans-serif;letter-spacing:.13em;pointer-events:none}
.canvas-indicator{width:8px;height:8px;flex:none;border-radius:50%;background:#76e7cb;box-shadow:0 0 0 5px rgba(118,231,203,.09)}
.canvas-label small{margin-inline-start:auto;color:#8fa7c9;font:700 10px/1.4 'Plus Jakarta Sans';letter-spacing:0}
.frame-wrap.mobile{
 --studio-scale:.81;
 box-sizing:border-box;
 width:calc(390px * var(--studio-scale) + 20px)!important;
 height:calc(780px * var(--studio-scale) + 20px)!important;
 min-height:0!important;
 max-height:none!important;
 aspect-ratio:auto!important;
 border-radius:43px;
 padding:10px;
 background:linear-gradient(145deg,#3d4760,#151e34 53%,#31394f);
 box-shadow:0 0 0 1px #91b8dc45,inset 0 0 0 1px #060a11c9,0 28px 65px -25px #010711,0 0 55px -30px #9da5e6;
 margin:0 auto;
}
.frame-wrap .frame-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:32px;background:#09050d}
.frame-wrap.mobile iframe{
 position:absolute;
 inset:0 auto auto 0;
 display:block;
 width:390px!important;
 height:780px!important;
 max-width:none!important;
 max-height:none!important;
 border:0!important;
 padding:0!important;
 margin:0!important;
 border-radius:0!important;
 transform:scale(var(--studio-scale));
 transform-origin:top left;
 background:#0c0c18;
}
.frame-wrap .notch{position:absolute;top:calc(10px + 8px * var(--studio-scale));left:50%;width:calc(104px * var(--studio-scale));height:calc(27px * var(--studio-scale));margin-left:calc(-52px * var(--studio-scale));border-radius:25px;pointer-events:none;z-index:3;background:#05070e;box-shadow:0 2px 9px #0009}
.frame-wrap.desktop{width:100%!important;height:100%!important;max-height:100%;padding:0!important;border-radius:15px}
.frame-wrap.desktop .frame-screen{border-radius:15px}
.frame-wrap.desktop iframe{position:relative!important;display:block;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;transform:none!important;border-radius:15px!important}
.frame-wrap.desktop .notch{display:none}
.canvas-edit-jump{display:none}
.canvas-hint{bottom:13px;z-index:2}
@media(max-width:1250px) and (min-width:901px){.frame-wrap.mobile{--studio-scale:.73}}
@media(max-height:790px) and (min-width:901px){.frame-wrap.mobile{--studio-scale:.67}}
@media(max-width:900px){
 .bar{position:sticky;top:0;z-index:25}
 .app .canvas{height:clamp(510px,73dvh,675px);min-height:0;order:1;padding:35px 12px 52px}
 .app .frame-wrap.mobile{--studio-scale:.68}
 .canvas-label{top:10px;left:14px;right:14px;font-size:9px}
 .canvas-edit-jump{position:absolute;bottom:11px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:9px;min-height:34px;padding:7px 14px;white-space:nowrap;border-radius:12px;border:1px solid #53708d;background:#233955;font-size:11px;font-weight:800;color:#e7f5ff;z-index:4}
 .canvas-edit-jump span{color:#92e5ed;font-size:15px}
 .canvas-hint{display:none}
 .rail{top:62px;z-index:19;border-color:#364966}
 .rail button{min-height:68px}
 .panel{padding:22px 17px 46px}
}
@media(max-width:420px){
 .app .frame-wrap.mobile{--studio-scale:.63}
 .app .canvas{height:clamp(525px,72dvh,650px)}
}
@media(max-width:355px){
 .app .frame-wrap.mobile{--studio-scale:.55}
 .app .canvas{height:clamp(480px,69dvh,620px)}
 .canvas-label small{display:none}
 .bar{padding-inline:7px}
}
@media(prefers-reduced-motion:reduce){
 .frame-wrap{transition:none!important}
}