.upload-page{align-items:center;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);display:flex;flex-direction:column;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;min-height:100vh;padding:1.5rem 2rem 3rem;width:100%}.upload-container{align-items:flex-start;display:flex;gap:2.5rem;margin-top:1.5rem;max-width:1200px;width:100%}.photobooth-container{aspect-ratio:588/735;background:linear-gradient(135deg,#e0f7fa,#b2ebf2);border:8px solid #2a4a53;border-radius:20px;box-shadow:0 15px 35px #0000001a,0 5px 15px #00000012,inset 0 0 0 1px #ffffff80;flex-shrink:0;max-width:588px;overflow:hidden;position:relative;transition:transform .3s ease;width:60vmin}.photobooth-container:hover{box-shadow:0 20px 40px #00000026,0 8px 20px #0000001a,inset 0 0 0 1px #ffffff80;transform:translateY(-5px)}canvas{display:block}.frame-overlay,canvas{border-radius:12px;height:100%;width:100%}.frame-overlay{left:0;pointer-events:none;position:absolute;top:0;z-index:3}.crop-control-panel{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:3px solid #2a4a53;border-radius:24px;box-shadow:0 10px 30px #2a4a5326,0 4px 10px #2a4a5314;display:flex;flex:1 1;flex-direction:column;gap:2rem;min-width:320px;overflow:hidden;padding:2rem;position:relative}.crop-control-panel:before{animation:gradientShift 3s ease infinite;background:linear-gradient(90deg,#ff6b6b,#4ecdc4 25%,#45b7d1 50%,#96c93d 75%,#ff6b6b);background-size:200% 100%;content:"";height:6px;left:0;position:absolute;right:0;top:0;z-index:1}@keyframes gradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.crop-control-panel h2{color:#2a4a53;font-family:Castoro,serif;font-size:2rem;margin:0;padding-bottom:.5rem;position:relative;text-align:center;z-index:2}.crop-control-panel h2:after{background:linear-gradient(90deg,#0000,#4ecdc4,#0000);border-radius:2px;bottom:0;content:"";height:4px;left:25%;position:absolute;width:50%}.vertical-slider{-webkit-appearance:slider-vertical;appearance:slider-vertical;background:linear-gradient(180deg,#ff6b6b 0,#ffd166 25%,#06d6a0 50%,#118ab2 75%,#073b4c);border:4px solid #fff;border-radius:50px;box-shadow:inset 0 0 10px #0003,0 8px 20px #00000026;cursor:pointer;height:350px;margin:1.5rem 0;opacity:.9;outline:none;position:relative;transition:all .3s ease;width:100px}.vertical-slider:hover{box-shadow:inset 0 0 15px #00000040,0 10px 25px #0003;opacity:1;transform:scale(1.02)}.vertical-slider:disabled{background:linear-gradient(180deg,#ccc 0,#999);cursor:not-allowed;opacity:.4}.vertical-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:linear-gradient(135deg,#667eea,#764ba2);border:5px solid #fff;border-radius:50%;box-shadow:0 0 0 3px #2a4a53,0 6px 15px #0006;cursor:pointer;height:40px;position:relative;-webkit-transition:all .2s ease;transition:all .2s ease;width:40px}.vertical-slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 4px #2a4a53,0 8px 20px #00000080;transform:scale(1.1)}.vertical-slider::-webkit-slider-thumb:active{transform:scale(.95)}.vertical-slider::-moz-range-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border:5px solid #fff;border-radius:50%;box-shadow:0 0 0 3px #2a4a53,0 6px 15px #0006;cursor:pointer;height:40px;-moz-transition:all .2s ease;transition:all .2s ease;width:40px}.vertical-slider-container{gap:1rem;position:relative}.slider-labels,.vertical-slider-container{align-items:center;display:flex;flex-direction:column}.slider-labels{gap:.5rem;margin-top:1rem}.slider-label{background:#fffc;border:2px solid #e0e0e0;border-radius:12px;box-shadow:0 2px 5px #0000000d;color:#666;font-size:.9rem;font-weight:600;min-width:80px;padding:.3rem .8rem;text-align:center}.position-indicator{background:linear-gradient(135deg,#4ecdc4,#44a08d);border:3px solid #fff;border-radius:20px;box-shadow:0 5px 15px #4ecdc44d;color:#fff;font-size:1.1rem;font-weight:600;margin-top:1rem;min-width:140px;padding:.8rem 1.5rem;text-align:center}.control-btn{align-items:center;border:none;border-radius:16px;cursor:pointer;display:flex;font-family:Castoro,serif;font-size:1.2rem;font-weight:600;gap:.8rem;justify-content:center;overflow:hidden;padding:1.2rem 2rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%;z-index:1}.control-btn:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .7s ease;width:100%;z-index:-1}.control-btn:hover:before{left:100%}.confirm-btn{background:linear-gradient(135deg,#56ab2f,#a8e063);border:3px solid #3d8b1f;box-shadow:0 6px 20px #56ab2f4d,inset 0 1px 0 #ffffff4d;color:#fff}.confirm-btn:hover:not(:disabled){box-shadow:0 10px 25px #56ab2f66,inset 0 1px 0 #ffffff4d;transform:translateY(-4px)}.confirm-btn:active:not(:disabled){box-shadow:0 3px 10px #56ab2f4d,inset 0 1px 0 #ffffff4d;transform:translateY(-1px)}.confirm-btn:disabled{box-shadow:none;cursor:not-allowed;opacity:.5;transform:none}.upload-controls{flex-wrap:wrap;gap:1.5rem;margin-top:2.5rem;max-width:800px;width:100%}.upload-controls,.upload-controls button{align-items:center;display:flex;justify-content:center}.upload-controls button{border:none;border-radius:16px;cursor:pointer;font-family:Castoro,serif;font-size:1.1rem;font-weight:600;gap:.8rem;min-width:200px;overflow:hidden;padding:1rem 2.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.upload-controls button:after{background:#ffffff80;border-radius:100%;content:"";height:5px;left:50%;opacity:0;position:absolute;top:50%;transform:scale(1) translate(-50%);transform-origin:50% 50%;width:5px}.upload-controls button:focus:not(:active):after{animation:ripple 1s ease-out}@keyframes ripple{0%{opacity:.5;transform:scale(0)}20%{opacity:.3;transform:scale(25)}to{opacity:0;transform:scale(40)}}.upload-controls button:first-child{background:linear-gradient(135deg,#667eea,#764ba2);border:3px solid #4a5fc1;box-shadow:0 6px 20px #667eea4d,inset 0 1px 0 #ffffff4d;color:#fff}.upload-controls button:first-child:hover:not(:disabled){box-shadow:0 10px 25px #667eea66,inset 0 1px 0 #ffffff4d;transform:translateY(-4px)}.upload-controls button:first-child:disabled{background:linear-gradient(135deg,#ccc,#999);border-color:#bbb;box-shadow:none;color:#666;cursor:not-allowed;transform:none}.upload-controls button:nth-child(2){background:linear-gradient(135deg,#ff6b6b,#ee5a52);border:3px solid #d64541;box-shadow:0 6px 20px #ff6b6b4d,inset 0 1px 0 #ffffff4d;color:#fff}.upload-controls button:nth-child(3){background:linear-gradient(135deg,#4ecdc4,#44a08d);border:3px solid #379e94;box-shadow:0 6px 20px #4ecdc44d,inset 0 1px 0 #ffffff4d;color:#fff}.upload-controls button:nth-child(2):hover,.upload-controls button:nth-child(3):hover{box-shadow:0 10px 25px #0003,inset 0 1px 0 #ffffff4d;transform:translateY(-4px)}.upload-controls button:nth-child(2):active,.upload-controls button:nth-child(3):active{transform:translateY(-1px)}.status-indicator{background:#ffffffe6;border:2px solid #e0e0e0;border-radius:16px;display:flex;gap:1.5rem;margin-top:1rem;padding:1rem}.status-item{align-items:center;display:flex;flex-direction:column;gap:.5rem}.status-dot{border:3px solid #ddd;border-radius:50%;height:20px;width:20px}.status-dot.active{background:#56ab2f;border-color:#3d8b1f;box-shadow:0 0 10px #56ab2f80}.status-dot.completed{background:#4ecdc4;border-color:#379e94}.status-dot.pending{background:#ffd166;border-color:#ffb142}.status-label{color:#666;font-size:.9rem;font-weight:500}@media (max-width:1024px){.upload-container{align-items:center;flex-direction:column;gap:2rem}.crop-control-panel,.photobooth-container{max-width:500px;width:80vw}}@media (max-width:768px){.upload-page{padding:1rem}.crop-control-panel h2{font-size:1.7rem}.vertical-slider{height:280px;width:80px}.upload-controls{flex-direction:column}.upload-controls button{max-width:300px;width:100%}}@media (max-width:480px){.crop-control-panel{padding:1.5rem}.crop-control-panel h2{font-size:1.5rem}.vertical-slider{height:250px;width:70px}.control-btn{font-size:1.1rem;padding:1rem 1.5rem}}@keyframes stageChange{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.crop-control-panel{animation:stageChange .5s ease-out}.tooltip{display:inline-block;position:relative}.tooltip .tooltiptext{background-color:#2a4a53;border-radius:8px;bottom:125%;box-shadow:0 4px 15px #0003;color:#fff;font-size:.9rem;left:50%;opacity:0;padding:8px;position:absolute;text-align:center;transform:translateX(-50%);transition:opacity .3s;visibility:hidden;width:200px;z-index:100}.tooltip .tooltiptext:after{border:5px solid #0000;border-top-color:#2a4a53;content:"";left:50%;margin-left:-5px;position:absolute;top:100%}.tooltip:hover .tooltiptext{opacity:1;visibility:visible}.loading-indicator{align-items:center;color:#2a4a53;display:flex;font-weight:500;gap:.5rem;justify-content:center}.loading-dot{animation:loadingDots 1.4s ease-in-out infinite both;background:#4ecdc4;border-radius:50%;height:8px;width:8px}.loading-dot:first-child{animation-delay:-.32s}.loading-dot:nth-child(2){animation-delay:-.16s}@keyframes loadingDots{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}*{box-sizing:border-box;margin:0;padding:0}body{background:#f5f4f0;font-family:sans-serif;overflow-x:hidden}.App,body{min-height:100vh}.App{width:100%}:root{--main-background:#f5f4f0;--dark-green-theme:#2a4a53;--main-text:#555;--white:#fff;--container-width:500px;--container-aspect-ratio:604/574;--fish-rotation:7.52deg;--strip-rotation:16.52deg;--bubble-rotation:-16.52deg}
/*# sourceMappingURL=main.63bad7a6.css.map*/