*{margin:0;padding:0;box-sizing:border-box;}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;min-height:100vh;padding:15px;}.container{max-width:1200px;margin:0 auto;display:flex;gap:30px;flex-wrap:wrap;}.header-container{max-width:1200px;margin:0 auto 20px auto;text-align:center;padding:0 15px;}.main-title{font-size:28px;font-weight:700;margin-bottom:4px;background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.main-description{color:#737373;font-size:14px;max-width:600px;margin:0 auto;}.mode-tabs{max-width:1200px;margin:0 auto 20px auto;display:flex;justify-content:center;gap:4px;background:#efefef;border-radius:10px;padding:4px;width:fit-content;}.mode-tab{background:none;border:none;padding:10px 24px;border-radius:8px;font-size:14px;font-weight:600;color:#8e8e8e;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:8px;}.mode-tab:hover{color:#262626;}.mode-tab.active{background:white;color:#262626;box-shadow:0 1px 4px rgba(0,0,0,.1);}.mode-tab i{font-size:16px;}.controls-panel{flex:0 0 380px;min-width:320px;}.form-section{background:white;border-radius:12px;padding:16px;border:1px solid #dbdbdb;margin-bottom:16px;box-shadow:0 2px 10px rgba(0,0,0,.05);}.section-title{font-size:12px;font-weight:600;color:#8e8e8e;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;gap:6px;}.section-icon{font-size:12px;color:#0095f6;}.form-row{display:flex;gap:8px;margin-bottom:8px;align-items:center;}.form-row:last-child{margin-bottom:0;}.form-group-compact{flex:1;min-width:0;}label{display:block;margin-bottom:4px;font-weight:500;color:#262626;font-size:12px;}.compact-input{width:100%;padding:8px 10px;border:1px solid #dbdbdb;border-radius:6px;font-size:13px;background:white;transition:all .2s ease;}.compact-input:focus{outline:none;border-color:#0095f6;box-shadow:0 0 0 2px rgba(0,149,246,.1);}.upload-zone{border:2px dashed #dbdbdb;border-radius:10px;padding:30px 20px;text-align:center;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;}.upload-zone:hover{border-color:#0095f6;background:rgba(0,149,246,.02);}.upload-zone.drag-over{border-color:#0095f6;background:rgba(0,149,246,.05);transform:scale(1.01);}.upload-zone.has-image{border-style:solid;border-color:#0095f6;padding:12px;}.upload-zone input[type="file"]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;}.upload-content{pointer-events:none;}.upload-icon{font-size:36px;color:#dbdbdb;margin-bottom:8px;display:block;}.upload-text{font-size:14px;font-weight:600;color:#262626;margin-bottom:2px;}.upload-subtext{font-size:12px;color:#8e8e8e;margin-bottom:6px;}.upload-formats{font-size:11px;color:#b0b0b0;background:#f5f5f5;padding:3px 10px;border-radius:12px;}.upload-preview{width:100%;max-height:200px;object-fit:contain;border-radius:6px;}.image-info{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f0f7ff;border-radius:6px;margin-top:8px;font-size:12px;}.image-info #imageName{font-weight:600;color:#262626;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.image-info #imageDimensions{color:#8e8e8e;white-space:nowrap;}.btn-remove{background:none;border:none;color:#ed4956;cursor:pointer;padding:2px 6px;border-radius:4px;font-size:12px;transition:all .2s;}.btn-remove:hover{background:#fce4ec;}.grid-presets{display:flex;gap:8px;margin-bottom:12px;}.grid-preset{flex:1;background:#fafafa;border:2px solid #efefef;border-radius:8px;padding:10px 6px;cursor:pointer;text-align:center;transition:all .2s ease;}.grid-preset:hover{border-color:#dbdbdb;background:#f0f0f0;}.grid-preset.active{border-color:#0095f6;background:rgba(0,149,246,.05);}.grid-preset span{font-size:11px;font-weight:600;color:#262626;margin-top:6px;display:block;}.preset-visual{display:grid;gap:2px;width:48px;height:48px;margin:0 auto;}.preset-visual>div{background:#dbdbdb;border-radius:1px;}.grid-1x3{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;}.grid-2x3{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);}.grid-3x3{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);}.custom-grid{padding-top:8px;border-top:1px solid #efefef;}.form-range{width:100%;margin:8px 0;}.range-labels{display:flex;justify-content:space-between;font-size:11px;color:#8e8e8e;}.range-value{font-weight:600;color:#0095f6;}.aspect-options{display:flex;gap:6px;}.aspect-btn{flex:1;padding:8px;border:1px solid #dbdbdb;border-radius:6px;background:white;font-size:12px;font-weight:600;color:#262626;cursor:pointer;transition:all .2s;}.aspect-btn:hover{border-color:#0095f6;}.aspect-btn.active{background:#0095f6;color:white;border-color:#0095f6;}.action-buttons-container{display:flex;gap:8px;flex-direction:column;}.btn-split{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);color:white;border:none;padding:12px 20px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;transition:all .3s ease;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;}.btn-split:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(220,39,67,.3);}.btn-split:disabled{opacity:.5;cursor:not-allowed;}.btn-download-all{background:#0095f6;color:white;border:none;padding:12px 20px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;transition:all .3s ease;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;}.btn-download-all:hover{background:#0081d6;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,149,246,.3);}.preview-panel{flex:1;min-width:350px;}.empty-preview{background:white;border:2px dashed #efefef;border-radius:12px;padding:60px 30px;text-align:center;color:#b0b0b0;}.empty-preview i{font-size:48px;display:block;margin-bottom:12px;}.empty-preview p{font-size:14px;max-width:300px;margin:0 auto;}.grid-preview-container,.carousel-preview-container{background:white;border-radius:12px;padding:20px;border:1px solid #dbdbdb;box-shadow:0 2px 10px rgba(0,0,0,.05);}.preview-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}.preview-header h3{font-size:16px;font-weight:600;color:#262626;}.preview-badge{background:linear-gradient(45deg,#f09433,#dc2743);color:white;font-size:11px;font-weight:600;padding:3px 10px;border-radius:12px;}.order-info{background:#fff8e1;border-radius:6px;padding:8px 12px;font-size:12px;color:#795548;margin-bottom:12px;display:flex;align-items:center;gap:6px;}.order-info i{color:#ff9800;}.grid-tiles{display:grid;gap:4px;background:#262626;padding:4px;border-radius:8px;}.grid-tile{position:relative;overflow:hidden;cursor:pointer;border-radius:2px;transition:all .2s;}.grid-tile:hover{opacity:.85;}.grid-tile img{width:100%;height:100%;object-fit:cover;display:block;}.tile-number{position:absolute;top:6px;left:6px;width:22px;height:22px;background:rgba(0,0,0,.7);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;}.tile-download{position:absolute;bottom:6px;right:6px;width:28px;height:28px;background:rgba(0,0,0,.7);color:white;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;}.tile-download:hover{background:#0095f6;}.carousel-slides{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;}.carousel-slide-card{flex:1;min-width:0;}.slide-image-wrap{position:relative;overflow:hidden;border-radius:8px;background:#000;}.slide-image-wrap img{width:100%;height:auto;display:block;}.slide-number{position:absolute;top:8px;left:8px;width:24px;height:24px;background:rgba(0,0,0,.7);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}.slide-download{position:absolute;bottom:8px;right:8px;width:30px;height:30px;background:rgba(0,0,0,.7);color:white;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;}.slide-download:hover{background:#0095f6;}@media (max-width:768px){.container{flex-direction:column;gap:20px}.controls-panel{flex:none;min-width:auto}.preview-panel{min-width:auto}.main-title{font-size:24px}.mode-tabs{width:calc(100% - 30px)}.mode-tab{flex:1;justify-content:center;padding:10px 16px}.grid-presets{gap:6px}#uploadSection{max-width:100%;margin-left:auto;margin-right:auto}}.toast{border-radius:8px;}.carousel-slides::-webkit-scrollbar{height:4px;}.carousel-slides::-webkit-scrollbar-track{background:#f1f1f1;border-radius:2px;}.carousel-slides::-webkit-scrollbar-thumb{background:#dbdbdb;border-radius:2px;}