@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#252b35;--muted:#797e87;--purple:#7257e7;--paper:#f7f7fa;--line:#e8e8ef}*{box-sizing:border-box}body{margin:0;font:15px 'DM Sans',sans-serif;background:var(--paper);color:var(--ink)}h1,h2,h3{font-family:Manrope,sans-serif;letter-spacing:-.045em}h1{font-size:38px;line-height:1.2;margin:32px 0 10px}h2{font-size:23px}p{line-height:1.65;color:var(--muted)}a{color:var(--purple);text-decoration:none}button,.button{border:0;border-radius:10px;padding:13px 21px;background:var(--purple);color:white;font:600 14px 'DM Sans',sans-serif;cursor:pointer;display:inline-block;text-align:center}button:hover,.button:hover{filter:brightness(.96)}button:disabled{opacity:.4;cursor:default}.secondary{background:#eeebfd;color:#5a42c5}.text-button{background:none;color:var(--muted);padding:12px 0;font-size:12px}.actions{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px 0;flex-wrap:wrap}aside{position:fixed;inset:0 auto 0 0;width:232px;background:white;border-right:1px solid var(--line);padding:37px 25px;display:flex;flex-direction:column}.wordmark{font:800 27px Manrope;color:var(--ink);letter-spacing:-1px}.wordmark span{display:block;font:600 10px 'DM Sans';letter-spacing:4px;margin-top:6px;color:var(--purple)}.nav-caption{font-size:9px;letter-spacing:2px;margin-top:60px;color:#a5a6b1}nav a{display:block;color:#727681;padding:14px 17px;margin:5px 0;border-radius:9px}nav a.active{background:#eeebfb;color:var(--purple);font-weight:700}.aside-foot{margin-top:auto;font-size:11px;color:#9a9ca5}.workspace{max-width:1540px;margin-left:232px;padding:28px 52px 70px}.workspace>header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:22px;font-size:10px;color:#9599a3;letter-spacing:1.7px}.pill{font:500 11px 'DM Sans';letter-spacing:0;background:#eeebfa;color:#7458c6;border-radius:30px;padding:7px 12px}.lede{font-size:16px;margin:0 0 30px}.hero-card{background:#ece8fb;border-radius:19px;min-height:285px;padding:38px;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.hero-card h2{font-size:36px;line-height:1.2;margin:18px 0}.hero-card p{max-width:380px;font-size:14px}.hero-art{font-size:230px;line-height:1;color:#9982e8;transform:rotate(-12deg);padding-right:35px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#7a64bf}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0}.card{background:white;border:1px solid var(--line);border-radius:15px;padding:27px;margin-bottom:24px}.stats .card{margin:0;display:flex;flex-direction:column;gap:8px}.stats strong{font:700 34px Manrope;color:var(--ink)}.stats span{color:var(--muted);font-size:13px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.steps p{font-size:13px}.steps b{color:var(--ink);line-height:3}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.theme-card{background:white;border:1px solid var(--line);border-radius:15px;overflow:hidden}.theme-card>img{width:100%;aspect-ratio:1.2;object-fit:cover}.theme-card>div{padding:22px}.theme-card h2{margin:10px 0 20px}.section-heading{display:flex;justify-content:space-between;align-items:start;gap:20px}.empty{grid-column:1/-1;border:1px dashed #d9d6e4;padding:60px;text-align:center;border-radius:14px}label{display:block;font-size:13px;font-weight:600;margin-bottom:20px}input,textarea,select{width:100%;margin-top:9px;border:1px solid #dedee8;background:#fcfcfe;border-radius:8px;padding:12px;font:400 14px 'DM Sans';color:var(--ink)}textarea{min-height:115px;resize:vertical}input:focus,textarea:focus,select:focus{outline:2px solid #c4b4ff;outline-offset:1px}input[type=file]{font-size:12px}input[type=checkbox]{width:auto;margin:0}.check{display:flex;gap:10px;align-items:center}.hint{font-size:12px;margin-top:-7px;max-width:700px}.style-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.style-editor{border:1px solid var(--line);border-radius:12px;padding:17px;align-self:start}.style-editor summary{cursor:pointer;font-weight:600;margin-bottom:16px}.example-thumb{width:100%;aspect-ratio:1.4;object-fit:cover;border-radius:8px;margin-bottom:20px}.logo-preview{max-width:150px;max-height:90px;object-fit:contain;display:block;margin-bottom:22px;background:#f4f4f6;padding:12px}.link-row{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);padding:20px 0}.link-row>div{flex:1}.link-row p{margin:5px 0}.notice{background:#edf7ef;padding:15px;border-radius:9px;color:#257044}fieldset{border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:20px}.guest{max-width:750px;margin:auto;padding:25px;text-align:center}.guest h1{font-size:38px}.login{max-width:450px;margin:12vh auto;text-align:left}.booth-header{display:flex;align-items:center;justify-content:center;position:relative;min-height:90px}.booth-header>img{max-height:85px;max-width:220px;object-fit:contain}.staff-button{position:absolute;right:0;top:0;background:none;color:#999;font-size:11px;padding:6px}.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0}.style{background:white;border:3px solid transparent;padding:0;color:var(--ink);border-radius:14px;overflow:hidden;box-shadow:0 4px 20px #252b3509}.style img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.style span{display:block;padding:13px 7px;font-size:13px}.style.selected{border-color:var(--purple)}#fullscreen{display:block;margin:15px auto;background:none;color:#888;font-size:12px}.camera-frame{position:relative;background:#1d1d24;aspect-ratio:9/12;border-radius:20px;overflow:hidden;max-height:62vh;margin:auto}.camera-frame video,.camera-frame img{width:100%;height:100%;object-fit:contain}video{transform:scaleX(-1)}#photo-upload{max-width:380px;font-size:12px}#booth-error,#staff-error{color:#ba3e4c}.final-photo{display:block;max-width:100%;max-height:67vh;margin:20px auto;border-radius:10px}#qr-panel canvas{max-width:230px;height:auto;display:block;margin:20px auto}dialog{border:0;border-radius:16px;padding:30px;width:min(420px,90vw)}dialog::backdrop{background:#20203588}.spinner{width:70px;height:70px;border:5px solid #e6e0fa;border-top-color:var(--purple);border-radius:50%;animation:spin 1s linear infinite;margin:15vh auto 35px}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}@media(max-width:1000px){.workspace{padding:24px;margin-left:190px}aside{width:190px}.cards,.style-edit-grid{grid-template-columns:repeat(2,1fr)}.hero-art{font-size:150px;padding:0}.steps{grid-template-columns:1fr;gap:0}}@media(max-width:650px){aside{position:static;width:100%;padding:20px}.nav-caption,.aside-foot{display:none}nav{display:flex;flex-wrap:wrap;margin-top:15px}nav a{padding:8px;font-size:12px}.workspace{margin:0;padding:20px}.workspace>header{display:none}.cards,.style-edit-grid{grid-template-columns:1fr}.hero-card{padding:25px}.hero-art{display:none}.hero-card h2{font-size:30px}.stats{gap:8px}.stats .card{padding:18px}.section-heading{display:block;margin-bottom:20px}.link-row{flex-wrap:wrap}.guest{padding:18px}.guest h1{font-size:29px}.styles{gap:8px}.style span{font-size:11px}.style{border-width:2px}.steps{display:block}}@media print{@page{size:100mm 148mm;margin:4mm}body{background:white}.no-print,aside,header,button{display:none!important}.guest,.result{padding:0;margin:0;max-width:none}.final-photo{width:100%;height:138mm;max-height:138mm;object-fit:contain;margin:0;border-radius:0}}

