#birthday-app{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;max-width:1200px;margin:0 auto;padding:20px;background:#fff;border-radius:15px;box-shadow:0 5px 15px rgb(0 0 0 / .05)}.loader-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(255 255 255 / .98);display:none;justify-content:center;align-items:center;z-index:9999;flex-direction:column}.loader{width:70px;height:70px;border:8px solid #f3f3f3;border-top:8px solid #e74c3c;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.loader-text{font-size:18px;color:#333;font-weight:500;text-align:center;max-width:300px;line-height:1.5}.canvas-loading{position:relative;background:#f8f9fa}.canvas-loading::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;z-index:10}.canvas-loading::after{content:'جاري تحميل الصورة...';position:absolute;top:calc(50% + 40px);left:50%;transform:translateX(-50%);color:#666;font-size:14px;font-weight:500;white-space:nowrap;z-index:10}.canvas-wrapper.loading{position:relative}.canvas-wrapper.loading::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;z-index:5}.canvas-wrapper.loading::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgb(255 255 255 / .8);z-index:4;border-radius:8px}.download-btn,.download-card-btn{cursor:pointer;transition:all 0.3s;position:relative}.download-btn:hover,.download-card-btn:hover{cursor:pointer!important}.download-btn:hover .download-icon,.download-card-btn:hover .download-icon{animation:bounce 0.5s ease infinite alternate}@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(-3px)}}.download-btn:hover::after,.download-card-btn:hover::after{content:'⬇️';position:absolute;right:-25px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.7;animation:pulse 1s infinite}@keyframes pulse{0%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.1)}100%{transform:translateY(-50%) scale(1)}}.birthday-header{text-align:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #ffccd5}.birthday-header h1{color:#e74c3c;font-size:2.2rem;margin-bottom:10px;text-shadow:1px 1px 3px rgb(0 0 0 / .1)}.birthday-header .subtitle{color:#666;font-size:1.1rem;font-weight:300}.name-input-section{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:12px;padding:25px;margin-bottom:30px;text-align:center}.input-container{display:flex;gap:15px;justify-content:center;align-items:center;max-width:600px;margin:0 auto 15px;flex-wrap:wrap}.name-input{flex:1;min-width:250px;padding:16px 25px;border:2px solid #ff9a9e;border-radius:50px;font-size:18px;text-align:center;background:#fff;transition:all 0.3s;outline:none}.name-input:focus{border-color:#e74c3c;box-shadow:0 0 0 3px rgb(231 76 60 / .1)}.update-btn{padding:16px 35px;background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);border:none;border-radius:50px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s;white-space:nowrap}.update-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgb(231 76 60 / .3);background:linear-gradient(135deg,#c0392b 0%,#e74c3c 100%)}.name-input-section .hint{color:#666;font-size:14px;margin-top:10px;font-style:italic}.main-canvas-section{background:#fff;border-radius:15px;padding:25px;margin-bottom:40px;border:2px solid #ffccd5;text-align:center}.main-canvas-section h2{color:#2c3e50;font-size:1.8rem;margin-bottom:25px;padding-bottom:15px;border-bottom:1px solid #eee}.main-canvas-container{background:#f8f9fa;border-radius:10px;padding:20px;margin-bottom:25px;display:inline-block;max-width:100%;overflow:hidden;position:relative;min-height:300px}#main-canvas{max-width:100%;height:auto;border-radius:8px;display:block;margin:0 auto;box-shadow:0 5px 15px rgb(0 0 0 / .1);background:#fff}.main-canvas-actions{text-align:center}.download-btn{padding:16px 35px;background:linear-gradient(135deg,#3498db 0%,#2980b9 100%);border:none;border-radius:50px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s;display:inline-flex;align-items:center;gap:10px;margin-bottom:10px}.download-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgb(52 152 219 / .3);background:linear-gradient(135deg,#2980b9 0%,#3498db 100%)}.download-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.download-icon{font-size:18px}.designs-section{margin-top:20px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:15px}.section-header h2{color:#2c3e50;font-size:1.8rem;margin:0}.page-info{background:#f8f9fa;padding:8px 20px;border-radius:50px;font-size:16px;color:#666;font-weight:500}.designs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:25px;margin-bottom:40px}.design-card{background:#fff;border-radius:12px;border:2px solid #e9ecef;transition:all 0.3s;overflow:hidden;cursor:pointer}.design-card:hover{border-color:#ff9a9e;transform:translateY(-5px);box-shadow:0 10px 25px rgb(0 0 0 / .1)}.design-card.active{border-color:#e74c3c;background:#fff9f9;box-shadow:0 0 0 3px rgb(231 76 60 / .1)}.design-card-inner{padding:20px}.canvas-wrapper{position:relative;width:100%;height:400px;margin-bottom:20px;border-radius:8px;overflow:hidden;background:#f8f9fa}.design-canvas{width:100%;height:100%;object-fit:contain}.canvas-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgb(231 76 60 / .9);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;opacity:0;transition:opacity 0.3s;border-radius:8px;z-index:3}.canvas-wrapper:hover .canvas-overlay{opacity:1}.design-info{text-align:center}.design-title{color:#2c3e50;font-size:18px;font-weight:600;margin:0 0 10px 0;line-height:1.4;min-height:50px;display:flex;align-items:center;justify-content:center}.design-number{color:#666;font-size:14px;margin-bottom:15px}.design-actions{display:flex;gap:10px;justify-content:center}.download-card-btn{padding:12px 25px;background:linear-gradient(135deg,#3498db 0%,#2980b9 100%);border:none;border-radius:8px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;gap:8px;width:100%;justify-content:center}.download-card-btn:hover{background:linear-gradient(135deg,#2980b9 0%,#3498db 100%);transform:translateY(-2px);box-shadow:0 5px 15px rgb(52 152 219 / .3)}.download-card-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.pagination{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:30px;flex-wrap:wrap}.pagination-btn{padding:12px 25px;background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;color:#2c3e50;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s}.pagination-btn:hover:not(:disabled){background:#e74c3c;color:#fff;border-color:#e74c3c}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.page-numbers{display:flex;gap:5px;align-items:center}.page-number{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;color:#2c3e50;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s}.page-number:hover{background:#e9ecef;border-color:#bdc3c7}.page-number.active{background:#e74c3c;color:#fff;border-color:#e74c3c}.page-ellipsis{padding:0 10px;color:#666;font-size:16px}.error-message{animation:fadeIn 0.3s ease}.error-container{background:#fee;border:2px solid #c33;padding:30px;margin:20px;border-radius:10px;text-align:center}.error-container h3{color:#c33;margin-bottom:15px}.retry-btn{padding:12px 25px;background:#c33;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;margin-top:15px;transition:all 0.3s}.retry-btn:hover{background:#a00;transform:translateY(-2px)}@media (max-width:768px){#birthday-app{padding:15px}.birthday-header h1{font-size:1.8rem}.input-container{flex-direction:column;width:100%}.name-input{width:100%;min-width:unset}.update-btn{width:100%}.main-canvas-section,.name-input-section{padding:20px 15px}.download-btn{width:100%;padding:16px;justify-content:center}.download-btn:hover::after,.download-card-btn:hover::after{display:none}.section-header{flex-direction:column;text-align:center;gap:10px}.designs-grid{grid-template-columns:1fr;gap:20px}.canvas-wrapper{height:350px}.design-title{font-size:16px;min-height:40px}.pagination{flex-direction:column;gap:15px}.page-numbers{order:1}.pagination-btn{order:2;width:100%}}@media (max-width:480px){.birthday-header h1{font-size:1.5rem}.canvas-wrapper{height:300px}.design-actions{flex-direction:column}.download-card-btn{width:100%}.canvas-loading::after{font-size:12px;top:calc(50% + 35px)}}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}