.free-download-label {
  position: absolute;
  /* left: 0; */
  top: 0;
  padding: 8px 12px;
  font-size: 20px;
  font-weight: 600;
  color: hsl(0deg 0% 100%);
  /* background: linear-gradient(to bottom right, hsl(0, 0%, 25%) 0%, hsla(0, 0%, 25%, 0) 50%); */
  border-radius: 0 0 15px 0;
  z-index: 3;
}

.cloud-tabs {
position: absolute;
right: 0;
top: 0;
border-radius: 0 16px;
font-size: 13px;
/* 优化背景渐变色 */
background: linear-gradient(to bottom right, rgb(218 255 250) 0%, rgb(177 226 255) 60%);
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
transition: .25s ease;
z-index: 2;
display: flex;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}

.cloud-tabs::before {
content: '';
position: absolute;
inset: 1px;
border-radius: inherit;
/* 更新内部渐变色 */
background: linear-gradient(to bottom right, rgba(120, 90, 240, 0.2) 3%, rgba(60, 50, 150, 0.05) 100%);
transition: .25s ease;
z-index: -1;
}

.cloud-tabs:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.2);
}

.cloud-tabs * {
z-index: 2;
}

.cloud-tabs input[type="radio"] {
display: none;
}

.download-contents {
margin-top: 40px;
}

.cloud-tab {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 120px;
gap: 6px;
font-size: 1.2rem;
transition: all 0.3s ease;
position: relative;
cursor: pointer;
/* 更新文字颜色 */
color:rgb(0 0 0 / 80%);
margin: 0;
font-weight: bold;
letter-spacing: 0.2px;
border-radius: 0;
}

.cloud-tab:hover {
color: #ffffff;
}

body[data-scheme=dark] .cloud-tab {
color: #A8A8B6;
}

body[data-scheme=dark] .cloud-tab:hover {
color: #fff;
}


/* 下载区域样式 */
.game-download-area {
margin-top: var(--game-spacing-lg);
padding: var(--game-spacing-md);
background: var(--game-bg-color);
border-radius: var(--game-border-radius-md);
}

.game-download-area h3 {
margin-top: 0;
font-size: 18px;
font-weight: 600;
margin-bottom: var(--game-spacing-md);
}

.download-links {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--game-spacing-md);
}

.cloud-tab .icon {
height: 1.5rem;
width: 1.5rem;
margin-right: 0.5em;
stroke: currentColor;
fill: currentColor;
transition: transform 0.2s ease;
}

.cloud-tab:hover .icon {
transform: scale(1.1);
}

/* 背景滑块效果 */

.glider {
position: absolute;
height: 100%;
width: 120px;
/* left: 6px; */
/* margin-top: -10px; */
z-index: 1;
border-radius: 0 15px;
/* border-radius: 12px; */
transition: 0.25s ease-out;
backdrop-filter: blur(10px);
/* 更新阴影和边框 */
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 5px 15px rgba(0, 0, 0, 0.15);
/* 更新亮丽渐变背景 */
background: linear-gradient(135deg, rgb(107 156 255) 0%, rgb(0 95 255) 100%);
}

body[data-scheme=dark] .glider {
background: linear-gradient(135deg, rgba(100, 80, 220, 0.35) 0%, rgba(60, 100, 220, 0.25) 100%);
}





@keyframes fadeIn {
from {
  opacity: 0;
  transform: translateY(5px);
}

to {
  opacity: 1;
  transform: translateY(0);
}
}

body[data-scheme=dark] .download-content {
background: rgba(20, 20, 25, 0.4);
}

/* 标签切换效果 */
.cloud-tabs input[type="radio"]:checked+.cloud-tab {
color: #ffffff;
font-weight: 600;
}

body[data-scheme=dark] .cloud-tabs input[type="radio"]:checked+.cloud-tab {
color: #ffffff;
font-weight: 600;
}


.cloud-tabs input[id="cloud-tab-2"]:checked~.glider {
transform: translateX(120px);
}

