/* 作品卡片：首页发现与创作者主页共用（单一来源，勿在页面里复制） */
.work-card{position:relative;min-width:0;--design-unit:1px}
.work-visual{
  position:relative;
  display:block;
  aspect-ratio:1.44;
  overflow:hidden;
  isolation:isolate;
  border-radius:calc(8 * var(--design-unit));
  background:#eef4fb;
  box-shadow:0 calc(8 * var(--design-unit)) calc(18 * var(--design-unit)) rgba(32,70,115,.10);
}
.work-cover{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .24s ease;
}
.work-card:hover .work-cover{transform:scale(1.025)}
.work-card[data-work-id="ekkoo_productivity"] .work-cover,.work-card[data-work-id="ekkoo_habit_trove"] .work-cover{object-fit:contain;background:#f8f8f8}
.work-card[data-work-id="game2048x"] .work-cover,.work-card[data-work-id="kougkcdo4mi2q"] .work-cover{object-fit:contain;padding:calc(18 * var(--design-unit));background:#faf8ef}
.work-preview{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .18s;background:#f8f8f8}
.work-preview.loaded{opacity:1}
.work-preview iframe{position:absolute;width:1000px;height:660px;transform-origin:0 0;border:0;pointer-events:none}
.work-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(10 * var(--design-unit));padding:calc(22 * var(--design-unit));background:#edf5ff;color:#526b91;text-align:center}
.work-fallback>span{font-size:calc(38 * var(--design-unit))}
.work-fallback strong{font-size:16px}
.work-fallback small{font-size:11px;opacity:.74}
.work-category{
  position:absolute;
  z-index:4;
  top:calc(10 * var(--design-unit));
  left:calc(10 * var(--design-unit));
  padding:calc(3 * var(--design-unit)) calc(8 * var(--design-unit));
  border-radius:calc(4 * var(--design-unit));
  background:rgba(10,16,30,.42);
  color:#fff;
  font-size:12px;
  backdrop-filter:blur(calc(8 * var(--design-unit)));
}
.work-info{padding:calc(10 * var(--design-unit)) 1px 0}
.work-heading{display:flex;align-items:center;gap:calc(8 * var(--design-unit))}
.work-title{
  min-width:0;
  flex:1;
  color:#1f2c3a;
  font-size:16px;
  line-height:1.45;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.remix-link{
  min-height:calc(28 * var(--design-unit));
  padding:0 calc(7 * var(--design-unit));
  display:flex;
  align-items:center;
  gap:calc(4 * var(--design-unit));
  border-radius:calc(999 * var(--design-unit));
  color:#5f84ad;
  font-size:12px;
  font-weight:600;
  flex:none;
}
.remix-link:hover{background:#edf6ff}
.remix-link svg{width:calc(12 * var(--design-unit));height:calc(12 * var(--design-unit));fill:none;stroke:currentColor;stroke-width:1.8}
.work-meta{display:flex;align-items:center;gap:calc(6 * var(--design-unit));margin-top:calc(5 * var(--design-unit));color:#7f8d9d;font-size:12px;min-width:0}
.author-avatar{width:calc(19 * var(--design-unit));height:calc(19 * var(--design-unit));display:flex;align-items:center;justify-content:center;border-radius:50%;background:#e9f2ff;color:#4c88ce;font-size:9px;flex:none}
.author-name{max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.work-stats{margin-left:auto;display:flex;align-items:center;gap:calc(10 * var(--design-unit));color:#98a5b3;white-space:nowrap}
.work-stats span{display:flex;align-items:center;gap:calc(3 * var(--design-unit))}
.work-stats svg{width:calc(11 * var(--design-unit));height:calc(11 * var(--design-unit));fill:none;stroke:currentColor;stroke-width:1.7}
.work-description{margin:calc(3 * var(--design-unit)) 0 calc(3 * var(--design-unit));color:#5d6b7a;font-size:13px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.work-family,.remix-origin{display:block;margin-top:calc(4 * var(--design-unit));color:#5f84ad;font-size:11px;line-height:1.35}
.work-family{color:#4c88ce}
.remix-origin:hover{text-decoration:underline}