* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
  background: #f5f7fb;
  color: #1f2329;
}

/* ================= 页面居中容器 ================= */
.containera {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  margin-top:-180px;
  position: relative;
}

/* ================= 上传卡片 ================= */
.upload-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 48px 24px;
  border: 1px dashed #c9ddff;
  text-align: center;
  position: relative;
}

.upload-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: #f2f6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #3b82f6;
}

.upload-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
}

.upload-desc {
  font-size: 12px;
  color: #86909c;
}

.upload-card input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* ================= 文件已选择态 ================= */
.upload-card.has-file {
  background: #f2fbf6;
  border: 1px dashed #7bdcb5;
}

.upload-card.has-file .upload-default {
  display: none;
}

.file-preview {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.upload-card.has-file .file-preview {
  display: flex;
}

.file-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.file-name {
  font-size: 14px;
  font-weight: 500;
  color: #1f2329;
  word-break: break-all;
}

.file-meta {
  font-size: 12px;
  color: #86909c;
}

.file-status {
  flex-shrink: 0;
  font-size: 12px;
  color: #1e8e3e;
  background: #e6f4ea;
  border: 1px solid #b7e1cd;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
}

/* ================= 操作区 ================= */
.action-bar {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.action-bar button {
  padding: 10px 28px;
  border-radius: 6px;
  border: none;
  background: #3b82f6;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.action-bar button#resetBtn {
  background: #e5e7eb;
  color: #374151;
}

.action-bar button#clipBtn {
  background: #10b981;
}

.action-bar button:disabled {
  background: #c0c4cc;
  cursor: not-allowed;
}

/* ================= 进度条 ================= */
.progress {
  margin-top: 20px;
  background: #ebeef5;
  border-radius: 6px;
  overflow: hidden;
  height: 10px;
  display: none;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transition: width .2s;
}

/* ================= 状态 / 结果 ================= */
.status {
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
}

.status.error {
  color: #f56c6c;
}

.result {
  margin-top: 20px;
  width: 100%;
  min-height: 180px;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 16px;
  font-size: 13px;
  line-height: 1.7;
  border: 1px solid #E3E2E2;
  resize: vertical;
  display: none;
}

/* ================= 剪辑结果 ================= */
.clip-result {
  margin-top: 28px;
}

.clip-result h3 {
  font-size: 14px;
  margin-bottom: 12px;
}

.clip-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ================= 剪辑结果 · 图1样式 ================= */

/* 单个剪辑卡片 */
.clip-item {
  background: #f7f8fa;
  border-radius: 12px;
  padding: 14px 16px 16px;
  border: 1px solid #E3E2E2;
}

/* 顶部行：标题 + 下载 */
.clip-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.clip-item-title {
  font-size: 14px;
  font-weight: 500;
  color: #1f2329;
}

/* 下载按钮 */
.clip-download {
  font-size: 12px;
  color: #3b82f6;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid #c9ddff;
  border-radius: 999px;
  background: #ffffff;
}

.clip-download:hover {
  background: #f2f6ff;
}

/* URL 行（图1：播放条上方那行） */
.clip-url {
  font-size: 12px;
  color: #86909c;
  word-break: break-all;
  margin-bottom: 6px;
}

.clip-url a {
  color: #86909c;
  text-decoration: none;
}

.clip-url a:hover {
  text-decoration: underline;
}

/* 原生 audio 播放条 */
.clip-item audio {
  width: 100%;
  margin-top: 0;
}

/* 底部信息行：时长 / 大小 */
.clip-item-footer {
  margin-top: 6px;
  font-size: 12px;
  color: #86909c;
  display: flex;
  justify-content: space-between;
}

/* ================= 弹窗 ================= */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal {
  width: 520px;
  max-width: 92%;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}

.modal-header {
  padding: 14px 16px;
  border-bottom: 1px solid #eef0f4;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 15px;
  margin: 0;
}

.modal-close {
  cursor: pointer;
  font-size: 18px;
}

.modal-body {
  padding: 16px;
}

.time-range {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.time-range input {
  width: 90px;
  padding: 6px;
  font-size: 13px;
}

.time-range .remove {
  color: #f56c6c;
  cursor: pointer;
  font-size: 12px;
}

.add-range {
  margin-top: 8px;
  background: #f2f6ff;
  border: 1px dashed #c9ddff;
  padding: 8px;
  width: 100%;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
}

/* ================= 弹窗底部 ================= */
.modal-footer {
  padding: 12px 16px;
  border-top: 1px solid #eef0f4;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-footer .btn {
  padding: 8px 18px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 13px;
}

.modal-footer .btn.cancel {
  background: #e5e7eb;
}

.modal-footer .btn.primary {
  background: #3b82f6;
  color: #ffffff;
}

/* ======================= 手机端适配（仅追加，不改桌面规则） ======================= */
@media (max-width: 768px) {

  /* 页面容器：更紧凑，避免横向溢出 */
  .containera {
    max-width: 100%;
    padding: 18px 12px 40px;
  }

  /* 上传卡片：缩小内边距 */
  .upload-card {
    padding: 28px 14px;
    border-radius: 14px;
  }

  /* 已选择态：信息区域改为上下布局，避免挤压 */
  .file-preview {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .file-status {
    align-self: flex-start;
  }

  /* 操作区按钮：自动换行、全宽，避免手机端挤成一团 */
  .action-bar {
    flex-wrap: wrap;
    gap: 10px;
  }

  .action-bar button {
    width: 100%;
    padding: 11px 14px;
  }

  /* 结果框：更适合手机阅读 */
  .result {
    padding: 14px;
    min-height: 160px;
  }

  /* 剪辑卡片：标题与下载按钮上下排列，防止一行塞不下 */
  .clip-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .clip-item-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* 弹窗：贴近底部的抽屉风格，避免超屏 */
  .modal-mask {
    align-items: flex-end;
  }

  .modal {
    width: 100%;
    max-width: 100%;
    border-radius: 12px 12px 0 0;
    max-height: 92vh;
  }

  .modal-body {
    max-height: 64vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 时间区间：防止一行挤爆 */
  .time-range {
    flex-wrap: wrap;
  }

  .time-range input {
    width: 100px;
  }
}

@media (max-width: 480px) {

  /* 上传区文案稍微缩小，避免换行过多 */
  .upload-title {
    font-size: 15px;
  }

  .upload-desc {
    font-size: 12px;
  }

  /* 时间区间：小屏改为竖排更稳 */
  .time-range {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .time-range input {
    width: 100%;
  }

  /* 弹窗底部按钮：两按钮并排或换行都可，保证可点 */
  .modal-footer {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .modal-footer .btn {
    width: 100%;
  }
}