@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;src:url(../media/224e262ef877bfa4-s.753dfc0d.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;src:url(../media/7f11d98043fdedc9-s.317fa95e.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;src:url(../media/e6d00ff86ef9e699-s.51ae28b9.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;src:url(../media/d8cb5ab3660140cd-s.3379eac0.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;src:url(../media/07454f8ad8aaac57-s.p.fc65572f.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito;font-style:normal;font-weight:600;font-display:swap;src:url(../media/224e262ef877bfa4-s.753dfc0d.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Nunito;font-style:normal;font-weight:600;font-display:swap;src:url(../media/7f11d98043fdedc9-s.317fa95e.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Nunito;font-style:normal;font-weight:600;font-display:swap;src:url(../media/e6d00ff86ef9e699-s.51ae28b9.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Nunito;font-style:normal;font-weight:600;font-display:swap;src:url(../media/d8cb5ab3660140cd-s.3379eac0.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Nunito;font-style:normal;font-weight:600;font-display:swap;src:url(../media/07454f8ad8aaac57-s.p.fc65572f.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;src:url(../media/224e262ef877bfa4-s.753dfc0d.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;src:url(../media/7f11d98043fdedc9-s.317fa95e.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;src:url(../media/e6d00ff86ef9e699-s.51ae28b9.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;src:url(../media/d8cb5ab3660140cd-s.3379eac0.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;src:url(../media/07454f8ad8aaac57-s.p.fc65572f.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url(../media/224e262ef877bfa4-s.753dfc0d.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url(../media/7f11d98043fdedc9-s.317fa95e.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url(../media/e6d00ff86ef9e699-s.51ae28b9.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url(../media/d8cb5ab3660140cd-s.3379eac0.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Nunito;font-style:normal;font-weight:800;font-display:swap;src:url(../media/07454f8ad8aaac57-s.p.fc65572f.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito Fallback;src:local(Arial);ascent-override:99.71%;descent-override:34.82%;line-gap-override:0.0%;size-adjust:101.39%}.nunito_412f0661-module__bpY4Ya__className{font-family:Nunito,Nunito Fallback;font-style:normal}.nunito_412f0661-module__bpY4Ya__variable{--font-nunito:"Nunito","Nunito Fallback"}
@font-face{font-family:Fredoka;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(../media/ae54dbf20737d617-s.d6044e96.woff2)format("woff2");unicode-range:U+307-308,U+590-5FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:Fredoka;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(../media/a600dfff52a68f19-s.dca3b3dd.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fredoka;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(../media/1fc3fbc537cada7c-s.p.e3e81c6c.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fredoka Fallback;src:local(Arial);ascent-override:95.64%;descent-override:23.17%;line-gap-override:0.0%;size-adjust:101.84%}.fredoka_3000ba90-module__6o9VGW__className{font-family:Fredoka,Fredoka Fallback;font-style:normal;font-weight:700}.fredoka_3000ba90-module__6o9VGW__variable{--font-fredoka:"Fredoka","Fredoka Fallback"}
:root{--bg-cream:#fdf6e3;--bg-warm:#f5ebd9;--accent-coral:#ff6b6b;--accent-teal:#4ecdc4;--accent-yellow:#ffe66d;--accent-purple:#a06cd5;--accent-blue:#45b7d1;--text-dark:#2d3436;--text-soft:#636e72;--shadow-soft:#2d343614;--shadow-medium:#2d343626;--grid-line:#2d34361a}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-cream);min-height:100vh;color:var(--text-dark);font-family:Nunito,sans-serif;position:relative;overflow-x:hidden}body:before{content:"";background-image:radial-gradient(circle at center,var(--grid-line)1px,transparent 1px);pointer-events:none;z-index:0;background-size:20px 20px;position:fixed;inset:0}body:after{content:"";background:radial-gradient(circle at 30% 30%,var(--accent-coral)8px,transparent 8px),radial-gradient(circle at 50% 50%,var(--accent-teal)8px,transparent 8px),radial-gradient(circle at 70% 40%,var(--accent-yellow)8px,transparent 8px),radial-gradient(circle at 40% 70%,var(--accent-purple)8px,transparent 8px),radial-gradient(circle at 60% 80%,var(--accent-blue)8px,transparent 8px);opacity:.6;pointer-events:none;z-index:0;width:300px;height:300px;animation:8s ease-in-out infinite floatBeads;position:fixed;top:-50px;right:-50px}@keyframes floatBeads{0%,to{transform:translate(0)rotate(0)}50%{transform:translate(-10px,10px)rotate(5deg)}}.page{z-index:1;min-height:100vh;padding:30px 20px;animation:.5s ease-out pageIn;display:block;position:relative}@keyframes pageIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.container{max-width:900px;box-shadow:0 4px 6px var(--shadow-soft),0 20px 50px var(--shadow-medium);border:3px solid var(--bg-warm);background:#fff;border-radius:24px;margin:0 auto;padding:40px;position:relative}.container.template-container{max-width:1400px;padding:30px}.container:before,.container:after{content:"";opacity:.8;border-radius:50%;width:40px;height:40px;position:absolute}.container:before{background:var(--accent-coral);box-shadow:60px 0 0 var(--accent-teal),120px 0 0 var(--accent-yellow);top:-12px;left:-12px}.container:after{background:var(--accent-purple);box-shadow:-60px 0 0 var(--accent-blue),-120px 0 0 var(--accent-coral);bottom:-12px;right:-12px}h1{text-align:center;font-family:var(--font-fredoka),"Fredoka One",cursive;background:linear-gradient(135deg,var(--accent-coral)0%,var(--accent-purple)50%,var(--accent-teal)100%);-webkit-text-fill-color:transparent;letter-spacing:2px;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:2.5rem;position:relative}h1:after{content:"✨";animation:2s ease-in-out infinite sparkle;position:absolute;top:0;right:-30px}@keyframes sparkle{0%,to{transform:scale(1)rotate(0)}50%{transform:scale(1.2)rotate(15deg)}}.subtitle{text-align:center;color:var(--text-soft);margin-bottom:35px;font-size:1rem;font-weight:600}h2,h3{font-family:var(--font-fredoka),"Fredoka One",cursive;color:var(--text-dark);margin-bottom:20px;font-weight:400}h2{text-align:center;font-size:1.8rem}h3{align-items:center;gap:8px;font-size:1.2rem;display:flex}h3:before{content:"";background:var(--accent-coral);border-radius:50%;width:12px;height:12px}.upload-section{margin-bottom:35px}.upload-area{border:3px dashed var(--accent-teal);text-align:center;cursor:pointer;background:linear-gradient(135deg,#4ecdc40d 0%,#ffe66d0d 100%);border-radius:20px;justify-content:center;align-items:center;min-height:220px;padding:30px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative;overflow:hidden}.upload-area:before{content:"";opacity:.5;pointer-events:none;background:radial-gradient(circle,#4ecdc41a 2px,#0000 2px) 0 0/16px 16px;position:absolute;inset:0}.upload-area:hover{border-color:var(--accent-coral);transform:scale(1.02);box-shadow:0 10px 30px #ff6b6b33}.upload-area.dragover{border-color:var(--accent-purple);background:#a06cd51a;transform:scale(1.03)}.upload-area.has-image{background:#fff;border-style:solid;padding:15px}.upload-placeholder{color:var(--accent-teal);z-index:1;position:relative}.upload-icon{margin-bottom:15px;font-size:60px;animation:2s ease-in-out infinite bounce;display:block}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.upload-placeholder p{color:var(--text-soft);font-size:1.1rem;font-weight:700}.preview-image{max-width:100%;max-height:300px;box-shadow:0 8px 25px var(--shadow-medium);border-radius:12px}.params-section{background:var(--bg-warm);border-radius:16px;margin-bottom:35px;padding:25px}.param-group{box-shadow:0 2px 8px var(--shadow-soft);background:#fff;border-radius:12px;margin-bottom:25px;padding:20px;transition:transform .3s}.param-group:hover{transform:translate(5px)}.param-group:last-child{margin-bottom:0}.param-group label{color:var(--text-dark);align-items:center;gap:10px;margin-bottom:15px;font-size:1rem;font-weight:700;display:flex}.param-group label:before{content:"";background:var(--accent-coral);border-radius:50%;width:8px;height:8px}.param-group:nth-child(2) label:before{background:var(--accent-teal)}.param-group:nth-child(3) label:before{background:var(--accent-yellow)}.slider-container{align-items:center;gap:12px;display:flex}.slider-btn{background:var(--accent-coral);color:#fff;cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-size:20px;font-weight:700;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:flex;box-shadow:0 3px 10px #ff6b6b4d}.slider-btn:hover{background:var(--accent-purple);transform:scale(1.15)}.slider-btn:active{transform:scale(.95)}input[type=range]{-webkit-appearance:none;background:linear-gradient(90deg,var(--accent-teal),var(--accent-purple));opacity:.8;border-radius:10px;outline:none;flex:1;height:10px;transition:opacity .3s}input[type=range]:hover{opacity:1}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;width:24px;height:24px;box-shadow:0 2px 10px var(--shadow-medium);border:3px solid var(--accent-coral);background:#fff;border-radius:50%;transition:transform .2s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.value-display{text-align:center;min-width:60px;color:var(--accent-purple);background:#a06cd51a;border-radius:8px;padding:6px 12px;font-size:.95rem;font-weight:800}.param-hint{color:var(--text-soft);border-left:3px solid var(--accent-yellow);margin-top:12px;padding-left:18px;font-size:.85rem}.primary-btn{background:linear-gradient(135deg,var(--accent-coral)0%,var(--accent-purple)100%);color:#fff;cursor:pointer;border:none;border-radius:50px;justify-content:center;align-items:center;gap:10px;width:100%;max-width:320px;margin:25px auto;padding:18px 35px;font-family:Nunito,sans-serif;font-size:1.2rem;font-weight:800;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative;overflow:hidden;box-shadow:0 8px 25px #ff6b6b66}.primary-btn:before{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.primary-btn:hover:not(:disabled):before{left:100%}.primary-btn:hover:not(:disabled){transform:translateY(-4px)scale(1.02);box-shadow:0 15px 40px #ff6b6b80}.primary-btn:active:not(:disabled){transform:translateY(-2px)scale(.98)}.primary-btn:disabled{cursor:not-allowed;box-shadow:none;background:#ccc}.secondary-btn{width:100%;max-width:320px;color:var(--accent-teal);border:3px solid var(--accent-teal);cursor:pointer;background:#fff;border-radius:50px;justify-content:center;align-items:center;gap:10px;margin:20px auto;padding:16px 30px;font-family:Nunito,sans-serif;font-size:1.1rem;font-weight:700;transition:all .3s;display:flex}.secondary-btn:hover{background:var(--accent-teal);color:#fff;transform:translateY(-2px);box-shadow:0 8px 25px #4ecdc466}.comparison-section{grid-template-columns:1fr 1fr;gap:25px;margin-bottom:35px;display:grid}.compare-item{text-align:center}.compare-item h3:before{background:var(--accent-teal)}.compare-item:last-child h3:before{background:var(--accent-purple)}.image-frame{border:3px solid var(--bg-warm);min-height:280px;box-shadow:inset 0 2px 10px var(--shadow-soft),0 4px 15px var(--shadow-soft);background:#fff;border-radius:16px;justify-content:center;align-items:center;padding:15px;display:flex;position:relative}.image-frame:before{content:"";border:2px dashed var(--grid-line);pointer-events:none;border-radius:10px;position:absolute;inset:8px}.image-frame img,.image-frame canvas{border-radius:8px;max-width:100%;max-height:350px}.template-container{grid-template-columns:1fr 320px;align-items:start;gap:22px;max-width:1400px;padding-bottom:100px;display:grid}.template-section{min-width:0}.color-table-section{min-width:0;position:sticky;top:20px}.template-toolbar{background:var(--bg-warm);border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;padding:12px 14px;display:flex}.tool-group{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.tool-btn{border:2px solid var(--accent-teal);color:var(--text-dark);cursor:pointer;background:#fff;border-radius:12px;padding:8px 14px;font-weight:700;transition:all .2s}.tool-btn:hover{background:var(--accent-teal);color:#fff}.tool-btn.active{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff}.tool-btn.tool-muted{border-color:var(--bg-warm);color:var(--text-soft)}.active-color{border:2px solid var(--bg-warm);width:26px;height:26px;box-shadow:0 2px 8px var(--shadow-soft);background:#fff;border-radius:8px;display:inline-block}.active-color-label{color:var(--accent-purple);font-weight:700}.tool-hint{color:var(--text-soft);font-size:.8rem}.template-frame{border:3px solid var(--accent-teal);cursor:grab;height:680px;box-shadow:inset 0 4px 20px var(--shadow-soft);background-color:#fff;background-image:linear-gradient(45deg,#f8f8f8 25%,#0000 25%),linear-gradient(-45deg,#f8f8f8 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f8f8f8 75%),linear-gradient(-45deg,#0000 75%,#f8f8f8 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:20px 20px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;border-radius:16px;position:relative;overflow:hidden}.template-frame:active{cursor:grabbing}#templateCanvas{box-shadow:0 10px 40px var(--shadow-medium);border-radius:4px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#templateOverlay{pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.zoom-hint{text-align:center;color:var(--text-soft);background:var(--bg-warm);border-radius:20px;width:100%;margin-top:12px;padding:8px 15px;font-size:.85rem;display:inline-block}.template-info{background:linear-gradient(135deg,var(--bg-warm)0%,#fff 100%);border-left:4px solid var(--accent-coral);box-shadow:0 2px 10px var(--shadow-soft);border-radius:12px;margin-top:18px;padding:18px;font-size:.95rem}.template-info strong{color:var(--accent-purple)}.color-table-frame{border:3px solid var(--bg-warm);max-height:calc(100vh - 160px);box-shadow:0 4px 20px var(--shadow-soft);background:#fff;border-radius:16px;overflow-y:auto}.color-table-frame::-webkit-scrollbar{width:8px}.color-table-frame::-webkit-scrollbar-track{background:var(--bg-warm);border-radius:4px}.color-table-frame::-webkit-scrollbar-thumb{background:var(--accent-teal);border-radius:4px}#colorTable{border-collapse:collapse;width:100%}#colorTable th,#colorTable td{text-align:center;border-bottom:1px solid var(--bg-warm);padding:12px 10px}#colorTable th{background:linear-gradient(135deg,var(--accent-coral)0%,var(--accent-purple)100%);color:#fff;text-transform:uppercase;letter-spacing:.5px;font-size:.85rem;font-weight:700;position:sticky;top:0}#colorTable tbody tr{transition:background .3s}#colorTable tbody tr:hover{background:#4ecdc41a}#colorTable td:first-child{width:50px}#colorTable td:nth-child(2){color:var(--accent-purple);font-weight:700}#colorTable td:last-child{color:var(--accent-coral);font-weight:700}.color-swatch{border:2px solid var(--bg-warm);width:32px;height:32px;box-shadow:0 2px 8px var(--shadow-soft);border-radius:8px;transition:transform .3s;display:inline-block}#colorTable tbody tr:hover .color-swatch{transform:scale(1.15)}#colorTable tbody tr{cursor:pointer}#colorTable tbody tr.color-active{box-shadow:inset 3px 0 0 var(--accent-purple);background:#a06cd526}#colorTable tbody tr.color-active td:nth-child(2){color:var(--accent-coral)}#colorTable tbody tr.color-active .color-swatch{border-color:var(--accent-purple);transform:scale(1.15)}.bottom-buttons{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:2px solid var(--bg-warm);box-shadow:0 -5px 30px var(--shadow-soft);z-index:100;background:#fffffff2;justify-content:center;gap:20px;padding:20px 30px;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-buttons .primary-btn,.bottom-buttons .secondary-btn{width:auto;min-width:180px;margin:0}.modal{z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#2d3436f2;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.modal.active{justify-content:center;align-items:center;animation:.3s ease-out modalIn;display:flex}.crop-modal-panel{background:#fff;border-radius:20px;flex-direction:column;gap:14px;width:min(92vw,980px);max-height:92vh;padding:18px 20px 16px;display:flex;box-shadow:0 20px 60px #00000059}.crop-modal-header{justify-content:space-between;align-items:center;display:flex}.crop-modal-header h3{margin:0}.crop-close-btn{background:var(--accent-coral);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:22px;transition:transform .2s,background .2s;display:flex}.crop-close-btn:hover{background:var(--accent-purple);transform:rotate(90deg)}.crop-modal-body{background:var(--bg-warm);border-radius:16px;flex:1;padding:8px;overflow:auto}.crop-image-wrapper{max-width:100%;margin:0 auto;display:inline-block;position:relative}#cropImage{max-width:100%;max-height:70vh;box-shadow:0 8px 25px var(--shadow-medium);border-radius:12px;display:block}.crop-box{border:2px solid var(--accent-coral);cursor:move;border-radius:6px;position:absolute;box-shadow:0 0 0 9999px #00000073}.crop-handle{border:2px solid var(--accent-coral);background:#fff;border-radius:50%;width:14px;height:14px;position:absolute}.crop-handle.nw{cursor:nwse-resize;top:-7px;left:-7px}.crop-handle.ne{cursor:nesw-resize;top:-7px;right:-7px}.crop-handle.sw{cursor:nesw-resize;bottom:-7px;left:-7px}.crop-handle.se{cursor:nwse-resize;bottom:-7px;right:-7px}.crop-modal-actions{justify-content:flex-end;gap:12px;display:flex}.crop-modal-actions .primary-btn,.crop-modal-actions .secondary-btn{width:auto;min-width:140px;margin:0;padding:12px 22px;font-size:1rem}.color-picker-panel{background:#fff;border-radius:20px;flex-direction:column;gap:14px;width:min(92vw,980px);max-height:92vh;padding:18px 20px 16px;display:flex;box-shadow:0 20px 60px #00000059}.color-picker-header{justify-content:space-between;align-items:center;display:flex}.color-picker-grid{background:var(--bg-warm);border-radius:14px;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;max-height:70vh;padding:6px;display:grid;overflow:auto}.color-picker-item{cursor:pointer;background:#fff;border:2px solid #0000;border-radius:10px;align-items:center;gap:8px;padding:6px 8px;transition:transform .15s,border-color .15s;display:flex}.color-picker-item:hover{border-color:var(--accent-teal);transform:translateY(-2px)}.color-picker-swatch{border:1px solid var(--bg-warm);border-radius:6px;width:20px;height:20px}.color-picker-code{color:var(--text-dark);font-size:.85rem;font-weight:700}@keyframes modalIn{0%{opacity:0}to{opacity:1}}.modal-content{justify-content:center;align-items:center;width:95%;height:95%;display:flex;position:relative}.close-btn{color:#fff;cursor:pointer;z-index:1001;background:var(--accent-coral);border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:45px;line-height:1;transition:all .3s;display:flex;position:absolute;top:15px;right:25px}.close-btn:hover{background:var(--accent-purple);transform:rotate(90deg)}.modal-canvas-container{justify-content:center;align-items:center;max-width:100%;max-height:100%;padding:20px;display:flex;overflow:auto}#modalCanvas{border-radius:8px;max-width:none;box-shadow:0 20px 60px #00000080}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.loading{animation:1.5s ease-in-out infinite pulse}@media (max-width:1100px){.template-container{grid-template-columns:1fr}.color-table-section{position:static}.color-table-frame{max-height:320px}}@media (max-width:900px){.color-table-frame{max-height:220px}}@media (max-width:768px){.container{border-radius:20px;margin:10px;padding:25px 20px}.container:before,.container:after{display:none}h1{font-size:1.8rem}h1:after{display:none}.comparison-section{grid-template-columns:1fr}.bottom-buttons{flex-direction:column;align-items:center;padding:15px}.bottom-buttons .primary-btn,.bottom-buttons .secondary-btn{width:100%;max-width:280px}.param-group{padding:15px}.slider-container{flex-wrap:wrap}input[type=range]{flex:none;order:3;width:100%;margin-top:10px}}@media print{body:before,body:after,.bottom-buttons{display:none}}.source-tabs{background:var(--bg-warm);border-radius:50px;gap:0;max-width:320px;margin-bottom:25px;margin-left:auto;margin-right:auto;padding:5px;display:flex}.source-tab{color:var(--text-soft);cursor:pointer;background:0 0;border:none;border-radius:50px;flex:1;padding:12px 20px;font-family:Nunito,sans-serif;font-size:1rem;font-weight:700;transition:all .3s}.source-tab:hover{color:var(--text-dark)}.source-tab.active{background:linear-gradient(135deg,var(--accent-coral)0%,var(--accent-purple)100%);color:#fff;box-shadow:0 4px 15px #ff6b6b66}.ai-section{margin-bottom:35px}.ai-prompt-container{border:2px solid var(--bg-warm);background:linear-gradient(135deg,#a06cd50d 0%,#4ecdc40d 100%);border-radius:20px;padding:25px}.ai-prompt-container label{color:var(--text-dark);margin-bottom:12px;font-size:1.1rem;font-weight:700;display:block}.ai-prompt-input{border:2px solid var(--bg-warm);width:100%;min-height:120px;color:var(--text-dark);resize:vertical;background:#fff;border-radius:16px;padding:18px;font-family:Nunito,sans-serif;font-size:1rem;line-height:1.6;transition:all .3s}.ai-prompt-input:focus{border-color:var(--accent-purple);outline:none;box-shadow:0 0 0 4px #a06cd526}.ai-prompt-input::placeholder{color:var(--text-soft);opacity:.7}.ai-prompt-tips{color:var(--text-soft);background:#ffe66d4d;border-radius:10px;margin-top:12px;padding:10px 15px;font-size:.85rem}.ai-prompt-tips span:before{content:"💡";margin-right:6px}.ai-generate-btn{background:linear-gradient(135deg,var(--accent-purple)0%,var(--accent-blue)100%);color:#fff;cursor:pointer;border:none;border-radius:50px;justify-content:center;align-items:center;gap:10px;width:100%;margin-top:20px;padding:18px 35px;font-family:Nunito,sans-serif;font-size:1.2rem;font-weight:800;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative;overflow:hidden;box-shadow:0 8px 25px #a06cd566}.ai-generate-btn:before{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.ai-generate-btn:hover:before{left:100%}.ai-generate-btn:hover{transform:translateY(-4px)scale(1.02);box-shadow:0 15px 40px #a06cd580}.ai-generate-btn:disabled{cursor:not-allowed;box-shadow:none;background:#ccc;transform:none}.ai-generate-btn .btn-icon{font-size:1.4rem}.ai-preview{border:2px solid var(--accent-teal);box-shadow:0 8px 30px var(--shadow-soft);background:#fff;border-radius:20px;margin-top:25px;padding:20px}.ai-preview-header{justify-content:space-between;align-items:center;margin-bottom:15px;display:flex}.ai-preview-header span{color:var(--text-dark);font-size:1rem;font-weight:700}.ai-regenerate-btn{color:var(--accent-purple);border:2px solid var(--accent-purple);cursor:pointer;background:0 0;border-radius:20px;padding:8px 18px;font-family:Nunito,sans-serif;font-size:.9rem;font-weight:700;transition:all .3s}.ai-regenerate-btn:hover{background:var(--accent-purple);color:#fff}.ai-preview .preview-image{object-fit:contain;border-radius:12px;width:100%;max-height:400px}.ai-loading{background:linear-gradient(135deg,#a06cd50d 0%,#4ecdc40d 100%);border-radius:20px;flex-direction:column;justify-content:center;align-items:center;margin-top:20px;padding:60px 20px;display:flex}.loading-spinner{background:conic-gradient(var(--accent-coral),var(--accent-purple),var(--accent-teal),var(--accent-yellow),var(--accent-coral));border-radius:50%;width:60px;height:60px;animation:1.5s linear infinite spin;position:relative}.loading-spinner:before{content:"";background:#fff;border-radius:50%;position:absolute;inset:6px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ai-loading p{color:var(--text-soft);margin-top:20px;font-size:1rem;font-weight:700;animation:1.5s ease-in-out infinite pulse}