/* FILTER BAR */
.filter-bar{margin-bottom:40px}
.filter-bar-inner{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.filter-label{font-family:var(--font-pixel);font-size:0.8rem;color:var(--text-dark);letter-spacing:2px;margin-right:6px}
.filter-btn{
    font-family:var(--font-pixel);font-size:0.85rem;
    padding:9px 18px;border:1px solid var(--border);
    background:transparent;color:var(--text-dim);
    cursor:pointer;transition:all var(--dur) ease;
    display:flex;align-items:center;gap:6px;
}
.filter-count{
    font-family:var(--font-pixel-sm);font-size:0.35rem;
    background:var(--border-dim);padding:2px 5px;
    color:var(--text-muted);transition:all var(--dur) ease;
}
.filter-btn:hover,.filter-btn.active{
    color:var(--green);border-color:var(--green);
    background:var(--green-glow);
    box-shadow:0 0 12px var(--green-glow);
}
.filter-btn.active .filter-count{background:rgba(0,255,65,0.15);color:var(--green)}

/* GRID */
.templates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(370px,1fr));gap:24px}

/* CARD */
.template-card{
    background:var(--bg-card);border:1px solid var(--border);
    overflow:hidden;transition:all 0.4s var(--ease-out);position:relative;
}
.template-card.hidden-card{display:none !important}
.card-border-glow{
    position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;
    opacity:0;transition:opacity 0.4s ease;pointer-events:none;z-index:0;
}
.template-card:hover .card-border-glow{opacity:1}
.template-card[data-package="basic"] .card-border-glow{box-shadow:0 0 25px var(--green-glow)}
.template-card[data-package="standard"] .card-border-glow{box-shadow:0 0 25px var(--yellow-glow)}
.template-card[data-package="premium"] .card-border-glow{box-shadow:0 0 25px var(--red-glow)}
.template-card:hover{border-color:var(--border-hover);transform:translateY(-6px);z-index:var(--z-card)}

/* PREVIEW */
.template-preview{
    width:100%;height:240px;overflow:hidden;
    position:relative;background:#030803;
    border-bottom:1px solid var(--border-dim);
}
.template-img{
    width:100%;height:100%;object-fit:cover;
    filter:grayscale(30%) brightness(0.75) contrast(1.1);
    transition:all 0.5s var(--ease-out);
}
.template-card:hover .template-img{filter:grayscale(0%) brightness(0.95) contrast(1);transform:scale(1.04)}
.preview-overlay{
    position:absolute;top:0;left:0;width:100%;height:100%;
    background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,0.85) 100%);
    z-index:2;pointer-events:none;
}
.preview-scanline{
    position:absolute;top:-100%;left:0;width:100%;height:3px;
    background:var(--green);opacity:0.15;z-index:3;
    animation:scanDown 4s linear infinite;pointer-events:none;
}
.preview-crt-flicker{
    position:absolute;top:0;left:0;width:100%;height:100%;
    background:rgba(0,255,65,0.02);z-index:3;pointer-events:none;
    animation:crtFlicker 0.1s infinite;
}
.preview-hover-actions{
    position:absolute;bottom:0;left:0;width:100%;
    padding:14px;z-index:5;display:flex;justify-content:center;
    opacity:0;transform:translateY(10px);transition:all 0.3s var(--ease-out);
}
.template-card:hover .preview-hover-actions{opacity:1;transform:translateY(0)}
.preview-btn{
    font-family:var(--font-pixel);font-size:0.85rem;
    padding:10px 22px;
    background:rgba(0,255,65,0.1);border:1px solid var(--green-dark);
    color:var(--green);transition:all var(--dur) ease;
    backdrop-filter:blur(8px);
}
.preview-btn:hover{background:rgba(0,255,65,0.2);box-shadow:0 0 15px var(--green-glow)}
.preview-btn-standard{border-color:var(--yellow-dim);color:var(--yellow);background:rgba(255,255,0,0.06)}
.preview-btn-standard:hover{box-shadow:0 0 15px var(--yellow-glow)}
.preview-btn-premium{border-color:var(--red-dim);color:var(--red);background:rgba(255,0,64,0.06)}
.preview-btn-premium:hover{box-shadow:0 0 15px var(--red-glow)}

/* NO IMAGE FALLBACK */
.no-image-placeholder{
    display:none;
    position:absolute;top:0;left:0;width:100%;height:100%;
    align-items:center;justify-content:center;
    background:var(--bg-card);z-index:1;
}
.template-preview.no-image .no-image-placeholder{display:flex}
.placeholder-ascii{
    font-family:var(--font-mono);font-size:0.7rem;
    color:var(--text-dark);text-align:center;line-height:1.4;
}

/* INFO */
.template-info{padding:20px;position:relative;z-index:1}
.template-info-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.template-category{font-family:var(--font-pixel);font-size:0.7rem;color:var(--text-dark);letter-spacing:2px}
.template-id{font-family:var(--font-pixel);font-size:0.7rem;color:var(--text-dark)}
.template-name{font-family:var(--font-pixel);font-size:1.3rem;color:var(--green);margin-bottom:8px;transition:text-shadow var(--dur) ease}
.template-card:hover .template-name{text-shadow:0 0 10px var(--green-glow)}
.template-desc{font-family:var(--font-mono);font-size:0.8rem;color:var(--text-dim);margin-bottom:12px;line-height:1.6}
.template-meta{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--border-dim)}
.meta-left{display:flex;align-items:center;gap:14px}
.template-price{font-family:var(--font-pixel);font-size:1.3rem}
.price-basic{color:var(--green)}
.price-standard{color:var(--yellow)}
.price-premium{color:var(--red)}
.template-delivery{font-family:var(--font-pixel);font-size:0.75rem;color:var(--text-dark)}

.no-results{text-align:center;padding:60px}
.no-results-text{font-family:var(--font-pixel);font-size:1rem;color:var(--text-dim);margin-bottom:20px}