/* Portrait booth: one style per row, full-height event panel. */
body.booth-page .guest{max-width:none;padding:0;min-height:100vh;min-height:100dvh}
body.booth-page #booth{min-height:100vh;min-height:100dvh;border-radius:0;padding:clamp(16px,3vw,32px);background:transparent}
.booth-page .styles{grid-template-columns:1fr;max-width:560px;margin:24px auto;gap:16px}
.booth-page .style{display:flex;align-items:center;text-align:left;min-height:140px}
.booth-page .style img{width:48%;height:clamp(140px,19vh,240px);aspect-ratio:auto;object-fit:contain;background:#f8f8fa}
.booth-page .style span{flex:1;padding:20px;font-size:clamp(16px,2.5vw,22px)}
.booth-page .camera-frame{aspect-ratio:9/16;width:min(100%,calc(65vh * 9 / 16));max-height:none;border-radius:16px}
.booth-page .camera-frame video,.booth-page .camera-frame img{object-fit:cover;display:block}
.booth-page #capture-preview{transform:scaleX(-1)}
.booth-page #camera h1{margin:18px 0}

#countdown:not(:empty){position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:bold clamp(80px,18vw,180px) Manrope,sans-serif;color:white;text-shadow:0 3px 20px #000;background:#0003;pointer-events:none}

#qr-panel{text-align:center;max-height:90dvh;overflow:auto}#qr-panel::backdrop{background:#15152599}#qr-close{display:block;margin-left:auto}#qr-panel canvas{width:min(230px,55vw);max-width:100%}

/* Theme layout and the event background cover the entire booth surface. */
.booth-page #booth[data-layout="grid"] .styles{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px}
.booth-page #booth[data-layout="grid"] .style{display:block;min-height:0}
.booth-page #booth[data-layout="grid"] .style img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.booth-page #booth[data-layout="grid"] .style span{padding:12px 6px;font-size:clamp(12px,2vw,18px);text-align:center}
.app-login{max-width:440px;margin:12vh auto;padding:24px}.system-logo{font:800 40px Manrope,sans-serif;margin:20px auto 48px;text-align:center}.system-logo span{display:block;font-size:12px;letter-spacing:7px;margin-top:8px}.app-login form{text-align:left}.app-login button{width:100%}.event-picker{max-width:640px;margin:auto}.event-choice{display:block;background:white;border:1px solid var(--line);border-radius:14px;margin:18px 0;padding:26px;text-align:left;font-size:22px;font-weight:700}.event-choice span{display:block;font-size:13px;margin-top:12px;font-weight:400}

/* Shared AI Booth identity */
.platform-logo{display:block;width:100%;height:auto;object-fit:contain}.wordmark .platform-logo{width:174px;max-width:100%}.system-logo .platform-logo{width:280px;max-width:100%;margin:auto}.platform-footer{display:flex;justify-content:center;align-items:center;gap:9px;margin:36px auto 0;color:#5d6371;font-size:11px}.platform-footer img{width:110px;height:auto}.guest .platform-footer{width:max-content;padding:8px 12px;border-radius:9px;background:#ffffffed;max-width:100%}