/* «Site in 5 minutes» page */
.p-builder .bh{padding:calc(var(--hh,72px) + 36px) 0 14px}
.p-builder .bh h1{font-size:clamp(38px,6vw,68px);line-height:1.04;margin:10px 0 18px}
.bpills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bpills li{font-size:13px;padding:6px 12px;border-radius:99px;border:1px solid var(--gline);background:var(--glass);color:var(--tx2)}
.bsec{padding:10px 0 40px}
.btabs{display:none}
.bld{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:22px;align-items:start}
.bed{display:flex;flex-direction:column;gap:14px;min-width:0}
.bed-top{display:flex;gap:8px;flex-wrap:wrap}
.btn.sm{padding:8px 14px;font-size:14px;border-radius:11px;cursor:pointer}
.btn:disabled{opacity:.45;cursor:not-allowed}
button.btn{font:inherit;font-weight:600;color:var(--tx);cursor:pointer}
button.btn.sm{font-size:14px}
.btn.go{background:linear-gradient(135deg,#ff8a3d,#e0407a);color:#fff;border:0;box-shadow:0 10px 28px rgba(224,64,122,.28)}
button.btn.pri{color:#121722}
.bs{border-radius:20px;padding:20px 20px 22px;display:flex;flex-direction:column;gap:12px}
.bs h3{margin:0 0 2px;font:600 18px Onest,sans-serif;display:flex;align-items:center;gap:10px}
.bs h3 .n{font-size:12px;color:var(--mut);padding:3px 7px;border-radius:7px;border:1px solid var(--line)}
.hint{color:var(--mut);font-size:13px;margin:0;line-height:1.45}
.lbl{display:block;font-size:13px;color:var(--mut);font-weight:500;margin:2px 0 6px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld>span{font-size:13px;color:var(--mut);font-weight:500}
.bs input[type=text],.bs input[type=email],.bs input[type=tel],.bs input[type=url],.bs input:not([type]),.bs textarea{
width:100%;box-sizing:border-box;font:400 16px Onest,sans-serif;color:var(--tx);background:var(--hover);border:1px solid var(--line);border-radius:12px;padding:11px 13px;outline:none;transition:border-color .2s,background .2s}
.bs textarea{resize:vertical;min-height:84px}
.bs input:focus,.bs textarea:focus{border-color:var(--accent);background:transparent}
.bs ::placeholder{color:var(--mut);opacity:.7}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.warn{color:#e0573d;font-size:12.5px}
[data-theme=light] .warn{color:#c2331b}
.fld.bad input,.rf.bad input{border-color:#e0573d}
.row{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:8px;align-items:start;margin-bottom:8px}
.row .warn{grid-column:1/-1}
.rf{display:grid;gap:6px;min-width:0}
.r-points .rf{grid-template-columns:minmax(0,1fr)}
.r-links .rf{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.x{width:34px;height:42px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--mut);font-size:20px;line-height:1;cursor:pointer}
.x:hover{color:var(--tx);background:var(--hover)}
.add{align-self:flex-start}
.ph-row{display:flex;gap:16px;align-items:center}
.ph{width:76px;height:76px;flex:none;border-radius:50%;background:var(--hover) center/cover no-repeat;border:1px dashed var(--line)}
.ph.has{border-style:solid}
.ph-c{display:flex;flex-direction:column;gap:6px;min-width:0}
.ph-b{display:flex;gap:8px;flex-wrap:wrap}
.ph-b label{cursor:pointer}
.tpls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:6px}
.tcard{display:flex;flex-direction:column;gap:7px;padding:6px;border-radius:14px;border:2px solid var(--line);background:none;color:var(--tx);font:600 13px Onest,sans-serif;cursor:pointer;text-align:center;transition:border-color .2s,transform .2s}
.tcard:hover{transform:translateY(-2px)}
.tcard[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.tth{display:block;position:relative;overflow:hidden;border-radius:9px;background:var(--hover);aspect-ratio:390/520}
.tth iframe{position:absolute;left:0;top:0;width:390px;height:520px;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
.seg{display:inline-flex;padding:3px;border-radius:12px;border:1px solid var(--line);background:var(--hover);gap:2px;max-width:100%}
.seg button{font:500 14px Onest,sans-serif;color:var(--mut);background:none;border:0;border-radius:9px;padding:7px 13px;cursor:pointer;white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--glass2);color:var(--tx);box-shadow:0 1px 6px rgba(0,0,0,.18)}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.accs{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;position:relative;box-shadow:0 0 0 1px var(--line)}
.sw[aria-pressed=true],.sw.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--tx)}
.sw-d{background:var(--hover);color:var(--mut);font-size:14px}
.sw-c{background:conic-gradient(red,yellow,lime,aqua,blue,magenta,red);overflow:hidden;display:inline-block}
.sw-c input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.tog{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;color:var(--tx2);margin-top:6px}
.tog input{position:absolute;opacity:0;width:1px;height:1px}
.tog i{flex:none;width:40px;height:23px;border-radius:99px;background:var(--hover);border:1px solid var(--line);position:relative;transition:background .2s}
.tog i::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--mut);transition:transform .2s,background .2s}
.tog input:checked+i{background:var(--accent);border-color:transparent}
.tog input:checked+i::after{transform:translateX(17px);background:#fff}
.tog input:focus-visible+i,.seg button:focus-visible,.sw:focus-visible,.tcard:focus-visible,.x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bact{display:flex;flex-wrap:wrap;gap:10px}
.s-end{display:none}
/* preview */
.bpv{position:sticky;top:84px;display:flex;flex-direction:column;gap:12px;min-width:0}
.pvbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.pvstage{position:relative;display:flex;justify-content:center;padding:0;opacity:.0;transition:opacity .3s}
.pvstage.ready{opacity:1}
.dev{width:100%;border-radius:16px;overflow:hidden;border:1px solid var(--gline);background:var(--glass);box-shadow:0 24px 70px rgba(0,0,0,.35)}
.chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--glass2)}
.chrome i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.chrome i:nth-child(1){background:#ff5f57}.chrome i:nth-child(2){background:#febc2e}.chrome i:nth-child(3){background:#28c840}
.addr{flex:1;margin-left:10px;text-align:center;font:12px "JetBrains Mono",monospace;color:var(--mut);background:var(--hover);border-radius:7px;padding:3px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp{position:relative;overflow:hidden;background:#fff;margin:0 auto}
.vp iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff;max-width:none}
.pvstage[data-dev=phone] .dev{width:auto;border-radius:38px;border:8px solid #11141b;background:#11141b;box-shadow:0 24px 70px rgba(0,0,0,.45),0 0 0 1px var(--gline)}
.pvstage[data-dev=phone] .chrome{display:none}
.pvstage[data-dev=phone] .vp{border-radius:28px}
.ribbon{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;font-size:12.5px;padding:7px 14px;border-radius:99px;background:var(--pop);border:1px solid var(--gline);color:var(--tx2);white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 24px rgba(0,0,0,.25);pointer-events:none}
.ribbon[hidden]{display:none}
.priv{margin:0;font-size:12.5px;color:var(--mut)}
/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;pointer-events:none;z-index:90;display:flex;gap:14px;align-items:center;padding:11px 18px;border-radius:14px;background:var(--pop);border:1px solid var(--gline);color:var(--tx);box-shadow:0 16px 50px rgba(0,0,0,.4);transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{font:600 14px Onest,sans-serif;color:var(--accent);background:none;border:0;cursor:pointer}
/* publish dialog */
dialog.pub{width:min(560px,calc(100% - 28px));max-height:calc(100dvh - 40px);margin:auto;padding:0;border-radius:22px;border:1px solid var(--gline);color:var(--tx);background:var(--pop);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 30px 90px rgba(0,0,0,.5);overflow:auto}
dialog.pub::backdrop{background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pub-in{position:relative;padding:28px 26px 24px}
.pub-in h2{font:600 26px Onest,sans-serif;margin:0 40px 8px 0}
.pub-in p{color:var(--tx2);margin:0 0 10px;line-height:1.5}
.pub-in ol{margin:14px 0 18px;padding-left:22px;display:grid;gap:9px;color:var(--tx2);line-height:1.45}
.pub-in code{font:13px "JetBrains Mono",monospace;background:var(--hover);padding:2px 6px;border-radius:6px;word-break:break-all}
.pub-b{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.pub-s{font-size:13.5px;color:var(--mut)!important}
.pub-s.ok{color:var(--mint)!important}
.pub-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--tx);font-size:22px;cursor:pointer}
.pub-x:hover{background:var(--hover)}
@media(max-width:980px){
.btabs{display:flex;gap:6px;padding:4px;margin:6px 0 14px;border-radius:14px;border:1px solid var(--gline);background:var(--glass);position:sticky;top:70px;z-index:5;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.btabs button{flex:1;font:600 15px Onest,sans-serif;padding:10px;border-radius:11px;border:0;background:none;color:var(--mut);cursor:pointer}
.btabs button[aria-selected=true]{background:var(--glass2);color:var(--tx);box-shadow:0 1px 8px rgba(0,0,0,.2)}
.bld{display:block}
.bld[data-tab=edit] .bpv,.bld[data-tab=view] .bed{display:none}
.bpv{position:static}
.s-end{display:flex}
.bld[data-tab=edit] .bed-top{order:0}
}
@media(max-width:560px){
.two{grid-template-columns:1fr}
.r-links .rf{grid-template-columns:1fr}
.tpls{grid-template-columns:repeat(2,minmax(0,1fr))}
.bs{padding:16px}
.pub-in{padding:24px 18px 20px}
.bact .btn{flex:1 1 100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.tcard,.toast,.pvstage{transition:none}}