:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.editor-modal-overlay{position:fixed;inset:0;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}.editor-modal-content{background:#fff;border-radius:15px;width:100%;max-width:600px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.modal-header{padding:20px;border-bottom:1px solid #e9ecef;display:flex;justify-content:space-between;align-items:center}.modal-header h3{margin:0;font-size:20px;font-weight:600}.close-btn{background:none;border:none;font-size:32px;cursor:pointer;color:#6c757d;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;line-height:1}.close-btn:hover{color:#333}.upload-zone{padding:60px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}.upload-btn{padding:12px 30px;background-color:#007bff;color:#fff;border-radius:8px;cursor:pointer;font-weight:700;display:inline-block}.upload-btn:hover{background-color:#0056b3}.cropper-area{position:relative;width:100%;height:400px;background:#222}.modal-controls{padding:20px;background:#f8f9fa;display:flex;flex-direction:column;gap:15px}.zoom-control{display:flex;align-items:center;gap:15px}.zoom-control span{font-weight:600;color:#495057;min-width:50px}.zoom-control input{flex:1}.change-image{text-align:center}.change-btn{padding:8px 16px;background-color:#6c757d;color:#fff;border-radius:6px;cursor:pointer;font-size:14px;display:inline-block}.change-btn:hover{background-color:#5a6268}.modal-actions{padding:20px;border-top:1px solid #e9ecef;display:flex;gap:10px}.modal-actions button{flex:1;padding:15px;border:none;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer}.modal-actions .btn-cancel{background:#e9ecef;color:#495057}.modal-actions .btn-save{background:#333;color:#fff}.modal-actions .btn-save:disabled{background:#adb5bd;cursor:not-allowed}.modal-actions .btn-cancel:hover{background:#dee2e6}.modal-actions .btn-save:hover:not(:disabled){background:#000}.slot-item{position:relative;border:2px dashed #dee2e6;border-radius:10px;overflow:hidden;cursor:pointer;transition:all .2s;min-height:150px;background:#fff}.slot-item:hover{border-color:#adb5bd;box-shadow:0 4px 12px #0000001a}.slot-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#6c757d;gap:10px;padding:20px}.plus-icon{font-size:48px;font-weight:200;line-height:1}.slot-placeholder span:last-child{font-size:14px;font-weight:500}.slot-image-container{position:relative;width:100%;height:100%;min-height:150px}.slot-image{width:100%;height:100%;background-repeat:no-repeat;background-position:center}.slot-edit-overlay{position:absolute;inset:0;background:#0000;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s}.slot-item:hover .slot-edit-overlay{background:#00000080;opacity:1}.slot-edit-overlay span{color:#fff;font-weight:600;font-size:18px;padding:10px 20px;background:#fff3;border-radius:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.result-grid{display:grid;gap:8px;width:100%;max-width:800px;margin:0 auto;padding:20px}.result-slot{position:relative;overflow:hidden;border-radius:10px;background:#f8f9fa;min-height:150px;cursor:pointer;transition:transform .2s}.result-slot:hover{transform:scale(1.02)}.result-image{width:100%;height:100%;object-fit:cover;display:block}.result-placeholder{display:flex;align-items:center;justify-content:center;height:100%;min-height:150px;color:#adb5bd;font-size:14px}.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{inset:0;opacity:0;overflow:hidden;position:fixed;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));inset:0;outline:none;overflow:hidden;overscroll-behavior:var(--yarl__controller_overscroll_behavior,contain);position:absolute;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;opacity:var(--yarl__pull_opacity,1);transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%))}.yarl__carousel_with_slides{-moz-column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{align-content:center;align-items:center;display:flex;justify-content:center}.yarl__slide{flex:1;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);position:relative}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.yarl__slide_image_cover{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.yarl__slide_image_loading{opacity:0}@media screen and (min-width:800px){.yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d}}.yarl__slide_placeholder{left:50%;line-height:0;position:absolute;top:50%;transform:translate(-50%) translateY(-50%)}.yarl__slide_loading{animation:yarl__delayed_fadein 1s linear;color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)))}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{color:var(--yarl__slide_icon_error_color,red);height:var(--yarl__slide_icon_error_size,48px);width:var(--yarl__slide_icon_error_size,48px)}@media(prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{display:flex;justify-content:flex-end;inset:0 0 auto auto;padding:var(--yarl__toolbar_padding,8px);position:absolute}[dir=rtl] .yarl__toolbar{inset:0 auto auto 0}.yarl__icon{height:var(--yarl__icon_size,32px);width:var(--yarl__icon_size,32px)}.yarl__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);color:var(--yarl__color_button,hsla(0,0%,100%,.8));cursor:pointer;filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));line-height:0;margin:var(--yarl__button_margin,0);outline:none;padding:var(--yarl__button_padding,8px);-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media(hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{padding:var(--yarl__navigation_button_padding,24px 16px);position:absolute;top:50%;transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}.container{width:100%;min-height:100vh;background-color:#f8f9fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.template-select-section{max-width:1200px;margin:0 auto;padding:40px 20px;text-align:center}.template-select-section h1{font-size:32px;font-weight:700;margin-bottom:10px;color:#212529}.template-select-section>p{font-size:16px;color:#6c757d;margin-bottom:40px}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;max-width:900px;margin:0 auto}.template-card{background:#fff;border-radius:12px;padding:20px;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #0000001a}.template-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #00000026}.template-preview{width:100%;height:150px;margin-bottom:15px}.template-slot{background:#e9ecef;border-radius:6px;min-height:20px}.template-name{font-size:16px;font-weight:600;color:#495057;margin:0}.editor-section{max-width:1000px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column}.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000d}.editor-header h2{font-size:24px;font-weight:700;margin:0 0 5px;color:#212529}.editor-header p{font-size:14px;color:#6c757d;margin:0}.btn-text{background:none;border:none;color:#007bff;font-size:14px;font-weight:600;cursor:pointer;padding:8px 16px;border-radius:6px;transition:all .2s}.btn-text:hover{background:#e7f1ff}.editor-grid{display:grid;gap:15px;flex:1;margin-bottom:20px;background:#fff;padding:20px;border-radius:12px;box-shadow:0 2px 8px #0000000d}.editor-actions{padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000d}.btn-preview{width:100%;padding:16px;background:#333;color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s}.btn-preview:hover:not(:disabled){background:#000}.btn-preview:disabled{background:#adb5bd;cursor:not-allowed}.viewer-section{max-width:1200px;margin:0 auto;padding:40px 20px;min-height:100vh}.viewer-header{text-align:center;margin-bottom:40px}.viewer-header h2{font-size:32px;font-weight:700;margin-bottom:20px;color:#212529}.viewer-actions{display:flex;justify-content:center;gap:10px}.btn-secondary{padding:12px 24px;background:#fff;color:#495057;border:2px solid #dee2e6;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:#f8f9fa;border-color:#adb5bd}.btn-primary{padding:12px 24px;background:#333;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary:hover{background:#000}@media(max-width:768px){.template-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px}.template-select-section h1{font-size:24px}.editor-header{flex-direction:column;align-items:flex-start;gap:15px}.editor-grid{gap:10px}.viewer-actions{flex-direction:column;width:100%;max-width:300px;margin:0 auto}.btn-secondary,.btn-primary{width:100%}}