.cloud-tabs input[id="cloud-tab-3"]:checked~.glider {
transform: translateX(240px);
}

.cloud-tabs input[id="cloud-tab-4"]:checked~.glider {
transform: translateX(360px);
}

.cloud-tabs input[id="cloud-tab-5"]:checked~.glider {
transform: translateX(480px);
}

/* 修改数字显示位置 */
.download-count {
display: none;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 9999px;
/* 更新为蓝紫色调 */
background-color: rgba(90, 80, 240, 0.5);
color: white;
font-size: 0.625rem;
font-weight: 700;
position: absolute;
top: 5px;
right: 5px;
z-index: 25;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.download-count::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
/* 匹配更新后的颜色 */
background-color: rgba(90, 80, 240, 0.25);
border-radius: 9999px;
animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {

75%,
100% {
  transform: scale(2);
  opacity: 0;
}
}

.cloud-tabs input[type="radio"]:checked+.cloud-tab .download-count {
display: flex;
}

.cloud-tabs input[type="radio"]:checked+.cloud-tab:hover::after {
filter: blur(8px);
}

.cloud-tabs input[type="radio"]:checked+.cloud-tab {
color: #fff;
}

/* 滑块效果 */
.cloud-tabs input[id="cloud-tab-1"]:checked~.glider {
transform: translateX(0);
}

.cloud-tabs input[id="cloud-tab-2"]:checked~.glider {
transform: translateX(100%);
}

.cloud-tabs input[id="cloud-tab-3"]:checked~.glider {
transform: translateX(200%);
}

.cloud-tabs input[id="cloud-tab-4"]:checked~.glider {
transform: translateX(300%);
}

.cloud-tabs input[id="cloud-tab-5"]:checked~.glider {
transform: translateX(400%);
}



.download-content {
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  position: relative;
  z-index: 1;
}

.download-content.active {
  display: block;
  opacity: 1;
  z-index: 2;
}

/* 下载项目 */
.download-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-radius: 12px;
margin-bottom: 12px;
background: rgba(40, 40, 45, 0.3);
padding: var(--game-spacing-sm) var(--game-spacing-md);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.free-download-label {
  display: flex;
  align-items: center;
  gap: 8px;
}


body[data-scheme=dark] .download-item {
background: rgba(20, 20, 25, 0.6);
}

body[data-scheme=dark] .download-item:hover {
background: rgba(30, 30, 35, 0.8);
}

.file-info {
margin-right: 20px;
flex: 1;
}

.file-name {
display: block;
font-weight: 600;
color: #E8E8F6;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.2px;
}

body[data-scheme=dark] .file-name {
color: #fff;
}

.file-meta {
display: flex;
gap: 15px;
color: #A8A8B6;
font-size: 13px;
}

body[data-scheme=dark] .file-meta {
color: #aaa;
}

.file-meta span {
display: flex;
align-items: center;
gap: 5px;
}

.file-meta i {
font-size: 14px;
}



/* 下载说明 */
.download-notice {
margin: 20px 0;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
color: #666;
font-size: 14px;
line-height: 1.6;
}

body[data-scheme=dark] .download-notice {
background: #2d2d30;
color: #aaa;
}

.download-notice h3 {
color: #333;
margin-bottom: 10px;
font-size: 16px;
font-weight: 500;
}

body[data-scheme=dark] .download-notice h3 {
color: #fff;
}

.download-notice ul {
margin: 0;
padding-left: 20px;
}

.download-notice li {
margin-bottom: 8px;
}

/* 解压密码样式 */
.unzip-password-container {
  margin: 20px auto;
  padding: 12px 20px;
    display: flex;
      gap: 12px;
  /*background: rgba(40, 40, 45, 0.4);*/
  /*border-radius: 12px;*/

  /*align-items: center;*/
  /*justify-content: center;*/

  /*cursor: pointer;*/
  /*transition: all 0.3s ease;*/
  /*max-width: fit-content;*/
  /*border: 1px solid rgba(255, 255, 255, 0.1);*/
  /*backdrop-filter: blur(10px);*/
  /*position: relative;*/
}



.unzip-password-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-color);
  font-size: 15px;
  letter-spacing: 0.5px;
}

