.youtube-downloader-page .search-box,
.youtube-downloader-page .search-result-box {
  width: min(800px, calc(100% - 30px));
  max-width: 800px;
}

.search-result-box .download-result-card {
  width: 100%;
  margin: 15px 0 0 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(23, 34, 58, .12);
  background-color: #fff !important;
}

.search-result-box .search-result-error {
  margin-top: 20px;
  padding: 24px;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.search-result-box .search-result-error .noresult-desc {
  margin-right: auto;
  margin-left: auto;
  color: #2278b5;
}

.search-result-box .search-result-error .noresult-icon {
  margin-top: 22px;
  width: 300px;
  height: 260px;
  margin: 0 auto;
  background: url("/images/noresults.png") no-repeat;
}

.search-result-box .cover{
    position: relative;
    width:280px;
    height:150px;
    background: #000;
    overflow: hidden;
    border-radius: 8px;
}

.search-result-box .download-result-summary {
  display: flex;
  min-width: 0;
}

.search-result-box .cover,
.search-result-box .preview-box {
  flex: 0 0 280px;
  width: 280px;
  height: 158px;
  border-radius: 8px;
}

.search-result-box .search-item-body {
    padding: 0px 5px 10px 20px;
    text-align: left;
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    flex:1;
    border-bottom: solid 1px rgba(0,0,0,0.12);
    min-width: 0;
    overflow-wrap: anywhere;
}

.search-result-box .search-btn-detail {
    margin-top: auto;   /* 关键：把按钮推到底部 */
}

.search-result-box .btn {
    min-width: 190px;
    min-height: 50px;
    margin: 0px 20px 0px 0px;
    letter-spacing: 0;
    box-shadow: 0 10px 24px rgba(182, 147, 86, 0.24);
}

.search-result-box .btn,
.search-result-box .btn:visited {
  border-color: #1677ff;
  background: #1677ff;
  color: #fff;
  text-decoration: none;
}

.search-result-box .btn:hover,
.search-result-box .btn:focus,
.search-result-box .btn:active {
  border-color: #0864d9;
  background: #0864d9;
  color: #fff;
  text-decoration: none;
}

.search-result-box .title-text {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height:18px;
    color: #0f0f0f;

    overflow: hidden;         /* 超出隐藏 */
    text-overflow: ellipsis;  /* 超出显示 ... */
    display: block;           /* 确保是块级（p 默认是块级，可保留） */
    max-width: 100%;          /* 或指定具体宽度，根据父容器限制 */
}

.search-result-box .description {
    margin: 0;
    font-size: 12px;
    color: #606060;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%; 
}

.download-result-summary .viewcount {
    margin:2px 0 2px 0;
    font-size: 11px;
    color: #606060;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%; 
}

.download-result-summary .btn >img {
  height:26px; 
  padding-right:6px;
}

.search-result-box .parse-container {
    display: flex;
    flex-direction: column;
    padding: 10px 0 10px 0;
}

.search-result-box ul {
    margin: 0;
    padding: 0;
    outline: none;
}

.search-result-box li {
  display: list-item;
  unicode-bidi: isolate;
}

.search-result-box .format,
.search-result-box .size {
    width: 25%;
    font-size: 14px;
    color: #00000080
}

.detail-item .quality {
    width: 20%;
    font-size: 16px;
    color: #00000080;
}

.detail-item .quality>span {
    position: relative
}

.detail-item .quality>span[data-hd=true]:after,
.detail-item .quality>span[data-hq=true]:after {
    position: absolute;
    right: -32px;
    padding: 3px 4px;
    border: 1px solid #f5a635;
    transform: scale(.8);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #f5a635
}

.detail-item .quality>span[data-hd=true]:after {
    content: "HD"
}

.detail-item .quality>span[data-hq=true]:after {
    content: "HQ"
}

.parse-container .item-download {
    display: flex;
    margin-top: 10px;
    text-align: left;
    align-items: center;
}

.parse-container .detail-title {
    position: relative;
    padding-left: 35px;
    font-size: 16px;
    font-weight: 200;
    color: #495057;
    background: no-repeat left center;
    background-size: 16px;
    text-align: left;
    margin: 10px 0 0 0;
}

.parse-container .detail-title[data-type=audio] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB/ElEQVRYhe2YTY8NQRSGn/fOncwYCfGRYYSEBRFigQUWIrGy4S/4XZYSP8AfsMFGYkHEjjAbH4nPGTMT13DkJNW01nNNVd2usegnqVQv+vR5uruqq+vIzNgqJE0BO4FdwO7Q149HnQtKmm1JXB3vAAbj4ocTEFBI1JSo+m05148WlHQIOFUT8jaVIzGOlCd4GTjSlVCTse9/A1RKjkTBovSCufSCkXwH3gPPgCUm8aFOYAX4AHwEPoW+aksWljZJV4DzXQiuN5L+0czsW8zFcgTfAq+bT8LMljOu+RepgmvADTP7MUmZNlInydcScvSfmQnQC+bSC+bSC2Yw+G8FJfkKd5At+ptxgQPACWAB2A7MNk7xrepMcUFJc8A14PhmY4oJSpoGrgP7YuJSxuBMQoxzIVaOticoyYs5+1tKFoMwZhbC/18sxxJifgtKOglcDHJdkFSjGYbiz1XgTEdiFZ+BPbEx/trOFpBzHqXEuOC5DmTaeAI8jjh/EbjnY3BvCTvfTkq6DbwCLgFzG5w6Ah4Ad81sfRi2idOR+dZSJT25pIfA4dpK4vNgNewUX5jZqIpxwZfA0chciymCNVGvIDwPbSw+Bu+EksNm8crA/RzBGAZm9ga4FRL/i3fATTP7UkrwV5U/VONPh4V8vvZhdRm/iac+E33glpID+AkZB4D+89m9PAAAAABJRU5ErkJggg==)
}

