:root{--purple:#2b1d5a;--purple-dark:#171033;--yellow:#ffde00;--pink:#e6004c;--cream:#fff9ec;--ink:#181225;--muted:#716a79;--line:#ded7e1;font-family:"Noto Sans HK",system-ui,sans-serif;color:var(--ink);background:#eeeaf2}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(135deg,#f7f3fb,#e9e4ef);min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.builder-header{position:sticky;z-index:20;top:0;display:flex;align-items:center;gap:24px;height:68px;padding:0 32px;color:#fff;background:rgba(43,29,90,.97);border-bottom:1px solid rgba(255,255,255,.15);backdrop-filter:blur(12px)}.builder-brand{display:block}.builder-logo{display:block;width:88px;height:30px;background:url("../assets/shine-campus-logo.jpeg") center/168% auto no-repeat}.builder-title{display:flex;align-items:center;gap:12px}.builder-title b{font:900 .72rem Montserrat,sans-serif;letter-spacing:.11em;color:var(--yellow)}.builder-title span{font-size:.72rem;color:#cfc8df}.save-state{display:flex;align-items:center;gap:7px;margin-left:auto;color:#beb6d2;font-size:.68rem}.save-state i{width:7px;height:7px;border-radius:50%;background:#6bea9a;box-shadow:0 0 0 4px rgba(107,234,154,.14)}.save-state.is-saving i{background:var(--yellow)}.back-site{padding:8px 12px;border:1px solid rgba(255,255,255,.25);color:#fff;text-decoration:none;font-size:.68rem;font-weight:800}.builder-shell{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(360px,.78fr);gap:0;max-width:1500px;margin:0 auto;min-height:calc(100vh - 68px)}.form-column{padding:55px clamp(30px,5vw,76px) 80px;background:var(--cream);border-right:2px solid var(--ink)}.builder-intro{max-width:690px}.eyebrow{margin:0 0 12px;color:var(--pink);font:900 .67rem Montserrat,sans-serif;letter-spacing:.15em}.builder-intro h1{margin:0;color:var(--purple);font:900 clamp(2.2rem,4.4vw,4.4rem)/1 Montserrat,"Noto Sans HK",sans-serif;letter-spacing:-.06em}.builder-intro h1 span{color:var(--pink);text-shadow:2px 2px 0 var(--yellow)}.builder-intro>p:last-child{max-width:570px;margin:20px 0 0;color:var(--muted);font-size:.85rem;line-height:1.8}.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:44px 0 36px;padding:0;list-style:none;border-block:2px solid var(--ink)}.stepper li{position:relative;display:flex;align-items:center;gap:9px;padding:13px 8px;color:#9b94a0;font-size:.67rem}.stepper li:not(:last-child):after{content:"";position:absolute;right:0;width:1px;height:50%;background:var(--line)}.stepper li span{display:grid;place-items:center;width:25px;height:25px;border:1px solid #aaa2af;border-radius:50%;font:800 .62rem Montserrat,sans-serif}.stepper li.is-active{color:var(--purple)}.stepper li.is-active span{color:var(--ink);background:var(--yellow);border:2px solid var(--ink)}.stepper li.is-done span{color:#fff;background:var(--pink);border-color:var(--ink)}.form-step{animation:step-in .35s ease}.form-step[hidden]{display:none}@keyframes step-in{from{opacity:0;transform:translateX(10px)}}.step-heading{display:flex;align-items:flex-start;gap:17px;margin-bottom:28px}.step-heading>span{padding:7px 9px;color:#fff;background:var(--pink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--yellow);font:900 .6rem Montserrat,sans-serif}.step-heading h2{margin:0 0 4px;color:var(--purple);font-size:1.35rem}.step-heading p{margin:0;color:var(--muted);font-size:.74rem}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.field{display:grid;gap:7px;color:var(--purple);font-size:.72rem;font-weight:800}.field-wide{grid-column:1/-1}.field em{color:var(--pink);font-style:normal;font-size:.61rem}.field input,.field select,.field textarea{width:100%;padding:12px 13px;color:var(--ink);background:#fff;border:2px solid #d4cdd8;border-radius:0;outline:none;font-size:.8rem;font-weight:500;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pink);box-shadow:3px 3px 0 var(--yellow)}.field input.is-invalid,.field textarea.is-invalid{border-color:var(--pink);background:#fff6f8}.field small{color:#8b8491;font-weight:500}.upload-card{position:relative;display:grid;align-content:center;justify-items:center;min-height:180px;padding:22px;text-align:center;background:#fff;border:2px dashed #afa5b5;cursor:pointer;transition:background .2s,border-color .2s}.upload-card:hover{background:#fffcdd;border-color:var(--pink)}.upload-card input{position:absolute;width:1px;height:1px;opacity:0}.upload-icon{display:grid;place-items:center;width:38px;height:38px;margin-bottom:10px;color:#fff;background:var(--purple);border-radius:50%;font-size:1.3rem}.upload-card b{color:var(--purple);font-size:.8rem}.upload-card small{margin-top:5px;color:#8e8794;font-size:.65rem}.upload-card strong{max-width:100%;margin-top:10px;color:var(--pink);font-size:.64rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.feature-card{position:relative;display:grid;grid-template-columns:32px 1fr;column-gap:10px;padding:16px;background:#fff;border:2px solid var(--line);cursor:pointer}.feature-card:has(input:checked){background:#fffbdc;border-color:var(--ink);box-shadow:4px 4px 0 var(--yellow)}.feature-card input{position:absolute;top:13px;right:13px;width:17px;height:17px;accent-color:var(--pink)}.feature-card>span{grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;color:var(--purple);background:var(--yellow);border:1px solid var(--ink);border-radius:50%;font:900 .55rem Montserrat,sans-serif}.feature-card b{padding-right:20px;color:var(--purple);font-size:.8rem}.feature-card small{color:#827a89;font-size:.62rem;line-height:1.5}.registration-fields{margin-top:28px}.check-field{display:flex;flex-wrap:wrap;gap:13px;padding:15px;border:2px solid var(--line);background:#fff}.check-field legend{padding:0 4px;color:var(--purple);font-size:.72rem;font-weight:800}.check-field label{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:.7rem}.check-field input{width:auto;accent-color:var(--pink)}.output-summary{margin:25px 0;padding:20px;background:var(--purple);border:2px solid var(--ink);color:#fff}.output-summary>div{display:flex;align-items:center;gap:14px}.output-summary>div>span{display:grid;place-items:center;width:55px;height:55px;color:var(--purple);background:var(--yellow);border:2px solid var(--ink);border-radius:50%;font:900 .8rem Montserrat,sans-serif}.output-summary p{display:grid;margin:0}.output-summary b{font-size:.82rem}.output-summary small{margin-top:4px;color:#c9c2d8;font-size:.66rem}.output-summary ul{margin:15px 0 0;padding:12px 0 0 18px;border-top:1px solid rgba(255,255,255,.18);color:#ffcfda;font-size:.68rem;line-height:1.7}.output-summary ul:empty{display:none}.privacy-check{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:.7rem;line-height:1.6}.privacy-check input{margin-top:3px;accent-color:var(--pink)}.form-actions{display:flex;justify-content:flex-end;gap:11px;margin-top:30px;padding-top:22px;border-top:2px solid var(--ink)}.primary-button,.ghost-button{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:13px 18px;border:2px solid var(--ink);font-size:.73rem;font-weight:900}.primary-button{color:#fff;background:var(--pink);box-shadow:4px 4px 0 var(--yellow)}.primary-button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--yellow)}.ghost-button{color:var(--purple);background:#fff}.generate-button{background:var(--purple)}.form-message{min-height:1.2em;margin:14px 0 0;color:var(--pink);font-size:.72rem;font-weight:700;text-align:right}.preview-column{position:sticky;top:68px;align-self:start;height:calc(100vh - 68px);padding:28px clamp(18px,3vw,45px);background:var(--purple-dark);overflow:auto}.preview-toolbar{display:flex;justify-content:space-between;align-items:end;color:#fff}.preview-toolbar>div{display:grid}.preview-toolbar span{color:var(--yellow);font:900 .57rem Montserrat,sans-serif;letter-spacing:.15em}.preview-toolbar b{margin-top:4px;font-size:.8rem}.preview-toolbar button{padding:0;color:#9f96b2;background:transparent;border:0;font-size:.62rem}.preview-toolbar button:hover{color:var(--yellow)}.phone-frame{position:relative;width:min(350px,90%);margin:20px auto;padding:12px 8px 15px;background:#09070e;border:2px solid #504861;border-radius:36px;box-shadow:0 25px 70px rgba(0,0,0,.45)}.phone-speaker{width:65px;height:5px;margin:0 auto 8px;background:#2d2833;border-radius:4px}.event-preview{height:min(670px,calc(100vh - 190px));min-height:520px;background:#fff;border-radius:27px;overflow:auto;scrollbar-width:none}.event-preview::-webkit-scrollbar{display:none}.preview-hero{position:relative;min-height:270px;padding:18px;color:#fff;background:radial-gradient(circle at 85% 15%,rgba(255,222,0,.9),transparent 23%),linear-gradient(145deg,#e6004c,#2b1d5a 70%);background-position:center;background-size:cover;overflow:hidden}.preview-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(20,12,40,.82))}.preview-chip{position:relative;z-index:2;padding:5px 7px;color:var(--ink);background:var(--yellow);border:1px solid var(--ink);font:900 .48rem Montserrat,sans-serif}.preview-event-logo{position:absolute;z-index:2;top:45px;left:18px;max-width:120px;max-height:60px;object-fit:contain}.preview-hero-copy{position:absolute;z-index:2;left:18px;right:18px;bottom:18px}.preview-hero-copy p{margin:0 0 7px;color:var(--yellow);font-size:.56rem;font-weight:800}.preview-hero-copy h2{margin:0;font-size:1.65rem;line-height:1.08;letter-spacing:-.04em}.preview-hero-copy span{display:block;margin-top:7px;color:#ded8e7;font-size:.61rem}.preview-body{padding:17px}.preview-facts{display:grid;grid-template-columns:1fr 1fr;gap:7px}.preview-facts>div{display:grid;padding:9px;background:#f5f1f7;border-left:3px solid var(--pink)}.preview-facts span{color:#8d8593;font-size:.48rem}.preview-facts b{margin-top:3px;color:var(--purple);font-size:.61rem}.preview-body section{padding:21px 0 4px}.preview-eyebrow{margin:0 0 4px;color:var(--pink);font:900 .48rem Montserrat,sans-serif;letter-spacing:.12em}.preview-body h3{margin:0 0 8px;color:var(--purple);font-size:.94rem}.preview-body section>p:last-child{margin:0;color:#716a79;font-size:.6rem;line-height:1.65}.preview-features{display:flex;flex-wrap:wrap;gap:5px}.preview-features span{padding:5px 7px;color:var(--purple);background:var(--yellow);border:1px solid var(--ink);font-size:.5rem;font-weight:800}.preview-cta{display:flex;justify-content:space-between;width:100%;margin-top:17px;padding:11px 12px;color:#fff;background:var(--pink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--yellow);font-size:.62rem;font-weight:900}.preview-note{max-width:350px;margin:12px auto 0;color:#8e849f;font-size:.6rem;line-height:1.6;text-align:center}.success-dialog{width:min(520px,calc(100% - 35px));padding:34px;color:var(--ink);background:var(--cream);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--pink)}.success-dialog::backdrop{background:rgba(23,16,51,.82);backdrop-filter:blur(5px)}.dialog-close{position:absolute;top:12px;right:14px;background:transparent;border:0;font-size:1.5rem}.success-mark{display:grid;place-items:center;width:52px;height:52px;margin-bottom:18px;color:var(--purple);background:var(--yellow);border:2px solid var(--ink);border-radius:50%;font-size:1.4rem}.success-dialog h2{margin:0;color:var(--purple);font-size:1.8rem}.success-dialog>p:not(.eyebrow,.dialog-status){color:var(--muted);font-size:.78rem;line-height:1.75}.dialog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.dialog-status{min-height:1em;color:var(--pink);font-size:.68rem;font-weight:800}@media (max-width:1000px){.builder-shell{grid-template-columns:1fr}.form-column{border-right:0}.preview-column{position:relative;top:0;height:auto;min-height:760px}.event-preview{height:650px}}@media (max-width:700px){.builder-header{height:60px;padding:0 15px;gap:12px}.builder-logo{width:78px;height:27px}.builder-title span,.save-state,.back-site{display:none}.builder-title{margin-left:auto}.builder-shell{min-height:calc(100vh - 60px)}.form-column{padding:36px 18px 60px}.builder-intro h1{font-size:2.45rem}.stepper{grid-template-columns:repeat(4,1fr);margin-top:32px}.stepper li{justify-content:center;padding:10px 3px}.stepper li b{display:none}.field-grid,.feature-grid{grid-template-columns:1fr}.field-wide{grid-column:auto}.form-actions{justify-content:space-between}.preview-column{padding:25px 12px}.phone-frame{width:min(350px,96%)}.dialog-actions>*{width:100%}}
