/* 主页"ComfyUI本地包"下载卡片（3D Card 组件移植版）
   所有类名 dlc- 前缀，仅作用于 home.html，不影响共享 frontend-shell.css */

.portal-download {
  max-width: 1080px;
  margin: 96px auto 0;
}

.dlc-parent {
  width: min(255px, 100%);
  padding: 0 0 20px;
  perspective: 1000px;
  box-sizing: border-box;
}

.dlc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 4;
  box-sizing: border-box;
  padding-top: 44px;
  border: 3px solid #141414;
  border-radius: 15px;
  transform-style: preserve-3d;
  background:
    linear-gradient(135deg, #0000 18.75%, #f3f3f3 0 31.25%, #0000 0),
    repeating-linear-gradient(45deg, #f3f3f3 -6.25% 6.25%, #141414 0 18.75%);
  background-size: 60px 60px;
  background-position: 0 0, 0 0;
  background-color: #141414;
  width: 100%;
  box-shadow: rgba(142, 142, 142, 0.3) 0 30px 30px -10px;
  transition: all 0.5s ease-in-out;
}

.dlc-card:hover {
  background-position: -100px 100px, -100px 100px;
  transform: rotate3d(0.5, 1, 0, 30deg);
}

.dlc-content-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #8ed500;
  border-radius: 0 0 12px 12px;
  transition: all 0.5s ease-in-out;
  padding: 52px 22px 22px 22px;
  transform-style: preserve-3d;
}

.dlc-content-box .dlc-title {
  display: inline-block;
  color: #141414;
  font-size: 20px;
  font-weight: 900;
  transition: all 0.5s ease-in-out;
  transform: translate3d(0, 0, 50px);
}

.dlc-content-box .dlc-title:hover {
  transform: translate3d(0, 0, 60px);
}

.dlc-content-box .dlc-content {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 700;
  color: #141414;
  transition: all 0.5s ease-in-out;
  transform: translate3d(0, 0, 30px);
}

.dlc-content-box .dlc-content:hover {
  transform: translate3d(0, 0, 60px);
}

.dlc-content-box .dlc-see-more {
  cursor: pointer;
  margin-top: auto;
  display: inline-block;
  font-weight: 900;
  font-size: 11px;
  font-family: inherit;
  color: #8ed500;
  background: #141414;
  border: 0;
  padding: 0.45rem 0.8rem;
  transition: all 0.5s ease-in-out;
  transform: translate3d(0, 0, 20px);
}

.dlc-content-box .dlc-see-more:hover {
  transform: translate3d(0, 0, 60px);
}

.dlc-content-box .dlc-see-more.dlc-copied {
  color: #141414;
  background: #f3f3f3;
}

.dlc-date-box {
  position: absolute;
  top: 24px;
  right: 24px;
  height: 52px;
  width: 52px;
  background: #141414;
  border: 1px solid #8ed500;
  padding: 7px;
  box-sizing: border-box;
  transform: translate3d(0, 0, 80px);
  box-shadow: rgba(100, 100, 111, 0.2) 0 17px 10px -10px;
}

.dlc-date-box .dlc-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 560px) {
  .dlc-parent { width: 100%; }
}

/* ---- v123：四个入口卡片改为下载卡片同款（静态 3D 卡，无翻转） ----
   斜纹顶条 + 绿色面板（大标题/小字/按钮）+ 右上角徽标图标，悬停 3D 倾斜 */
/* ---- v126：与绿色卡片完全一致的 3D 交互（独立 perspective 包裹层 + rotate3d 悬停） ---- */
.dlc-entry-wrap {
  perspective: 1000px;
}
.dlc-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 3 / 4;
  box-sizing: border-box;
  padding-top: 48px;
  border: 3px solid #141414;
  border-radius: 15px;
  text-decoration: none;
  transform-style: preserve-3d;
  background:
    linear-gradient(135deg, #0000 18.75%, #f3f3f3 0 31.25%, #0000 0),
    repeating-linear-gradient(45deg, #f3f3f3 -6.25% 6.25%, #141414 0 18.75%);
  background-size: 60px 60px;
  background-position: 0 0, 0 0;
  background-color: #141414;
  box-shadow: rgba(142, 142, 142, 0.3) 0 30px 30px -10px;
  transition: all 0.5s ease-in-out;
}
.dlc-entry:hover {
  background-position: -100px 100px, -100px 100px;
  transform: rotate3d(0.5, 1, 0, 30deg);
}
.dlc-entry__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #8ed500;
  border-radius: 0 0 12px 12px;
  padding: 60px 22px 22px;
  min-height: 0;
  transform-style: preserve-3d;
}
.dlc-entry__title {
  color: #141414;
  font-size: 20px;
  font-weight: 900;
  transform: translate3d(0, 0, 50px);
  transition: all 0.5s ease-in-out;
}
.dlc-entry__title:hover {
  transform: translate3d(0, 0, 60px);
}
.dlc-entry__desc {
  margin-top: 10px;
  color: #141414;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  transform: translate3d(0, 0, 30px);
  transition: all 0.5s ease-in-out;
}
.dlc-entry__desc:hover {
  transform: translate3d(0, 0, 60px);
}
.dlc-entry__action {
  margin-top: auto;
  align-self: flex-start;
  background: #141414;
  color: #8ed500;
  font-size: 11px;
  font-weight: 900;
  padding: 0.45rem 0.8rem;
  transform: translate3d(0, 0, 20px);
  transition: all 0.5s ease-in-out;
}
.dlc-entry__action:hover {
  transform: translate3d(0, 0, 60px);
}
.dlc-entry__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 56px;
  height: 56px;
  padding: 4px;
  box-sizing: border-box;
  background: #141414;
  border: 1px solid #8ed500;
  border-radius: 10px;
  box-shadow: rgba(100, 100, 111, 0.2) 0 17px 10px -10px;
  transform: translate3d(0, 0, 80px);
}
.dlc-entry__badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 620px) {
  .dlc-entry { aspect-ratio: auto; min-height: 280px; }
}