.build-card{background-color:var(--bg-secondary);border-radius:12px;overflow:hidden;border:1px solid var(--border);transition:all .2s ease}.build-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px #00000026}.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 .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:.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"],.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 .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:.8}.build-card:hover .build-card__overflow-count{color:var(--accent);opacity:1}.build-card__badge{position:absolute;top:.75rem;left:.75rem;padding:.25rem .75rem;font-size:.75rem;font-weight:600;border-radius:4px;z-index:1}.build-card__badge--featured,.build-card__badge--pcbuildmate{background-color:var(--accent);color:var(--bg-primary)}.build-card__content{padding:1rem;display:flex;flex-direction:column;gap:.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:.5rem;font-size:.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:.25rem;margin-top:.25rem}.build-card__spec{font-size:.8125rem;color:var(--text-secondary);display:flex;gap:.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:.8125rem;color:var(--text-secondary);margin-top:.25rem}.build-card__footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:auto;padding-top:.75rem;border-top:1px solid var(--border);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:.75rem;font-size:.75rem;color:var(--text-muted)}.build-card__comments{display:flex;align-items:center;gap:.25rem}.build-card__date{white-space:nowrap;font-size:.8125rem;color:var(--text-muted)}.build-card__save-btn{position:absolute;top:.75rem;right:.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);border-radius:50%;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #00000026;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),.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),.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:.6;cursor:not-allowed}@keyframes build-card-spin{0%{transform:rotate(0)}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:.375rem;margin-left:.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 .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),.3)}.build-card--featured:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(var(--accent-rgb),.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 #00000026}.build-card--builder:hover .build-card__cta{opacity:1}.build-card--builder:hover .build-card__icons{opacity:.6}.build-card--social{border-color:rgba(var(--accent-rgb),.2)}.build-card--social:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(var(--accent-rgb),.15)}.build-card__cta{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border);text-align:center;opacity:.7;transition:opacity .2s ease}.build-card__cta-text{font-size:.875rem;font-weight:500;color:var(--accent)}@media(max-width:768px){.build-card__title{font-size:.9375rem}.build-card__price{font-size:1rem}.build-card__cta{margin-top:.5rem;padding-top:.5rem}}@media(max-width:640px){.build-card{border-radius:8px}.build-card__image{aspect-ratio:16 / 9}.build-card__content{padding:.75rem;gap:.375rem}.build-card__title{font-size:.875rem;-webkit-line-clamp:1}.build-card__author{font-size:.75rem;gap:.375rem}.build-card__avatar{width:18px;height:18px}.build-card__specs{gap:.125rem}.build-card__spec,.build-card__meta-row{font-size:.75rem}.build-card__footer{flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem;padding-top:.5rem}.build-card__price{font-size:.9375rem}.build-card__date{font-size:.75rem}.build-card__cta{margin-top:.5rem;padding-top:.5rem}.build-card__cta-text{font-size:.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:.5rem}.builds-grid--compact .build-card__component-icon{width:18px;height:18px}.builds-grid--compact .build-card__content{padding:.5rem;gap:.25rem}.builds-grid--compact .build-card__title{font-size:.75rem;line-height:1.2}.builds-grid--compact .build-card__author{font-size:.6875rem;gap:.25rem}.builds-grid--compact .build-card__avatar{width:14px;height:14px}.builds-grid--compact .build-card__meta-row{font-size:.6875rem;margin-top:0}.builds-grid--compact .build-card__footer{padding-top:.375rem;gap:.25rem;flex-direction:column;align-items:flex-start}.builds-grid--compact .build-card__price{font-size:.8125rem;font-weight:600}.builds-grid--compact .build-card__date{font-size:.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:.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:.125rem;margin-left:.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,.3)}.build-card--official:hover{border-color:#2563eb80;box-shadow:0 8px 24px #2563eb26}.build-card__badge--official{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-size:.6875rem;font-weight:600;padding:.25rem .625rem;border-radius:4px;text-transform:uppercase;letter-spacing:.02em}html.light .build-card--official{border-color:#2563eb33;background:#fff}html.light .build-card--official:hover{border-color:#2563eb66;box-shadow:0 8px 24px #2563eb1a}.subsection__badge{font-size:.75rem;font-weight:500;color:var(--text-secondary, #94a3b8);padding:.25rem .5rem;background:var(--bg-tertiary, rgba(255, 255, 255, .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}