*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#070710;--surface:#0f0f1a;--border:#1a1a2e;--accent:#7c5cfc;--accent2:#00d4aa;--text:#f0f0f8;--muted:#7070a0;--card:#0d0d1a;--gold:#f59e0b}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}

nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:rgba(7,7,16,0.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.logo{font-family:'Syne',sans-serif;font-size:1.2rem;font-weight:800;color:var(--text);text-decoration:none}
.logo span{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-link{color:var(--muted);text-decoration:none;font-size:0.85rem;font-weight:600;padding:8px 14px;border-radius:8px;transition:all 0.2s}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,0.05)}
.nav-link.active{color:var(--accent)}
.dash-btn{background:var(--accent);color:#fff;border:none;border-radius:50px;padding:8px 18px;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.82rem;font-weight:700;cursor:pointer;transition:all 0.2s}
.dash-btn:hover{opacity:0.85}

main{padding:80px 20px 60px;max-width:1100px;margin:0 auto}

.page-header{text-align:center;padding:40px 0 48px}
.page-tag{display:inline-block;background:rgba(124,92,252,0.1);border:1px solid rgba(124,92,252,0.3);color:#a78bfa;border-radius:50px;padding:6px 16px;font-size:0.75rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px}
.page-header h1{font-family:'Syne',sans-serif;font-size:clamp(1.8rem,5vw,2.8rem);font-weight:800;letter-spacing:-1px;margin-bottom:12px}
.page-header h1 span{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-header p{color:var(--muted);font-size:0.95rem;max-width:480px;margin:0 auto}

.filter-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
.filter-tab{background:var(--surface);border:1px solid var(--border);color:var(--muted);border-radius:50px;padding:8px 18px;font-size:0.82rem;font-weight:600;cursor:pointer;transition:all 0.2s;font-family:'Plus Jakarta Sans',sans-serif}
.filter-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}

.section-label{font-size:0.75rem;font-weight:700;color:var(--accent2);letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.section-label::after{content:'';flex:1;height:1px;background:var(--border)}

.templates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-bottom:48px}

.template-card{background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:all 0.2s;position:relative}
.template-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.3);border-color:var(--accent)}
.template-card.premium{border-color:rgba(245,158,11,0.3)}
.template-card.premium:hover{border-color:var(--gold);box-shadow:0 16px 40px rgba(245,158,11,0.15)}

.template-preview{height:180px;overflow:hidden;position:relative}
.template-preview img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s}
.template-card:hover .template-preview img{transform:scale(1.05)}
.preview-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,16,0.7),transparent 60%);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity 0.3s}
.template-card:hover .preview-overlay{opacity:1}
.preview-btn{background:rgba(255,255,255,0.95);color:#070710;border:none;border-radius:50px;padding:10px 22px;font-weight:700;font-size:0.85rem;cursor:pointer;transition:all 0.2s}
.preview-btn:hover{transform:scale(1.05)}

.free-badge{position:absolute;top:12px;left:12px;background:var(--accent2);color:#070710;border-radius:50px;padding:4px 12px;font-size:0.7rem;font-weight:800;z-index:2}
.premium-badge{position:absolute;top:12px;left:12px;background:var(--gold);color:#070710;border-radius:50px;padding:4px 12px;font-size:0.7rem;font-weight:800;z-index:2;display:flex;align-items:center;gap:4px}
.lock-overlay{position:absolute;inset:0;background:rgba(7,7,16,0.6);display:flex;align-items:center;justify-content:center;z-index:1;backdrop-filter:blur(2px)}
.lock-icon{font-size:2rem}

.template-body{padding:18px}
.template-category{font-size:0.7rem;font-weight:700;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.template-name{font-size:1rem;font-weight:800;margin-bottom:6px}
.template-desc{font-size:0.82rem;color:var(--muted);line-height:1.5;margin-bottom:14px}
.template-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.t-tag{background:rgba(124,92,252,0.1);color:#a78bfa;border-radius:50px;padding:3px 10px;font-size:0.7rem;font-weight:600}
.t-tag-gold{background:rgba(245,158,11,0.1);color:var(--gold);border-radius:50px;padding:3px 10px;font-size:0.7rem;font-weight:600}

.template-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}
.template-price{font-size:1rem;font-weight:800}
.price-free{color:var(--accent2)}
.price-paid{color:var(--gold)}
.use-btn{background:linear-gradient(135deg,var(--accent),#5b3fd4);color:#fff;border:none;border-radius:50px;padding:9px 18px;font-size:0.82rem;font-weight:700;cursor:pointer;transition:all 0.2s;font-family:'Plus Jakarta Sans',sans-serif}
.use-btn:hover{transform:translateY(-1px);opacity:0.9}
.unlock-btn{background:linear-gradient(135deg,var(--gold),#d97706);color:#070710;border:none;border-radius:50px;padding:9px 18px;font-size:0.82rem;font-weight:700;cursor:pointer;transition:all 0.2s;font-family:'Plus Jakarta Sans',sans-serif}
.unlock-btn:hover{transform:translateY(-1px);opacity:0.9}

.cta-box{background:linear-gradient(135deg,rgba(124,92,252,0.15),rgba(0,212,170,0.1));border:1px solid rgba(124,92,252,0.3);border-radius:20px;padding:40px 28px;text-align:center;margin-top:20px}
.cta-box h2{font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800;margin-bottom:8px}
.cta-box p{color:var(--muted);font-size:0.9rem;margin-bottom:24px}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:50px;padding:12px 24px;font-weight:700;font-size:0.9rem;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}
.cta-secondary{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:50px;padding:12px 24px;font-weight:700;font-size:0.9rem;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}

.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:999;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px;max-width:400px;width:100%;text-align:center}
.modal-icon{font-size:3rem;margin-bottom:16px}
.modal-title{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:800;margin-bottom:8px}
.modal-desc{color:var(--muted);font-size:0.88rem;margin-bottom:24px;line-height:1.6}
.modal-price{font-size:1.8rem;font-weight:800;color:var(--gold);margin-bottom:24px}
.modal-btns{display:flex;gap:10px}
.modal-btn-pay{flex:1;background:linear-gradient(135deg,var(--gold),#d97706);color:#070710;border:none;border-radius:12px;padding:13px;font-weight:700;font-size:0.9rem;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}
.modal-btn-cancel{flex:1;background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:12px;padding:13px;font-weight:600;font-size:0.9rem;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}

.toast{position:fixed;bottom:20px;right:20px;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:12px 18px;border-radius:12px;font-size:0.85rem;font-weight:600;transform:translateY(100px);transition:transform 0.3s;z-index:9999}
.toast.show{transform:translateY(0)}