.build-card{background-color:var(--bg-secondary);border-radius:12px;overflow:hidden;border:1px solid var(--border-color);transition:all 0.2s ease}.build-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}.build-card__link{display:block;text-decoration:none;color:inherit;height:100%}.build-card__image{position:relative;aspect-ratio:16 / 10;overflow:hidden;background-color:var(--bg-tertiary)}.build-card__image img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}.build-card:hover .build-card__image img{transform:scale(1.05)}.build-card__image--placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bg-tertiary) 0,var(--bg-secondary) 100%)}.build-card__icons{display:flex;gap:1.5rem;opacity:0.4}.build-card__component-icon{color:var(--text-secondary)}.build-card__component-grid{display:grid;width:100%;height:100%;gap:2px;padding:2px;background-color:var(--bg-tertiary)}.build-card__component-grid[data-count="1"]{grid-template-columns:1fr}.build-card__component-grid[data-count="2"]{grid-template-columns:1fr 1fr}.build-card__component-grid[data-count="3"]{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}.build-card__component-grid[data-count="3"] .build-card__component-item:first-child{grid-row:span 2}.build-card__component-grid[data-count="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.build-card__component-grid[data-count="5"]{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr}.build-card__component-grid[data-count="5"] .build-card__component-item:first-child{grid-column:span 2}.build-card__component-grid[data-count="6"]{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr}.build-card__component-grid[data-count="7"]{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr}.build-card__component-grid[data-count="8"]{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr}.build-card__component-item--empty{background-color:var(--bg-tertiary)}.build-card__component-item{position:relative;background-color:var(--bg-secondary);overflow:hidden;display:flex;align-items:center;justify-content:center}.build-card__component-item img{width:100%;height:100%;object-fit:contain;padding:8%;transition:transform 0.3s ease}.build-card:hover .build-card__component-item img{transform:scale(1.08)}.build-card__component-overflow{background-color:var(--bg-tertiary);display:flex;align-items:center;justify-content:center}.build-card__overflow-count{font-size:1rem;font-weight:600;color:var(--text-secondary);opacity:0.8}.build-card:hover .build-card__overflow-count{color:var(--accent);opacity:1}.build-card__badge{position:absolute;top:0.75rem;left:0.75rem;padding:0.25rem 0.75rem;font-size:0.75rem;font-weight:600;border-radius:4px;z-index:1}.build-card__badge--featured{background-color:var(--accent);color:var(--bg-primary)}.build-card__badge--pcbuildmate{background-color:var(--accent);color:var(--bg-primary)}.build-card__content{padding:1rem;display:flex;flex-direction:column;gap:0.5rem}.build-card__title{font-size:1rem;font-weight:600;color:var(--text-primary);margin:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.build-card__author{display:flex;align-items:center;gap:0.5rem;font-size:0.8125rem;color:var(--text-secondary)}.build-card__avatar{width:20px;height:20px;border-radius:50%;object-fit:cover}.build-card__avatar--light{display:none}.build-card__avatar--dark{display:inline-block}html.light .build-card__avatar--dark{display:none}html.light .build-card__avatar--light{display:inline-block}.build-card__specs{display:flex;flex-direction:column;gap:0.25rem;margin-top:0.25rem}.build-card__spec{font-size:0.8125rem;color:var(--text-secondary);display:flex;gap:0.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.build-card__spec-label{color:var(--text-muted);flex-shrink:0}.build-card__spec span:last-child{overflow:hidden;text-overflow:ellipsis}.build-card__meta-row{font-size:0.8125rem;color:var(--text-secondary);margin-top:0.25rem}.build-card__footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:auto;padding-top:0.75rem;border-top:1px solid var(--border-color);flex-wrap:wrap}.build-card__price{font-size:1.125rem;font-weight:700;color:var(--accent);flex-shrink:0}.build-card__meta{display:flex;align-items:center;gap:0.75rem;font-size:0.75rem;color:var(--text-muted)}.build-card__comments{display:flex;align-items:center;gap:0.25rem}.build-card__date{white-space:nowrap;font-size:0.8125rem;color:var(--text-muted)}.build-card__save-btn{position:absolute;top:0.75rem;right:0.75rem;z-index:10;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;color:var(--text-secondary);background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:50%;cursor:pointer;transition:all 0.2s ease;box-shadow:0 2px 6px rgba(0,0,0,0.15);opacity:0}.build-card:hover .build-card__save-btn{opacity:1}.build-card__save-btn:hover:not(:disabled){color:var(--error);background-color:rgba(var(--error-rgb,239,68,68),0.1);border-color:var(--error);transform:scale(1.1)}.build-card__save-btn.build-card__save-btn--saved{opacity:1;color:var(--error);background-color:rgba(var(--error-rgb,239,68,68),0.1);border-color:var(--error)}.build-card__save-btn--saved:hover:not(:disabled){color:#fff;background-color:var(--error)}.build-card__save-btn:disabled{opacity:0.6;cursor:not-allowed}@keyframes build-card-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.build-card__save-btn .animate-spin{animation:build-card-spin 1s linear infinite}.build-card__video-icons{display:inline-flex;align-items:center;gap:0.375rem;margin-left:0.25rem}.build-card__video-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;padding:4px;color:var(--text-muted);background-color:var(--bg-tertiary);border-radius:4px;transition:all 0.15s ease}.build-card__video-icon:hover{color:var(--accent);background-color:var(--bg-secondary);transform:scale(1.1)}.build-card__video-icon svg{flex-shrink:0}.build-card--featured{border-color:rgba(var(--accent-rgb),0.3)}.build-card--featured:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(var(--accent-rgb),0.2)}.build-card--builder{background-color:var(--bg-tertiary)}.build-card--builder .build-card__link{cursor:pointer}.build-card--builder:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}.build-card--builder:hover .build-card__cta{opacity:1}.build-card--builder:hover .build-card__icons{opacity:0.6}.build-card--social{border-color:rgba(var(--accent-rgb),0.2)}.build-card--social:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(var(--accent-rgb),0.15)}.build-card__cta{margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid var(--border-color);text-align:center;opacity:0.7;transition:opacity 0.2s ease}.build-card__cta-text{font-size:0.875rem;font-weight:500;color:var(--accent)}@media (max-width:768px){.build-card__title{font-size:0.9375rem}.build-card__price{font-size:1rem}.build-card__cta{margin-top:0.5rem;padding-top:0.5rem}}@media (max-width:640px){.build-card{border-radius:8px}.build-card__image{aspect-ratio:16 / 9}.build-card__content{padding:0.75rem;gap:0.375rem}.build-card__title{font-size:0.875rem;-webkit-line-clamp:1}.build-card__author{font-size:0.75rem;gap:0.375rem}.build-card__avatar{width:18px;height:18px}.build-card__specs{gap:0.125rem}.build-card__spec{font-size:0.75rem}.build-card__meta-row{font-size:0.75rem}.build-card__footer{flex-direction:row;align-items:center;justify-content:space-between;gap:0.5rem;padding-top:0.5rem}.build-card__price{font-size:0.9375rem}.build-card__date{font-size:0.75rem}.build-card__cta{margin-top:0.5rem;padding-top:0.5rem}.build-card__cta-text{font-size:0.8125rem}.build-card__icons{gap:1rem}.build-card__component-icon{width:24px;height:24px}.builds-grid--compact .build-card--builder{border-radius:6px}.builds-grid--compact .build-card__image{aspect-ratio:4 / 3}.builds-grid--compact .build-card__icons{gap:0.5rem}.builds-grid--compact .build-card__component-icon{width:18px;height:18px}.builds-grid--compact .build-card__content{padding:0.5rem;gap:0.25rem}.builds-grid--compact .build-card__title{font-size:0.75rem;line-height:1.2}.builds-grid--compact .build-card__author{font-size:0.6875rem;gap:0.25rem}.builds-grid--compact .build-card__avatar{width:14px;height:14px}.builds-grid--compact .build-card__meta-row{font-size:0.6875rem;margin-top:0}.builds-grid--compact .build-card__footer{padding-top:0.375rem;gap:0.25rem;flex-direction:column;align-items:flex-start}.builds-grid--compact .build-card__price{font-size:0.8125rem;font-weight:600}.builds-grid--compact .build-card__date{font-size:0.625rem}.builds-grid--compact .build-card__cta{display:none}.builds-grid--compact .build-card__component-grid{gap:1px;padding:1px}.builds-grid--compact .build-card__component-item img{padding:10%}.build-card__video-icons{gap:0.25rem}.build-card__video-icon{width:18px;height:18px;padding:2px}.build-card__video-icon svg{width:12px;height:12px}.builds-grid--compact .build-card__video-icons{gap:0.125rem;margin-left:0.125rem}.builds-grid--compact .build-card__video-icon{width:16px;height:16px;padding:2px}.builds-grid--compact .build-card__video-icon svg{width:10px;height:10px}}.build-card--official{border:1px solid rgba(37,99,235,0.3)}.build-card--official:hover{border-color:rgba(37,99,235,0.5);box-shadow:0 8px 24px rgba(37,99,235,0.15)}.build-card__badge--official{background:linear-gradient(135deg,#2563eb 0,#1d4ed8 100%);color:white;font-size:0.6875rem;font-weight:600;padding:0.25rem 0.625rem;border-radius:4px;text-transform:uppercase;letter-spacing:0.02em}html.light .build-card--official{border-color:rgba(37,99,235,0.2);background:white}html.light .build-card--official:hover{border-color:rgba(37,99,235,0.4);box-shadow:0 8px 24px rgba(37,99,235,0.1)}.subsection__badge{font-size:0.75rem;font-weight:500;color:var(--text-secondary,#94a3b8);padding:0.25rem 0.5rem;background:var(--bg-tertiary,rgba(255,255,255,0.05));border-radius:4px;margin-left:auto}html.light .subsection__badge{background:#f1f5f9;color:#64748b}html.light .build-card{background-color:#fff;border:1px solid #e2e8f0}html.light .build-card:hover{border-color:var(--accent)}html.light .build-card .build-card__component-item{background-color:#fff}html.light .build-card .build-card__component-grid{background-color:#e2e8f0}html.light .build-card .build-card__component-overflow{background-color:#f8fafc}