.templates-page{background:linear-gradient(135deg,#5a78ff85,#aa59fc7e);min-height:100vh;padding:40px 0 80px}.page-title{color:#fff;font-size:2.5rem;font-weight:700;margin-bottom:10px;text-align:center;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.categories{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-bottom:50px}.category-btn{backdrop-filter:blur(10px);background:#5a78ff7c;border:2px solid hsla(0,0%,100%,.7);border-radius:50px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 24px;transition:all .3s ease}.category-btn:hover{background:hsla(0,0%,100%,.3);transform:translateY(-2px)}.category-btn.active{background:#fff;border-color:#fff;color:#667eea}.templates-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:0 auto;max-width:1200px;padding:0 20px}.template-card{background:#fff;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.2);cursor:pointer;overflow:hidden;position:relative;transition:all .3s ease}.template-card:hover{box-shadow:0 20px 40px rgba(0,0,0,.3);transform:translateY(-10px)}.template-preview{align-items:center;background-position:50%;background-size:cover;display:flex;justify-content:center;overflow:hidden;padding-bottom:141.4%;position:relative;width:100%}.template-image{object-fit:cover;object-position:center;transition:transform .3s ease}.placeholder-preview,.template-image{height:100%;left:0;position:absolute;top:0;width:100%}.placeholder-preview{align-items:center;background:inherit;color:#fff;display:flex;flex-direction:column;justify-content:center;text-align:center}.preview-icon{animation:fadeInUp .5s ease;font-size:64px;margin-bottom:15px}.preview-name{background:rgba(0,0,0,.3);border-radius:50px;display:inline-block;font-size:18px;font-weight:600;padding:5px 15px}.template-info{padding:20px;text-align:center}.template-info h3{color:#333;font-size:1.2rem;margin:0 0 15px}.btn-select{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:10px 25px;transition:all .3s ease;width:100%}.btn-select:hover{box-shadow:0 5px 15px rgba(102,126,234,.4);transform:scale(1.05)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.template-card{animation:fadeInUp .5s ease}.loading-state{color:#fff;font-size:1.2rem;padding:60px;text-align:center}.loading-spinner{animation:spin 1s linear infinite;border:5px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;height:50px;margin:0 auto 20px;width:50px}@keyframes spin{to{transform:rotate(1turn)}}.empty-state{background:hsla(0,0%,100%,.1);border-radius:20px;color:#fff;grid-column:1/-1;padding:60px;text-align:center}.empty-state-icon{font-size:64px;margin-bottom:20px}.empty-state-text{font-size:1.2rem;margin-bottom:20px}.template-card:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);content:"";height:100%;left:-100%;pointer-events:none;position:absolute;top:0;transition:left .5s;width:100%}.template-card:hover:before{left:100%}.template-card:hover .template-image{transform:scale(1.05)}.template-card[data-category=wedding] .btn-select{background:linear-gradient(135deg,#f093fb,#f5576c)}.template-card[data-category=birthday] .btn-select{background:linear-gradient(135deg,#4facfe,#00f2fe)}.template-card[data-category=corporate] .btn-select{background:linear-gradient(135deg,#43e97b,#38f9d7)}.template-card[data-category=wedding] .btn-select[data-id=wedding-1]{background:linear-gradient(135deg,#94dcc4,#d9a670)}.template-card[data-category=wedding] .btn-select[data-id=wedding-2]{background:linear-gradient(135deg,#b8c7a6 20%,#0c431e)}.template-card[data-category=wedding] .btn-select[data-id=wedding-3]{background:linear-gradient(135deg,#d5cfc2,#1a264c)}.template-card[data-category=birthday] .btn-select[data-id=birthday-1]{background:linear-gradient(135deg,#ebba58,#f0817d)}.template-card[data-category=birthday] .btn-select[data-id=birthday-2]{background:linear-gradient(135deg,#f3a8a7 25%,#2cc3f8)}.template-card[data-category=birthday] .btn-select[data-id=birthday-3]{background:linear-gradient(135deg,#f4b517 25%,#08947a)}.template-card[data-category=corporate] .btn-select[data-id=corporate-1]{background:linear-gradient(135deg,#f3f2f2,#004b86)}.template-card[data-category=corporate] .btn-select[data-id=corporate-2]{background:linear-gradient(135deg,#877645 20%,#003d4c)}.template-card[data-category=corporate] .btn-select[data-id=corporate-3]{background:linear-gradient(135deg,#fff6e7,#8f7654)}.template-card[data-category=classic] .btn-select[data-id=classic-1]{background:linear-gradient(135deg,#7c9e3f,#004348)}.template-card[data-category=classic] .btn-select[data-id=classic-2]{background:linear-gradient(135deg,#e4e3cc,#3d9386)}.template-card[data-category=classic] .btn-select[data-id=classic-3]{background:linear-gradient(135deg,#979696 25%,#1c17bc)}@media (max-width:768px){.templates-page{padding:20px 0 40px}.page-title{font-size:1.8rem;margin-bottom:30px}.categories{gap:10px;margin-bottom:30px}.category-btn{font-size:.9rem;padding:8px 16px}.templates-grid{gap:20px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));padding:0 15px}.preview-icon{font-size:48px}.preview-name{font-size:14px}.template-info h3{font-size:1rem}.btn-select{font-size:.9rem;padding:8px 20px}}@media (max-width:480px){.templates-grid{grid-template-columns:1fr}.category-btn{font-size:.85rem;padding:6px 12px}}