/* ==========================================================================
   download-content-top.css · 下载模板页顶部应用信息 + 安装按钮
   对应源码：ptgame/app/src/download/comp/ContentTop.vue <style scoped lang="less">
   注：less mixin #dw-content-top.style 的 first/four 两个调用分支已展开为扁平 CSS（见 AGENTS.md 翻译规则）。
       .first/.four 为组件根元素 class（templateName），后代选择器写法照源码保留
       （`.first .content-top-wrap` 不命中根元素本身，与源码 scoped 行为一致，故 four 另有
       `.four.content-top-wrap` 显式规则）。
   ========================================================================== */

/* ---- shiny 闪光动画（源码 less 顶部） ---- */
.content-top-wrap .shiny {
  position: relative;
  overflow: hidden;
}

.content-top-wrap .shiny::before {
  content: '';
  animation: download-content-top-shiny 6s ease-in-out infinite;
  background: white;
  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: -180px;
  width: 30px;
}

@keyframes download-content-top-shiny {
  0% {
    opacity: 0;
    transform: scale(0) rotate(45deg);
  }

  80% {
    opacity: 0.5;
    transform: scale(0) rotate(45deg);
  }

  81% {
    opacity: 1;
    transform: scale(4) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: scale(50) rotate(45deg);
  }
}

/* ---- #dw-content-top.style() 默认参数分支（.first 调用） ---- */
.first .content-top-wrap {
  background-color: #F5F6F8;
}

.first .main-text {
  color: #000;
}

.first .sub-text {
  color: #5F6368;
}

.first .line-bg {
  background-color: #E8EAED;
}

.first .btn {
  width: 100%;
  padding: 10px 8px;
  border-radius: 8px;
  background: #01875f;
  color: #fff;
  cursor: pointer;
}

/* ---- #dw-content-top.style(#fff, #000, #9AA0A6, #3C4043) 分支（.four 调用） ---- */
.four .content-top-wrap {
  background-color: #F5F6F8;
}

.four .main-text {
  color: #fff;
}

.four .sub-text {
  color: #9AA0A6;
}

.four .line-bg {
  background-color: #3C4043;
}

.four .btn {
  width: 100%;
  padding: 10px 8px;
  border-radius: 8px;
  background: #01875f;
  color: #000;
  cursor: pointer;
}

.four {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  margin-top: -1.875rem;
  z-index: 11;
  background: #1f2124;
}

.four .iconHeader {
  margin-top: -0.9375rem;
}

.four .gradient-overlay {
  position: absolute;
  top: -1.1875rem;
  left: 0;
  width: 100%;
  height: 1.25rem; /* 渐变高度 */
  background: linear-gradient(to top, #1f2124, rgba(0, 0, 0, 0));
  z-index: -1;
}

.four.content-top-wrap {
  background-color: #1f2124 !important;
}

/* ---- Tailwind 工具类等价规则（根元素） ---- */
.content-top-wrap.relative { position: relative; }
.content-top-wrap.pb-\[0\.0625rem\] { padding-bottom: 0.0625rem; }

/* ---- Tailwind 工具类等价规则（后代） ---- */
.content-top-wrap .flex { display: flex; }
.content-top-wrap .items-center { align-items: center; }
.content-top-wrap .justify-center { justify-content: center; }
.content-top-wrap .flex-col { flex-direction: column; }
.content-top-wrap .flex-1 { flex: 1 1 0%; }
.content-top-wrap .w-\[4\.5rem\] { width: 4.5rem; }
.content-top-wrap .h-\[4\.5rem\] { height: 4.5rem; }
.content-top-wrap .mr-6 { margin-right: 1.5rem; }
.content-top-wrap .rounded-\[20\%\] { border-radius: 20%; }
.content-top-wrap .overflow-hidden { overflow: hidden; }
.content-top-wrap .text-2xl { font-size: 1.5rem; line-height: 2rem; }
.content-top-wrap .leading-none { line-height: 1; }
.content-top-wrap .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 对应源码 global.less .ellipsis */
.content-top-wrap .w-\[15\.375rem\] { width: 15.375rem; }
.content-top-wrap .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.content-top-wrap .text-\[\#01875F\] { color: #01875F; }
.content-top-wrap .text-\[\.75rem\] { font-size: .75rem; }
.content-top-wrap .text-sm { font-size: .875rem; line-height: 1.25rem; }
.content-top-wrap .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.content-top-wrap .font-semibold { font-weight: 600; }
.content-top-wrap .text-xs { font-size: .75rem; line-height: 1rem; }
.content-top-wrap .h-6 { height: 1.5rem; }
.content-top-wrap .w-\[1px\] { width: 1px; }
.content-top-wrap .bg-\[\#E8EAED\] { background-color: #E8EAED; }
.content-top-wrap .mb-6 { margin-bottom: 1.5rem; }
.content-top-wrap .w-3 { width: .75rem; }
.content-top-wrap .mr-1 { margin-right: .25rem; }
.content-top-wrap .text-\[\#ffe336\] { color: #ffe336; }
.content-top-wrap .text-\[\#01875f\] { color: #01875f; }
.content-top-wrap .mr-3 { margin-right: .75rem; }
.content-top-wrap .ml-6 { margin-left: 1.5rem; }