aside select{display:block;width:100%;margin-top:8px;padding:11px 12px;border:1px solid #dbe4eb;border-radius:8px;background:#f9fbfd;color:#233e53}
.upload-button{display:block;position:relative;padding:14px 12px;border:1px dashed #8eb8d9;border-radius:10px;background:#f0f8ff;text-align:center;color:#1d639d;font-weight:600;cursor:pointer;line-height:1.6}
.upload-button:hover{background:#e7f4ff}.upload-button:focus-within{outline:3px solid #0194e070;outline-offset:2px}.upload-button:has(input:disabled){opacity:.5;cursor:wait}
#collage-preview{position:relative;max-width:560px;margin:10px auto;background:white;border:1px solid #e1e8ee;overflow:hidden;box-shadow:0 15px 40px #233d5515}
#collage-preview.is-empty{min-height:320px;aspect-ratio:4/5;border-radius:6px}
#collage-result{display:block;width:100%;height:auto}
#collage-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px;color:#638298}
.collage-empty-icon{font-size:64px;line-height:1;margin-bottom:22px;color:#9ebbd1}#collage-empty strong{font-size:22px}#collage-empty p{font-size:13px;line-height:1.8;max-width:300px;color:#7893a6}
.collage-photos{list-style:none;padding:0;margin:12px 0}.collage-photo{display:flex;gap:12px;align-items:center;background:#f9fbfd;border:1px solid #e1e8ee;border-radius:10px;padding:8px;margin-bottom:9px;min-width:0}.collage-photo>img{width:62px;height:62px;object-fit:cover;border-radius:6px;background:#e9eff4;flex:0 0 auto}.collage-photo-copy{min-width:0;flex:1}.collage-photo-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600;color:#416078}.collage-photo-actions{display:flex;gap:5px;margin-top:7px}.collage-photo-actions button{padding:5px 9px;font-size:12px}.collage-photo-actions button:last-child{margin-left:auto;color:#8b5460}
.collage-templates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.collage-template{padding:9px 9px 11px;font-size:12px;background:#f9fbfd;min-width:0;border-radius:12px;transition:background .15s,border-color .15s,box-shadow .15s}
.collage-template strong{display:block;font-size:12px;font-weight:600;line-height:1.5}
.collage-template small{display:block;font-size:10px;line-height:1.5;color:#6c8395;font-weight:400;margin-top:2px}
.collage-template.active{border-color:#0194e0;box-shadow:0 0 0 1px #0194e0;background:#eef8ff}
.collage-template:focus-visible{outline:3px solid #0194e055;outline-offset:3px}
.collage-template-icon{position:relative;display:grid;height:82px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0;margin:0 0 8px;background:#e9eff3;border-radius:7px;overflow:hidden;isolation:isolate}
.collage-template-icon i{display:block;position:relative;min-width:0;min-height:0;background:linear-gradient(151deg,transparent 52%,#5f8b99 52%,#406b7b 100%),linear-gradient(30deg,transparent 65%,#8fac9f 65%),linear-gradient(180deg,#b6d2dc,#d3e2da 60%);overflow:hidden}
.collage-template-icon i:nth-child(2){background:linear-gradient(144deg,transparent 58%,#677fa7 58%,#476c93),linear-gradient(35deg,transparent 52%,#9aadb7 52%),linear-gradient(180deg,#d2e1e4,#a9c4d6)}
.collage-template-icon i:nth-child(3){background:linear-gradient(157deg,transparent 53%,#7c8e71 53%,#586f62),linear-gradient(35deg,transparent 56%,#a9b6a0 56%),linear-gradient(180deg,#d9dbcb,#c3d0bf)}
.collage-template-icon i:nth-child(4){background:linear-gradient(144deg,transparent 53%,#ad9179 53%,#876e62),linear-gradient(35deg,transparent 57%,#c0b49e 57%),linear-gradient(180deg,#e3d6ca,#d8cfc1)}
.collage-template-icon i:nth-child(5){background:linear-gradient(151deg,transparent 48%,#719ca0 48%,#4d7c87),linear-gradient(180deg,#c6e0df,#abcbd0)}
.collage-template-icon.hero{grid-template-columns:repeat(3,1fr);grid-template-rows:1.8fr 1fr}.collage-template-icon.hero i:first-child{grid-column:1/-1}
.collage-template-icon.filmstrip{grid-template-columns:2.3fr 1fr;grid-template-rows:repeat(3,1fr)}.collage-template-icon.filmstrip i:first-child{grid-row:1/-1}
.collage-template-icon.magazine{grid-template-columns:1.9fr 1fr;grid-template-rows:1fr 1fr .7fr}.collage-template-icon.magazine i:first-child{grid-row:1/3}.collage-template-icon.magazine i:last-child{grid-column:1/-1}
.collage-template-icon.mosaic{grid-template-columns:1.25fr 1fr .9fr;grid-template-rows:1fr .85fr 1fr}.collage-template-icon.mosaic i:first-child{grid-row:1/3}.collage-template-icon.mosaic i:nth-child(2){grid-row:1/2}.collage-template-icon.mosaic i:nth-child(3){grid-column:3;grid-row:1/4}.collage-template-icon.mosaic i:nth-child(4){grid-column:1;grid-row:3}.collage-template-icon.mosaic i:nth-child(5){grid-column:2;grid-row:2/4}
.collage-template-icon.stack{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1.1fr 1fr}.collage-template-icon.stack i:nth-child(3){grid-column:1/-1}
.collage-template-icon.gallery{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1.2fr}
#collage-send{margin-top:20px}#collage-photo-count{float:right}#collage-upload-status:empty{display:none}#collage-preview-retry{max-width:560px;display:block;margin:auto}.reference-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px}.reference-heading h3{margin:0}.reference-heading button{font-size:12px;padding:5px 8px}#image-reference-preview{display:flex;gap:12px;align-items:center;margin-top:13px;padding:10px;background:#f9fbfd;border-radius:9px;border:1px solid #e1e8ee;min-width:0}#image-reference-thumbnail{width:70px;height:70px;object-fit:cover;border-radius:6px;flex:0 0 auto}#image-reference-name{font-size:12px;overflow-wrap:anywhere;min-width:0;line-height:1.5;color:#637b8e}
@media(min-width:1500px){#collage-preview{max-width:620px}}
@media(max-width:760px){nav{overflow-x:auto}nav button{flex:1 0 68px}nav button span{display:block;font-size:17px;margin:0 0 2px}#collage-preview{max-width:380px}#collage-preview.is-empty{min-height:250px}.collage-photo-actions button{min-height:34px}.collage-templates{gap:9px}.collage-template-icon{height:88px}}