.parse-container .detail-title[data-type=video] {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAoCAYAAAC4h3lxAAADkElEQVRYhc2Zy2sUQRCHv52dTWKCSQyE+MJ4UFRU0JsXPSiIN+8KEvUi3vxzxJsHBREV30TxRfBBDj5BUQ/RHHyA7yibjZuVlupY9u7MzmZ6dvcHwzazXdVV1VOPrs7xD33AdmAt0Knel+Wx4xkZV4BpNS7KLzLH0vyWx2AWKCneRTX+BbwF3tMArAKDwAGgS72bLyoRdEn5PgfOKEPFIi+M98kOZCF8rkG+xphLgadJJofASmBIvXsMTIgwBVES+S3IOAA6FE2XGncqgV36DqWQ/kw71X8Gq4A1wIukCljLvQbOJtE8A/QAe8T6BhuSKBCI9Sqi/USLhDf4CdxUOzQUM9fIvA7oDmtEnFZiSq3dESFHrwScfhOxwhYLHIdSjf8GVMAxWGwVsM5TjOeZOQoxCwyI5Xt0VAs9hE6fyEfwGhLLd7vyhk7YayeUlfAjUUk2aEPBLYwPLAcOOsKP6UmuAtM0jgUeDaF9oF8+m4IS/jZwXROEzuJRdUwUzDd7BPgGXATepFRA+0Cvyk+I4GMuQeCUAY2iIPHa1C/7gd3iaD6ghb9aS3hkB3xis9Qw14BH89hRDSv8JWA8apIPH3DRLTsxIjvTCLQPGOXPxQlvFUjjA3EYBg4BO+okKA3tAzOyi7EInFrIN4xAW4HDwOosFmhWHlgE7JW47hVZ+EAU3gGf68xJ+qnNIW0eSIKS1PkP5FAfh6haKFaBqLrbB8wB/QrwPasFsjoPfAUuAy8z4j8HV4G0PmA+kXvAraRtEQcF4RHIeAtwP47APQ+k8YFJ4ALwMQUP7QNGrl3AMuB8lEHS+kBRLPTBQ+mgYfkYJTbKmeAk8MWd6CMPmELroecIZgs5y3NQsnpVMmxmHkgCnQfGVXmeky/F9I22uQr48gEf0D5g+kTHgbvqXU4a0P8p0HD2axJm5RkFTkuHu8rA7XomDpy+0DPgmOSXqoka7eQDLkx4Pgq8Uu/LrgLt5AO1YML2CeCGhNTR0Dl7LgR+NF/uOeigElX4GXnvyPOXQJe4O1vo1Hk5xVkFEhkylAsNG5pM1lsvDmSdyL0Lm1bW0fdfUfdnOD3XkqK3d2l5WbdP0U8mVcCUApvk1JRTrZZ67Za0d2FR/CoSdabqESCal6VuH5ZmUiOLuUjTY7W0n4BTamcTEdnxCmCJsn6tuyxLY1K7jWJmJ21p7t6F6bsv9/5Mr28y7xNpHyZr8wN/AOIPtiyaImzTAAAAAElFTkSuQmCC)
}

