:root{--ink:#171817;--muted:#77766f;--line:#ded9ce;--paper:#f4f1ea;--gold:#b99928;--lime:#d9ff45;--green:#31885a}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}.vj-app{min-height:100vh}.vj-header{padding:28px 34px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:#f8f6f1}.vj-header span,.vj-preview-panel>small{font-size:9px;letter-spacing:2px;color:#9a842d}.vj-header h1{font:400 28px Georgia;margin:6px 0}.vj-header p{margin:0;color:var(--muted);font-size:11px}.vj-ready{background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:20px;font-size:9px}.vj-ready i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3da268;margin-right:6px}.vj-layout{display:grid;grid-template-columns:minmax(430px,1fr) 355px}.vj-editor{padding:30px 34px 60px;border-right:1px solid var(--line)}.vj-step{display:flex;align-items:start;gap:12px;margin:0 0 15px}.vj-step:not(:first-child){margin-top:30px}.vj-step>b{border:1px solid #cbb66d;color:#9a7715;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font:10px Georgia}.vj-step h2{font:400 18px Georgia;margin:1px 0 4px}.vj-step p{font-size:10px;color:var(--muted);margin:0}.vj-step em{margin-left:auto;font:10px Arial;color:#888}.vj-upload{min-height:145px;border:1px dashed #bdb7aa;border-radius:10px;background:#fff8;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}.vj-upload.drag{border-color:#9b7d1d;background:#fff}.vj-upload input{display:none}.vj-upload>span{width:34px;height:34px;border:1px solid #b5a15f;border-radius:50%;display:grid;place-items:center;color:#9a7b1e;margin-bottom:8px}.vj-upload strong{font:400 14px Georgia}.vj-upload small{color:#8a8881;font-size:9px;margin-top:5px}.vj-photos{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}.vj-photo{aspect-ratio:1;position:relative;border-radius:7px;overflow:hidden;cursor:grab;background:#ddd}.vj-photo img{width:100%;height:100%;object-fit:cover}.vj-photo b{position:absolute;left:4px;bottom:4px;background:#111c;color:#fff;border-radius:50%;width:18px;height:18px;display:grid;place-items:center;font-size:8px}.vj-photo button{position:absolute;right:3px;top:3px;border:0;border-radius:50%;width:19px;height:19px;background:#fff;cursor:pointer}.vj-fields{display:grid;gap:11px}.vj-fields.two{grid-template-columns:1fr 1fr}.vj-fields .wide{grid-column:1/-1}.vj-fields label{font-size:8px;text-transform:uppercase;letter-spacing:.7px;color:#666}.vj-fields input,.vj-fields select{display:block;width:100%;height:39px;margin-top:5px;border:1px solid #d6d0c4;border-radius:6px;background:#fff;padding:0 10px;font-size:10px;outline:none}.vj-fields input:focus,.vj-fields select:focus{border-color:#a48627}.vj-preview-panel{padding:28px 25px;background:#ebe8e0}.vj-phone{width:205px;margin:14px auto 20px;padding:5px;background:#161715;border-radius:12px;box-shadow:0 15px 35px #1113}.vj-preview{height:315px;border-radius:8px;background:#454741 center/cover;position:relative;overflow:hidden}.vj-preview:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#090a09e8)}.vj-logo{position:absolute;top:12px;left:11px;color:#fff;border:1px solid #fff8;padding:4px;font:bold 12px Georgia;z-index:2}.vj-logo small{display:block;font:5px Arial;letter-spacing:1px}.vj-empty{height:100%;display:grid;place-content:center;text-align:center;color:#aaa;font:26px Georgia}.vj-empty span{font:8px Arial;display:block;margin-top:5px}.vj-copy{position:absolute;bottom:15px;left:13px;right:13px;color:#fff;z-index:2}.vj-copy em{background:var(--lime);color:#161715;padding:4px 6px;font:700 9px Arial}.vj-copy h3{font:400 21px/1 Georgia;margin:9px 0 6px;text-transform:uppercase}.vj-copy strong{color:var(--lime);font-size:15px}.vj-copy p{font-size:7px}.vj-formats{border-top:1px solid #d6d1c6;padding-top:15px}.vj-formats h3,.vj-history h3{font:400 12px Georgia}.vj-formats>div{display:flex;align-items:center;gap:9px;padding:6px 0}.vj-formats i{display:block;width:13px;height:21px;border:1px solid #777}.vj-formats i.square{height:15px}.vj-formats i.landscape{height:12px;width:20px}.vj-formats p{margin:0;flex:1;font-size:9px}.vj-formats small{display:block;color:#888;font-size:7px;margin-top:3px}.vj-formats span{color:var(--green);font-size:10px}.vj-generate{width:100%;height:54px;border:0;border-radius:7px;background:#191a18;color:#fff;font:600 11px Georgia;cursor:pointer;margin-top:12px}.vj-generate:disabled{opacity:.6}.vj-generate>span{color:var(--lime);margin-right:5px}.vj-generate small{display:block;font:7px Arial;color:#999;margin-top:4px}.vj-progress{background:#fff;border:1px solid #d9d3c7;padding:10px;border-radius:7px;margin-top:10px}.vj-progress>div{display:flex;justify-content:space-between;font-size:9px}.vj-progress>i{display:block;height:4px;background:#e1ded6;margin-top:8px}.vj-progress>i b{display:block;height:100%;background:#b99b2b;width:0;transition:.3s}.hidden{display:none!important}.vj-downloads>a{display:block;text-align:center;padding:11px;background:var(--lime);color:#151515;border-radius:6px;margin-top:8px;font-size:10px;font-weight:bold;text-decoration:none}.vj-downloads>div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:5px}.vj-downloads>div a{text-align:center;padding:7px;border:1px solid #c7c1b5;border-radius:5px;color:#555;font-size:8px;text-decoration:none;background:#fff}.vj-message{text-align:center;color:#85827a;font-size:8px}.vj-history{border-top:1px solid #d6d1c6;margin-top:16px;padding-top:8px}.vj-history-item{background:#fff;border:1px solid #ddd8ce;border-radius:6px;padding:8px;margin:6px 0}.vj-history-item b{font-size:9px}.vj-history-item span{float:right;font-size:8px;color:#777}.vj-history-item small{display:block;font-size:7px;color:#888;margin-top:3px}@media(max-width:850px){.vj-layout{grid-template-columns:1fr}.vj-editor{border-right:0}.vj-preview-panel{border-top:1px solid var(--line)}.vj-header{padding:22px}.vj-ready{display:none}}@media(max-width:520px){.vj-header h1{font-size:22px}.vj-editor,.vj-preview-panel{padding:22px 16px}.vj-fields.two{grid-template-columns:1fr}.vj-fields .wide{grid-column:auto}.vj-photos{grid-template-columns:repeat(4,1fr)}}
