:root{color:#17313e;font-synthesis:none;text-rendering:optimizelegibility;background:#edf2f4;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{color:inherit}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{min-height:100vh;padding:20px}.topbar{background:#fff;border-radius:16px;justify-content:space-between;align-items:center;max-width:1500px;margin:0 auto 16px;padding:18px 24px;display:flex;box-shadow:0 8px 30px #1b364412}.topbar h1{margin:2px 0 0;font-size:24px}.eyebrow{color:#178d8b;letter-spacing:.08em;text-transform:uppercase;font-size:12px;font-weight:800}.status{color:#5d6f78;background:#edf2f4;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700}.status--ready{color:#14765c;background:#dff5ed}.workspace{background:#fff;border-radius:18px;grid-template-columns:minmax(330px,430px) minmax(540px,1fr);max-width:1500px;min-height:calc(100vh - 118px);margin:auto;display:grid;overflow:hidden;box-shadow:0 18px 50px #1b36441a}.controls{background:#fbfcfc;border-right:1px solid #dfe7ea;overflow:auto}.panel{border-bottom:1px solid #dfe7ea;padding:24px}.step-heading{align-items:flex-start;gap:12px;margin-bottom:18px;display:flex}.step-heading b{color:#fff;background:#178d8b;border-radius:50%;place-items:center;width:28px;height:28px;display:grid}.step-heading h2{margin:2px 0 3px;font-size:17px}.step-heading p{color:#70828a;margin:0;font-size:13px}.layout-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.layout-option{cursor:pointer;background:#fff;border:2px solid #0000;border-radius:10px;padding:7px}.layout-option:hover{border-color:#b8d8d7}.layout-option.is-selected{border-color:#1aa09d;box-shadow:0 0 0 3px #1aa09d1f}.layout-option>span{white-space:nowrap;text-overflow:ellipsis;margin-top:6px;font-size:10px;display:block;overflow:hidden}.layout-preview{aspect-ratio:148/210;background:#d9e0e3;border-radius:4px;width:100%;position:relative;overflow:hidden}.layout-preview span{background:#aebbc1;border:1.5px solid;position:absolute}.upload-zone{background:#fff;border:1px dashed #9fb5bd;border-radius:12px;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px;transition:border-color .15s,background .15s;display:grid}.upload-zone:hover{background:#f4fbfa;border-color:#178d8b}.upload-zone.is-uploading{opacity:.65}.upload-zone .upload-icon{color:#138481;background:#e1f4f2;border-radius:9px;place-items:center;width:34px;height:34px;font-size:24px;display:grid}.upload-zone div{min-width:0}.upload-zone strong,.upload-zone small{display:block}.upload-zone strong{color:#334e5a;font-size:13px}.upload-zone small{color:#71828a;white-space:nowrap;text-overflow:ellipsis;margin-top:3px;font-size:10px;overflow:hidden}.upload-zone button{color:#fff;cursor:pointer;background:#178d8b;border:0;border-radius:8px;padding:8px 10px;font-size:11px;font-weight:800}.upload-zone button:disabled{cursor:wait;opacity:.55}.upload-errors{color:#a83c32;background:#fff1ef;border-radius:8px;margin-top:10px;padding:8px 10px;font-size:11px}.upload-errors p{margin:3px 0}.tray-hint{color:#71828a;text-align:center;margin:10px 0 0;font-size:11px}.image-tray{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:14px;display:grid}.image-card-wrap{min-width:0;position:relative}.image-card{cursor:grab;text-align:left;background:#fff;border:2px solid #0000;border-radius:9px;width:100%;padding:3px;display:block;overflow:hidden}.image-card:hover{border-color:#b8d8d7}.image-card.is-selected{border-color:#1aa09d;box-shadow:0 0 0 3px #1aa09d1f}.image-card img{aspect-ratio:1;object-fit:cover;border-radius:5px;width:100%;display:block}.image-card span{white-space:nowrap;text-overflow:ellipsis;padding:5px 2px 2px;font-size:9px;display:block;overflow:hidden}.remove-image{color:#fff;cursor:pointer;background:#344f5a;border:2px solid #fff;border-radius:50%;place-items:center;width:20px;height:20px;padding:0;line-height:1;display:grid;position:absolute;top:-6px;right:-6px}.toggle-row,.color-row{align-items:center;gap:12px;min-height:44px;display:flex}.toggle-row{justify-content:space-between}.toggle-row input{accent-color:#178d8b;width:20px;height:20px}.color-row input{background:#fff;border:1px solid #cad5da;border-radius:7px;width:42px;height:32px;padding:2px}.color-row code{color:#63757e}.stage-area{background:#eef3f5;grid-template-rows:auto 1fr auto;min-height:760px;display:grid}.stage-toolbar,.stage-footer{background:#fff;justify-content:space-between;align-items:center;padding:17px 24px;display:flex}.stage-toolbar{border-bottom:1px solid #dfe7ea}.stage-toolbar div{flex-direction:column;gap:2px;display:flex}.stage-toolbar span,.stage-footer span{color:#70828a;font-size:12px}.canvas-wrap{place-items:center;padding:28px;display:grid}.a5-canvas{aspect-ratio:148/210;background:#f9f5eb;width:min(55%,470px);position:relative;overflow:hidden;box-shadow:0 14px 38px #1b36442e}.photo-frame{color:#6c7e86;text-align:center;cursor:pointer;background:linear-gradient(145deg,#d8e1e4,#b9c7cd);border:5px solid;place-content:center;gap:7px;display:grid;position:absolute}.photo-frame:hover{filter:brightness(.96)}.photo-frame.has-image{display:block}.photo-frame img{object-fit:cover;pointer-events:none;width:100%;height:100%;display:block}.photo-frame span{opacity:.45;font-size:28px;font-weight:800}.photo-frame small{font-weight:700}.stage-footer{border-top:1px solid #dfe7ea}.stage-footer button{color:#fff;background:#178d8b;border:0;border-radius:9px;padding:12px 18px;font-weight:800}.stage-footer button:disabled{cursor:not-allowed;opacity:.45}@media (width<=900px){.app-shell{padding:0}.topbar{border-radius:0;margin:0}.workspace{border-radius:0;grid-template-columns:1fr}.controls{border-right:0}.stage-area{min-height:700px}.a5-canvas{width:min(75%,430px)}}@media (width<=520px){.topbar{padding:14px 16px}.topbar h1{font-size:19px}.panel{padding:18px 16px}.layout-grid{grid-template-columns:repeat(4,minmax(58px,1fr))}.stage-toolbar,.stage-footer{padding:14px 16px}.canvas-wrap{padding:20px 12px}.a5-canvas{width:88%}.upload-zone{grid-template-columns:auto 1fr}.upload-zone button{grid-column:1/-1}}