.parse-container .download-action {
  background-color: #f28a5c;
  padding: 0;
  width: min(220px, 100%);
  height: 43px;
  white-space: normal;
  border-radius: 5px;
}

.parse-container .btn {
  height: 43px;
  width: min(190px, 100%);
}

.parse-container .btn >img {
  height:25px; 
  padding-right:2px;
}

/* loading begin ================================ */

/* 卡片式容器 —— 让加载区域更聚焦 */
    .loadingcard {
      width: 100%;
      padding: 0;
      text-align: center;
    }

    /* 加载点 —— 更精致的三点弹跳 */
    .loading-dots {
      position: relative;
      width: 90px;              /* 圆环直径 */
      height: 90px;
      margin: 0 auto 1.75rem;
      /* 可选：让整个圆环自转，速度更慢更优雅 */
      animation: spin 6s linear infinite;
    }

    .loading-dots .dot {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.9rem;            /* 点变小一点，8个点才不拥挤 */
      height: 0.9rem;
      margin: -0.45rem 0 0 -0.45rem;  /* 自身一半，让中心对准圆心 */
      border-radius: 50%;
      background: #0864d9;
      box-shadow: 0 4px 10px -2px rgba(8, 100, 217, 0.3);
      /* 半径 = 容器一半 - 点一半 - 一点内边距 ≈ 36px */
      animation: fade 1.2s infinite ease-in-out both;
    }

    .loading-dots .dot:nth-child(1) { --rot: 0deg;   animation-delay: -1.05s; }
    .loading-dots .dot:nth-child(2) { --rot: 45deg;  animation-delay: -0.9s;  }
    .loading-dots .dot:nth-child(3) { --rot: 90deg;  animation-delay: -0.75s; }
    .loading-dots .dot:nth-child(4) { --rot: 135deg; animation-delay: -0.6s;  }
    .loading-dots .dot:nth-child(5) { --rot: 180deg; animation-delay: -0.45s; }
    .loading-dots .dot:nth-child(6) { --rot: 225deg; animation-delay: -0.3s;  }
    .loading-dots .dot:nth-child(7) { --rot: 270deg; animation-delay: -0.15s; }
    .loading-dots .dot:nth-child(8) { --rot: 315deg; animation-delay: 0s;    }

    /* 每个点先旋转到对应角度，再沿 Y 轴负方向平移半径 */
    .loading-dots .dot {
      transform: rotate(var(--rot)) translateY(-36px);
    }

    /* 用透明度+缩放做「追逐」脉冲，而不是整体跳动 */
    @keyframes fade {
      0%, 100% {
        transform: rotate(var(--rot)) translateY(-36px) scale(0.6);
        opacity: 0.25;
      }
      50% {
        transform: rotate(var(--rot)) translateY(-36px) scale(1);
        opacity: 1;
      }
    }

    /* 主要加载文案 */
    .loading-text {
      font-size: 1.5rem;
      font-weight: 500;
      color: #1a2c3e;
      letter-spacing: -0.01em;
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.3rem;
    }

    .loading-text span {
      display: inline-block;
    }

    /* 次级提示 —— 等待稍久？ */
    .hint-mild {
      font-size: 16px;
      font-weight: 500;
      color: #d56903;
      padding: 0;
      margin: 1.25rem;
      letter-spacing: 0.3px;
    }

    /* 推荐桌面版区块 —— 更突出、更现代 */
    .recommend-box {
      background: rgba(130, 176, 236, 0.25);
      border-radius: 8px;
      padding: 1.2rem 0 1rem 0;
      border: 1px solid rgba(6, 106, 236, 0.35);
      transition: background 0.2s;
    }

    .recommend-box:hover {
      background: #e8f2fe;
    }

    .recommend-main {
      font-size: 16px;
      font-weight: 500;
      color: #0864d9;
      margin-bottom: 0.6rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .recommend-link {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      text-decoration: none;
      background: #007bff;
      padding: 0.75rem 3.2rem;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      transition: all 0.2s ease;
      border: 1px solid #032e5c;
    }

    .recommend-link:hover {
      background: #0864d9;
      color: #fff;
      border-color: #0864d9;
      transform: translateY(-1px);
      box-shadow: 0 8px 18px -6px rgba(0, 203, 230, 0.4);
    }

    .recommend-link:active {
      transform: translateY(0);
    }

    .recommend-link .arrow {
      font-size: 1.2rem;
      transition: transform 0.2s;
    }

    .recommend-link:hover .arrow {
      transform: translateX(3px);
    }
    /* loading end ================================ */
    
@media (max-width: 480px) {
  /* loading card adjustments for small screens */
      .loading-text {
        font-size: 1.3rem;
      }

      .hint-mild {
        font-size: 1rem;
        padding: 0.3rem 1rem;
      }

      .recommend-main {
        font-size: 1.15rem;
      }

      .recommend-link {
        font-size: 1.1rem;
        padding: 0.3rem 1rem;
      }

      .loading-dots .dot {
        width: 0.9rem;
        height: 0.9rem;
      }
    /* loading end================================ */
   
    
}



@media (max-width: 767.98px) {
  .youtube-downloader-page .search-box,
  .youtube-downloader-page .search-result-box {
    width: calc(100% - 2px);
  }

  .search-result-box .download-result-summary {
    flex-direction: column;
  }

  .search-result-box .search-result-error {
    padding: 18px 14px 24px;
  }

  .search-result-box .search-result-error .noresult-icon {
    max-width: 100%;
    background-size: contain;
    background-position: center;
  }

  .search-result-box .search-result-error .product-guide-download{
    position:relative;
    display:inline-block;
    margin-top:16px;
    padding:16px 24px 16px 60px;
    border-radius:8px;
    line-height:16px;
    background:linear-gradient(0deg,#2695fc,#52b4fe);
    font-size:16px;
    text-decoration:none;
    color:#fff;
    cursor:pointer;
  }

  .search-result-box .cover,
  .search-result-box .preview-box {
    flex-basis: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .search-result-box .search-item-body {
    padding: 16px;
  }

  .search-result-box .search-btn-detail {
    margin-top:20px;
    justify-content: center;
    display: flex;
  }

  .search-result-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
    outline: none;
  }

  .search-result-box .format,
  .search-result-box .size {
    width: 18%;
    font-size: 14px;
  }

  .parse-container .btn {
    width: min(150px, 100%);
    min-width: 150px;
    margin: 0;
    padding: 0;
  }

  .parse-container .item-download {
    margin-top: 14px
  }

  .detail-item .quality {
    width: 45%;
}

}