.unzip-password-value {
  background: rgba(255, 255, 255, 0.15);
  padding: 10px 15px;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-size: 14px;
  min-width: 180px;
      color: #FFF;
  text-align: center;
}

.unzip-password-value:hover {
  background: rgba(255, 255, 255, 0.2);
}

.unzip-password-copied {
  position: absolute;
  /*right: -80px;*/
  background: rgba(76, 175, 80, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
  z-index: 100;
}

.unzip-password-copied.show {
  opacity: 1;
  transform: translateX(0);
}

.download-notice li:last-child {
margin-bottom: 0;
}

/* 下载锁定状态 */
.download-locked {
text-align: center;
padding: 30px;
background: #f8f9fa;
border-radius: 8px;
}

body[data-scheme=dark] .download-locked {
background: #2d2d30;
}

.download-locked h3 {
color: #333;
margin-bottom: 15px;
font-size: 18px;
}

body[data-scheme=dark] .download-locked h3 {
color: #fff;
}

.download-locked p {
color: #666;
margin-bottom: 20px;
}

body[data-scheme=dark] .download-locked p {
color: #aaa;
}

.download-locked .btn-login,
.download-locked .btn-purchase {
display: inline-block;
padding: 8px 25px;
background: #3858f6;
color: #fff;
border-radius: 6px;
text-decoration: none;
transition: all 0.3s ease;
}

.download-locked .btn-login:hover,
.download-locked .btn-purchase:hover {
opacity: 0.9;
transform: translateY(-1px);
}

/* 响应式布局 */
:root {
--primary-color: #3858f6;
--hover-color: rgba(255, 255, 255, 0.25);
--text-color: #E8E8F6;
--dark-bg: rgba(20, 20, 25, 0.6);
}

@media (max-width: 700px) {
.free-download-label {
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  /*background: linear-gradient(to bottom right, hsl(0, 0%, 25%) 0%, hsla(0, 0%, 25%, 0) 50%);*/
  border-radius: 0 0 15px 0;
  z-index: 3;
}

.cloud-tabs {
  width: 100%;
  justify-content: space-between;
  padding: 0 10px;
}

.cloud-tab {
  flex: 1;
  width: auto;
  padding: 10px 5px;
  font-size: 14px;
}

.glider {
  width: 33.33%;
}

.download-item {
  flex-direction: column;
  align-items: flex-start;
  padding: 12px;
}

.file-info {
  margin-right: 0;
  margin-bottom: 10px;
}
}

/* 无下载链接样式 */
.no-download-links {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
color: #A8A8B6;
text-align: center;
}

.no-download-links svg {
margin-bottom: 15px;
width: 48px;
height: 48px;
opacity: 0.6;
}

.no-download-links p {
font-size: 16px;
margin: 0;
}

body[data-scheme=dark] .no-download-links {
background: rgba(20, 20, 25, 0.4);
}

/* 响应式样式 */
/* 下载包装器样式 */
.download-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
transition: opacity 0.2s ease;
position: relative;
z-index: 3;
}

.download-wrapper .download-item {
flex: 1;
margin-bottom: 0;
margin-right: 12px;
}


