/* Work-Card active styles. Consolidated after CSS cleanup. */
.works{display:grid;grid-template-columns:repeat(1, 1fr);gap:16px;margin-top:30px;}
.card{break-inside:avoid;background:#fff;border-radius:12px;overflow:hidden;margin-bottom:0;box-shadow:0 2px 8px rgba(0,0,0,0.06);transition:all 0.3s ease;}
.card:hover{transform:translateY(-6px);box-shadow:0 8px 24px rgba(0,0,0,0.12);}
.card-cover{display:block;width:100%;aspect-ratio:16 / 9;overflow:hidden;background:#f5f5f5;text-decoration:none;position:relative;}
.card-cover img{width:100%;height:100%;object-fit:contain;display:block;transition:transform 0.3s ease;}
.home-protected-image{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none;pointer-events:none;}
.home-image-guard{position:absolute;inset:0;z-index:2;display:block;background:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-y;}
.card:hover .card-cover img{transform:scale(1.02);}
.info{padding:14px;}
.title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px;}
.title{margin:0;font-size:15px;font-weight:600;color:#1a1a1a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.title-link{color:inherit;text-decoration:none;}
.stats{display:flex;align-items:center;gap:8px;font-size:12px;color:#999;flex-shrink:0;}
.stat-item{display:inline-flex;align-items:center;line-height:1;}
.stat-icon{display:block;width:14px;height:14px;margin-right:4px;object-fit:contain;flex-shrink:0;}
.stat-icon-muted{opacity:0.6;}
.stat-value{font-style:normal;}
.like-btn{cursor:pointer;transition:transform 0.2s ease;}
.like-btn:hover{transform:scale(1.1);}
.favorite-btn{padding:0;border:none;background:transparent;color:inherit;cursor:pointer;transition:transform 0.2s ease;}
.favorite-btn:hover{transform:scale(1.1);}
.favorite-btn .stat-icon{width:14px;height:14px;margin-right:0;}
.creator{font-size:12px;color:#888;margin-bottom:10px;}
.creator-link{color:inherit;text-decoration:none;transition:color 0.18s ease;}
.creator-link:hover{color:#F04438;text-decoration:underline;text-underline-offset:2px;}
.creator-link:focus-visible{color:#F04438;text-decoration:underline;text-underline-offset:2px;outline:2px solid rgba(240,68,56,.24);outline-offset:2px;border-radius:3px;}
.tags{display:flex;gap:4px;flex-wrap:wrap;}
.tags .tag{padding:3px 7px;font-size:11px;background-color:#f0f0f0;border-radius:4px;color:#666;text-decoration:none;transition:background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;}
.tags .tag:hover{background-color:#e8e8e8;color:#222;transform:translateY(-1px);}
.tags .tag:focus-visible{background-color:#e8e8e8;color:#222;transform:translateY(-1px);outline:2px solid rgba(0,0,0,.18);outline-offset:2px;}
.card.reveal{opacity:0;transform:translateY(30px);transition:all 0.7s cubic-bezier(0.22, 1, 0.36, 1);}
.card.reveal.show{opacity:1;transform:translateY(0);}
.card.reveal.show:hover{transform:translateY(-6px);}
.skeleton-card{background:#fff;border-radius:12px;overflow:hidden;margin-bottom:16px;border:1px solid #f0f0f0;height:320px;}
.skeleton-shimmer{width:100%;height:100%;background:linear-gradient(90deg, #f9f9f9 25%, #f0f0f0 37%, #f9f9f9 63%);background-size:400% 100%;animation:shimmer-loading 1.4s ease infinite;}
.work-skeleton-container{display:none;}
.loading-sentinel{height:100px;width:100%;display:flex;justify-content:center;align-items:center;clear:both;}
.loading-sentinel .grid-mock{display:grid;width:100%;gap:16px;grid-template-columns:repeat(1, 1fr);}
@media (min-width: 600px){
  .works{grid-template-columns:repeat(2, 1fr);}
  .loading-sentinel .grid-mock{grid-template-columns:repeat(2, 1fr);}
}
@media (min-width: 992px){
  .works{grid-template-columns:repeat(3, 1fr);}
  .loading-sentinel .grid-mock{grid-template-columns:repeat(3, 1fr);}
}
@media (min-width: 1200px){
  .works{grid-template-columns:repeat(4, 1fr);}
  .loading-sentinel .grid-mock{grid-template-columns:repeat(4, 1fr);}
}
@media (min-width: 1600px){
  .works{grid-template-columns:repeat(5, 1fr);}
  .loading-sentinel .grid-mock{grid-template-columns:repeat(5, 1fr);}
}
@media (max-width: 480px){
  .info{padding:10px;}
  .title{font-size:14px;}
  .creator{font-size:11px;margin-bottom:6px;}
  .tags .tag{padding:2px 5px;font-size:10px;}
}