.loader-overlay{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;background:rgb(0 0 0 / .85)!important;display:none!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;z-index:999999!important;margin:0!important;padding:0!important;border:none!important}.loader{width:60px!important;height:60px!important;border:5px solid rgb(255 255 255 / .3)!important;border-top:5px solid #3498db!important;border-radius:50%!important;animation:spin 1s linear infinite!important;margin-bottom:20px!important}.loader-text{color:white!important;font-size:20px!important;font-weight:bold!important;text-shadow:0 2px 5px rgb(0 0 0 / .5)!important;background:rgb(0 0 0 / .7)!important;padding:10px 20px!important;border-radius:10px!important;text-align:center!important}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#photo-frame-app{font-family:'Arial',sans-serif;max-width:1200px;margin:0 auto;padding:20px}.birthday-header,.photo-upload-section{text-align:center;margin-bottom:30px}.birthday-header h1{color:#2c3e50;font-size:28px;margin-bottom:10px}.subtitle{color:#7f8c8d;font-size:16px;margin-bottom:20px}.total-designs-info{background:rgb(52 152 219 / .1);border-radius:20px;padding:8px 16px;display:inline-block;margin-top:10px}.total-count{font-weight:700;color:#3498db}.photo-upload-section{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);border-radius:15px;padding:30px 20px;margin-bottom:30px;box-shadow:0 5px 15px rgb(0 0 0 / .1)}.upload-container{background:#fff;border-radius:15px;padding:20px;box-shadow:0 3px 10px rgb(0 0 0 / .1);margin:20px auto;max-width:800px}.upload-area{border:3px dashed #3498db;border-radius:15px;padding:40px 20px;background:#fff;cursor:pointer;transition:all 0.3s ease}.upload-area:hover{border-color:#2980b9;background:#f8f9fa}.upload-icon{font-size:60px;margin-bottom:15px;color:#3498db}.upload-area h3{color:#2c3e50;margin-bottom:10px;font-size:22px}.upload-area p{color:#7f8c8d;margin-bottom:20px;font-size:16px}.file-types{font-size:14px;color:#95a5a6;margin-top:10px}.upload-btn,.crop-btn,.download-btn,.change-btn{background:linear-gradient(135deg,#3498db 0%,#2980b9 100%);color:#fff;border:none;padding:12px 30px;border-radius:25px;font-size:16px;font-weight:700;cursor:pointer;transition:all 0.3s ease;display:inline-block;margin:5px}.upload-btn:hover,.crop-btn:hover,.download-btn:hover,.change-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgb(52 152 219 / .4)}.cancel-btn{background:#e74c3c;color:#fff;border:none;padding:12px 30px;border-radius:25px;font-size:16px;cursor:pointer;transition:all 0.3s ease;margin:5px}.cancel-btn:hover{background:#c0392b;transform:translateY(-2px)}.cropper-section,.cropped-preview{background:#fff;border-radius:15px;padding:20px;margin-top:20px;box-shadow:0 5px 15px rgb(0 0 0 / .1)}.cropper-header,.preview-header{text-align:center;margin-bottom:20px}.cropper-header h3,.preview-header h3{color:#2c3e50;margin-bottom:5px;font-size:22px}.cropper-container{max-width:500px;margin:20px auto;border-radius:10px;overflow:hidden}.cropper-controls,.preview-actions{text-align:center;margin-top:20px}.preview-container{width:640px;max-width:90%;height:640px;max-height:90vw;margin:20px auto;border-radius:50%;overflow:hidden;border:5px solid #3498db;box-shadow:0 5px 15px rgb(52 152 219 / .3)}.preview-container img{width:100%;height:100%;object-fit:cover}.main-canvas-section{background:#fff;border-radius:15px;padding:30px;margin:30px 0;box-shadow:0 5px 20px rgb(0 0 0 / .1)}#selected-frame-title{text-align:center;color:#2c3e50;margin-bottom:20px;font-size:24px}.main-canvas-container{display:flex;justify-content:center;margin:20px 0}#main-canvas{max-width:100%;border-radius:10px;box-shadow:0 5px 20px rgb(0 0 0 / .1)}.main-canvas-actions{text-align:center;margin-top:20px}.download-btn{padding:15px 40px;font-size:18px}.download-icon{margin-right:10px}.frames-section{margin-top:40px}.section-header{text-align:center;margin-bottom:30px}.section-header h2{color:#2c3e50;margin-bottom:10px;font-size:26px}.loaded-info{color:#7f8c8d;font-size:16px}.loaded-info span{font-weight:700;color:#3498db}.frames-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:25px;margin:30px 0}.frame-card{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 5px 15px rgb(0 0 0 / .1);transition:all 0.3s ease;cursor:pointer;border:3px solid #fff0}.frame-card:hover{transform:translateY(-10px);box-shadow:0 15px 35px rgb(0 0 0 / .15);border-color:#3498db}.frame-card.active{border-color:#3498db;box-shadow:0 0 0 3px rgb(52 152 219 / .3)}.frame-card-inner{display:flex;flex-direction:column;height:100%}.canvas-wrapper{position:relative;padding-top:100%;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%)}.frame-canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important;border-radius:10px 10px 0 0}.canvas-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgb(52 152 219 / .9);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:700;opacity:0;transition:opacity 0.3s ease;border-radius:10px 10px 0 0}.frame-card:hover .canvas-overlay{opacity:1}.frame-info{padding:20px;background:#fff;flex-grow:1;display:flex;flex-direction:column;justify-content:space-between}.frame-title{color:#2c3e50;margin-bottom:10px;text-align:center;font-size:18px;min-height:50px}.frame-actions{text-align:center}.download-card-btn{background:#2ecc71;color:#fff;border:none;padding:10px 25px;border-radius:20px;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.3s ease;display:inline-flex;align-items:center;gap:8px}.download-card-btn:hover{background:#27ae60;transform:translateY(-2px);box-shadow:0 5px 15px rgb(46 204 113 / .3)}.load-more-container{text-align:center;padding:40px 0 20px;margin-top:20px}.load-more-btn{background:linear-gradient(135deg,#2ecc71 0%,#27ae60 100%);color:#fff;border:none;padding:15px 40px;border-radius:25px;font-size:18px;font-weight:700;cursor:pointer;transition:all 0.3s ease;display:inline-block;margin:10px auto;min-width:250px}.load-more-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgb(46 204 113 / .4)}.load-more-btn:disabled{background:#95a5a6;cursor:not-allowed;transform:none;box-shadow:none}.load-more-btn:disabled:hover{transform:none}.infinity-loader{text-align:center;padding:40px 20px;margin:30px 0;display:none}.infinity-loader .spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 15px}.infinity-loader .loading-text{color:#7f8c8d;font-size:16px}.end-of-frames{text-align:center;padding:50px 30px;margin:40px 0;background:linear-gradient(135deg,#a8edea 0%,#fed6e3 100%);border-radius:20px;color:#2c3e50;display:none}.end-of-frames h3{font-size:26px;margin-bottom:15px;color:#2c3e50}.error-message{background:#ffeaea;border:2px solid #ff6b6b;border-radius:10px;padding:30px;text-align:center;margin:30px auto;max-width:500px}.error-container h3{color:#e74c3c;margin-bottom:15px}.retry-btn{background:#e74c3c;color:#fff;border:none;padding:12px 30px;border-radius:20px;font-size:16px;cursor:pointer;margin-top:20px;transition:all 0.3s ease}.retry-btn:hover{background:#c0392b;transform:translateY(-2px)}.canvas-loading::after{content:"جاري التحميل...";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgb(0 0 0 / .7);color:#fff;padding:10px 20px;border-radius:20px;font-size:14px;z-index:10}@media (max-width:768px){#photo-frame-app{padding:10px}.birthday-header h1{font-size:22px}.photo-upload-section{padding:20px 15px;margin:10px 0}.upload-container{padding:15px;margin:10px 0}.upload-area{padding:30px 15px}.upload-icon{font-size:40px}.upload-area h3{font-size:18px}.upload-area p{font-size:14px}.preview-container{width:280px;height:280px}.frames-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px}.cropper-container{max-width:100%}.cropper-controls button,.preview-actions button{display:block;width:100%;margin:10px 0}.main-canvas-section{padding:20px}#selected-frame-title{font-size:20px}.load-more-btn{padding:12px 30px;font-size:16px;min-width:200px}}@media (max-width:480px){.frames-grid{grid-template-columns:1fr;gap:15px}.upload-area{padding:25px 10px}.upload-icon{font-size:35px}.upload-btn,.crop-btn,.download-btn,.change-btn{padding:10px 20px;font-size:14px}.preview-container{width:250px;height:250px}.frame-title{font-size:16px;min-height:40px}.download-card-btn{padding:8px 20px;font-size:13px}.load-more-btn{padding:12px 25px;font-size:15px;min-width:180px;width:90%}}.placeholder-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:700;font-size:14px;text-align:center;z-index:2}.name-input-section{background:#fff;padding:25px;border-radius:15px;margin:20px 0;box-shadow:0 3px 15px rgb(0 0 0 / .1);text-align:center}.input-container{display:flex;gap:10px;max-width:500px;margin:0 auto 15px}.name-input{flex-grow:1;padding:12px 20px;border:2px solid #ddd;border-radius:25px;font-size:16px;transition:all 0.3s ease}.name-input:focus{border-color:#3498db;outline:none;box-shadow:0 0 0 3px rgb(52 152 219 / .2)}.hint{color:#7f8c8d;font-size:14px;margin-top:10px}