/* B4X Mockup Studio — standalone presentation. Never imports storefront state. */
:root{color-scheme:dark;--bg:#090f1c;--panel:#101c2e;--panel-deep:#0a1525;--edge:#263852;--muted:#96a9bf;--ink:#eff8ff;--cyan:#6ae0ef;--blue:#2787f4;--radius:18px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:14px/1.55 Inter,"Segoe UI",system-ui,sans-serif;background:radial-gradient(ellipse at 88% -12%,#103457 0%,transparent 36%),radial-gradient(ellipse at -15% 35%,#17213c 0%,transparent 35%),#080e1a}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8df9ff;outline-offset:3px}
.studio-shell{max-width:1670px;margin:auto;padding:0 clamp(15px,3.5vw,54px) 28px}
.studio-top{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:89px;border-bottom:1px solid #b3d6ff16}
.brand{display:flex;align-items:center;gap:13px;white-space:nowrap;line-height:1.1;font-size:19px;font-weight:850;letter-spacing:-.055em}
.brand strong{color:#70dce8}
.brand-logo{background:linear-gradient(125deg,#239aca,#634cc8);border:1px solid #83dcff65;box-shadow:0 8px 30px #17619a4d;border-radius:13px;padding:12px 11px;color:#fff;font:bold 13px monospace;letter-spacing:-.07em}
.brand small{display:block;margin-top:5px;color:#839bb5;font:500 10px "Segoe UI",sans-serif;letter-spacing:.13em;text-transform:uppercase}
.studio-top nav{display:flex;gap:22px;align-items:center;color:#b2c4d7;font-size:12px;font-weight:700}
.studio-top nav a:hover{color:#71e5f4}
.studio-top nav .donation{color:#e5faff;border:1px solid #438da7;background:#143450;padding:11px 14px;border-radius:10px}
.studio-intro{text-align:center;margin:44px 0 35px}
.eyebrow{color:#5fe5ec;font-weight:900;letter-spacing:.31em;font-size:10px}
.studio-intro h1{font-size:clamp(30px,4.8vw,65px);line-height:1.14;max-width:900px;margin:12px auto;letter-spacing:-.061em;font-weight:850}
.studio-intro h1 em{font-style:normal;background:linear-gradient(100deg,#75e9ee,#a6b4ff 65%,#e8c0f5);color:transparent;background-clip:text;-webkit-background-clip:text}
.studio-intro p{max-width:770px;margin:0 auto;color:#a5b9cb;font-size:clamp(13px,1.7vw,16px)}
.studio-main{display:grid;grid-template-columns:minmax(315px,390px) minmax(0,1fr);align-items:stretch;gap:23px;min-height:745px}
.editor-panel,.preview-panel{border:1px solid #2a405a;border-radius:22px;background:linear-gradient(143deg,#101e30,#0a1524 82%);box-shadow:0 18px 57px #0005;overflow:hidden}
.panel-header{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 23px;border-bottom:1px solid #263852;background:#101e30}
.panel-header strong{font-size:14px}
.version{font:700 9px monospace;letter-spacing:.15em;color:#80dceb;background:#123247;border:1px solid #265b6a;border-radius:5px;padding:5px 8px}
.panel-scroll{max-height:775px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#2d506a transparent;scrollbar-width:thin}
.control-section{padding:21px 22px 23px;border-bottom:1px solid #273b5433}
.control-section:last-child{border-bottom:0}
.control-section h2{font-size:13px;font-weight:850;margin:0 0 17px;display:flex;align-items:center;gap:12px}
.control-section h2 span{display:grid;place-items:center;width:25px;height:25px;background:#12394e;border:1px solid #2f6a83;border-radius:8px;color:#71eafa;font:800 10px monospace}
.control-section label:not(.upload-zone){display:block;color:#adc2d9;font-size:11px;font-weight:750;margin:11px 0 5px}
.control-section label output{float:right;color:#6eddec}
.control-section input:not([type=file]),.control-section select{width:100%;min-height:41px;min-width:0;background:#0a1626;border:1px solid #2c455f;color:#f2f7ff;padding:9px 12px;border-radius:9px}
.control-section input[type=color]{padding:4px 6px!important;cursor:pointer}
.control-section input[type=range]{accent-color:#46d5e5;min-height:22px;padding:0;background:transparent;border:0}
.control-section input::placeholder{color:#67829c}
.control-section input:focus,.control-section select:focus{border-color:#6dd4e9}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.upload-zone{border:1.5px dashed #46728b;border-radius:13px;background:radial-gradient(circle at top,#1c465a58,#0d1d30);min-height:135px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;text-align:center;transition:.2s ease}
.upload-zone:hover,.upload-zone.drag-over{background:#12334b;border-color:#6ceaf5;box-shadow:inset 0 0 35px #19557738}
.upload-ico{font-size:29px;color:#69daed;line-height:1.2}
.upload-zone strong{font-size:12px;color:#e7faff}
.upload-zone small{color:#88a1b9;font-size:10px}
.selected-name{display:block;color:#9fffdc;font-size:10px;max-width:95%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hint{margin:10px 0 0;color:#889fb6;font-size:11px;line-height:1.55}
.primary-btn{display:block;margin-top:20px;width:100%;padding:13px 16px;border:1px solid #7deafb;background:linear-gradient(95deg,#1584d2,#15afc2);color:#fff;border-radius:11px;font-weight:850;box-shadow:0 8px 28px #1879aa55}
.primary-btn:hover{filter:brightness(1.13)}
.preview-panel{min-width:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 35% 20%,#142d47,#091323 80%)}
.preview-heading{padding:19px 25px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #263951}
.preview-heading strong{font-size:14px;display:block}
.preview-heading small{display:block;margin-top:3px;color:#83acc2;font-size:11px}
.preview-actions{display:flex;align-items:center;gap:16px}
.preview-actions button{border:1px solid #3c5c76;background:#14243a;border-radius:9px;padding:8px 12px;color:#c3deee;font-size:11px;font-weight:800}
.preview-actions button:hover{background:#205176}
.live-dot{font-size:10px;color:#8fe6d0;font-weight:850;letter-spacing:.11em}
.live-dot:before{content:"";display:inline-block;background:#39e0a0;height:7px;width:7px;border-radius:50%;margin-right:7px;box-shadow:0 0 12px #43dfae}
.canvas-surface{flex:1;min-height:550px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:27px;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:31px 31px}
.canvas-surface canvas{display:block;max-width:100%;max-height:715px;height:auto;width:auto;box-shadow:0 19px 70px #000a;border:1px solid #ffffff16;border-radius:3px;cursor:grab;touch-action:none}
.canvas-surface canvas:active{cursor:grabbing}
.preview-foot{border-top:1px solid #263951;display:flex;justify-content:space-between;gap:15px;padding:14px 23px;color:#869ab1;font-size:10px}
.studio-footer{margin:40px 0 8px;padding:24px 0;border-top:1px solid #2a3c52;display:flex;justify-content:space-between;align-items:center;gap:25px;color:#b5c4d3}
.studio-footer strong{color:#e8f7ff}
.studio-footer p{max-width:650px;font-size:12px;margin:4px 0}
.studio-footer small{color:#758aa3;font-size:10px}
.studio-footer a{border:1px solid #427b84;background:#123243;border-radius:10px;padding:11px 15px;color:#89e9f4;white-space:nowrap;font-weight:850;font-size:12px}
#studio-toast{position:fixed;right:18px;bottom:18px;z-index:999;background:#14273d;border:1px solid #428b9a;border-radius:12px;color:#f0fbff;padding:13px 18px;box-shadow:0 12px 30px #0007;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .2s,transform .2s;font-size:12px;max-width:310px}
#studio-toast.visible{opacity:1;transform:translateY(0)}
@media(max-width:1050px){.studio-main{grid-template-columns:340px minmax(0,1fr)}.two-col{grid-template-columns:1fr}.canvas-surface{min-height:460px}}
@media(max-width:780px){.studio-shell{padding:0 14px 20px}.studio-main{grid-template-columns:1fr;gap:17px}.panel-scroll{max-height:none}.studio-top{flex-wrap:wrap;padding:16px 0}.studio-top nav{flex-wrap:wrap;gap:10px 15px;font-size:11px}.studio-intro{margin:30px 0}.canvas-surface{min-height:300px;padding:15px}.preview-foot{flex-direction:column;gap:3px}.studio-footer{flex-wrap:wrap}.two-col{grid-template-columns:1fr 1fr}}
@media(max-width:410px){.two-col{grid-template-columns:1fr}.studio-top nav{gap:10px}.preview-heading{flex-wrap:wrap}.live-dot{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Mockup Studio 1.1: controls for an optional second capture and exact pixel output */
[hidden]{display:none!important}
.custom-size{margin-top:12px;padding:12px;background:#061628;border:1px solid #316279;border-radius:12px}
.custom-size .two-col label{margin-top:0}
.field-error{margin:6px 0 0;color:#ffb8b8;font-size:11px;min-height:0}
.field-error:empty{display:none}
.secondary-upload{margin:12px 0;padding:15px;border:1px solid #34556b;border-radius:12px;background:#0b2335}
.secondary-upload-label{display:block;font-size:12px;color:#9be8f8;font-weight:800;margin-bottom:10px}
.secondary-upload input[type=file]{width:100%;max-width:100%;color:#bed8e5;font-size:11px}
.secondary-upload input[type=file]::file-selector-button{background:#194769;color:#e7fcff;border:1px solid #42748b;border-radius:7px;padding:7px 9px;margin-right:7px;cursor:pointer}
.secondary-upload small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#a0c1d8;margin:7px 0}
.subtle-button{background:#17364b;border:1px solid #36617c;border-radius:9px;padding:7px 11px;color:#b9e7f6;font-size:11px;font-weight:750}
.subtle-button:hover{background:#235572}
/* Even with a 1200x400 output the preview retains the exact export aspect ratio. */
.canvas-surface{min-width:0}
.canvas-surface canvas{object-fit:contain}
/* Native print/export canvas is pixel-perfect; no CSS effects are baked into it. */