@media (max-width: 768px) {
.movie-download-container {
  margin: 15px -15px;
  border-radius: 0;
}

.cloud-tab {
  padding: 8px 15px;
}

.download-wrapper {
  flex-direction: column;
  align-items: stretch;
}

.download-wrapper .download-item {
  margin-right: 0;
  margin-bottom: 8px;
}

.file-info {
  margin-right: 0;
  width: 100%;
}

.file-name {
  max-width: 100%;
  font-size: 14px;
}

.unzip-password-copied {
  right: auto;
  left: 50%;
  top: -40px;
  transform: translateX(-50%) translateY(10px);
}

.unzip-password-copied.show {
  transform: translateX(-50%) translateY(0);
}

/* 增强移动端下载按钮样式 */
.download-btn.metal {
  width: 100%;
  font-size: 16px;
  padding: 12px 16px;
  margin-top: 5px;
  min-height: 48px;
  display: block;
  text-align: center;
  /* 确保没有被其他元素遮挡 */
  position: relative;
  z-index: 10;
  /* 添加触摸反馈效果 */
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
}

/* 添加点击状态样式 */
.download-btn.metal:active,
.download-btn.metal.downloading {
  transform: translateY(1px);
  box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.2) inset;
  background: var(--bg-two);
}
}

/* 添加右侧内容样式 */
.right-content {
width: 100%;
padding: 26px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.movie-download-meta-box {
padding: 10px;
}





.movie-download-section1 {
    padding: 15px;
    position: relative;
    border-radius: 20px;
    margin: auto;
    border: 1px solid rgb(179 160 255 / 70%);
    /* border-radius: .5em .5em 1.5em; */
    box-shadow: 0 5px 8px #2600961a, 0 0 0 1px var(--white-default) inset;
    background: radial-gradient(at top left, rgb(179 160 255 / 66%), rgb(130 185 255 / 86%));
}

.format-content.active {
display: block;
animation: fadeIn 0.3s ease;
}
.download-btn.metal {
    width: auto;
    height: auto;
    border-radius: 100px;
    cursor: pointer;
    position: relative;
    padding: 8px 16px;
    border: 3px solid transparent;
    outline-color: red;
    outline-offset: 4px;
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0) inset, 0 10px 14px -10px hsl(0 0% 50%);
    
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 5;
    
    --shade-one: hsl(0 0% 10%);
    --shade-two: hsl(0 0% 70%);
    --shade-three: hsl(0 0% 68%);
    --shade-four: hsl(0 0% 98%);
    --shade-five: hsl(0 0% 48%);
    --shade-six: hsl(0 0% 26%);
    --shade-seven: hsl(0 0% 50%);

    --border: linear-gradient(var(--shade-one) 50%, var(--shade-two)) border-box;
    --bg-one: linear-gradient(var(--shade-three), var(--shade-three)) padding-box;
    --bg-two: linear-gradient(
        var(--shade-four) 5%,
        var(--shade-five) 35%,
        var(--shade-six) 50%,
        var(--shade-five) 65%,
        var(--shade-four) 95%
    ) border-box;
    --radial: radial-gradient(
        160% 110% at 50% 100%,
        var(--shade-seven),
        transparent 60%
    ) padding-box;

    background: var(--radial), var(--bg-one), var(--bg-two);
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.2s ease;
}

.download-btn.metal::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 1px solid transparent;
    border-radius: 100px;
    background: var(--border);
    -webkit-mask: radial-gradient(#000, #000) padding-box, radial-gradient(#000, #000) border-box;
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

.download-btn.metal:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.4);
}

.download-btn.metal:active {
    transform: translateY(1px);
    box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
    .download-btn.metal {
        --shade-one: hsl(0 0% 78%);
        --shade-six: hsl(0 0% 68%);
        color: #333;
    }
}   

