*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#1a1a2e;background:#f0f2f5;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.app{flex-direction:column;min-height:100vh;display:flex}.app-header{color:#fff;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);align-items:baseline;gap:1.2rem;padding:1.2rem 2rem;display:flex}.app-header h1{letter-spacing:.03em;font-size:1.6rem;font-weight:700}.app-header p{opacity:.65;font-size:.85rem}.app-body{flex:1;gap:0;display:flex;overflow:hidden}.sidebar{background:#fff;border-right:1px solid #e0e0e0;flex-direction:column;width:320px;min-width:280px;padding-bottom:1rem;display:flex;overflow-y:auto}.preview-area{background:#e8eaed;flex-direction:column;flex:1;padding:1.5rem;display:flex;overflow:auto}.uploader-section{padding:1rem}.sidebar-accordion{border-bottom:1px solid #e7e9ee}.sidebar-accordion-header{color:#262b36;text-align:left;cursor:pointer;background:#fff;border:0;grid-template-columns:1fr auto auto;align-items:center;gap:.55rem;width:100%;min-height:48px;padding:.75rem 1rem;font-size:.82rem;font-weight:700;display:grid}.sidebar-accordion-header:hover{background:#f7f9fc}.sidebar-accordion.expanded .sidebar-accordion-header{color:#246dcc;background:#f4f8ff}.sidebar-accordion-summary{color:#8a909c;text-overflow:ellipsis;white-space:nowrap;max-width:115px;font-size:.7rem;font-weight:500;overflow:hidden}.sidebar-accordion-chevron{color:#8a909c;font-size:1.15rem;line-height:1;transition:transform .15s}.sidebar-accordion.expanded .sidebar-accordion-chevron{transform:rotate(90deg)}.sidebar-accordion-content{background:#fff}.drop-zone{text-align:center;cursor:pointer;background:#f8f9fb;border:2px dashed #b0b8c9;border-radius:10px;padding:1.4rem 1rem;transition:all .2s}.drop-zone:hover,.drop-zone.dragging{background:#eef3ff;border-color:#4f8ef7}.drop-icon{margin-bottom:.4rem;font-size:2rem;display:block}.drop-zone p{color:#555;font-size:.85rem;line-height:1.5}.drop-zone strong{color:#4f8ef7}.drop-hint{margin-top:.2rem;color:#999!important;font-size:.75rem!important}.image-strip-header{color:#666;justify-content:space-between;align-items:center;margin-top:.75rem;font-size:.8rem;display:flex}.image-strip{flex-wrap:wrap;gap:5px;max-height:150px;margin-top:.5rem;display:flex;overflow-y:auto}.thumb-wrap{border:1px solid #ddd;border-radius:5px;width:50px;height:50px;position:relative;overflow:hidden}.thumb{object-fit:cover;width:100%;height:100%;display:block}.thumb-remove{color:#fff;cursor:pointer;opacity:0;background:#000000a6;border:none;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:11px;line-height:1;transition:opacity .15s;display:flex;position:absolute;top:1px;right:1px}.thumb-wrap:hover .thumb-remove{opacity:1}.controls{padding:0}.controls-section{padding:.9rem 1rem 1rem}.controls label{color:#444;flex-direction:column;gap:.3rem;margin-bottom:.6rem;font-size:.8rem;display:flex}.controls label:last-child{margin-bottom:0}.controls input[type=text],.controls textarea,.controls select{color:#1a1a2e;background:#fff;border:1px solid #d0d5dd;border-radius:6px;width:100%;padding:.4rem .6rem;font-size:.85rem}.controls input[type=text]:focus,.controls textarea:focus,.controls select:focus{border-color:#4f8ef7;outline:none;box-shadow:0 0 0 2px #4f8ef726}.collage-word-input{letter-spacing:.05em;text-transform:uppercase;resize:vertical;font-size:1rem!important;font-weight:700!important}.slider-row{align-items:center;gap:.5rem;display:flex}.slider-row input[type=range]{flex:1}.slider-row span{color:#666;text-align:right;min-width:2.5rem;font-size:.78rem}.checkbox-label{cursor:pointer;align-items:center;flex-direction:row!important;gap:.5rem!important}.checkbox-label input{cursor:pointer;width:auto}.controls input[type=color]{cursor:pointer;border:1px solid #d0d5dd;border-radius:5px;width:2.5rem;height:2rem;padding:2px}.row-controls{align-items:center;gap:.5rem;display:flex}.row-controls select{flex:1}.hint{color:#999;margin-top:.3rem;font-size:.72rem}.btn-download{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4f8ef7,#2d6fdb);border:none;border-radius:8px;margin:1rem;padding:.8rem 1rem;font-size:.85rem;font-weight:600;transition:opacity .2s}.btn-download:hover:not(:disabled){opacity:.88}.btn-download:disabled{opacity:.5;cursor:not-allowed}.btn-small{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:4px;padding:.2rem .5rem;font-size:.75rem}.btn-small.danger{color:#c00;border-color:#ffb3b3}.btn-small.danger:hover{background:#fff0f0}.preview-section{flex-direction:column;flex:1;display:flex}.preview-header{color:#555;align-items:center;gap:.75rem;margin-bottom:.75rem;font-size:.85rem;font-weight:600;display:flex}.preview-help{color:#888;font-size:.75rem;font-weight:400}.rendering-badge{color:#856404;background:#fff3cd;border-radius:999px;padding:.15rem .55rem;font-size:.75rem;font-weight:500}.error-msg{color:#c00;margin-bottom:.5rem;font-size:.8rem}.preview-canvas-wrap{background:#fff;border-radius:10px;align-self:flex-start;width:fit-content;max-width:100%;display:inline-block;position:relative;overflow:hidden;box-shadow:0 4px 20px #0000001f}.preview-canvas{max-width:100%;height:auto;display:block}.preview-canvas.editable{cursor:grab;touch-action:none}.preview-canvas.editable:active{cursor:grabbing}.preview-canvas.editable.crop-mode{cursor:crosshair}.preview-overlay{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.tile-cycle-button{z-index:2;color:#fff;cursor:pointer;background:#1677ff;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;padding:0;font-size:22px;line-height:1;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 8px #00000047}.tile-cycle-button.previous{transform:translate(-115%,-50%)}.tile-cycle-button.next{transform:translate(15%,-50%)}.tile-cycle-button:hover{background:#095dcc}.tile-cycle-button:focus-visible{outline-offset:2px;outline:3px solid #1677ff59}.tile-inline-toolbar{z-index:3;background:#141c2aeb;border:1px solid #fffc;border-radius:7px;gap:2px;padding:3px;display:flex;position:absolute;transform:translate(-50%,calc(-100% - 7px));box-shadow:0 2px 9px #00000047}.tile-inline-toolbar button{color:#fff;cursor:pointer;background:0 0;border:0;border-radius:4px;padding:.28rem .48rem;font-size:.7rem;font-weight:600}.tile-inline-toolbar button:hover{background:#ffffff29}.tile-inline-toolbar button.active{background:#1677ff}.tile-inline-toolbar button.danger{color:#ffb7b7}.tile-inline-toolbar button.danger:hover{color:#fff;background:#c93434}.tile-editor{background:#fff;border:1px solid #d8dee8;border-radius:10px;gap:.8rem;margin-top:.9rem;padding:.9rem;font-size:.78rem;display:grid;box-shadow:0 2px 8px #0000000d}.tile-editor-heading,.tile-photo-row{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.tile-editor-heading>div{flex-direction:column;gap:.15rem;display:flex}.tile-editor-heading strong{color:#222;font-size:.9rem}.tile-editor-heading span{color:#777}.tile-photo-row label{flex:1;align-items:center;gap:.5rem;display:flex}.tile-editor select{border:1px solid #d0d5dd;border-radius:6px;width:100%;min-width:0;max-width:320px;padding:.4rem .5rem}.tile-button-pair{grid-template-columns:1fr 1fr;gap:.45rem;display:grid}.tile-sliders{background:#f7f8fa;border-radius:8px;gap:.55rem;padding:.7rem;display:grid}.tile-sliders label{grid-template-columns:72px minmax(120px,1fr) 48px;align-items:center;gap:.65rem;display:grid}.tile-sliders input{width:100%}.tile-sliders output{color:#666;text-align:right}.tile-reset-all{justify-self:end}.photo-tray{background:#fff;border:1px solid #d8dee8;border-radius:10px;gap:.65rem;margin-top:.9rem;padding:.85rem;display:grid;box-shadow:0 2px 8px #0000000d}.photo-tray-heading{justify-content:space-between;align-items:flex-start;gap:.8rem;display:flex}.photo-tray-heading>div:first-child{flex-direction:column;gap:.15rem;display:flex}.photo-tray strong{font-size:.9rem}.photo-tray span{color:#777;font-size:.75rem}.photo-tray-actions{flex:none;gap:.4rem;display:flex}.photo-tray-list{gap:.5rem;padding-bottom:.2rem;display:flex;overflow-x:auto}.photo-tray-item{flex:none;position:relative}.photo-tray-list img{object-fit:cover;cursor:grab;-webkit-user-select:none;user-select:none;border:2px solid #0000;border-radius:7px;width:72px;height:58px;display:block}.photo-tray-list img:hover{border-color:#1677ff;box-shadow:0 2px 7px #1677ff38}.photo-tray-list img:active{cursor:grabbing}.photo-tray-item span{color:#fff;pointer-events:none;background:#1677ff;border:2px solid #fff;border-radius:999px;justify-content:center;align-items:center;min-width:22px;height:22px;padding:0 5px;font-size:.68rem;font-weight:700;line-height:1;display:flex;position:absolute;bottom:-4px;right:-4px;box-shadow:0 1px 4px #00000038}.preview-placeholder{color:#aaa;text-align:center;background:#f8f9fb;justify-content:center;align-items:center;padding:2rem;font-size:.9rem;display:flex;position:absolute;inset:0}@media (width<=760px){.app-header{flex-direction:column;align-items:flex-start;gap:.3rem;padding:1rem}.app-body{display:block;overflow:visible}.sidebar{border-bottom:1px solid #e0e0e0;border-right:0;width:100%;min-width:0;overflow:visible}.preview-area{padding:1rem;overflow:visible}.preview-header{flex-wrap:wrap;align-items:flex-start}.tile-editor{padding:.75rem}.tile-editor-heading,.tile-photo-row,.tile-photo-row label{flex-direction:column;align-items:stretch}.tile-editor select{max-width:none}.tile-sliders label{grid-template-columns:64px minmax(80px,1fr) 44px}.photo-tray-heading{flex-direction:column;align-items:flex-start}.photo-tray-actions{grid-template-columns:1fr 1fr;width:100%;display:grid}}body{margin:0}