/* Page layout */
  .page-body { background: var(--bg-base-default); min-height: 100vh; padding: 0; overflow-x: hidden; }
  /* 顶部导航栏 */
  .navbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    height: 56px; padding: 0 var(--spacer-24);
    background: var(--bg-base-secondary); border-bottom: 1px solid var(--border-neutral-l1);
  }
  .navbar__brand {
    display: inline-flex; align-items: center; gap: var(--spacer-8);
    font-family: var(--heading-sm-font-family); font-size: var(--heading-sm-font-size);
    line-height: var(--heading-sm-line-height); font-weight: var(--heading-sm-font-weight);
    color: var(--text-default); text-decoration: none;
  }
  .navbar__brand-icon { width: 36px; height: 36px; object-fit: contain; }
  .navbar__nav { display: inline-flex; align-items: center; gap: var(--spacer-4); }
  .navbar__link {
    display: inline-flex; align-items: center; gap: var(--spacer-6);
    height: 32px; padding: 0 var(--spacer-12); border-radius: var(--radius-8);
    font-size: var(--body-base-font-size); line-height: var(--body-base-line-height);
    color: var(--text-secondary); text-decoration: none; transition: background .12s ease, color .12s ease;
  }
  .navbar__link:hover { background: var(--bg-overlay-l2); color: var(--text-default); }
  .navbar__link.is-active { background: var(--bg-overlay-l1); color: var(--text-default); font-weight: var(--font-weight-medium); }
  .navbar__divider { width: 1px; height: 20px; background: var(--border-neutral-l1); margin: 0 var(--spacer-8); }
  .navbar__user { display: inline-flex; align-items: center; gap: var(--spacer-8); font-size: var(--body-sm-font-size); color: var(--text-secondary); }

  .main-wrap { max-width: 1600px; margin: 0 auto; padding: var(--spacer-24) var(--spacer-24) var(--spacer-32); }
  .page-header { text-align: center; margin-bottom: var(--spacer-16); }
  .page-header h1 {
    font-size: var(--heading-xl-font-size); line-height: var(--heading-xl-line-height);
    font-weight: var(--heading-xl-font-weight); color: var(--text-default); margin-bottom: var(--spacer-8);
  }
  .page-header p { font-size: var(--heading-sm-font-size); line-height: var(--heading-sm-line-height); color: var(--text-secondary); }

  .config-card { margin-bottom: var(--spacer-24); }
  .config-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacer-20); align-items: start; }
  @media (max-width: 720px) { .config-grid { grid-template-columns: 1fr; } }
  .config-field { display: flex; flex-direction: column; gap: var(--spacer-8); }
  .config-field__label {
    font-size: var(--body-base-font-size); line-height: var(--body-base-line-height);
    font-weight: var(--font-weight-medium); color: var(--text-default);
  }
  .config-field__hint { font-size: var(--body-sm-font-size); line-height: var(--body-sm-line-height); color: var(--text-tertiary); }

  /* 处理速度滑动条：浅灰轨道，滑块左侧才有渐变+像素马赛克（跟随填充宽度），白色大滑块浮于上方 */
  .speed-value { float: right; font-weight: var(--font-weight-regular); color: var(--text-brand); font-size: var(--body-sm-font-size); }
  .speed-slider { position: relative; padding: 0; user-select: none; width: 100%; box-sizing: border-box; }
  .speed-slider__track {
    position: relative; height: 32px; width: 100%; box-sizing: border-box;
    border-radius: var(--radius-8);
    /* 未填充段：浅灰底 */
    background: var(--bg-overlay-l1);
    border: 1px solid var(--border-neutral-l1);
    cursor: pointer; overflow: hidden;
  }
  /* 填充段：宽度跟随档位，内部渐变 + 像素马赛克；右侧超出部分被裁剪 */
  .speed-slider__fill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 50%;
    border-radius: calc(var(--radius-8) - 1px) 0 0 calc(var(--radius-8) - 1px);
    background: linear-gradient(90deg, #ECEAFB 0%, #C9C5F8 38%, #8B84F0 72%, var(--bg-brand) 100%);
    overflow: hidden; transition: width .15s ease;
  }
  .speed-slider__pixels {
    position: absolute; inset: 0; pointer-events: none;
    /* 小方块马赛克：SVG 5px 方块随机分布，横向平铺，块内带 SMIL 闪烁动画 */
    background: url('/static/speed-pixels.svg?v=3') repeat-x left center / auto 100%;
    opacity: .82;
    /* 马赛克从左往右渐显 */
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.75) 45%, #000 75%, #000 100%);
            mask-image: linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.75) 45%, #000 75%, #000 100%);
  }
  .speed-slider__stars {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(1.6px 1.6px at 52% 26%, rgba(255,255,255,.95) 50%, transparent 52%),
      radial-gradient(1.2px 1.2px at 64% 70%, rgba(255,255,255,.7) 50%, transparent 52%),
      radial-gradient(2.1px 2.1px at 78% 30%, rgba(255,255,255,1) 50%, transparent 52%),
      radial-gradient(1.3px 1.3px at 88% 66%, rgba(255,255,255,.8) 50%, transparent 52%);
  }
  .speed-slider__dot {
    position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,.92); box-shadow: 0 0 2px rgba(75,63,227,.45);
    transform: translate(-50%, -50%); pointer-events: none; z-index: 1;
  }
  .speed-slider__dot[data-v="2"] { left: 25%; }
  .speed-slider__dot[data-v="3"] { left: 50%; }
  .speed-slider__dot[data-v="4"] { left: 75%; }
  /* 滑块在轨道外层（.speed-slider 直接子级），不被轨道 overflow 裁剪，两端完整浮于轨道上方 */
  .speed-slider__thumb {
    position: absolute; top: 16px; left: 100%; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(75,63,227,.25);
    box-shadow: 0 1px 5px rgba(0,0,0,.28), 0 0 0 1.5px rgba(255,255,255,.65);
    transform: translate(-50%, -50%); transition: left .15s ease; pointer-events: none; z-index: 3;
  }
  .speed-slider__labels { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: var(--body-sm-font-size); color: var(--text-tertiary); }
  .speed-slider__labels-mid { flex: 1; text-align: center; color: var(--text-tertiary); }
  .speed-slider:focus-visible { outline: 2px solid var(--bg-brand); outline-offset: 4px; border-radius: var(--radius-8); }
  .seg-group { position: relative; display: inline-flex; flex-wrap: wrap; gap: var(--spacer-2); border: 1px solid var(--border-neutral-l1); border-radius: var(--radius-12); padding: var(--spacer-2); background: var(--bg-overlay-l1); width: 100%; }
  .seg-group label { position: relative; cursor: pointer; flex: 1 1 auto; z-index: 1; }
  .seg-group input { position: absolute; opacity: 0; pointer-events: none; }
  .seg-group span {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--spacer-6);
    min-height: 28px; padding: 0 var(--spacer-12); border-radius: var(--radius-8);
    color: var(--text-secondary); font-size: var(--body-base-font-size); line-height: var(--body-base-line-height);
    white-space: nowrap; width: 100%;
  }
  .seg-group input:checked + span { color: var(--text-default); }
  .seg-group input:focus-visible + span { outline: 2px solid var(--border-contrast); outline-offset: 2px; }
  /* 滑动指示器：fadeIn 期间 transition 关闭（避免动画期间位置漂移），ready 后启用 */
  .seg-group__indicator {
    position: absolute; top: var(--spacer-2); bottom: var(--spacer-2); left: 0;
    width: 0; background: var(--bg-base-default); border-radius: var(--radius-8);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text-default) 10%, transparent);
    transition: none; pointer-events: none; z-index: 0;
  }
  .seg-group.is-ready .seg-group__indicator {
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1);
  }

  .upload-card { padding: var(--spacer-20); display: flex; flex-direction: column; }
  .dropzone {
    border: 2px dashed var(--border-neutral-l2); border-radius: var(--radius-12);
    padding: var(--spacer-24); cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
    background: var(--bg-base-default);
    min-height: 380px; max-height: 520px; height: 460px;
    display: flex; flex-direction: column; align-items: center;
    gap: var(--spacer-16); overflow: hidden;
    position: relative;
  }
  .dropzone-overlay-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 0; font-size: 0; }
  /* 空状态垂直居中；有文件时网格在上，提示区贴底 */
  .dropzone:not(.has-files) { justify-content: center; }
  .dropzone.has-files { justify-content: flex-start; }
  .dropzone:hover { border-color: var(--border-contrast); background: var(--bg-overlay-l1); }
  .dropzone.is-dragover { border-color: var(--border-contrast); background: var(--bg-overlay-l2); border-style: solid; }

  /* 提示区（"点击或拖拽"），有文件时缩小并放到下方 */
  .dropzone__prompt { display: flex; flex-direction: column; align-items: center; gap: var(--spacer-8); transition: all .2s ease; }
  .dropzone.has-files .dropzone__prompt { gap: var(--spacer-4); }
  .dropzone__icon-big { width: 80px; height: 96px; display: block; }
  .dropzone.has-files .dropzone__icon-big { width: 40px; height: 48px; }
  .dropzone__title { font-size: var(--body-base-font-size); line-height: var(--body-base-line-height); font-weight: var(--font-weight-medium); color: var(--text-default); }
  .dropzone.has-files .dropzone__title { font-size: var(--body-sm-font-size); }
  .dropzone__hint { font-size: var(--body-sm-font-size); line-height: var(--body-sm-line-height); color: var(--text-tertiary); }

  /* 已上传文件网格：内容多时在网格内部上下滚动 */
  .file-cards-grid {
    width: 100%; max-width: 100%;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacer-12);
    flex: 0 0 auto; min-height: 0; max-height: 100%;
    overflow-y: auto; overflow-x: hidden;
    padding: var(--spacer-4) var(--spacer-4);
    align-content: start;
  }
  .file-cards-grid::-webkit-scrollbar { width: 8px; }
  .file-cards-grid::-webkit-scrollbar-thumb { background: var(--border-neutral-l2); border-radius: 4px; }
  .file-cards-grid::-webkit-scrollbar-thumb:hover { background: var(--border-contrast); }
  /* 有文件时 grid 才占满中间空间，prompt 贴底 */
  .dropzone.has-files .file-cards-grid { flex: 1 1 0; }
  .file-card {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--spacer-8);
    padding: var(--spacer-12); background: var(--bg-base-secondary);
    border: 1px solid var(--border-neutral-l1); border-radius: var(--radius-12);
    transition: all .15s ease; cursor: default;
  }
  .file-card:hover { border-color: var(--border-contrast); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
  .file-card__icon { width: 80px; height: 96px; display: block; }
  .file-card__name { width: 100%; font-size: var(--body-sm-font-size); line-height: var(--body-sm-line-height); color: var(--text-default); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--font-weight-medium); }
  .file-card__size { font-size: var(--body-xs-font-size); line-height: var(--body-xs-line-height); color: var(--text-tertiary); }
  .file-card__remove {
    position: absolute; top: var(--spacer-4); right: var(--spacer-4);
    width: 24px; height: 24px; padding: 0; border: 0; background: transparent;
    color: var(--icon-tertiary); cursor: pointer; border-radius: var(--radius-full); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .file-card__remove:hover { background: var(--bg-overlay-l2); color: var(--status-error-default); }
  .file-card__remove .icon { width: 14px; height: 14px; }
  .file-card.is-removing { opacity: 0; transform: scale(.85); }

  .upload-actions { display: flex; justify-content: center; margin-top: var(--spacer-24); }

  .progress-overlay {
    display: none; position: fixed; inset: 0; background: var(--bg-overlay-l4);
    align-items: center; justify-content: center; z-index: 9999;
  }
  .progress-overlay.is-visible { display: flex; }
  .progress-modal {
    background: var(--bg-base-default); border: 1px solid var(--border-neutral-l1); border-radius: var(--radius-12);
    width: 100%; max-width: 520px; padding: var(--spacer-24); box-shadow: 0 24px 64px color-mix(in srgb, var(--text-default) 14%, transparent), 0 4px 16px color-mix(in srgb, var(--text-default) 8%, transparent);
  }
  .progress-modal__head { display: flex; align-items: center; gap: var(--spacer-10); margin-bottom: var(--spacer-20); }
  .progress-modal__head .icon { width: 20px; height: 20px; color: var(--icon-default); }
  .progress-modal__title { font-size: var(--heading-sm-font-size); line-height: var(--heading-sm-line-height); font-weight: var(--heading-sm-font-weight); color: var(--text-default); }
  .stage-list { display: flex; flex-wrap: wrap; gap: var(--spacer-8); margin-bottom: var(--spacer-16); }
  .stage-item {
    display: inline-flex; align-items: center; gap: var(--spacer-6);
    padding: var(--spacer-6) var(--spacer-10); border-radius: var(--radius-8);
    font-size: var(--body-sm-font-size); line-height: var(--body-sm-line-height);
    color: var(--text-tertiary); background: var(--bg-overlay-l2); border: 1px solid var(--border-neutral-l1);
  }
  .stage-item.is-active { color: var(--text-default); background: var(--bg-base-default); border-color: var(--border-neutral-l2); }
  .stage-item.is-done { color: var(--status-success-default); background: var(--status-success-surface-l1); border-color: var(--status-success-surface-l2); }
  .stage-item .icon { width: 14px; height: 14px; }
  .progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacer-8); }
  .progress-row__label { font-size: var(--body-base-font-size); line-height: var(--body-base-line-height); color: var(--text-default); display: inline-flex; align-items: center; gap: var(--spacer-8); }
  .progress-row__percent { font-size: var(--body-base-font-size); line-height: var(--body-base-line-height); color: var(--text-secondary); font-family: var(--code-editor-font-family); }
  .progress-msg { font-size: var(--body-base-font-size); line-height: var(--body-base-line-height); color: var(--text-secondary); margin-top: var(--spacer-8); }
  .progress-time { display: flex; justify-content: space-between; margin-top: var(--spacer-12); font-size: var(--body-sm-font-size); line-height: var(--body-sm-line-height); color: var(--text-tertiary); }
  .progress-time span { display: inline-flex; align-items: center; gap: var(--spacer-6); }
  .progress-time .icon { width: 14px; height: 14px; }

  .ds-notif--error { background: var(--status-error-surface-l1); border-color: var(--status-error-surface-l2); }
  .ds-notif--error .ds-notif__icon { color: var(--status-error-default); }

  /* 浮层淡入动画（页面自身不再 fadeIn，由 navbar indicator 滑动过渡） */
  @keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .progress-overlay.is-visible { animation: fadeInOverlay .2s ease-out; }

  /* 按钮交互过渡 */
  .ds-btn, .navbar__link, .seg-group span, .file-chip__remove {
    transition: opacity .15s ease, transform .1s ease, background .12s ease, color .12s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .ds-btn:active, .navbar__link:active, .file-chip__remove:active { transform: scale(0.97); opacity: .92; }
  .seg-group input:checked + span { transition: background .15s ease, color .15s ease, box-shadow .15s ease; }

  /* 上传进度浮层（区别于审核进度浮层） */
  .upload-progress-overlay {
    display: none; position: fixed; inset: 0; background: var(--bg-overlay-l4);
    align-items: center; justify-content: center; z-index: 9999;
  }
  .upload-progress-overlay.is-visible { display: flex; }
  .upload-progress-modal {
    background: var(--bg-base-default); border: 1px solid var(--border-neutral-l1); border-radius: var(--radius-12);
    width: 100%; max-width: 520px; padding: var(--spacer-24);
    max-height: 80vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 64px color-mix(in srgb, var(--text-default) 14%, transparent), 0 4px 16px color-mix(in srgb, var(--text-default) 8%, transparent);
  }
  .upload-progress-head { display: flex; align-items: center; gap: var(--spacer-10); margin-bottom: var(--spacer-16); }
  .upload-progress-head .icon { width: 20px; height: 20px; color: var(--icon-default); }
  .upload-progress-title { font-size: var(--heading-sm-font-size); line-height: var(--heading-sm-line-height); font-weight: var(--heading-sm-font-weight); color: var(--text-default); }
  .upload-file-list { display: flex; flex-direction: column; gap: var(--spacer-10); max-height: 360px; overflow-y: auto; padding: var(--spacer-4); margin-bottom: var(--spacer-16); }
  .upload-file-row { display: flex; flex-direction: column; gap: var(--spacer-6); padding: var(--spacer-10); border-radius: var(--radius-8); background: var(--bg-overlay-l2); border: 1px solid var(--border-neutral-l1); }
  .upload-file-row__head { display: flex; justify-content: space-between; align-items: center; gap: var(--spacer-8); }
  .upload-file-row__name { font-size: var(--body-sm-font-size); line-height: var(--body-sm-line-height); color: var(--text-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
  .upload-file-row__status { font-size: var(--body-sm-font-size); line-height: var(--body-sm-line-height); color: var(--text-secondary); font-family: var(--code-editor-font-family); flex-shrink: 0; }
  .upload-file-row__status.is-done { color: var(--status-success-default); }
  .upload-file-row__status.is-error { color: var(--status-error-default); }
  .upload-file-row .ds-progress { height: 4px; background: var(--bg-base-default); }
  .upload-total-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacer-8); }
  .upload-total-label { font-size: var(--body-base-font-size); line-height: var(--body-base-line-height); color: var(--text-default); font-weight: var(--font-weight-medium); }
  .upload-total-percent { font-size: var(--body-base-font-size); line-height: var(--body-base-line-height); color: var(--text-secondary); font-family: var(--code-editor-font-family); }
  .upload-progress-info { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--spacer-8); margin-top: var(--spacer-12); font-size: var(--body-sm-font-size); line-height: var(--body-sm-line-height); color: var(--text-tertiary); }
  .upload-progress-info span { display: inline-flex; align-items: center; gap: var(--spacer-6); }
  .upload-progress-actions { display: flex; justify-content: center; margin-top: var(--spacer-20); }
  .upload-progress-overlay.is-visible { animation: fadeInOverlay .15s ease-out; }
  .duplicate-dialog-overlay {
    display: none; position: fixed; inset: 0; background: var(--bg-overlay-l4);
    align-items: center; justify-content: center; z-index: 10001;
  }
  .duplicate-dialog-overlay.is-visible { display: flex; }
  .duplicate-dialog {
    background: var(--bg-base-default); border: 1px solid var(--border-neutral-l1); border-radius: var(--radius-12);
    width: 100%; max-width: 480px; padding: var(--spacer-24);
    box-shadow: 0 24px 64px color-mix(in srgb, var(--text-default) 14%, transparent), 0 4px 16px color-mix(in srgb, var(--text-default) 8%, transparent);
  }
  .duplicate-dialog__title { font-size: var(--heading-sm-font-size); line-height: var(--heading-sm-line-height); font-weight: var(--heading-sm-font-weight); color: var(--text-default); margin-bottom: var(--spacer-12); }
  .duplicate-dialog__list { max-height: 200px; overflow-y: auto; margin: var(--spacer-12) 0; }
  .duplicate-dialog__item { display: flex; justify-content: space-between; gap: var(--spacer-12); padding: var(--spacer-8) 0; border-bottom: 1px solid var(--border-neutral-l1); font-size: var(--body-sm-font-size); }
  .duplicate-dialog__item:last-child { border-bottom: none; }
  .duplicate-dialog__actions { display: flex; justify-content: flex-end; gap: var(--spacer-8); margin-top: var(--spacer-16); }

  /* ===== 移动端适配 (html.is-mobile / ≤768px) ===== */
  @media (max-width: 768px) {
    .main-wrap {
      padding: var(--spacer-16) var(--spacer-16) calc(96px + env(safe-area-inset-bottom, 0px));
      box-sizing: border-box;
      width: 100%;
    }
    .page-header h1 { font-size: var(--heading-lg-font-size, 24px); line-height: var(--heading-lg-line-height, 32px); }
    .page-header p { font-size: var(--body-base-font-size); }

    /* 配置卡片单列（与旧 720 断点一致），字段间距收紧 */
    .config-grid { grid-template-columns: 1fr; gap: var(--spacer-16); }
    .config-card { padding: var(--spacer-16); margin-bottom: var(--spacer-16); }
    .upload-card { padding: var(--spacer-16); }

    /* 拖拽区：高度收敛，提示图标缩小 */
    .dropzone {
      min-height: 300px; max-height: 420px; height: 360px;
      padding: var(--spacer-16);
    }
    .dropzone__icon-big { width: 60px; height: 72px; }
    .dropzone.has-files .dropzone__icon-big { width: 32px; height: 38px; }
    /* 文件卡片网格：手机保持 2 列小卡 */
    .file-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .file-card__icon { width: 60px; height: 72px; }

    /* 提交条固定底部 + 手势安全区 */
    .upload-actions {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
      margin: 0;
      padding: var(--spacer-12) var(--spacer-16) calc(var(--spacer-12) + env(safe-area-inset-bottom, 0px));
      background: var(--bg-base-default);
      border-top: 1px solid var(--border-neutral-l1);
      box-shadow: 0 -4px 16px color-mix(in srgb, var(--text-default) 6%, transparent);
    }
    .upload-actions .ds-btn { width: 100%; justify-content: center; }

    /* 进度/上传浮层改为近全屏卡片 */
    .progress-modal,
    .upload-progress-modal { max-width: none; width: calc(100% - 24px); padding: var(--spacer-16); box-sizing: border-box; }
    .upload-file-list { max-height: 40vh; }
    .duplicate-dialog { max-width: none; width: calc(100% - 24px); box-sizing: border-box; }
    .duplicate-dialog__actions { flex-direction: column-reverse; }
    .duplicate-dialog__actions .ds-btn { width: 100%; justify-content: center; }
    /* 错误通知贴顶安全区、占满宽 */
    #errorBox { left: var(--spacer-12) !important; right: var(--spacer-12) !important; top: var(--spacer-12) !important; max-width: none !important; }
  }
  @media (max-width: 480px) {
    .dropzone { height: 320px; min-height: 260px; }
    .seg-group span { min-height: 32px; }
    .speed-slider__labels-mid { display: none; }
  }