/* 愛合拍1.9.7: non-shrinking instructions and bounded media rows. */
:root{--teal:#187e80;--ink:#253d3b;--cream:#f6f5f0;--line:#dee5de;--header-height:72px}
body{background:radial-gradient(ellipse at 100% 0,#e5eee7,transparent 48%),var(--cream);-webkit-font-smoothing:antialiased}
header{height:var(--header-height);gap:24px;padding:12px 3.5vw;background:rgba(250,250,245,.65);border-bottom:1px solid #d9e2dba8;position:relative;z-index:5}
.brand{white-space:nowrap;font-weight:600;letter-spacing:4px;color:#235c59}.brand small{color:#78968b;margin-left:8px}
#eventLabel{font-size:clamp(14px,1.3vw,20px);line-height:1.4;text-align:right;overflow-wrap:anywhere;max-width:65%;max-height:2.8em;overflow:hidden}
.page{height:calc(100vh - var(--header-height));height:calc(100dvh - var(--header-height));min-height:0;padding:clamp(12px,2vh,25px) 3.5vw;gap:clamp(10px,1.4vh,20px)}
.title,#edit .title{height:auto;min-height:0;flex:0 0 auto;padding:0 12px 4px;position:relative;z-index:1;text-align:center}
.title[data-step]:before{content:attr(data-step);display:block;font-size:11px;letter-spacing:2px;color:#7a9286;line-height:1.6;margin-bottom:5px;font-weight:600}
.title h1{font-size:clamp(24px,2.7vw,42px);line-height:1.28;margin:0 0 7px;letter-spacing:1px}.title p{line-height:1.5;margin:0;color:#6c8078;font-size:clamp(13px,1.2vw,18px)}
#capture{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.captureLayout{min-width:0;min-height:0;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:clamp(16px,2.3vw,36px)}
.liveWrap{min-width:0;min-height:0;border:1px solid #d9e3da;background:linear-gradient(140deg,#e5ece5,#edf1e9);border-radius:24px;box-shadow:inset 0 0 0 7px #ffffff48}
.liveWrap canvas{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.sheetWrap{min-width:0;min-height:0;border:1px solid #e3e6dc;border-radius:24px;padding:18px;background:#ffffff8c;overflow:hidden}
.sheetWrap canvas{min-height:0;max-height:calc(100% - 36px);max-width:100%;object-fit:contain;box-shadow:0 12px 30px #243b3520}.sheetWrap p{flex-shrink:0;text-align:center;color:#78867e}
footer{margin:0;padding:4px 0;gap:12px;align-items:center;flex:0 0 auto}footer label{margin:0}
button,.fileButton{transition:background .15s,box-shadow .15s,transform .15s;box-shadow:0 5px 16px #1b645414;min-height:50px;padding:13px 26px}
.secondary{background:#ffffffbc;border-color:#d7e1d8;box-shadow:none;color:#526b61}.large{min-height:62px;box-shadow:0 8px 24px #187e8030;letter-spacing:1px}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bca477;outline-offset:4px}button:active:not(:disabled){transform:translateY(1px)}
#capture footer #ready,#capture footer #toEdit{margin-left:12px;min-width:220px}.frameTile{border-radius:20px;box-shadow:0 8px 24px #243b3508}.frameTile.selected{background:#f1f8f2}
#edit .editLayout{min-height:0;min-width:0}#edit .editLayout aside{border:1px solid #e1e6dd;border-radius:22px}#edit .editCanvasWrap{min-width:0;border:1px solid #dbe4da;border-radius:24px}
#output .outputLayout{min-width:0;min-height:0}.outputControls{border:1px solid #e0e6dc;border-radius:24px;background:#ffffff87;padding:16px}.resultPreview{padding:12px}
#messagePage{overflow:auto}.messagePreview{min-height:120px;min-width:0;border:1px solid #dbe4da;border-radius:24px;background:#e8eee6;padding:12px;overflow:hidden}
.messagePreview video,.messagePreview canvas{width:100%;height:100%;max-height:100%;max-width:100%;min-height:0;object-fit:contain;display:block;border-radius:14px}
#messageFramePanel{max-height:23vh;min-height:0;border-radius:16px;background:#ffffff99;padding:8px 14px}#messageFramePanel label{margin:0;font-size:14px}#messageFrameGrid{justify-content:flex-start;flex-wrap:nowrap;overflow:auto;align-items:center}
#messageFrameGrid .frameTile{height:100px;width:110px;min-height:100px}#messageFrameGrid .frameTile img{height:64px}#messageStop{background:#187e80;color:white;border-color:transparent}
.completionPage{align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse at 50% 30%,#e3eee2,transparent 65%)}
.completionCard{width:min(760px,95%);padding:clamp(24px,5vh,60px) clamp(22px,4vw,64px);border-radius:32px;border:1px solid white;background:#ffffffc9;box-shadow:0 22px 80px #3a655715}
.completionMark{width:92px;height:92px;margin:0 auto 22px;border-radius:50%;background:#e4f0e5;color:var(--teal);display:grid;place-items:center}.completionMark svg{width:52px;height:52px}
.completionCard h1{font-size:clamp(32px,4vw,52px);letter-spacing:4px;margin:12px 0}.completionCard>p{color:#718176;font-size:18px}.completionActions{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:28px}.completionActions button{min-width:260px}#messageReturnCountdown{font-size:14px;margin:22px 0 0}
.heroCopy{border:1px solid #ffffffa8;background:#ffffffbd;box-shadow:0 18px 80px #385a4512}.heroCopy .eyebrow{color:#759080}
.adminBody{border:1px solid #e0e6dc;box-shadow:0 10px 40px #253d3b05}.admin nav button{border-radius:14px;text-align:left;padding:13px 18px}.adminPanel h1{font-size:30px}.settingsGroup{background:#fafbf8}
@media(max-height:780px){:root{--header-height:56px}.title[data-step]:before{font-size:10px;margin-bottom:3px}.title h1{font-size:27px;margin-bottom:5px}.title p{font-size:14px}.page{padding-top:10px;padding-bottom:10px;gap:10px}button,.fileButton{min-height:44px;padding:10px 20px}.large{min-height:50px;font-size:20px}.sheetWrap{padding:12px}.completionMark{width:72px;height:72px;margin-bottom:16px}.completionCard{padding-top:24px;padding-bottom:24px}.completionActions{margin-top:18px}}
@media(max-width:900px){.brand small{display:none}.captureLayout{gap:14px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}#capture footer #ready,#capture footer #toEdit{min-width:160px;margin-left:0}#capture footer{gap:8px}.sheetWrap{padding:8px}}
@media(max-width:650px){:root{--header-height:60px}.page{padding-left:14px;padding-right:14px}.title h1{font-size:24px}.title[data-step]:before{display:none}footer button,.fileButton{font-size:14px;padding:10px 14px}.brand{font-size:20px}.completionActions button{min-width:220px}}
@media(prefers-reduced-motion:reduce){button,.fileButton{transition:none}}