:root{--ink:#0f1b2d;--muted:#52607a;--line:#dfe5ee;--bg:#f5f7fb;--card:#fff;--brand:#2457ff;--brand-ink:#fff;--brand-dk:#1a43d1;--ok:#0b7a4b;--err:#b4231a;--r:16px;--font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:400 1.0625rem/1.6 var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--brand)}h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em}h1{font-size:clamp(1.9rem,4.5vw,3rem)}h2{font-size:clamp(1.5rem,3vw,2rem)}h3{font-size:1.2rem}
p{margin:0 0 1em}
.wrap-app{max-width:1080px;margin:0 auto;padding:0 20px}.narrow{max-width:520px;margin:48px auto;padding:0 20px}
.top{background:#fff;border-bottom:1px solid var(--line)}.bar{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.logo{display:inline-flex;align-items:baseline;gap:.5rem;font-weight:800;font-size:1.3rem;color:var(--ink);text-decoration:none}.logo small{font-weight:500;font-size:.72rem;color:var(--muted)}
.mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;font-weight:800;align-self:center}
nav{display:flex;align-items:center;gap:16px}nav a{text-decoration:none;font-weight:600;color:var(--ink)}nav form{margin:0}
button.link{background:none;border:0;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;padding:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 1.4rem;border-radius:12px;border:2px solid var(--brand);background:var(--brand);color:var(--brand-ink);font:700 1rem var(--font);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--brand-dk);border-color:var(--brand-dk)}.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.small{min-height:42px;padding:0 1.1rem;font-size:.95rem}.btn.ghost{background:transparent;color:var(--brand)}.btn.ghost:hover{background:#eef2ff}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.actions.center{justify-content:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px);box-shadow:0 10px 30px -22px rgba(15,27,45,.35)}
.center{text-align:center}.fine{font-size:.92rem;color:var(--muted)}.lead{font-size:1.2rem;color:var(--muted);max-width:60ch}.lead.small{font-size:1.05rem}
.hero-app{padding:clamp(40px,8vw,96px) 0}.hero-app h1{max-width:18ch}.hero-app .actions{margin:26px 0 12px}
.steps3{display:grid;gap:16px;padding-bottom:56px}@media(min-width:800px){.steps3{grid-template-columns:repeat(3,1fr)}}
.steps3>div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}.steps3 b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;margin-bottom:12px}
.pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 18px}.pills li{padding:.5rem 1rem;background:#fff;border:1px solid var(--line);border-radius:999px;font-weight:600}
.pricing{padding:24px 20px 72px}.pricing .card{max-width:520px}.price{font-size:3rem;font-weight:800;margin:.2em 0}.price span{font-size:1.1rem;font-weight:500;color:var(--muted)}
.stack{display:grid;gap:16px}label{display:grid;gap:6px;font-weight:600}
input,select,textarea{width:100%;min-height:48px;padding:.7rem .9rem;border:1px solid #b8c2d4;border-radius:10px;font:400 1rem var(--font);background:#fff;color:var(--ink)}
textarea{min-height:100px;resize:vertical}input:focus,select:focus,textarea:focus{outline:3px solid #c5d3ff;border-color:var(--brand)}
input[type=checkbox],input[type=radio]{width:20px;min-height:20px;height:20px;accent-color:var(--brand)}input[type=color]{padding:3px;min-width:56px;width:56px}
.error{background:#fdecea;color:var(--err);padding:.7rem 1rem;border-radius:10px;font-weight:600}.notice{background:#eef2ff;padding:.7rem 1rem;border-radius:10px}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:32px 0 18px}.row h1{margin:0}
.site{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}.site h3{margin:0 0 4px}.site form{margin:0}
.badge{display:inline-block;padding:.12rem .6rem;border-radius:999px;background:#eef1f6;font-weight:700;font-size:.82rem}.badge.ok{background:#dff5ea;color:var(--ok)}
.empty{text-align:center}
/* wizard */
.wizard{max-width:720px;padding-top:28px;padding-bottom:64px}.progress{display:flex;gap:6px;margin-bottom:24px}.progress i{flex:1;height:6px;border-radius:6px;background:#dbe2ef}.progress i.on{background:var(--brand)}
.wiz-card h1{font-size:clamp(1.6rem,3.6vw,2.2rem)}.nav-row{display:flex;justify-content:space-between;gap:12px;margin-top:26px}.hint{font-weight:400;color:var(--muted);font-size:.93rem}
.two{display:grid;gap:14px}@media(min-width:640px){.two{grid-template-columns:1fr 1fr}}
.checks{display:grid;gap:10px}.check{display:flex;align-items:flex-start;gap:12px;font-weight:600;padding:.8rem 1rem;border:1px solid var(--line);border-radius:12px;background:#fff}.check small{display:block;font-weight:400;color:var(--muted)}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}.swatch{width:42px;height:42px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #b8c2d4;cursor:pointer;padding:0}.swatch.on{box-shadow:0 0 0 3px var(--brand)}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}.thumb{position:relative;width:96px;height:72px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}.thumb img{width:100%;height:100%;object-fit:cover}.thumb button{position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;border:0;background:#000b;color:#fff;cursor:pointer;line-height:1}
.logoprev{max-width:220px;max-height:100px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px}
.tpls{display:grid;gap:14px}@media(min-width:640px){.tpls{grid-template-columns:repeat(3,1fr)}}
.tpl{display:grid;gap:8px;align-content:start;padding:16px;border:2px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font-weight:600}.tpl.on{border-color:var(--brand);background:#f3f6ff}
.tpl .mock{height:84px;border-radius:8px;border:1px solid var(--line);padding:8px;display:grid;gap:6px;align-content:start}.tpl .mock i{display:block;height:8px;border-radius:4px;background:currentColor;opacity:.25}.tpl .mock b{display:block;height:18px;width:60%;border-radius:4px}
.price-tag{font-size:.82rem;font-weight:700;padding:.1rem .6rem;border-radius:999px;background:#e8f7ef;color:var(--ok);justify-self:start}.price-tag.paid{background:#fff3dc;color:#8a5a00}
.err-inline{color:var(--err);font-weight:600;min-height:1.4em}
/* editor */
body.wide main{height:calc(100vh - 65px)}.editor{display:grid;grid-template-columns:380px 1fr;height:100%}
.panel{background:#fff;border-right:1px solid var(--line);overflow:auto;padding:0 0 80px}.panel-head{padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}.panel-head h1{font-size:1.3rem;margin:6px 0 2px}.panel-head p{margin:0}
details.sec{border-bottom:1px solid var(--line)}details.sec>summary{padding:14px 18px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between}details.sec>summary::after{content:"+";font-weight:400}details.sec[open]>summary::after{content:"\2212"}
.sec-body{padding:0 18px 18px;display:grid;gap:14px}.item{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:8px;background:#fafbfd}.item .x{justify-self:end;background:none;border:0;color:var(--err);font-weight:700;cursor:pointer}
.add{justify-self:start}
.stage{display:grid;grid-template-rows:auto 1fr;min-width:0;background:#e7ebf3}.stage-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{border:0;background:#fff;padding:.45rem .9rem;font:600 .92rem var(--font);cursor:pointer}.seg button.on{background:var(--brand);color:#fff}
.publish{display:flex;align-items:center;gap:12px}
.frame{display:grid;justify-items:center;padding:14px;min-height:0}.frame iframe{width:100%;height:100%;border:0;background:#fff;border-radius:10px;box-shadow:0 10px 40px -20px #0006;transition:width .25s}
@media(max-width:900px){body.wide main{height:auto}.editor{grid-template-columns:1fr;height:auto}.stage{min-height:70vh}.panel{border-right:0}}
/* checkout */
.cart{width:100%;border-collapse:collapse;margin:16px 0}.cart td{padding:12px 0;border-bottom:1px solid var(--line)}.cart tfoot td{font-weight:800;font-size:1.2rem;border-bottom:0}.cart .r{text-align:right;white-space:nowrap}
.slug{margin:18px 0}.slugrow{display:flex;align-items:center;gap:6px}.slugrow input{flex:1}.slugrow b{white-space:nowrap;font-weight:600;color:var(--muted)}
.testmode{background:#fff3dc;border:1px dashed #d99a1f;color:#6b4700;padding:.6rem .9rem;border-radius:10px;font-weight:600;margin:14px 0;font-size:.95rem}
.live{font-size:1.4rem;font-weight:700;word-break:break-all}
/* react wizard and editor additions */
.editor-root{height:100%}.filebtn{position:relative;overflow:hidden}.filebtn.off{opacity:.55;cursor:not-allowed}.filebtn:focus-within{outline:3px solid #c5d3ff}
input.bad,textarea.bad{border-color:var(--err);background:#fff7f6}
.aibox{border:1px solid #c9d6ff;background:#f3f6ff;border-radius:14px;padding:14px 16px;display:grid;gap:10px}.aibox.flyer:not(.open){grid-template-columns:1fr auto;align-items:center}.aibox .check{background:transparent;border-color:transparent;padding:0}.aibox.on{border-color:var(--brand)}
.aibox .hint{display:block}.review{display:grid;gap:8px}.review .check{background:#fff}.review small.warn{color:#8a5a00;margin-top:2px}
.aibanner{margin:12px 18px;display:grid;gap:8px;font-size:.95rem}
@media(max-width:560px){.aibox.flyer:not(.open){grid-template-columns:1fr}}
.warn-text{color:#8a5a00}
.check input{flex:none}