/* Template Browser — Categories, Grid, Cards */

.template-categories {
    display: flex; gap: var(--space-8); margin-bottom: var(--space-20);
    padding-bottom: var(--space-16); border-bottom: 1px solid var(--color-border);
}
.category-tab {
    padding: var(--space-8) var(--space-16); background: var(--color-bg-tertiary);
    border: none; border-radius: var(--radius-sm); color: var(--color-text-secondary);
    font-size: var(--font-size-md); cursor: pointer; transition: var(--transition-fast);
}
.category-tab:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.category-tab.active { background: var(--color-accent-primary); color: white; }

.template-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-16); max-height: 60vh; overflow-y: auto; padding: var(--space-4);
}

.template-card {
    background: var(--color-bg-tertiary); border: 2px solid var(--color-border);
    border-radius: var(--radius); padding: var(--space-20);
    cursor: pointer; transition: var(--transition-normal);
}
.template-card:hover { border-color: var(--color-accent-primary); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.template-card-icon {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
    font-size: var(--font-size-3xl); color: white; margin-bottom: var(--space-16);
}
.template-card-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-8); color: var(--color-text-primary); }
.template-card-description { font-size: var(--font-size-md); color: var(--color-text-secondary); line-height: var(--line-height-normal); }
.template-card-category {
    display: inline-block; margin-top: var(--space-12); padding: var(--space-4) var(--space-10);
    background: var(--color-bg-hover); border-radius: var(--radius-md);
    font-size: var(--font-size-sm); color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
}

.template-icon-resume::before       { content: '\f2c2'; }
.template-icon-letter::before       { content: '\f0e0'; }
.template-icon-paper::before        { content: '\f15c'; }
.template-icon-invoice::before      { content: '\f571'; }
.template-icon-presentation::before { content: '\f1c4'; }
.template-icon-thesis::before       { content: '\f19d'; }
.template-icon-report::before       { content: '\f1ea'; }