:root{--ink:#4a3a56;--muted:#7b6b84;--line:#e6dbe9;--paper:#fffdf9;--lav:#7d68b0;--soft:#f3edf8;--button:#6e5a88;--title:'Fredoka','Nunito',system-ui,sans-serif;--body:'Nunito',system-ui,sans-serif}
*,*:before,*:after{box-sizing:border-box}
body{margin:0;background:linear-gradient(160deg,#f4eef9,#fbf7ef 45%,#eef6f0);color:var(--ink);font:500 16px/1.5 var(--body);min-height:100vh}
.builder{width:min(100%,680px);margin:0 auto;padding:24px 16px 80px}
.intro{text-align:center;padding:12px 0 8px}
.back{display:inline-block;margin-bottom:14px;color:var(--muted);font-size:14px;text-decoration:none}
.tag{display:inline-block;margin-left:10px;padding:3px 10px;border-radius:99px;background:#ffe9a8;color:#6b5210;font-size:12px;font-weight:700}
h1{margin:4px 0 6px;font:600 clamp(30px,7vw,42px)/1.1 var(--title)}
.intro p{margin:0 auto;max-width:520px;color:var(--muted)}
.step{margin-top:22px;padding:20px 18px;border-radius:22px;background:var(--paper);box-shadow:0 10px 30px #6a557214,0 0 0 1px #fff,inset 0 0 0 1px var(--line)}
h2{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 21px/1.2 var(--title)}
h2>span:first-child{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--button);color:#fff;font-size:15px;flex:none}
h3{margin:14px 0 8px;font:600 16px/1.2 var(--title);color:var(--muted)}
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.type{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 12px;border:1.5px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);font:600 14px/1.2 var(--title);cursor:pointer;transition:transform .2s,border-color .2s}
.type img{width:84px;height:84px;object-fit:contain}
.type:hover{transform:translateY(-2px)}
.type.selected{border-color:var(--lav);background:var(--soft)}
fieldset{margin:0 0 14px;padding:12px 14px 6px;border:1px solid var(--line);border-radius:16px}
legend{padding:0 6px;font:600 16px var(--title)}
.field{display:block;margin-bottom:12px}
.label{display:block;margin-bottom:4px;font-weight:700;font-size:14px}
input,textarea{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:500 16px/1.4 var(--body)}
textarea{resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--lav);box-shadow:0 0 0 3px #7d68b026}
.with-count{display:block}
.count,.hint{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.count{text-align:right}
.segmented{display:flex;gap:8px;margin:2px 0 12px}
.segmented button{flex:1;min-height:44px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:600 16px var(--title);cursor:pointer}
.segmented button.on{border-color:var(--lav);background:var(--soft);color:var(--lav)}
.segmented.small button{min-height:38px;font-size:14px}
.sets{display:flex;flex-wrap:wrap;gap:10px}
.set{display:flex;flex-direction:column;align-items:center;gap:4px;width:130px;padding:8px;border:1.5px solid var(--line);border-radius:14px;font-size:13px;text-align:center;cursor:pointer}
.set input{position:absolute;opacity:0}
.set img{width:76px;height:76px;object-fit:contain}
.set.selected{border-color:var(--lav);background:var(--soft)}
.link{border:0;background:none;color:var(--lav);font:700 14px var(--body);padding:4px 0 10px;cursor:pointer}
.form-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:6px}
.primary,.ghost{min-height:48px;padding:0 22px;border-radius:99px;font:600 16px var(--title);cursor:pointer}
.primary{border:0;background:var(--button);color:#fff;box-shadow:0 8px 20px #6e5a8840;margin-left:auto}
.ghost{border:1.5px solid var(--line);background:#fff;color:var(--ink)}
.error{color:#b4405c;font-weight:700;min-height:1em;margin:4px 0}
.link-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.link-text{display:flex;flex-direction:column;min-width:0}
.link-text small{color:var(--muted)}
.link-actions{display:flex;gap:6px}
.mini{display:inline-grid;place-items:center;min-height:36px;padding:0 12px;border:1.5px solid var(--line);border-radius:99px;background:#fff;color:var(--ink);font:700 13px var(--body);text-decoration:none;cursor:pointer}
.mini.whatsapp{border-color:#9fd8b6;color:#2f7a52}
.status{position:fixed;left:50%;bottom:18px;translate:-50% 0;margin:0;padding:8px 16px;border-radius:99px;background:#4a3a56;color:#fff;font-weight:700}
.status:empty{display:none}
button:focus-visible,a:focus-visible{outline:3px solid var(--lav);outline-offset:2px}
.row-actions{display:flex;flex-wrap:wrap;gap:4px 18px}
.link.quiet{color:var(--muted);font-weight:600}
.group{background:#fffaf3}
.group>.label{margin-top:4px}
.group .person{background:#fff}
.segmented.wrap{flex-wrap:wrap}
.segmented.wrap button{flex:1 1 30%;padding:0 8px}
.add-group{margin:0 0 16px}
.add-group .ghost{width:100%}
.guest-preview{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px;max-height:156px;overflow:auto}
.guest-preview:empty{display:none}
.chip{padding:3px 10px;border-radius:99px;background:var(--soft);font-size:13px;font-weight:700}
.chip.phone:after{content:' ✆';color:#2f7a52}
.bulk{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0 0 6px}
.ghost.small{min-height:40px;padding:0 16px;font-size:14px}
.link-row.sent strong:after{content:' ✓';color:#2f7a52}
.link-row.sent{opacity:.72}