/* 调整响应式布局 - 优化手机端 tab 显示 */
@media (max-width: 767px) {
  .movie-download-section1 {
    padding: 15px 12px;
    border-radius: 16px;
  }
  
  .free-download-label {
    padding: 8px 10px;
    font-size: 15px;
    border-radius: 0 0 12px 0;
  }
  
  .right-content {
    padding: 20px 10px;
  }
  
  /* 优化云盘标签布局 */
  .cloud-tabs {
    position: relative;
    width: 100%;
    right: auto;
    top: auto;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow-x: auto; /* 允许横向滚动 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* 更流畅的滚动 */
    scrollbar-width: none; /* 隐藏滚动条 Firefox */
    padding: 0;
  }
  
  /* 隐藏滚动条 - Chrome/Safari */
  .cloud-tabs::-webkit-scrollbar {
    display: none;
  }
  
  .cloud-tab {
    min-width: 100px; /* 设置最小宽度 */
    width: auto;
    padding: 0 12px;
    font-size: 14px;
    flex-shrink: 0; /* 防止挤压 */
    height: 44px;
  }
  
  .glider {
    height: 44px;
    border-radius: 12px;
  }
  
  /* 调整图标大小 */
  .cloud-tab .icon {
    height: 1.2rem;
    width: 1.2rem;
    margin-right: 4px;
  }
  
  /* 调整内容区域 */
  .download-contents {
    margin-top: 20px; /* 缩小顶部间距 */
  }
  
  /* 优化下载项目 */
  .download-item {
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 8px;
  }
  
  /* 修复滑块跟随效果 */
  .cloud-tabs input[id="cloud-tab-1"]:checked ~ .glider {
    transform: translateX(0);
    width: var(--tab-width-1, 100px); /* 使用CSS变量动态设置宽度 */
    left: var(--tab-left-1, 0);
  }
  
  .cloud-tabs input[id="cloud-tab-2"]:checked ~ .glider {
    width: var(--tab-width-2, 100px);
    transform: translateX(var(--tab-left-2, 100px));
  }
  
  .cloud-tabs input[id="cloud-tab-3"]:checked ~ .glider {
    width: var(--tab-width-3, 100px);
    transform: translateX(var(--tab-left-3, 200px));
  }
  
  .cloud-tabs input[id="cloud-tab-4"]:checked ~ .glider {
    width: var(--tab-width-4, 100px);
    transform: translateX(var(--tab-left-4, 300px));
  }
  
  .cloud-tabs input[id="cloud-tab-5"]:checked ~ .glider {
    width: var(--tab-width-5, 100px);
    transform: translateX(var(--tab-left-5, 400px));
  }
  
  /* 下载按钮区域优化 */
  .download-wrapper {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  .download-wrapper .download-item {
    margin-right: 0;
    margin-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: rgba(40, 40, 45, 0.4);
    border: none;
  }
  

  
  /* 增加下载按钮的可点击性 */
  .download-btn.metal::before {
    content: '';
    position: absolute;
    inset: -10px;
    z-index: -1;
  }
  
  .download-btn.metal:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  }
  
  .download-btn.metal.downloading {
    color: rgba(255, 255, 255, 0.8);
    background: var(--bg-one);
  }
  
  /* 调整解压密码容器在移动端的样式 */
  .unzip-password-container {
    margin: 15px auto 5px;
    padding: 10px 15px;
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  
  .unzip-password-label {
    font-size: 14px;
  }
  
  .unzip-password-value {
    width: 100%;
    padding: 8px;
    font-size: 13px;
  }
  
  /* 所有文件名的显示调整 */
  .file-name {
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 2px;
  }
  
  /* 修复闪烁问题 */
  .download-content.active {
    opacity: 1 !important;
    display: block !important;
    animation: fadeIn 0.25s ease;
  }
  
  /* 解决云盘多标签导航问题 */
  .cloud-tabs {
    display: flex;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
  }
  
  .cloud-tab {
    scroll-snap-align: start;
    scroll-behavior: smooth;
  }
  
  /* 美化滚动标签提示效果 */
  .cloud-tabs::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(to left, 
      rgba(90, 70, 200, 0.7) 0%, 
      rgba(90, 70, 200, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: 0 12px 12px 0;
    z-index: 3;
  }
  
  .cloud-tabs.has-overflow::after {
    opacity: 1;
  }
  
  /* 添加左侧阴影指示器 */
  .cloud-tabs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(to right, 
      rgba(90, 70, 200, 0.7) 0%, 
      rgba(90, 70, 200, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: 12px 0 0 12px;
    z-index: 3;
  }
  
  /* 当滚动到边缘时隐藏相应的阴影 */
  .cloud-tabs.scrolled-end::after {
    opacity: 0;
  }
  
  .cloud-tabs:not(.scrolled-start)::before {
    opacity: 1;
  }
  
  /* 激活状态的标签更醒目 */
  .cloud-tabs input[type="radio"]:checked + .cloud-tab {
    color: #ffffff;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
  
  /* 标签滚动行为 */
  .cloud-tabs {
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 5px;
    scroll-padding: 10px;
    scroll-snap-type: x mandatory;
  }
  
  /* 改进下载中状态 */
  .download-btn.metal.downloading {
    background: linear-gradient(to right, rgba(60, 60, 70, 0.9), rgba(40, 40, 50, 0.9));
    position: relative;
    overflow: hidden;
  }
  
  /* 标签中的图标更小一些 */
  .cloud-tab .icon {
    margin-right: 2px;
  }
  
  /* 下载按钮点击时的视觉反馈 */
  .download-btn.metal:active::after {
    opacity: 0.7;
  }
}   

/* 针对超小屏幕的优化 */
@media (max-width: 360px) {
  .cloud-tab {
    min-width: 85px;
    padding: 0 8px;
    font-size: 13px;
  }
  
  .cloud-tab .icon {
    height: 1rem;
    width: 1rem;
  }
  
  .file-name {
    font-size: 13px;
  }
  
  .download-btn.metal {
    font-size: 15px;
    padding: 10px;
  }
  
  .free-download-label {
    font-size: 14px;
    padding: 6px 8px;
  }
}   

/* 标签点击反馈 */
@keyframes tabPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.cloud-tab.tab-clicked {
  animation: tabPulse 0.3s ease;
}

/* 触摸反馈样式 */
.download-btn.metal.touch-active {
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.4) inset;
  transform: translateY(1px);
  transition: all 0.1s ease;
}

/* 移动端特定样式 */
body.is-mobile-device .cloud-tabs {
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
}

body.is-mobile-device .download-btn.metal {
  touch-action: manipulation;
}

/* 下载进度动画 */
.download-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
  animation: progressAnimation 1.5s infinite linear;
  border-radius: 0 0 10px 10px;
}

@keyframes progressAnimation {
  0% {
    width: 0;
    opacity: 0.8;
  }
  50% {
    width: 70%;
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0.8;
  }
}

/* 美化滚动标签提示效果 */
@media (max-width: 767px) {
  /* 添加一个提示阴影，暗示还有更多标签可以滚动 */
  .cloud-tabs::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(to left, 
      rgba(90, 70, 200, 0.7) 0%, 
      rgba(90, 70, 200, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: 0 12px 12px 0;
    z-index: 3;
  }
  
  .cloud-tabs.has-overflow::after {
    opacity: 1;
  }
  
  /* 添加左侧阴影指示器 */
  .cloud-tabs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(to right, 
      rgba(90, 70, 200, 0.7) 0%, 
      rgba(90, 70, 200, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: 12px 0 0 12px;
    z-index: 3;
  }
  
  /* 当滚动到边缘时隐藏相应的阴影 */
  .cloud-tabs.scrolled-end::after {
    opacity: 0;
  }
  
  .cloud-tabs:not(.scrolled-start)::before {
    opacity: 1;
  }
  
  /* 激活状态的标签更醒目 */
  .cloud-tabs input[type="radio"]:checked + .cloud-tab {
    color: #ffffff;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
  
  /* 标签滚动行为 */
  .cloud-tabs {
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 5px;
    scroll-padding: 10px;
    scroll-snap-type: x mandatory;
  }
  
  /* 改进下载中状态 */
  .download-btn.metal.downloading {
    background: linear-gradient(to right, rgba(60, 60, 70, 0.9), rgba(40, 40, 50, 0.9));
    position: relative;
    overflow: hidden;
  }
  
  /* 标签中的图标更小一些 */
  .cloud-tab .icon {
    margin-right: 2px;
  }
  
  /* 下载按钮点击时的视觉反馈 */
  .download-btn.metal:active::after {
    opacity: 0.7;
  }
}