:root{--teal:#2d858a;--ink:#293332;--cream:#f7f5f0;--gold:#c6b18b;--line:#e2e5df}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Microsoft JhengHei","Noto Sans TC",sans-serif}button,input,select{font:inherit}button,.fileButton{border:0;border-radius:30px;padding:12px 25px;background:var(--teal);color:white;cursor:pointer;min-height:46px;font-weight:600}button:disabled{opacity:.45;cursor:default}.secondary{background:white;color:var(--ink);border:1px solid var(--line)}.ghost{background:transparent;color:var(--ink);border:1px solid #d9ddd5;font-size:14px;padding:8px 16px}.large{font-size:23px;padding:16px 46px}.active,.selected{outline:3px solid var(--teal);outline-offset:2px}input:not([type=checkbox]):not([type=range]),select{border:1px solid var(--line);background:white;color:var(--ink);border-radius:10px;padding:10px;max-width:100%}label{display:block;margin:12px 0}input[type=checkbox]{width:19px;height:19px;vertical-align:middle;accent-color:var(--teal)}input[type=range]{width:100%;accent-color:var(--teal)}[hidden]{display:none!important}h1{font-size:clamp(24px,2.5vw,42px);font-weight:600;margin:10px 0}p{line-height:1.6}.muted{color:#7a8380;font-size:13px}.eyebrow{letter-spacing:4px;color:#8e9b91;font-size:12px}header{height:70px;padding:12px 3vw;display:flex;align-items:center;justify-content:space-between;background:#ffffffb8;border-bottom:1px solid var(--line)}.brand{font-size:24px;letter-spacing:3px}.brand small{font-size:10px;letter-spacing:2px}.page{height:calc(100vh - 70px);min-height:560px;padding:2vh 3vw;display:flex;flex-direction:column}.title{height:85px;text-align:center}.title p{margin:5px}.hero{position:relative;justify-content:center;align-items:center;overflow:hidden;background:radial-gradient(ellipse at 10% 10%,#dce3d1 0,transparent 40%),radial-gradient(ellipse at 90% 90%,#efe0ca 0,transparent 40%),#faf8f1}.hero:before,.hero:after{content:'❦';position:absolute;color:#adb99866;font-size:30vw;transform:rotate(-30deg);left:-4vw;top:0}.hero:after{left:auto;right:-2vw;top:auto;bottom:-8vw;transform:rotate(120deg)}#heroImage{position:absolute;inset:0;background-size:cover;background-position:center}.heroCopy{z-index:1;text-align:center;border-radius:28px;padding:45px;background:#ffffffb8;box-shadow:0 15px 70px #b4b0a71a}.heroCopy h1{font-size:clamp(38px,4vw,66px)}.heroCopy button{display:block;margin:18px auto;min-width:260px}.frameGrid{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:20px;overflow:auto;padding:20px 8px}.frameTile{background:white;border:1px solid var(--line);border-radius:16px;padding:12px;max-height:390px}.frameTile img{width:100%;height:80%;object-fit:contain}.frameTile p{font-size:14px;margin:8px 0}footer{display:flex;gap:12px;justify-content:center;padding:14px 0;flex-wrap:wrap;flex-shrink:0}.captureLayout{flex:1;min-height:0;display:grid;grid-template-columns:2fr 1fr;gap:24px}.liveWrap{position:relative;background:#e8ebe5;border-radius:18px;display:flex;align-items:center;justify-content:center;overflow:hidden}.liveWrap canvas{max-width:100%;max-height:100%;object-fit:contain}.sheetWrap{display:flex;align-items:center;flex-direction:column;justify-content:center;min-height:0}.sheetWrap canvas{max-height:88%;max-width:100%;object-fit:contain;box-shadow:0 5px 20px #0001}.sheetWrap p{font-size:13px;margin:8px}#countdown{position:absolute;font-size:110px;font-weight:bold;color:white;text-shadow:0 1px 14px #0008}.cameraStatus{position:absolute;left:15px;top:15px;background:#26332eaa;color:white;border-radius:20px;padding:8px 12px;font-size:13px}.editLayout{flex:1;min-height:0;display:grid;grid-template-columns:250px 1fr;gap:25px}.editLayout aside{overflow:auto;background:white;border-radius:15px;padding:15px}.tabbar{display:flex;gap:8px}.tabbar button{padding:8px 16px}.editCanvasWrap{display:flex;justify-content:center;align-items:center;min-height:0}.editCanvasWrap canvas{max-height:100%;max-width:100%;object-fit:contain;touch-action:none;box-shadow:0 5px 25px #0001}#stickerGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}#stickerGrid button{padding:6px;background:#f5f5f0;border-radius:10px}#stickerGrid img{width:50px;height:50px;object-fit:contain}.outputLayout{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:40px}.resultPreview{display:flex;align-items:center;justify-content:center;min-height:0}.resultPreview img,.resultPreview video{max-height:100%;max-width:100%;object-fit:contain;box-shadow:0 5px 25px #0001}.outputControls{overflow:auto;display:flex;flex-direction:column;justify-content:center;align-items:center}.stepper{display:flex;gap:15px;justify-content:center;margin-top:10px}.stepper input{width:75px;text-align:center;font-size:24px}#printSummary{background:#e2f1e8;padding:10px 35px;border-radius:12px}.outputControls>button{margin:12px}#qrPanel{display:grid;grid-template-columns:150px auto;gap:10px;align-items:center;margin:12px;padding:15px;background:white;border-radius:15px}#qr{grid-row:span 2}#qr img,#qr canvas{width:140px!important;height:140px!important}.messagePreview{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.messagePreview video{max-width:100%;max-height:100%;border-radius:16px}.admin{display:grid;grid-template-columns:190px 1fr;gap:25px;overflow:hidden}.admin nav{display:flex;flex-direction:column;gap:12px;padding-top:15px}.adminBody{overflow:auto;background:white;border-radius:18px;padding:25px}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}#settingsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 25px;margin:20px 0}.setting{background:#f6f7f3;border-radius:10px;padding:8px 12px}.setting label{margin:4px}.setting input[type=number]{width:90px}.fileButton{display:inline-flex;align-items:center;justify-content:center}.fileButton input{display:none}#assetList{display:flex;flex-wrap:wrap;gap:15px;margin-top:20px}.assetCard{width:150px;padding:12px;border:1px solid var(--line);border-radius:12px}.assetCard img{width:100%;height:110px;object-fit:contain}.assetCard button{font-size:12px;padding:6px 12px;min-height:32px;margin:3px}.assetCard input{width:100%}#frameEditorCanvas{height:380px;max-width:100%;object-fit:contain;touch-action:none;background:#ddd}#slotFields{display:flex;gap:12px;flex-wrap:wrap}#slotFields label{max-width:170px}.statCard{display:inline-block;background:#e8f3ec;border-radius:12px;padding:15px;margin:7px}#historyList{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.historyCard{border:1px solid var(--line);border-radius:12px;padding:14px}.historyCard img{max-height:150px;max-width:100%;object-fit:contain}.historyCard button{font-size:12px;padding:8px 12px;margin:4px}.login{display:flex;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(ellipse at 20% 30%,#dfe8da,transparent),var(--cream)}.card{background:white;border-radius:24px;padding:45px;text-align:center;box-shadow:0 20px 70px #0001}.card form{display:flex;flex-direction:column;gap:15px}#notice{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:50;background:#253631ed;color:white;border-radius:15px;padding:12px 22px;max-width:90vw;display:none}#notice.error{background:#9a4c3d}a{color:var(--teal)}canvas{touch-action:none}#frameEditor{border-top:1px solid var(--line);margin-top:20px;padding-top:20px}@media(max-height:760px){.page{min-height:470px}.title{height:65px}.title h1{font-size:26px}.title p{font-size:13px}header{height:55px}.page{height:calc(100vh - 55px)}footer button{padding:9px 18px;min-height:40px}.large{font-size:20px}.editLayout aside{font-size:13px}label{margin:9px 0}}@media(max-width:900px){.frameGrid{grid-template-columns:repeat(3,1fr)}#settingsGrid{grid-template-columns:repeat(2,1fr)}.admin{grid-template-columns:140px 1fr}.editLayout{grid-template-columns:190px 1fr}.outputLayout{gap:15px}.brand small{display:none}}
#cameraVideo.cameraSource{position:fixed;width:2px;height:2px;left:0;bottom:0;opacity:0;pointer-events:none}
#webcamDiagnostic{white-space:pre-line;color:#365e50}
.cameraStatus:empty{display:none}#messageFrameGrid{padding:6px;gap:10px;align-content:flex-start}#messageFrameGrid .frameTile{width:105px;height:115px;padding:6px}#messageFrameGrid .frameTile img{height:75px}#messageFrameGrid .frameTile p{font-size:12px;margin:0}
.materialTabs{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0;padding:6px}.materialTabs button{min-width:130px;font-size:18px}.materialTabs button[aria-pressed=true]{background:var(--teal);color:white}.materialTabs button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}#materialScope{color:var(--teal);font-weight:600}#assetsEmpty{padding:28px;border:1px dashed var(--line);border-radius:14px;background:#f7f9f5}
header{background:rgba(247,245,240,.48);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}body.front-home header{position:fixed;top:0;left:0;right:0;z-index:20}body.front-home #home{height:100vh;padding-top:90px}.musicRow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;border-bottom:1px solid var(--line)}.musicRow span{overflow-wrap:anywhere}#musicStatus{white-space:pre-line;color:var(--teal)}#presentationPanel .settingsGroup{margin-bottom:24px}#musicList button{flex-shrink:0}#musicVolume{max-width:450px}
#edit .editLayout{grid-template-columns:clamp(340px,30vw,520px) minmax(0,1fr);gap:24px}
#edit .title{height:65px}#edit .editLayout aside{padding:20px;font-size:18px}
#edit .tabbar{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;position:sticky;top:-20px;background:white;padding:10px 0;z-index:2}
#edit .tabbar button{font-size:20px;min-height:56px;padding:12px}#edit aside button{min-height:48px;margin:5px 2px}
#edit aside select,#edit aside textarea{width:100%;font-size:18px}#edit aside textarea{border:1px solid var(--line);border-radius:10px;padding:12px;resize:vertical;font:inherit}
#edit aside input[type=range]{min-height:40px}#edit aside input[type=color]{width:100%;height:48px;padding:4px;border:1px solid var(--line);border-radius:10px}
#edit #stickerGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}#edit #stickerGrid button{min-height:108px;padding:8px}
#edit #stickerGrid img{width:80px;height:72px;max-width:100%}#stickerGrid span{display:block;font-size:14px;overflow-wrap:anywhere}
#layerTools{border-top:1px solid var(--line);padding-top:10px;margin-top:15px}#edit .editCanvasWrap{background:#e9eee7;border-radius:18px;padding:15px}
.frameGrid{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;align-content:safe center;align-items:center;gap:20px}.frameTile{width:clamp(140px,13vw,230px);height:clamp(180px,29vh,360px);flex-shrink:0}
.frameTile img{height:calc(100% - 40px)}.frameTile p{white-space:normal}.frameGrid .frameTile:only-child{width:280px;height:380px}
#processingPage{justify-content:center;align-items:center;text-align:center}.waitingSpinner{width:80px;height:80px;border:7px solid #dce5df;border-top-color:var(--teal);border-radius:50%;animation:wait-spin 1s linear infinite;margin:25px auto}
@keyframes wait-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.waitingSpinner{animation:none}}
#ticketPage{overflow:auto}.ticketGate{max-width:760px;margin:auto;width:100%;text-align:center}.ticketGate input{font-size:30px!important;text-align:center;text-transform:uppercase;width:100%}.ticketKeypad{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:15px 0}.ticketKeypad button{padding:8px;min-height:48px;font-size:22px}
#ticketScanVideo{max-height:35vh;max-width:100%;border-radius:16px}#ticketAdminList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ticketCard{border:1px solid var(--line);padding:15px;border-radius:12px}.ticketCard button{font-size:14px;padding:8px 12px;margin:3px}
.messagePreview canvas{max-height:100%;max-width:100%;object-fit:contain}#messagePreviewCanvas{border-radius:16px}#messageFramePanel{max-height:27vh;overflow:auto;flex:none}
@media(max-width:1000px){#edit .editLayout{grid-template-columns:320px minmax(0,1fr)}#edit .editLayout aside{padding:14px;font-size:16px}#edit #stickerGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){#edit .editLayout{grid-template-columns:1fr;grid-template-rows:minmax(180px,45%) 1fr}#edit .editCanvasWrap{grid-row:1}#edit .editLayout aside{grid-row:2}.ticketKeypad{grid-template-columns:repeat(6,1fr)}#ticketAdminList{grid-template-columns:1fr}}
#cloudForm input:not([type=checkbox]){display:block;width:min(100%,650px);margin-top:8px}
#cloudStatus{white-space:pre-line;background:#eef4ef;border-radius:12px;padding:14px}
.assetBatch{margin-top:20px}.assetCard>input[type=checkbox]{display:block;width:20px;margin-bottom:8px}
#settingsGrid{display:flex;flex-direction:column;gap:20px}
.settingsGroup{border:1px solid var(--line);border-radius:14px;padding:18px;min-width:0}
.settingsGroup h2{font-size:20px;margin:0 0 6px;color:var(--teal)}
.settingsGroup>.muted{margin:0 0 14px}
.settingsFields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px}
@media(max-width:1100px){.settingsFields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.settingsFields{grid-template-columns:1fr}.settingsGroup{padding:12px}}