/* ============================================================
 * dl-core.css — Ubui 真子页共享样式（由 downloader.html 原样抽取）
 * 生成时间: 2026-09-26T07:13:31.241Z
 * 来源: downloader.html 的 6 个 <style> 块
 * 用途: youtube.html / tiktok.html 等「真独立子页」复用，保证与下载页视觉同源
 * 注意: 本文件由脚本生成，勿手工编辑；改样式请改 downloader.html 后重跑抽取
 * ============================================================ */


/* ---------- <style id="ux3"> ---------- */

/* ===== ux3 升级样式 =====
 * ⚠ 此处原本是抽取脚本丢掉选择器的残留：只有变量声明、没有 `:root{`，
 *   浏览器会把它当非法语法整块丢弃（还会吃掉后面一条规则）。2026-09-27 收成空规则。 */
:root{ }
  .control-bar{ position:sticky; top:0; z-index:20; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:8px 10px; margin-bottom:10px; }
  .qf-chk{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--text-muted); cursor:pointer; user-select:none; }
  .q-view{ display:inline-flex; gap:4px; margin-left:auto; }
  .q-view button{ width:32px; height:30px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); border-radius:8px; cursor:pointer; transition:.16s; }
  .q-view button:hover{ color:var(--text); }
  .q-view button.on{ background:var(--brand); border-color:transparent; color:#fff; }
  #groupBtn.on{ background:var(--brand); border-color:transparent; color:#fff; }
  .status-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--text-muted); margin:6px 2px 0; }
  .status-legend .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:5px; vertical-align:middle; }
  .status-legend .s-parsing{ background:#eab308; } .status-legend .s-downloading{ background:var(--brand); }
  .status-legend .s-done{ background:#10b981; } .status-legend .s-error{ background:#ef4444; } .status-legend .s-paused{ background:#9aa7b4; }
  .group-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 4px 5px; font-size:12px; font-weight:700; color:var(--text-muted); border-top:1px dashed var(--hair); margin-top:6px; }
  .queue-item:first-child + .group-head, .group-head:first-child{ border-top:none; }
  .queue-item{ transition:box-shadow .18s, transform .18s, border-color .18s; }
  .queue-item:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
  .queue-item.paused{ opacity:.72; border-style:dashed; }
  .spark{ display:block; width:120px; height:22px; margin-top:4px; opacity:.85; }
  #queue.v-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; align-items:start; }
  #queue.v-compact .queue-item{ padding:8px 12px; }
  #queue.v-compact .qi-sub, #queue.v-compact .stage, #queue.v-compact .spark{ display:none; }
  [data-tip]{ position:relative; }
  [data-tip]:hover::after{ content:attr(data-tip); position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); background:#0d1117; color:#fff; font-size:11px; padding:4px 8px; border-radius:6px; white-space:nowrap; z-index:80; pointer-events:none; box-shadow:0 6px 16px -8px rgba(0,0,0,.6); }
  mark{ background:rgba(234,179,8,.32); color:inherit; border-radius:3px; padding:0 1px; }

/* 暗色主题：输入框/选择/文本域 边角硬编码浅色纠偏 */


/* ---------- <style id="(anon)"> ---------- */

:root{
    --font-sans:'Inter',system-ui,-apple-system,'PingFang SC','Hiragino Sans GB',sans-serif;
    --font-display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,monospace;
  }
  body{ font-family:var(--font-sans); }

  .main{ padding: calc(var(--header-height) + 34px) 32px 90px; max-width: 1180px; margin: 0 auto; }

  .hero{ margin-bottom: 22px; }
  .badge{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--gradient-primary); color:#fff;
    padding:6px 14px; border-radius:var(--radius-full);
    font-size:12.5px; font-weight:600; letter-spacing:.02em;
    box-shadow:0 8px 20px -10px var(--brand-glow);
  }
  .hero h1{ font-family:var(--font-display); font-size:38px; font-weight:800; letter-spacing:-.03em; color:var(--text); margin:16px 0 10px; line-height:1.08; }
  .hero p{ color:var(--text-muted); font-size:15px; max-width:720px; line-height:1.65; }

  /* ：全链路一条龙 */
  .chain{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
  .chain .node{
    display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--radius-md);
    background:var(--surface); border:1px solid var(--border); font-size:13px; font-weight:600; color:var(--text);
    box-shadow:var(--shadow-sm);
  }
  .chain .node i{ color:var(--brand); }
  .chain .node.hot{ background:var(--gradient-primary); color:#fff; border-color:transparent; }
  .chain .node.hot i{ color:#fff; }
  .chain .arrow{ color:var(--text-faint); font-size:14px; }

  .panel{
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-xl); box-shadow:var(--shadow-md); padding:24px;
  }

  /* ===== Tab 栏 ===== */
  .tabs{ display:flex; gap:6px; background:var(--surface-2); padding:6px; border-radius:var(--radius-lg); border:1px solid var(--border); margin-bottom:18px; flex-wrap:wrap; }
  .tab{
    flex:1; min-width:120px; text-align:center; padding:11px 10px; border-radius:var(--radius-md);
    font-size:14px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:.18s;
    display:flex; align-items:center; justify-content:center; gap:8px; user-select:none;
  }
  .tab:hover{ color:var(--text); background:var(--surface-hover); }
  .tab.on{ background:var(--surface); color:var(--brand); box-shadow:var(--shadow-sm); }
  .tab .ti{ font-size:15px; }
  .tabpane{ display:none; }
  .tabpane.on{ display:block; animation:fadeIn .3s ease; }

  /* ===== 输入区 ===== */
  .input-bar{ display:flex; gap:12px; margin-bottom:14px; position:relative; }
  .input-clear{ display:none; align-items:center; justify-content:center; width:30px; height:30px; border:none; background:transparent; color:var(--text-muted); cursor:pointer; border-radius:50%; font-size:14px; flex:none; }
  .input-clear:hover{ background:var(--surface-2); color:var(--text); }
  .input-paste{ display:none; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--border); background:var(--surface-2); color:var(--brand); cursor:pointer; border-radius:10px; font-size:15px; flex:none; }
  .input-paste:hover{ border-color:var(--brand); }
  .input-bar input{
    flex:1; border:1px solid var(--border); border-radius:var(--radius-md);
    background:#fcfcfe; color:var(--text); padding:13px 15px 13px 44px; font-size:14px; font-family:inherit;
    transition:border-color .18s, box-shadow .18s, background .18s;
  }
  /* 提示徽标浮在输入框右侧，给文字预留空间，长链接不再被压在徽标底下 */
  .input-bar:has(.detect-chip.show) input{ padding-right:190px; }
  .input-bar input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-dim); background:#fff; }
  .input-bar .lead-ico{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:15px; pointer-events:none; }
  .detect-chip{
    position:absolute; right:120px; top:50%; transform:translateY(-50%);
    display:none; align-items:center; gap:6px; padding:5px 11px; border-radius:99px;
    color:#fff; font-size:12px; font-weight:700; box-shadow:0 6px 14px -6px rgba(0,0,0,.5);
    animation:popIn .25s ease;
  }
  .detect-chip.show{ display:inline-flex; }
  /* 非链接输入：柔和的红（淡底 + 红字 + 描边），不再用刺眼的 #ef4444 纯色块 */
  .detect-chip.warn{ background:rgba(239,68,68,.10) !important; color:#c0392b !important;
    border:1px solid rgba(239,68,68,.28); box-shadow:none; cursor:pointer; }
  .detect-chip .chip-x{ margin-left:2px; opacity:.6; font-size:13px; }
  /* P1-13：非法 / 非链接输入红框提示（去掉刺眼的光晕，保留描边即可） */
  .input-bar input.url-invalid{ border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.08) !important; }
  /* P1-09：拖拽悬停高亮（子页输入区若缺 .dropzone 也能生效） */
  .input-bar.drag{ outline:2px dashed var(--brand); outline-offset:-6px; background:rgba(13,148,136,.08); border-radius:var(--radius-md,12px); }
  .btn-primary{
    background:var(--gradient-primary); color:#fff; border:none; padding:0 22px;
    border-radius:var(--radius-md); font-weight:600; font-size:15px; font-family:inherit;
    cursor:pointer; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
    box-shadow:0 10px 24px -12px var(--brand-glow); transition:transform .15s, box-shadow .15s;
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -14px var(--brand-glow); }
  .btn-primary:active{ transform:scale(.98); }
  .btn-primary:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

  .opts-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
  .opts-row .ol{ font-size:13px; color:var(--text-muted); }
  .opts-row select{ border:1px solid var(--border); border-radius:var(--radius); background:#fcfcfe; color:var(--text); padding:7px 10px; font-size:13px; font-family:inherit; }
  .seg{ display:inline-flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
  .seg button{ border:none; background:var(--surface-2); color:var(--text-muted); padding:7px 13px; font-size:13px; cursor:pointer; font-family:inherit; transition:.15s; }
  .seg button.on{ background:var(--gradient-primary); color:#fff; }

  /* ===== ：解析模式 + 媒体类型维度 ===== */
  .ctrl-row{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-bottom:14px; padding:12px 14px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md); }
  .ctrl-row .clbl{ font-size:12.5px; color:var(--text-muted); font-weight:600; }
  .media-chips{ display:inline-flex; gap:8px; flex-wrap:wrap; }
  .mchip{
    border:1px solid var(--border); background:var(--surface); color:var(--text-muted);
    padding:6px 12px; border-radius:99px; font-size:12.5px; cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:6px; font-family:inherit;
  }
  .mchip:hover{ color:var(--brand); border-color:var(--brand); }
  .mchip.on{ background:var(--brand-dim); color:var(--brand); border-color:var(--brand); font-weight:600; }

  .chk{ font-size:13px; color:var(--text-muted); display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
  .mini-btn{ background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); padding:7px 12px; border-radius:var(--radius); font-size:13px; cursor:pointer; font-family:inherit; transition:.15s; }
  .mini-btn:hover{ color:var(--brand); border-color:var(--brand); }

  details.adv{ margin-bottom:14px; border:1px solid var(--border); border-radius:var(--radius); padding:4px 14px; background:var(--surface-2); }
  details.adv > summary{ font-size:13px; color:var(--text-muted); cursor:pointer; padding:8px 0; }
  details.adv .adv-body{ padding:4px 0 10px; }
  textarea, .txt{ width:100%; border:1px solid var(--border); border-radius:var(--radius); padding:8px 10px; font-size:12px; font-family:monospace; resize:vertical; background:#fcfcfe; color:var(--text); box-sizing:border-box; }

  /* 拖拽高亮 */
  .dropzone.drag{ outline:2px dashed var(--brand); outline-offset:-6px; background:var(--brand-dim); border-radius:var(--radius-md); }

  /* ===== 队列 ===== */
  .list-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px; flex-wrap:wrap; }
  .list-head h2{ font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--text); }
  .list-head .count{ font-size:12px; color:var(--text-muted); background:var(--surface-2); padding:4px 11px; border-radius:var(--radius-full); }
  .queue{ display:flex; flex-direction:column; gap:12px; content-visibility:auto; contain-intrinsic-size:auto 148px; }
  .queue-item{
    display:flex; align-items:flex-start; gap:14px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:14px 16px; box-shadow:var(--shadow-sm);
    opacity:0; transform:translateY(12px); animation:fadeUp .45s ease forwards;
    transition:box-shadow .2s, border-color .2s;
  }
  .queue-item:hover{ box-shadow:var(--shadow-md); }
  .queue-item.sel{ border-color:var(--brand); box-shadow:inset 4px 0 0 var(--brand), 0 0 0 3px var(--brand-dim); background:linear-gradient(90deg, rgba(13,148,136,.10), var(--surface) 24%); }
  .queue-item.error{ border-color:rgba(248,113,113,.5); }
  .qi-sel{ margin-top:4px; }
  .file-ico, .platform-badge{
    width:44px; height:44px; border-radius:12px; flex:none; color:#fff;
    background:var(--gradient-primary); display:grid; place-items:center; font-size:16px; font-weight:700;
    box-shadow:0 6px 14px -8px rgba(0,0,0,.4);
  }
  .qi-main{ flex:1; min-width:0; }
  .qi-titlerow{ display:flex; align-items:center; gap:8px; min-width:0; }
  .qi-title{ font-size:14px; color:var(--text); font-weight:600; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; cursor:pointer; transition:color .15s; flex:1; min-width:0; }
  .qi-title:hover{ color:var(--brand); }
  .qi-copy{ flex:none; width:28px; height:28px; border:1px solid var(--hair); background:var(--surface); border-radius:8px; cursor:pointer; color:var(--text-faint); font-size:12px; display:grid; place-items:center; transition:.15s; }
  .qi-copy:hover{ color:var(--brand); border-color:var(--brand); background:var(--brand-dim); }
  .qi-url{ font-size:12px; color:var(--text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .qi-meta{ font-size:12px; color:var(--text-muted); margin-top:6px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .qi-sub{ font-size:11px; color:var(--text-faint); margin-top:5px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .status{ font-size:11.5px; font-weight:600; padding:4px 11px; border-radius:var(--radius-full); white-space:nowrap; }
  .status.done{ background:rgba(52,211,153,.15); color:#0f9d63; }
  .queue-item.done{ border-color:rgba(16,185,129,.55); background:linear-gradient(180deg,rgba(16,185,129,.12),rgba(16,185,129,.04)); box-shadow:inset 4px 0 0 #10b981; }
  .qi-progress > i.done{ background:linear-gradient(90deg,#10b981,#34d399); }
  .qi-done-flag{ display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:#0f9d63; }
  .status.downloading{ background:var(--brand-dim); color:var(--brand); }
  .status.parsing{ background:rgba(250,204,21,.16); color:#a16207; }
  .status.error{ background:rgba(248,113,113,.15); color:#e04848; }
  .status.queued{ background:var(--surface-2); color:var(--text-muted); }
  .wm-badge{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:99px; background:rgba(236,72,153,.15); color:#db2777; }
  .ratio-badge{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:99px; background:rgba(34,197,94,.15); color:#16a34a; }

  /* 双层级进度 */
  .qi-progress{ height:7px; background:var(--surface-2); border-radius:99px; overflow:hidden; margin-top:9px; }
  .qi-progress > i{ display:block; height:100%; transform:scaleX(0); transform-origin:left center; background:var(--gradient-primary); border-radius:99px; transition:transform .45s cubic-bezier(.4,0,.2,1); will-change:transform; }
  .stage{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
  .stage .st{ font-size:10.5px; color:var(--text-faint); padding:2px 8px; border-radius:99px; background:var(--surface-2); transition:.2s; }
  .stage .st.active{ background:var(--brand-dim); color:var(--brand); font-weight:600; }
  .stage .st.ok{ background:rgba(52,211,153,.15); color:#0f9d63; }
  .qi-err{ font-size:12px; color:#e04848; margin-top:6px; }
  .qi-actions{ display:flex; gap:8px; flex:none; align-items:flex-start; }
  /* P0-08 / P1-34：下载进度条（dl-core 子页此前只有更新逻辑、卡片缺此元素，是幽灵代码） */
  .qi-progress{ display:none; height:6px; background:var(--surface-2,#eef2f1); border-radius:99px; overflow:hidden; margin-top:10px; }
  .queue-item.downloading .qi-progress{ display:block; }
  .qi-progress .qi-bar{ display:block; height:100%; width:0; background:var(--brand,#0d9488); border-radius:99px; transition:width .35s ease; }
  /* P1-21 单条移除 / P0-18 重试 按钮 */
  .qi-remove{ background:transparent; border:1px solid var(--border,#e5e2da); color:var(--text-muted,#5f6470); width:30px; height:30px; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:13px; transition:.15s; }
  .qi-remove:hover{ color:#ef4444; border-color:#ef4444; }
  .qi-retry{ color:var(--brand,#0d9488); border-color:var(--brand,#0d9488); }
  .icon-btn{ width:34px; height:34px; border:1px solid var(--border); background:var(--surface); border-radius:9px; cursor:pointer; color:var(--text-muted); transition:.18s; font-size:13px; }
  .icon-btn:hover{ color:var(--brand); border-color:var(--brand); }
  .dl-link{ display:inline-flex; align-items:center; gap:6px; background:var(--gradient-primary); color:#fff; border:none; padding:8px 13px; border-radius:9px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; }
  .dl-link:hover{ transform:translateY(-1px); }

  /* shimmer 骨架屏 */
  .skeleton{ flex:1; }
  .sk-line{ height:11px; border-radius:6px; background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-hover) 37%,var(--surface-2) 63%); background-size:400% 100%; animation:shimmer 1.3s infinite; }
  .sk-line.w70{ width:70%; } .sk-line.w40{ width:40%; margin-top:8px; } .sk-line.w90{ width:90%; }

  /* 批量工具条 */
  .batch-bar{
    position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(140%);
    display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:12px 18px; z-index:50; transition:transform .3s ease;
  }
  .batch-bar.show{ transform:translateX(-50%) translateY(0); }
  .batch-bar .bc{ font-size:13px; color:var(--text-muted); font-weight:600; }
  .batch-bar select{ border:1px solid var(--border); border-radius:var(--radius); padding:6px 8px; font-size:13px; font-family:inherit; background:#fcfcfe; color:var(--text); }

  /* 图文 tab */
  .article-preview{ margin-top:16px; }
  .img-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
  .img-cell{ position:relative; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:var(--surface-2); aspect-ratio:3/4; display:grid; place-items:center; }
  .img-cell img{ width:100%; height:100%; object-fit:cover; }
  .img-cell .rb{ position:absolute; bottom:6px; left:6px; font-size:10px; font-weight:700; padding:2px 7px; border-radius:99px; background:rgba(34,197,94,.9); color:#fff; }
  .img-cell .dl{ position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:7px; border:none; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; font-size:11px; }
  .text-box{ margin-top:14px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; font-size:13.5px; line-height:1.7; color:var(--text); white-space:pre-wrap; max-height:280px; overflow:auto; }

  .empty{ text-align:center; padding:28px 16px; color:var(--text-muted); }
  .empty.compact{ padding:18px 14px; }
  .empty.compact i{ font-size:26px; opacity:.55; }
  .empty.compact p{ font-size:13px; margin:8px 0 0; }
  .empty i{ font-size:40px; color:var(--text-faint); margin-bottom:12px; display:block; }
  .empty p{ font-size:14px; }

  .btn-ghost{ width:100%; background:var(--surface-2); color:var(--text-2); border:1px solid var(--border); padding:11px; border-radius:var(--radius-md); font-weight:600; font-size:14px; font-family:inherit; cursor:pointer; margin-top:16px; transition:all .15s; }
  .btn-ghost:hover{ background:var(--surface-hover); color:var(--text); }

  .footer-note{ margin-top:30px; font-size:12.5px; color:var(--text-faint); text-align:center; line-height:1.7; }
  .legal-foot{ margin-top:18px; padding:16px 4px 4px; border-top:1px solid var(--hair); display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--text-muted); }
  .legal-foot .lf-brand{ font-weight:600; color:var(--text-muted); }
  .legal-foot .lf-links{ display:flex; gap:14px; flex-wrap:wrap; }
  .legal-foot .lf-links a{ color:var(--text-muted); text-decoration:none; transition:.15s; }
  .legal-foot .lf-links a:hover{ color:var(--brand); text-decoration:underline; }
  .logout-btn{ background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border); padding:7px 13px; border-radius:var(--radius); font-size:13px; cursor:pointer; font-family:inherit; transition:all .15s; }
  .logout-btn:hover{ color:var(--danger); border-color:var(--danger); }
  .hint{ font-size:12.5px; color:var(--text-faint); margin-top:10px; text-align:center; }

  /* 极简顶部：仅返回首页 */
  .back-home{
    display:inline-flex; align-items:center; gap:7px;
    margin-left:14px;
    padding:8px 16px; border-radius:var(--radius-md);
    background:var(--brand-dim); color:var(--brand);
    font-size:13.5px; font-weight:600; text-decoration:none;
    border:1px solid transparent; transition:transform .15s, box-shadow .15s, background .15s;
  }
  .back-home:hover{ transform:translateY(-1px); background:var(--brand); color:#fff; box-shadow:var(--shadow-sm); }
  .back-home i{ font-size:12px; }

  @keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }
  @keyframes fadeIn{ from{opacity:0} to{opacity:1} }
  @keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }
  @keyframes popIn{ from{opacity:0;transform:translateY(-50%) scale(.8)} to{opacity:1;transform:translateY(-50%) scale(1)} }

  /* 历史 */
  .hist-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:10px; background:var(--surface); }
  .hist-item .meta{ flex:1; min-width:0; }
  .hist-item .meta .t{ font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .hist-item .meta .s{ font-size:11.5px; color:var(--text-muted); margin-top:3px; }
  .hist-item .hist-acts{ display:flex; align-items:center; gap:8px; flex:none; }
  .hist-item .hist-acts .mini-btn{ padding:6px 11px; font-size:12.5px; }
  .author-card{ border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; background:var(--surface-2); margin-top:14px; }
  .author-card .ah{ display:flex; align-items:center; gap:12px; }
  .author-card .av{ width:46px; height:46px; border-radius:50%; background:var(--gradient-primary); color:#fff; display:grid; place-items:center; font-size:18px; font-weight:700; }
  .banner{ background:rgba(250,204,21,.13); border:1px solid rgba(250,204,21,.4); color:#a16207; border-radius:var(--radius-md); padding:10px 14px; font-size:12.5px; margin-top:12px; display:flex; gap:8px; align-items:center; }
  .banner.dark{ color:#fde68a; }

  /* ===== ：批量场景分类 tabs ===== */
  .scenario-tabs{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
  .scenario-tabs .stab{
    padding:8px 14px; border-radius:var(--radius); border:1px solid var(--border); background:var(--surface-2);
    font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:7px;
  }
  .scenario-tabs .stab.on{ background:var(--gradient-primary); color:#fff; border-color:transparent; }
  .scenario-tabs .stab .dot{ width:7px; height:7px; border-radius:99px; background:currentColor; opacity:.7; }
  .plat-filter{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
  .plat-filter .pf{ border:1px solid var(--border); background:var(--surface); color:var(--text-muted); padding:5px 11px; border-radius:99px; font-size:12px; cursor:pointer; transition:.15s; }
  .plat-filter .pf.on{ background:var(--brand-dim); color:var(--brand); border-color:var(--brand); font-weight:600; }

  /* ===== ：平台支持网格 ===== */
  .section-title{ font-family:var(--font-display); font-size:20px; font-weight:800; color:var(--text); margin:34px 0 6px; display:flex; align-items:center; gap:10px; }
  .section-title .tag{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:99px; background:var(--brand-dim); color:var(--brand); }
  .section-sub{ color:var(--text-muted); font-size:13.5px; margin-bottom:16px; line-height:1.6; }
  .plat-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
  .plat-more{ grid-column:1/-1; justify-self:center; margin-top:2px; padding:10px 20px; border:1px solid var(--border); border-radius:99px; background:var(--surface); color:var(--brand); font-weight:600; font-size:13.5px; cursor:pointer; font-family:inherit; transition:.15s; }
  .plat-more:hover{ border-color:var(--brand); background:var(--brand-dim); }
  .plat-card{
    display:flex; align-items:center; gap:11px; padding:13px 14px; border:1px solid var(--border); border-radius:var(--radius-md);
    background:var(--surface); transition:.18s; cursor:default;
  }
  .plat-card:hover{ border-color:var(--brand); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
  .plat-card .pic{ width:36px; height:36px; border-radius:10px; flex:none; color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700; }
  /* 兼容 Chromium 对“零固有尺寸 SVG + 明确尺寸的 grid item”的对齐怪异：auto 外边距强制居中 */
  .plat-card .pic > *{ margin:auto; }
  .plat-card .pn{ font-size:13.5px; font-weight:600; color:var(--text); }
  .plat-card .pk{ font-size:11px; color:var(--text-muted); }
  .plat-card .ok{ margin-left:auto; color:#0f9d63; font-size:12px; }

  /* ===== 真实品牌 logo（simple-icons CDN 白标+彩色底；失败回退首字）===== */
  .b-logo{ width:22px; height:22px; display:block; }
  .b-logo-sm{ width:14px; height:14px; }
  .b-mono{ color:#fff; font-weight:700; font-size:14px; line-height:1; }
  .b-logo-box{ background:#fff; border-radius:8px; width:30px; height:30px; display:grid; place-items:center; padding:4px; box-shadow:0 1px 3px rgba(0,0,0,.22); }
  .b-logo-box .b-logo{ width:22px; height:22px; }
  .platform-badge .b-logo, .file-ico .b-logo{ width:24px; height:24px; }
  .av .b-logo{ width:24px; height:24px; }
  .detect-chip .b-logo{ width:14px; height:14px; }

  /* ===== 媒体类型区块（视频 / 音频 / 封面 / 字幕）===== */
  .media-types{ margin:6px 0 8px; }
  .mt-head{ font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text); display:flex; align-items:center; justify-content:center; text-align:center; gap:10px; margin-bottom:14px; }
  .mt-head .tag{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:99px; background:var(--brand-dim); color:var(--brand); }
  .mt-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; max-width:840px; margin:0 auto; }
  .mt-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:18px 14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); transition:.18s; }
  .mt-card:hover{ border-color:var(--brand); transform:translateY(-2px); }
  @media(max-width:760px){ .mt-grid{ grid-template-columns:repeat(2,1fr); } }
  .mt-card{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); transition:.18s; }
  .mt-card:hover{ border-color:var(--brand); transform:translateY(-2px); }
  .mt-card > i{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; font-size:17px; color:#fff; background:var(--brand); }
  .mt-card:nth-child(2) > i{ background:#0ea5e9; }
  .mt-card:nth-child(3) > i{ background:#f59e0b; }
  .mt-card:nth-child(4) > i{ background:#8b5cf6; }
  .mt-card b{ display:block; font-size:14.5px; font-weight:700; color:var(--text); }
  .mt-card span{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px; line-height:1.4; }

  /* ===== ：信任层（公告/说明/FAQ/无水印）===== */
  .trust-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:18px; margin-top:16px; }
  @media(max-width:860px){ .trust-grid{ grid-template-columns:1fr; } }
  .notice{ background:linear-gradient(135deg,rgba(91,91,240,.1),rgba(139,92,246,.1)); border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:var(--radius-md); padding:14px 16px; font-size:13px; color:var(--text); line-height:1.7; }
  .notice b{ color:var(--brand); }
  .steps{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
  .step{ display:flex; gap:12px; align-items:flex-start; }
  .step .num{ width:26px; height:26px; border-radius:50%; background:var(--gradient-primary); color:#fff; flex:none; display:grid; place-items:center; font-size:12px; font-weight:700; }
  .step .stxt{ font-size:13px; color:var(--text-muted); line-height:1.6; }
  .step .stxt b{ color:var(--text); }
  .faq details{ border:1px solid var(--border); border-radius:var(--radius-md); padding:0 14px; margin-bottom:9px; background:var(--surface); }
  .faq details summary{ font-size:13.5px; font-weight:600; color:var(--text); cursor:pointer; padding:12px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; }
  .faq details summary::-webkit-details-marker{ display:none; }
  .faq details summary::after{ content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:11px; color:var(--text-faint); transition:.2s; }
  .faq details[open] summary::after{ transform:rotate(180deg); }
  .faq details .fa{ padding:0 0 12px; font-size:13px; color:var(--text-muted); line-height:1.7; }
  .wm-hero{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; }
  .wm-hero .pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:99px; background:rgba(236,72,153,.12); color:#db2777; font-size:12.5px; font-weight:600; }

  /* ===== 顶部分类导航（飞鱼式 /extract/{slug}）===== */
  /* 分类导航：固定头部之下独立的吸顶栏（不再被主页头部遮盖） */
  .catnav{ display:flex; align-items:center; gap:6px; overflow-x:auto; padding:11px 16px; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:var(--header-height); z-index:150; margin-top:var(--header-height); scrollbar-width:thin; box-shadow:0 2px 10px rgba(0,0,0,.05); }
  /* 头部为 fixed，catnav 已占据其下方的 64px，main 不再额外留白 */
  .main{ margin-top:0; }
  .catnav::-webkit-scrollbar{ height:6px; }
  .catnav::-webkit-scrollbar-thumb{ background:var(--border); border-radius:99px; }
  .catnav a{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none; font-size:13.5px; font-weight:600; color:var(--text-muted); padding:7px 13px; border-radius:99px; border:1px solid transparent; transition:.16s; }
  .catnav a:hover{ color:var(--text); border-color:var(--border); background:#f6f7f9; }
  .catnav a.active{ color:#fff; background:var(--brand); border-color:var(--brand); }
  .catnav a .b-logo{ width:15px; height:15px; }
  .catnav a .b-mono{ font-size:12px; }
  .catnav .sep{ width:1px; height:20px; background:var(--border); margin:0 2px; flex:none; }
  .catnav .nav-label{ font-size:12px; font-weight:700; color:var(--text-faint); margin-right:2px; flex:none; letter-spacing:.04em; }

  /* ===== 平台 / 分类子页 hero ===== */
  .sub-hero{ padding:22px 16px 20px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--surface),#fafbfc); }
  .sub-hero .crumb{ font-size:12px; color:var(--text-muted); margin-bottom:14px; display:flex; gap:6px; align-items:center; }
  .sub-hero .crumb a{ color:var(--text-muted); text-decoration:none; }
  .sub-hero .crumb a:hover{ color:var(--brand); }
  .sub-hero .crumb i{ font-size:9px; opacity:.6; }
  .sub-hero .top{ display:flex; align-items:center; gap:16px; }
  .sub-hero .pic{ width:62px; height:62px; border-radius:16px; flex:none; display:grid; place-items:center; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.12); }
  .sub-hero .pic .b-logo{ width:36px; height:36px; }
  .sub-hero .pic .b-mono{ font-size:24px; }
  .sub-hero .pic i{ font-size:26px; }
  .sub-hero h1{ font-family:var(--font-display); font-size:clamp(22px,3.4vw,30px); font-weight:800; color:var(--text); margin:0; line-height:1.1; }
  .sub-hero .sub{ font-size:13px; color:var(--text-muted); margin-top:7px; max-width:780px; line-height:1.65; }
  .sub-hero .bar{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
  .sub-hero .bar input{ flex:1; min-width:240px; border:1px solid var(--border); border-radius:var(--radius); padding:11px 14px; font-size:14px; background:#fff; color:var(--text); }
  .sub-hero .bar input:focus{ outline:none; border-color:var(--brand); }
  .sub-hero .mt-inline{ display:flex; gap:8px; margin-top:13px; flex-wrap:wrap; }
  .sub-hero .mt-inline span{ font-size:12px; padding:5px 11px; border-radius:99px; background:var(--surface); border:1px solid var(--border); color:var(--text-muted); display:inline-flex; align-items:center; gap:6px; }
  .sub-hero .mt-inline i{ color:var(--brand); }
  .plat-card.active{ border-color:var(--brand); box-shadow:0 0 0 2px rgba(13,148,136,.18); }
  .more-platforms{ margin-top:18px; }
  .more-platforms .mp-head{ font-size:13px; font-weight:700; color:var(--text); margin-bottom:10px; }

  /* ===== 子页平台专属信息块（格式 / 提示 / FAQ）===== */
  .phero-info{ margin-top:18px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); padding:14px 16px; }
  .phero-info .pi-row{ display:flex; gap:12px; padding:8px 0; border-bottom:1px dashed var(--border); }
  .phero-info .pi-row:last-child{ border-bottom:none; }
  .phero-info .pi-k{ flex:none; width:74px; font-size:12.5px; font-weight:700; color:var(--brand); padding-top:1px; }
  .phero-info .pi-v{ font-size:13px; color:var(--text-muted); line-height:1.65; }
  .phero-info .pi-v b{ color:var(--text); }
  .phero-info .pi-faq{ margin-top:6px; }
  .phero-info .pi-faq summary{ font-size:13px; font-weight:600; color:var(--text); cursor:pointer; padding:8px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; }
  .phero-info .pi-faq summary::-webkit-details-marker{ display:none; }
  .phero-info .pi-faq summary::after{ content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:11px; color:var(--text-faint); transition:.2s; }
  .phero-info .pi-faq[open] summary::after{ transform:rotate(180deg); }
  .phero-info .pi-faq .faq-item{ padding:8px 0; border-top:1px dashed var(--border); }
  .phero-info .pi-faq .faq-item b{ display:block; font-size:13px; color:var(--text); margin-bottom:3px; }
  .phero-info .pi-faq .faq-item span{ font-size:12.5px; color:var(--text-muted); line-height:1.65; }

/* ===== 本轮升级：视觉 / 结构 / 互动 增强 ===== */
/* #2 状态色圆点 */
.status-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.status.done .status-dot,.queue-item.done .status-dot{ background:#10b981; }
.status.downloading .status-dot{ background:var(--brand); animation:pulseDot 1s infinite; }
.status.parsing .status-dot{ background:#eab308; }
.status.error .status-dot{ background:#ef4444; }
.status.queued .status-dot{ background:var(--text-faint); }
@keyframes pulseDot{ 0%,100%{opacity:1} 50%{opacity:.35} }
/* #3 顶部四色统计胶囊 */
.stat-bar{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px; }
.stat-cap{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--surface); border-radius:99px; padding:5px 12px; font-size:12.5px; font-weight:600; color:var(--text-muted); cursor:pointer; transition:.15s; }
.stat-cap:hover{ border-color:var(--brand); color:var(--brand); }
.stat-cap.on{ background:var(--brand-dim); color:var(--brand); border-color:var(--brand); }
.stat-cap .n{ font-variant-numeric:tabular-nums; }
.stat-cap.s-done .n{ color:#0f9d63; } .stat-cap.s-err .n{ color:#e04848; } .stat-cap.s-active .n{ color:var(--brand); }
/* #4 进行中卡片微高亮 */
.queue-item.downloading{ box-shadow:inset 4px 0 0 var(--brand), 0 0 0 3px var(--brand-dim), var(--shadow-md); border-color:var(--brand); }
/* #10 控制条 */
.control-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:10px; }
.control-bar .q-search{ flex:1; min-width:160px; border:1px solid var(--border); border-radius:var(--radius); padding:8px 12px; font-size:13px; font-family:inherit; background:#fff; color:var(--text); }
.control-bar .q-search:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-dim); }
.control-bar select{ border:1px solid var(--border); border-radius:var(--radius); padding:7px 10px; font-size:13px; font-family:inherit; background:#fff; color:var(--text); }
/* #23 数字等宽 */
.qi-meta .num,.qi-sub .num,.ds-num,.stat-cap .n{ font-variant-numeric:tabular-nums; }
/* #12 详情抽屉 */
.detail-drawer{ position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--surface); box-shadow:-12px 0 40px -12px rgba(0,0,0,.4); transform:translateX(100%); transition:transform .3s ease; z-index:200; display:flex; flex-direction:column; }
.detail-drawer.open{ transform:translateX(0); }
.dd-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); }
.dd-body{ padding:16px; overflow:auto; flex:1; }
.dd-cover{ width:100%; border-radius:var(--radius-md); margin-bottom:12px; background:var(--surface-2); }
.dd-row{ display:flex; gap:10px; padding:8px 0; border-bottom:1px dashed var(--border); font-size:13px; }
.dd-row .k{ flex:none; width:72px; font-weight:700; color:var(--brand); }
.dd-row .v{ color:var(--text-muted); word-break:break-all; }
.dd-mask{ position:fixed; inset:0; background:rgba(8,10,16,.4); z-index:199; opacity:0; pointer-events:none; transition:.3s; }
.dd-mask.open{ opacity:1; pointer-events:auto; }
/* #16 危险操作确认 action sheet */
.action-sheet{ position:fixed; left:50%; bottom:0; transform:translateX(-50%) translateY(100%); width:min(420px,94vw); background:var(--surface); border-radius:16px 16px 0 0; box-shadow:0 -10px 40px -10px rgba(0,0,0,.4); z-index:260; transition:transform .3s ease; padding:18px; }
.action-sheet.open{ transform:translateX(-50%) translateY(0); }
.action-sheet .as-title{ font-size:15px; font-weight:700; margin-bottom:6px; }
.action-sheet .as-tip{ font-size:12.5px; color:var(--text-muted); margin-bottom:14px; line-height:1.6; }
.action-sheet .as-btn{ width:100%; padding:11px; border-radius:var(--radius-md); font-size:14px; font-weight:600; border:1px solid var(--border); cursor:pointer; margin-top:8px; font-family:inherit; }
.action-sheet .as-btn.danger{ background:#ef4444; color:#fff; border-color:#ef4444; }
.action-sheet .as-btn.ghost{ background:var(--surface-2); color:var(--text); }
/* #24 回到顶部 */
.back-top{ position:fixed; right:18px; bottom:84px; width:42px; height:42px; border-radius:50%; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-md); color:var(--brand); cursor:pointer; font-size:16px; z-index:60; opacity:0; transform:translateY(12px); pointer-events:none; transition:.25s; }
.back-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
/* #21 完成瞬间轻弹 */
.queue-item.just-done{ animation:popDone .5s ease; }
@keyframes popDone{ 0%{ transform:scale(1); } 40%{ transform:scale(1.015); box-shadow:0 0 0 4px var(--brand-dim), var(--shadow-md); } 100%{ transform:scale(1); } }
/* #18 悬浮卡快捷操作 */
.hc-actions{ display:flex; gap:8px; margin-top:8px; }
.hc-actions button{ flex:1; border:1px solid var(--border); background:var(--surface); border-radius:8px; padding:6px 0; font-size:12px; cursor:pointer; color:var(--brand); }
.hc-actions button:hover{ background:var(--brand-dim); }
/* #25/#26 并发/限速控件 */
.concur-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 12px; font-size:13px; color:var(--text-muted); }
.concur-row input[type=range]{ accent-color:var(--brand); }
.concur-row input[type=number]{ width:96px; border:1px solid var(--border); border-radius:var(--radius); padding:6px 8px; font-family:inherit; }
/* #1 标签页图标统一（去掉 emoji 用 FA）*/
.tab .ti{ display:inline-flex; }


/* ---------- <style id="ubui-editorial"> ---------- */

:root{
  --brand:#0d9488;
  --gradient-primary:#0d9488;          /* 扁平化：渐变→纯色，去除 AI 渐变块 */
  --brand-hover:#0b7d74;
  --brand-dim:#e4f4f1;
  --brand-glow:rgba(13,148,136,.14);
  --ink:#16181d;
  --ink-soft:#5f6470;
  --ink-faint:#9a9ea8;
  --paper:#FBFAF6;
  --surface:#ffffff;
  --surface-2:#F5F3EE;
  --surface-hover:#EEECE5;
  --hair:#E7E3DA;
  --hair-strong:#D8D3C8;
  --text:#16181d;
  --text-muted:#5f6470;
  --text-faint:#9a9ea8;
  --text-2:#16181d;
  --border:#E7E3DA;
  --danger:#d6453f;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --radius:10px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-full:999px;
}
html{ scroll-behavior:smooth; }
body{ background:var(--paper); }

/* 容器收紧，编辑式留白（顶部留白收敛：去掉空 catnav 占位 + 减少 header 下额外间距） */
.main{ max-width:1080px; padding:18px 28px 80px; }
/* 空分类导航（主页）直接隐藏，避免顶部多出一截空白栏 */
.catnav:empty{ display:none; }

/* ===== Hero — 大字编辑式 ===== */
.hero{ position:relative; margin-bottom:30px; padding:8px 0 4px; }
.hero::before{ content:''; position:absolute; top:-30px; left:-40px; width:260px; height:260px;
  background:radial-gradient(circle, rgba(13,148,136,.12), transparent 70%); filter:blur(18px); pointer-events:none; }
.badge{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); color:var(--ink-soft);
  border:1px solid var(--hair-strong); padding:6px 13px; border-radius:var(--radius-full);
  font-size:12px; font-weight:600; letter-spacing:.06em; box-shadow:none; }
.badge i{ color:var(--brand); }
.hero h1{ font-family:var(--font-display); font-size:clamp(26px,3.4vw,38px); font-weight:700;
  letter-spacing:-.03em; line-height:1.12; color:var(--ink); margin:14px 0 12px; }
.hero p{ color:var(--ink-soft); font-size:15px; line-height:1.7; max-width:660px; }
.hero p b{ color:var(--ink); }
.hero-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.hero-chips .hc{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:var(--radius-full);
  border:1px solid var(--hair); background:var(--surface); color:var(--ink-soft); font-size:12.5px; font-weight:600; }
.hero-chips .hc i{ color:var(--brand); font-size:11px; }
.hero-chips .hc.vip{ border-color:var(--brand); color:var(--brand); background:var(--brand-dim); cursor:pointer; transition:.15s; }
.hero-chips .hc.vip:hover{ background:var(--brand); color:#fff; }
.hero-chips .hc.vip i{ color:#e0a93a; }
.hero-chips .hc.vip:hover i{ color:#fff; }
.hero-chips .hc.free{ border-color:var(--ok,#16a34a); color:var(--ok,#16a34a); background:rgba(22,163,74,.1); }
/* ---------- 统一搜索英雄区：品牌 + 广告词 + 能力标签，包在搜索框上方 ---------- */
.search-hero{ margin:0 0 18px; }
.search-hero .sh-title{ font-family:var(--font-display); font-size:28px; font-weight:800; letter-spacing:-.02em; color:var(--text); margin:13px 0 7px; line-height:1.15; }
.search-hero .sh-lead{ margin:0 0 14px; color:var(--text-muted); font-size:14.5px; line-height:1.65; max-width:680px; }
.search-hero .hero-chips{ margin-top:14px; }

/* ---------- 平台原生 hero：TikTok / YouTube 顶部做成品牌模块（仅这两页带 sh-tt / sh-yt） ----------
   * 目标：让页面第一眼就是平台身份，而不是通用白卡只换文字。
   * 仅用平台实色 + 描边环，不使用任何渐变背景（遵守「去渐变」铁律）。 */
.search-hero.sh-tt,
.search-hero.sh-yt{
  position:relative; overflow:hidden;
  border:1px solid var(--hair); border-radius:var(--radius-lg);
  background:var(--surface); padding:22px 24px 18px;
}
.search-hero.sh-tt::before,
.search-hero.sh-yt::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; }
.search-hero.sh-tt::before{ background:#FE2C55; }
.search-hero.sh-yt::before{ background:#FF0000; }
.search-hero .sh-brand{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.search-hero .sh-logo{ width:46px; height:46px; object-fit:contain; border-radius:12px; }
.search-hero.sh-tt .sh-logo{ background:#fff; padding:6px; box-shadow:0 0 0 2px #25F4EE, 0 0 0 4px #FE2C55; }
.search-hero.sh-yt .sh-logo{ background:#FF0000; padding:7px; }
.search-hero.sh-tt .badge,
.search-hero.sh-yt .badge{ color:#fff; border-color:transparent; }
.search-hero.sh-tt .badge{ background:#FE2C55; }
.search-hero.sh-yt .badge{ background:#FF0000; }
.search-hero.sh-tt .badge i,
.search-hero.sh-yt .badge i{ color:#fff; }
/* 首枚能力标签染平台色，强化专属属性 */
.search-hero.sh-tt .hero-chips .hc:first-child{ border-color:#FE2C55; color:#FE2C55; background:rgba(254,44,85,.08); }
.search-hero.sh-yt .hero-chips .hc:first-child{ border-color:#FF0000; color:#FF0000; background:rgba(255,0,0,.07); }
/* CTA 与主输入框聚焦色跟随平台（搜索框紧接 hero 之后） */
.search-hero.sh-tt + .panel.focus .btn-primary{ background:#FE2C55; }
.search-hero.sh-tt + .panel.focus .btn-primary:hover{ background:#e0214a; transform:translateY(-1px); }
.search-hero.sh-yt + .panel.focus .btn-primary{ background:#FF0000; }
.search-hero.sh-yt + .panel.focus .btn-primary:hover{ background:#e60000; transform:translateY(-1px); }
.search-hero.sh-tt + .panel.focus .input-bar input:focus{ border-color:#FE2C55; box-shadow:0 0 0 4px rgba(254,44,85,.14); }
.search-hero.sh-yt + .panel.focus .input-bar input:focus{ border-color:#FF0000; box-shadow:0 0 0 4px rgba(255,0,0,.12); }

.hero-chips .hc.free i{ color:var(--ok,#16a34a); }

/* 流程链 → 分段连接控件（无渐变、无箭头浮块） */
.chain{ display:flex; align-items:stretch; flex-wrap:wrap; margin-top:24px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--hair); }
.chain .node{ flex:1 1 auto; min-width:140px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 16px; background:var(--surface); border:none; border-right:1px solid var(--hair);
  font-size:13.5px; font-weight:600; color:var(--ink); border-radius:0; box-shadow:none; }
.chain .node:last-child{ border-right:none; }
.chain .node i{ color:var(--brand); }
.chain .node.hot{ background:var(--brand); color:#fff; }
.chain .node.hot i{ color:#fff; }
.chain .arrow{ display:none; }

/* ===== Tab — 下划线式（去 pill 填充）===== */
.tabs{ display:flex; gap:30px; background:transparent; padding:0; border:1px solid transparent; border-bottom:1px solid var(--hair); border-radius:0; margin-bottom:24px; flex-wrap:wrap; }
.tab{ flex:none; min-width:0; text-align:left; padding:0 0 14px; border-radius:0; font-size:15px; font-weight:600; color:var(--ink-soft); background:transparent; box-shadow:none; position:relative; }
.tab:hover{ color:var(--ink); background:transparent; }
.tab.on{ color:var(--ink); background:transparent; box-shadow:none; }
.tab.on::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--brand); }
.tab .ti{ font-size:15px; }

/* ===== Panel — 发丝边框、无重阴影 ===== */
.panel{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg); box-shadow:none; padding:28px; }
.panel.focus{ border-color:var(--brand); box-shadow:0 16px 42px -18px rgba(13,148,136,.26); position:sticky; top:8px; z-index:30; background:var(--surface); }

/* 输入与主按钮 — 扁平 */
.input-bar input{ background:var(--surface); border:1px solid var(--hair); }
.input-bar input:focus{ border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-dim); background:#fff; }
.btn-primary{ background:var(--brand); color:#fff; border:none; padding:0 22px; border-radius:var(--radius-md);
  font-weight:600; font-size:15px; box-shadow:none; transition:transform .15s, background .15s; }
.btn-primary:hover{ transform:translateY(-1px); background:var(--brand-hover); box-shadow:none; }
.btn-primary:active{ transform:scale(.98); }
.btn-primary:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.dl-link{ background:var(--brand); box-shadow:none; }
.dl-link:hover{ transform:translateY(-1px); background:var(--brand-hover); }
/* .qi-cover 已移除：封面仅保留动作条「<i class="fa-solid fa-image"></i> 封面」下载入口，避免卡片内重复展示 */


/* 分段控件 / 媒体 chips 激活态扁平 */
.seg{ border:1px solid var(--hair); border-radius:var(--radius); }
.seg button{ background:var(--surface-2); color:var(--ink-soft); }
.seg button.on{ background:var(--brand); color:#fff; }
.mchip{ border:1px solid var(--hair); background:var(--surface); color:var(--ink-soft); }
.mchip:hover{ color:var(--brand); border-color:var(--brand); }
.mchip.on{ background:var(--brand-dim); color:var(--brand); border-color:var(--brand); }

/* 队列项 — 发丝边框、无阴影 */
.queue-item{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius-lg); box-shadow:none; padding:14px 16px; }
.queue-item:hover{ box-shadow:none; border-color:var(--hair-strong); }
.queue-item.sel{ border-color:var(--brand); box-shadow:inset 4px 0 0 var(--brand), 0 0 0 3px var(--brand-dim); background:linear-gradient(90deg, rgba(13,148,136,.10), var(--surface) 24%); }
.queue-item.error{ border-color:rgba(214,69,63,.5); }
/* 队列筛选分段控件 */
.queue-filter{ display:inline-flex; gap:4px; background:var(--surface-2); border:1px solid var(--hair); border-radius:var(--radius-full); padding:4px; margin:0 0 12px; flex-wrap:wrap; }
.queue-filter button{ border:none; background:transparent; color:var(--text-muted); font-family:inherit; font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:var(--radius-full); cursor:pointer; transition:.15s; }
.queue-filter button:hover{ color:var(--brand); }
.queue-filter button.on{ background:var(--surface); color:var(--brand); box-shadow:var(--shadow-sm); }
.queue-filter button .qf-n{ font-size:11px; opacity:.7; margin-left:4px; }
  /* ===== P0 七条补充样式 ===== */
  .plat-filter#queuePlatFilter{ margin:0 0 12px; }
  .plat-filter .pf .pf-n{ font-size:10.5px; opacity:.7; margin-left:5px; }
  .qi-title.exp{ -webkit-line-clamp:unset; }
  .qi-expand{ flex:none; width:24px; height:24px; border:1px solid var(--hair); background:var(--surface); border-radius:7px; cursor:pointer; color:var(--text-faint); font-size:11px; display:grid; place-items:center; transition:.15s; }
  .qi-expand:hover{ color:var(--brand); border-color:var(--brand); }
  .queue-item.collapsed .qi-sub{ display:none; }
  .queue-item.collapsed .stage{ display:none; }
  .queue-item.collapsed .qi-progress{ display:none; }
  .queue-item.collapsed .qi-abar .pr-clarity{ display:none; }
  .err-agg{ display:none; align-items:center; gap:8px; margin:0 0 12px; padding:9px 13px; border-radius:var(--radius-md); background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.35); color:#e04848; font-size:13px; font-weight:600; cursor:pointer; transition:.15s; }
  .err-agg.show{ display:flex; }
  .err-agg:hover{ background:rgba(248,113,113,.18); }
  .err-agg i{ font-size:13px; }
  .bc-est{ font-size:12px; color:var(--text-muted); font-weight:500; margin-left:2px; }
  /* ===== P1/P2：拖拽解析浮层 + 图片淡入 ===== */
  .drop-overlay{ position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; background:rgba(13,148,136,.10); border:3px dashed var(--brand); border-radius:var(--radius-lg); color:var(--brand); font-size:19px; font-weight:700; letter-spacing:.5px; pointer-events:none; }
  .drop-overlay.show{ display:flex; }
  .b-logo{ opacity:0; transition:opacity .35s ease; background:transparent; }
  .img-cell img{ opacity:0; transition:opacity .35s ease; background:var(--surface-2); }
  .b-logo.ok, .img-cell img.ok{ opacity:1; }
/* P2 批次⑦：封面缩略图 + 悬浮预览卡 + 全选可见 + 剪贴板嗅探 + 响应式 */
.qi-thumb{ flex:none; width:84px; height:84px; border-radius:var(--radius-md); overflow:hidden; background:var(--surface-2); margin-right:12px; cursor:zoom-in; align-self:flex-start; }
.qi-thumb img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .35s ease; }
.qi-thumb img.ok{ opacity:1; }
.hover-card{ position:fixed; z-index:200; width:260px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:10px; display:none; pointer-events:none; }
.hover-card.show{ display:block; animation:hcIn .14s ease; }
@keyframes hcIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.hover-card img{ width:100%; height:150px; object-fit:cover; border-radius:var(--radius-md); background:var(--surface-2); }
.hover-card .hc-title{ margin-top:8px; font-size:13px; font-weight:700; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hover-card .hc-meta{ margin-top:4px; font-size:12px; color:var(--text-muted); }
.hover-card .hc-url{ margin-top:2px; font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qf-vis{ border:1px solid var(--border); background:var(--surface-2); color:var(--text); border-radius:99px; padding:5px 12px; font-size:12px; cursor:pointer; font-family:inherit; }
.qf-vis:hover{ border-color:var(--brand); color:var(--brand); }
.clip-hint{ display:none; align-items:center; gap:10px; margin:8px 0; padding:8px 12px; border-radius:var(--radius-md); background:rgba(13,148,136,.10); border:1px solid var(--brand-dim); font-size:13px; color:var(--text); }
.clip-hint.show{ display:flex; }
.clip-hint .ch-text{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clip-hint button{ border:none; border-radius:99px; padding:5px 12px; font-size:12px; cursor:pointer; font-family:inherit; }
.clip-hint .ch-add{ background:var(--brand); color:#fff; }
.clip-hint .ch-x{ background:transparent; color:var(--text-muted); }
@media (max-width:640px){
  .panel{ padding:12px; }
  .queue-item{ flex-wrap:wrap; gap:8px; }
  .platform-badge{ width:34px; height:34px; }
  .qi-thumb{ width:56px; height:56px; margin-right:8px; }
  .qi-main{ flex:1 1 100%; order:3; min-width:0; }
  .qi-abar{ flex-wrap:wrap; }
  .queue-filter{ overflow-x:auto; }
  .batch-bar{ left:12px; right:12px; transform:translateX(0) translateY(140%); flex-wrap:wrap; justify-content:center; }
  .batch-bar.show{ transform:translateX(0) translateY(0); }
  .panel.focus{ position:static; }
}
@media (hover:none){ .hover-card{ display:none!important; } }
/* 右键操作菜单 */
.ctx-menu{ position:fixed; z-index:200; min-width:168px; background:var(--surface); border:1px solid var(--hair-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:6px; display:none; }
.ctx-menu.open{ display:block; }
.ctx-menu button{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:transparent; color:var(--text); font-family:inherit; font-size:13px; padding:9px 10px; border-radius:var(--radius-sm); cursor:pointer; transition:.12s; }
.ctx-menu button:hover{ background:var(--brand-dim); color:var(--brand); }
.ctx-menu button.danger:hover{ background:rgba(224,72,72,.12); color:#e04848; }
.ctx-menu .ctx-sep{ height:1px; background:var(--hair); margin:5px 2px; }
/* 失败原因折叠 */
.qi-err{ margin-top:8px; border:1px solid rgba(224,72,72,.35); background:rgba(224,72,72,.07); border-radius:var(--radius-sm); font-size:12px; color:#c0362f; }
.qi-err > summary{ cursor:pointer; padding:7px 11px; font-weight:600; list-style:none; }
.qi-err > summary::-webkit-details-marker{ display:none; }
.qi-err > summary::before{ content:'⚠ '; }
.qi-err[open] > summary{ border-bottom:1px solid rgba(224,72,72,.25); }
.qi-err .qi-err-body{ padding:8px 11px 11px; line-height:1.6; color:#b3302a; }
.qi-err .qi-err-body a{ color:#e04848; font-weight:600; }
.file-ico, .platform-badge{ background:var(--brand); box-shadow:none; border-radius:12px; }
.status{ font-weight:600; }

/* 平台支持网格 — 扁平卡片 */
.plat-card{ border:1px solid var(--hair); background:var(--surface); border-radius:var(--radius-md); }
.plat-card:hover{ border-color:var(--brand); box-shadow:none; transform:translateY(-2px); }
.plat-card .pic{ border-radius:10px; }
.media-types.lite{ margin:30px 0 6px; }
.media-types.lite .mt-head{ font-size:14px; font-weight:700; color:var(--text-muted); margin-bottom:10px; }
.media-types.lite .mt-grid.lite{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.media-types.lite .mt-card{ padding:12px 14px; background:var(--surface-2); box-shadow:none; border-color:var(--hair); }
.media-types.lite .mt-card i{ font-size:15px; }
.media-types.lite .mt-card b{ font-size:13px; }
.media-types.lite .mt-card span{ font-size:11px; }
.parse-result{ background:linear-gradient(180deg,var(--brand-dim),rgba(13,148,136,.04)); border:1px solid rgba(13,148,136,.32); border-radius:var(--radius-lg); padding:16px 18px; margin-bottom:14px; }
.pr-head{ display:flex; gap:12px; align-items:center; margin-bottom:6px; }
.pr-cover{ width:56px; height:56px; object-fit:cover; border-radius:10px; border:1px solid var(--hair); background:var(--surface-2); flex:none; }
.pr-info{ min-width:0; }
.pr-title{ font-weight:700; font-size:14px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:520px; }
.pr-meta{ font-size:12px; color:var(--text-muted); margin-top:2px; }
.pr-bili-hint{ display:flex; gap:7px; align-items:flex-start; background:rgba(251,114,153,.1); border:1px solid rgba(251,114,153,.4); color:var(--text); border-radius:10px; padding:8px 11px; font-size:12px; line-height:1.55; margin-bottom:4px; }
.pr-bili-hint i{ color:#FB7299; margin-top:2px; flex:none; }
.pr-section{ padding-top:10px; margin-top:10px; border-top:1px solid var(--hair); }
.pr-sec-title{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:8px; }
.pr-sec-title i{ color:var(--brand); }
.pr-sec-body{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
/* —— 紧凑动作条：清晰度 + 主操作同行，杜绝按钮堆成长列 / 两端换行重复 —— */
.qi-abar{ display:flex; gap:6px; align-items:center; margin-top:10px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:3px; }
.qi-abar .pr-clarity{ flex:none; width:148px; min-width:0; }
.qi-abar .pr-btn{ flex:none; }
.pr-btn{ display:inline-flex; align-items:center; gap:5px; padding:7px 12px; border-radius:10px; border:1px solid var(--hair); background:var(--surface); color:var(--text); font-size:12.5px; font-weight:600; text-decoration:none; cursor:pointer; transition:transform .12s, background .15s, border-color .15s, color .15s; white-space:nowrap; }
.pr-btn:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-1px); }
.pr-btn:active{ transform:translateY(0) scale(.98); }
.pr-clarity{ padding:7px 10px; border-radius:10px; border:1px solid var(--hair); background:var(--surface); color:var(--text); font-size:12.5px; font-weight:600; }
/* —— 解析后选项条：清晰度 / 去水印 / 音频格式（默认项已预选，用户可改） —— */
.qi-optsbar{ display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; padding:8px 10px; border:1px dashed var(--hair-strong); border-radius:12px; background:var(--surface-2); }
.qi-optsbar .ol{ font-size:13px; color:var(--text-muted); }
.qi-optsbar .chk{ font-size:13px; color:var(--text-muted); display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.qi-optsbar .pr-clarity{ width:auto; }
.qi-upgrade{ display:flex; align-items:flex-start; gap:7px; font-size:12.5px; line-height:1.6; margin-top:10px; padding:9px 12px; border-radius:10px; background:rgba(45,212,191,.1); border:1px solid rgba(45,212,191,.3); color:var(--text); }
.qi-upgrade i{ color:var(--brand); margin-top:2px; flex:none; }
.qi-upgrade a{ color:var(--brand); font-weight:600; text-decoration:underline; }
.pr-dl{ background:var(--brand); color:#fff; border-color:var(--brand); }
.pr-dl:hover{ background:var(--brand-hover); color:#fff; }
.pr-raw{ background:var(--brand); color:#fff; border-color:var(--brand); }
.pr-raw:hover{ background:var(--brand-hover); color:#fff; }
.pr-copy{ margin-left:auto; padding:5px 10px; border-radius:9px; border:1px solid var(--hair); background:var(--surface); color:var(--text-muted); font-size:11.5px; font-weight:600; cursor:pointer; }
.pr-copy:hover{ border-color:var(--brand); color:var(--brand); }
.pr-busy{ opacity:.6; cursor:default; }
.pr-desc{ margin-top:12px; border:1px solid var(--hair); border-radius:10px; background:var(--surface); overflow:hidden; }
.pr-desc-head{ display:flex; align-items:center; justify-content:space-between; padding:7px 10px; background:var(--surface-2); border-bottom:1px solid var(--hair); font-size:12px; font-weight:700; color:var(--text); }
.pr-desc-body{ padding:10px; font-size:12.5px; line-height:1.6; color:var(--text-muted); max-height:140px; overflow:auto; white-space:pre-wrap; word-break:break-word; }
.wx-warn{ display:none; align-items:flex-start; gap:10px; margin:10px 0 2px; padding:11px 14px; border-radius:12px; background:rgba(224,72,72,.12); border:1px solid rgba(224,72,72,.4); color:#f3b1b1; font-size:12.5px; line-height:1.6; }
.wx-warn i{ color:#ff7a7a; margin-top:2px; }

/* ===== UX 细化（2026-09-19）：单下载按钮 / 焦点环 / 汇总条 / 完成脉冲 / 减动效 ===== */
.pr-btn:focus-visible, .icon-btn:focus-visible, .qi-title:focus-visible, .qi-copy:focus-visible, .qi-url:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}
.pr-btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }
.pr-btn[disabled]:hover{ border-color:var(--hair); color:var(--text); background:var(--surface); transform:none; }
.pr-aud-size{ font-size:11px; opacity:.82; font-weight:500; margin-left:2px; }
.qi-title{ user-select:none; -webkit-user-select:none; }
.qi-url{ cursor:pointer; transition:color .15s; }
.qi-url:hover{ color:var(--brand); }
/* 顶部进度汇总条 */
.dl-summary{ display:flex; align-items:center; gap:12px; margin:0 0 12px; padding:10px 14px; border:1px solid var(--hair); border-radius:var(--radius-md); background:var(--surface); font-size:12.5px; color:var(--text-muted); }
.dl-summary .ds-num{ font-weight:700; color:var(--text); white-space:nowrap; }
.dl-summary .ds-bar{ flex:1; height:6px; background:var(--surface-2); border-radius:99px; overflow:hidden; min-width:60px; }
.dl-summary .ds-bar > i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#10b981,#34d399); border-radius:99px; transition:width .6s ease; }
.dl-summary .ds-done{ color:#0f9d63; font-weight:700; white-space:nowrap; }
/* 全部完成：队列整体轻 pulse 一次 */
.queue.all-done{ animation:donePulse 1s ease; }
@keyframes donePulse{ 0%{ box-shadow:0 0 0 0 rgba(16,185,129,0); } 30%{ box-shadow:0 0 0 5px rgba(16,185,129,.16); } 100%{ box-shadow:0 0 0 0 rgba(16,185,129,0); } }
/* 清空按钮 hover 变红 */
#clearBtn:hover{ color:var(--danger); border-color:var(--danger); background:rgba(248,113,113,.08); }
/* 下载中状态徽标轻微呼吸 */
.status.downloading{ animation:breathe 1.6s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.62; } }
/* 空态引导 chips */
.empty-chips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:14px 0 4px; }
.empty-chips span{ font-size:12px; font-weight:600; padding:5px 12px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); }
.empty-sub{ font-size:12px; color:var(--text-faint); margin-top:6px; }
/* 尊重「减少动效」系统偏好 */
@media (prefers-reduced-motion: reduce){
  .queue-item, .sk-line, .status.downloading, .queue.all-done{ animation:none !important; }
  .qi-progress > i, .dl-summary .ds-bar > i{ transition:none !important; }
}
.wx-warn b{ color:#ffd0d0; }

/* 微信视频号引导卡片已移除（路B），现走正常解析链路（后端 WX_RESOLVER） */

/* 场景 tab / 平台筛选激活态 */
.scenario-tabs .stab{ border:1px solid var(--hair); background:var(--surface-2); color:var(--ink-soft); }
.scenario-tabs .stab.on{ background:var(--brand); color:#fff; border-color:transparent; }
.plat-filter .pf{ border:1px solid var(--hair); background:var(--surface); color:var(--ink-soft); }
.plat-filter .pf.on{ background:var(--brand-dim); color:var(--brand); border-color:var(--brand); }

/* 章节标题 — 大字 */
.section-title{ font-family:var(--font-display); font-size:clamp(22px,3vw,30px); font-weight:700; letter-spacing:-.02em; color:var(--ink); margin:40px 0 6px; }
.section-title .tag{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:99px; background:var(--brand-dim); color:var(--brand); }
.section-sub{ color:var(--ink-soft); font-size:13.5px; margin-bottom:16px; }

/* 信任层 — 扁平公告 */
.notice{ background:var(--brand-dim); border:1px solid var(--hair); border-left:3px solid var(--brand); color:var(--ink); border-radius:var(--radius-md); }
.notice b{ color:var(--brand); }
.step .num{ background:var(--brand); box-shadow:none; }

/* 列表标题 */
.list-head h2{ font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--ink); }

/* 入场动效（签名微交互，克制）*/
@keyframes ubuiRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.hero .badge{ animation:ubuiRise .5s .04s both; }
.hero h1{ animation:ubuiRise .7s .1s both; }
.hero p{ animation:ubuiRise .6s .18s both; }
.hero .chain{ animation:ubuiRise .6s .24s both; }

/* 响应式收紧 */
@media(max-width:640px){
  .main{ padding-left:18px; padding-right:18px; }
  .hero h1{ font-size:clamp(22px,6.5vw,30px); }
  .tabs{ gap:18px; }
}

/* ===== VIP 专享（平台锁定 + 开通弹窗）===== */
.plat-card.vip-locked{ opacity:.62; cursor:pointer; }
.plat-card.vip-locked:hover{ opacity:1; border-color:var(--brand); }
.plat-card .lock{ margin-left:auto; color:#e0a93a; font-size:11px; font-weight:700; display:inline-flex; align-items:center; gap:4px; }
.plat-card .ok.vip-ok{ color:#e0a93a; }
.plat-filter .pf i{ color:#e0a93a; }
.vip-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:200; padding:20px; }
.vip-modal.on{ display:flex; }
.vip-mask{ position:absolute; inset:0; background:rgba(22,24,29,.5); backdrop-filter:blur(3px); }
.vip-card{ position:relative; background:var(--surface); border:1px solid var(--hair-strong); border-radius:var(--radius-xl);
  padding:32px 30px; max-width:440px; width:100%; box-shadow:0 24px 60px -20px rgba(0,0,0,.3); animation:ubuiRise .35s both; }
.vip-x{ position:absolute; top:14px; right:16px; border:none; background:transparent; font-size:22px; color:var(--ink-faint); cursor:pointer; line-height:1; }
.vip-crown{ width:54px; height:54px; border-radius:16px; background:var(--brand-dim); color:#e0a93a; display:grid; place-items:center; font-size:24px; margin-bottom:14px; }
.vip-card h3{ font-family:var(--font-display); font-size:21px; font-weight:700; color:var(--ink); margin:0 0 6px; }
.vip-sub{ font-size:13px; color:var(--ink-soft); line-height:1.6; margin:0 0 14px; }
.vip-plats{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.vip-plats span{ border:1px solid var(--hair); background:var(--surface-2); color:var(--ink-soft); padding:5px 11px; border-radius:99px; font-size:12px; font-weight:600; }
.vip-feats{ margin:0 0 18px; padding-left:18px; }
.vip-feats li{ font-size:12.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:6px; }
.vip-acts{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.vip-acts .btn-primary{ flex:1; justify-content:center; text-decoration:none; padding:11px 16px; }


/* ---------- <style id="dy-page"> ---------- */

.dy-page{ --dy1:#25F4EE; --dy2:#FE2C55; --dy-ink:#161823; --dy-dim:rgba(37,244,238,.12); --dy2dim:rgba(254,44,85,.1); }
.dy-page .dy-hero{ position:relative; overflow:hidden; border-radius:16px; padding:34px 32px; background:linear-gradient(120deg,#0b0b10 0%,#161823 55%,#231320 100%); color:#fff; box-shadow:0 18px 40px -22px rgba(0,0,0,.5); }
.dy-page .dy-hero::before{ content:''; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,var(--dy1) 0%,transparent 70%); opacity:.35; }
.dy-page .dy-hero::after{ content:''; position:absolute; left:-40px; bottom:-80px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,var(--dy2) 0%,transparent 70%); opacity:.3; }
.dy-page .dy-crumb{ font-size:12.5px; color:rgba(255,255,255,.6); margin-bottom:14px; position:relative; }
.dy-page .dy-crumb a{ color:rgba(255,255,255,.75); text-decoration:none; }
.dy-page .dy-crumb a:hover{ color:var(--dy1); }
.dy-page .dy-top{ display:flex; gap:18px; align-items:center; position:relative; }
.dy-page .dy-logo{ width:64px; height:64px; border-radius:18px; flex:none; display:grid; place-items:center; font-size:30px; color:#fff; background:linear-gradient(135deg,var(--dy1),var(--dy2)); box-shadow:0 8px 20px -8px var(--dy2); }
.dy-page .dy-title{ font-size:30px; font-weight:800; letter-spacing:-.5px; margin:0; }
.dy-page .dy-title b{ color:var(--dy1); }
.dy-page .dy-sub{ margin:8px 0 0; font-size:14px; color:rgba(255,255,255,.78); line-height:1.65; max-width:680px; }
.dy-page .dy-bar{ display:flex; gap:10px; margin-top:22px; position:relative; }
.dy-page .dy-bar input{ flex:1; height:50px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; padding:0 16px; font-size:14px; }
.dy-page .dy-bar input::placeholder{ color:rgba(255,255,255,.45); }
.dy-page .dy-bar input:focus{ outline:none; border-color:var(--dy1); box-shadow:0 0 0 4px var(--dy-dim); }
.dy-page .dy-bar .btn-primary{ height:50px; padding:0 22px; border-radius:12px; border:none; font-weight:700; font-size:14.5px; background:linear-gradient(135deg,var(--dy1),var(--dy2)); color:#0b0b10; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform .15s; }
.dy-page .dy-bar .btn-primary:hover{ transform:translateY(-2px); }
.dy-page .dy-cover{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:13px; color:rgba(255,255,255,.82); cursor:pointer; user-select:none; }
.dy-page .dy-cover input{ width:16px; height:16px; accent-color:var(--dy1); }
.dy-page .dy-sec{ margin-top:26px; }
.dy-page .dy-sec-h{ font-size:18px; font-weight:800; color:var(--text); margin:0 0 4px; display:flex; align-items:center; gap:8px; }
.dy-page .dy-sec-h i{ color:var(--dy2); }
.dy-page .dy-sec-s{ font-size:13px; color:var(--text-muted); margin:0 0 14px; }
.dy-page .dy-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.dy-page .dy-feat{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); padding:18px; }
.dy-page .dy-feat .ico{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:18px; color:#fff; background:linear-gradient(135deg,var(--dy1),var(--dy2)); margin-bottom:12px; }
.dy-page .dy-feat h4{ font-size:15px; margin:0 0 6px; color:var(--text); }
.dy-page .dy-feat p{ font-size:12.5px; color:var(--text-muted); line-height:1.65; margin:0; }
.dy-page .dy-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.dy-page .dy-step{ border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; background:var(--surface); }
.dy-page .dy-step .n{ width:26px; height:26px; border-radius:50%; background:var(--dy-ink); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; margin-bottom:10px; }
.dy-page .dy-step h5{ font-size:13.5px; margin:0 0 5px; color:var(--text); }
.dy-page .dy-step p{ font-size:12px; color:var(--text-muted); line-height:1.6; margin:0; }
.dy-page .dy-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.dy-page .dy-ct{ border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; text-align:center; background:var(--surface); }
.dy-page .dy-ct .e{ font-size:22px; margin-bottom:8px; }
.dy-page .dy-ct .t{ font-size:13px; font-weight:600; color:var(--text); }
.dy-page .dy-ct .d{ font-size:11.5px; color:var(--text-muted); margin-top:3px; }
.dy-page .dy-dist{ border:1px solid var(--border); border-radius:var(--radius-md); background:linear-gradient(135deg,var(--dy-dim),var(--dy2dim)); padding:20px; }
.dy-page .dy-dist .dchips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.dy-page .dy-dst{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:99px; border:1px solid var(--c); color:var(--c); background:#fff; font-size:13px; font-weight:600; }
.dy-page .dy-dst .dy-dst-ico{ font-size:14px; }
.dy-page .dy-note{ font-size:12px; color:var(--text-muted); margin-top:12px; line-height:1.7; }
.dy-page .dy-note b{ color:var(--dy2); }
.dy-page .dy-faq{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); padding:6px 16px; }
.dy-page .dy-faq details{ border-top:1px dashed var(--border); }
.dy-page .dy-faq details:first-child{ border-top:none; }
.dy-page .dy-faq summary{ font-size:13.5px; font-weight:600; color:var(--text); cursor:pointer; padding:12px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.dy-page .dy-faq summary::-webkit-details-marker{ display:none; }
.dy-page .dy-faq summary::after{ content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:11px; color:var(--text-muted); transition:.2s; }
.dy-page .dy-faq details[open] summary::after{ transform:rotate(180deg); }
.dy-page .dy-faq .ans{ font-size:12.5px; color:var(--text-muted); line-height:1.7; padding:0 0 12px; }
.dy-page .dy-more{ margin-top:24px; }
@media (max-width:860px){ .dy-page .dy-feats,.dy-page .dy-steps{ grid-template-columns:repeat(2,1fr);} .dy-page .dy-grid{ grid-template-columns:repeat(3,1fr);} .dy-page .dy-title{ font-size:24px; } }


/* ---------- <style id="(anon)"> ---------- */

.cookie-modal{ position:fixed; inset:0; z-index:300; display:none; }
      .cookie-modal.open{ display:block; }
      .cookie-modal-mask{ position:absolute; inset:0; background:rgba(8,10,16,.6); backdrop-filter:blur(2px); }
      .cookie-modal-box{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(660px,92vw); max-height:86vh; overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 24px 60px -20px rgba(0,0,0,.6); }
      .cm-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); font-weight:700; font-size:15px; position:sticky; top:0; background:var(--surface); z-index:1; }
      .cm-head .cm-x{ background:none; border:none; color:var(--text-muted); font-size:22px; cursor:pointer; line-height:1; }
      .cm-body{ padding:16px 18px 20px; }
      .cm-tip{ font-size:13px; color:var(--text-muted); line-height:1.7; margin:0 0 12px; }
      .cm-tip b{ color:var(--brand); }
      .cm-steps{ display:grid; gap:10px; margin-bottom:14px; }
      .cm-step{ display:flex; gap:12px; }
      .cm-step>b{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-size:12px; }
      .cm-step div{ font-size:13px; line-height:1.6; }
      .cm-step div span{ color:var(--text-muted); display:block; margin-top:2px; }
      .cm-step kbd{ background:#222; border:1px solid var(--border); border-radius:5px; padding:1px 6px; font-size:12px; }
      .cm-plats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
      .cmp{ border:1px solid var(--border); border-radius:12px; padding:12px; font-size:12.5px; line-height:1.6; }
      .cmp i{ font-size:16px; margin-right:6px; }
      .cmp b{ font-size:13.5px; }
      .cmp span{ display:block; color:var(--text-muted); margin-top:4px; }
      .cm-note{ font-size:12px; color:var(--text-muted); line-height:1.7; margin:14px 0 0; border-top:1px dashed var(--border); padding-top:12px; }
      .cookie-guide-link{ color:var(--brand); font-size:12.5px; text-decoration:none; }
      .cookie-guide-link:hover{ text-decoration:underline; }
      .url-hint{ font-size:12px; color:var(--text-muted); margin:8px 2px 0; line-height:1.6; }
      .cm-find{ display:flex; gap:8px; align-items:flex-start; background:var(--brand-dim); border:1px solid rgba(13,148,136,.28); color:var(--text); border-radius:10px; padding:10px 12px; font-size:12.5px; line-height:1.6; margin:10px 0 4px; }
      .cm-find i{ color:var(--brand); margin-top:2px; }
      .cm-find code{ background:rgba(13,148,136,.14); border-radius:5px; padding:1px 5px; font-size:12px; }
      .cmp-steps{ display:block; color:var(--text-muted); margin-top:5px; line-height:1.65; }
      .cmp-steps b{ color:var(--brand); }
      .cmp-steps code{ background:#222; border:1px solid var(--border); border-radius:5px; padding:1px 5px; font-size:11.5px; color:#fff; }
      .cmp.bili{ border-color:rgba(251,114,153,.5); background:linear-gradient(180deg,rgba(251,114,153,.08),transparent); }
      .cmp.bili i{ color:#FB7299; }
      @media (max-width:620px){ .cm-plats{ grid-template-columns:1fr; } }
      .ext-pair{ margin-top:12px; border:1px solid var(--hair); border-radius:12px; padding:12px 14px; background:linear-gradient(180deg,rgba(13,148,136,.05),transparent); }
      .ext-pair-head{ font-size:13px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; }
      .ext-pair-head i{ color:var(--brand); }
      .ext-pair-tip{ font-size:12px; color:var(--text-muted); line-height:1.6; margin:6px 0 8px; }
      .ext-pair-tip b{ color:var(--brand); }
      .ext-status{ font-size:12.5px; color:var(--text-muted); display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:9px; background:var(--surface-2); }
      .ext-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
      .ext-dot.on{ background:#16c784; box-shadow:0 0 0 3px rgba(22,199,132,.18); }
      .ext-dot.off{ background:#9aa7b2; }
      .ext-token-row{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12px; color:var(--text-muted); flex-wrap:wrap; }
      .ext-token-row code{ background:#222; border:1px solid var(--hair); border-radius:6px; padding:2px 8px; font-size:12px; color:#fff; }
      .ext-domains{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
      .ext-chip{ font-size:11.5px; background:rgba(13,148,136,.12); border:1px solid rgba(13,148,136,.3); color:var(--brand); border-radius:20px; padding:2px 9px; }


/* ---------- <style id="responsive-polish"> ---------- */

/* ===== 播放列表条目（桌面） ===== */
.pl-list{ display:grid; gap:8px; margin-top:14px; max-height:46vh; overflow:auto; border:1px solid var(--border); border-radius:12px; padding:8px; background:var(--surface-2); }
.pl-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; background:var(--surface); border:1px solid var(--hair); cursor:pointer; font-size:13.5px; }
.pl-row:hover{ border-color:var(--brand); }
.pl-row input{ width:16px; height:16px; flex:none; accent-color:var(--brand); }
.pl-idx{ width:22px; color:var(--text-muted); flex:none; font-variant-numeric:tabular-nums; }
.pl-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.pl-dur{ color:var(--text-muted); font-size:12px; flex:none; font-variant-numeric:tabular-nums; }

/* ===== 移动端打磨 ===== */
@media (max-width:760px){
  html,body{ overflow-x:hidden; }
  .back-home{ white-space:nowrap; flex:none; }
  body{ padding-bottom:88px; }
  .tabs{
    position:fixed; left:0; right:0; bottom:0; z-index:60; margin:0;
    border-radius:0; border:1px solid var(--border); border-top:1px solid var(--border);
    background:var(--surface); padding:6px env(safe-area-inset-bottom,0) 6px; gap:0; flex-wrap:nowrap;
    justify-content:space-around; box-shadow:0 -8px 24px -12px rgba(0,0,0,.4);
  }
  .tabs .tab{ flex:1; min-width:0; white-space:nowrap; flex-direction:column; gap:3px; padding:7px 2px; font-size:11px; border-radius:10px; justify-content:center; align-items:center; }
  .tabs .tab .ti{ font-size:17px; }
  main{ padding-left:14px; padding-right:14px; padding-top:calc(var(--header-height) + 16px); padding-bottom:64px; }
  .input-bar{ flex-wrap:wrap; gap:8px; }
  .input-bar .lead-ico{ display:none; }
  .input-bar input#urlInput{ flex:1 1 100%; order:1; }
  /* 移动端：提示条改为独立一行、脱离绝对定位 —— 原来 position:absolute 没被重置，
     满宽后整条压在输入框上（用户反馈：红色大条挡住整个搜索框且关不掉） */
  .input-bar .detect-chip{
    order:2; flex:1 1 100%; position:static; transform:none; justify-content:center;
    box-shadow:none; margin:0; max-width:100%; white-space:normal; text-align:center;
  }
  .input-bar .input-clear{ order:3; }
  /* 移动端移除粘贴按钮：navigator.clipboard 在移动端 WebView 常无权限，
     点了只会弹"请长按输入框粘贴"，不如直接用系统原生长按粘贴 */
  .input-bar .input-paste, .input-paste{ display:none !important; }
  .input-bar .btn-primary{ order:4; flex:1 1 auto; justify-content:center; }
  .opts-row{ gap:8px; }
  .opts-row select, .opts-row .chk, .opts-row .mini-btn{ font-size:13px; }
  .btn-primary, .mini-btn{ min-height:42px; }
  .plat-grid{ grid-template-columns:repeat(2,1fr); }
  .batch-bar{ left:8px; right:8px; bottom:72px; transform:translateY(180%); flex-wrap:wrap; gap:8px; padding:10px 12px; justify-content:flex-start; overflow-x:auto; }
  .batch-bar.show{ transform:translateY(0); }
  .queue-item{ padding:14px; }
  .qi-actions{ flex-wrap:wrap; }
  .qi-actions button, .pr-btn{ min-height:40px; }
  .adv-body input[type=text], .adv-body textarea{ width:100%; box-sizing:border-box; }
  .cookie-modal-box{ width:94vw; }
  .author-card .ah{ flex-wrap:wrap; }
  .article-preview .img-grid{ grid-template-columns:repeat(2,1fr); }
  .text-box{ max-height:220px; }
  .pl-list{ max-height:40vh; }
  .pl-row{ font-size:14px; padding:10px; }
}
@media (max-width:420px){
  .plat-grid{ grid-template-columns:repeat(2,1fr); }
  .tabs .tab{ font-size:10px; }
  .opts-row{ flex-direction:column; align-items:stretch; }
  .opts-row .chk{ justify-content:flex-start; }
}

/* ===================================================================
   顶部站点导航（全站共用）：logo 左 + 文字链接中 + 头像/登录注册右
   常规站点头部口径：通栏白底 + 发丝底线；不做等分、不做药丸、不浮空
   =================================================================== */
.catbar{ position:sticky; top:0; z-index:300; width:100%; margin:0 0 26px; padding:0;
  background:var(--surface,#fff); border:0; border-bottom:1px solid var(--hair,#E7E3DA);
  box-shadow:none; }
.cb-in{ max-width:1180px; margin:0 auto; padding:0 32px; height:76px;
  display:flex; align-items:center; gap:32px; }
.cb-brand{ display:flex; align-items:center; gap:6px; text-decoration:none; flex:none;
  -webkit-tap-highlight-color:transparent; }
.cb-mark{ width:34px; height:34px; border-radius:10px; background:var(--brand,#0d9488); color:#fff;
  display:grid; place-items:center; font-size:18px; font-weight:800;
  box-shadow:0 6px 14px -6px var(--brand-glow,rgba(13,148,136,.55)); }
.cb-bt{ font-size:18px; font-weight:800; color:var(--text,#16181d); letter-spacing:.3px; }
.cb-logo{ height:30px; width:auto; display:block; }
.cb-bs{ font-size:13px; font-weight:500; color:var(--text-faint,#8a8f9a); margin-left:0; }
.cb-links{ display:flex; align-items:center; gap:5px; min-width:0; margin:0 auto;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.cb-links::-webkit-scrollbar{ display:none; }
.cb-links a{ flex:none; padding:11px 16px; border-radius:10px; text-decoration:none;
  font-size:15.5px; font-weight:500; color:var(--text-muted,#5f6470); white-space:nowrap;
  transition:background .15s ease, color .15s ease; -webkit-tap-highlight-color:transparent; }
.cb-links a:hover{ color:var(--text,#16181d); background:var(--surface-2,#F5F3EE); }
.cb-links a.on{ color:var(--brand,#0d9488); font-weight:700; background:var(--brand-dim,#e4f4f1); }
.cb-links a:focus-visible, .cb-auth a:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.cb-auth{ margin-left:auto; flex:none; display:flex; align-items:center; gap:12px; }
.cb-auth .cb-login{ font-size:15px; font-weight:600; color:var(--text-muted,#5f6470);
  text-decoration:none; padding:10px 12px; border-radius:10px; transition:.15s;
  -webkit-tap-highlight-color:transparent; }
.cb-auth .cb-login:hover{ color:var(--text,#16181d); background:var(--surface-2,#F5F3EE); }
.cb-auth .cb-reg{ font-size:15px; font-weight:600; text-decoration:none; color:#fff;
  background:var(--brand,#0d9488); padding:11px 22px; border-radius:999px; transition:.15s;
  -webkit-tap-highlight-color:transparent; }
.cb-auth .cb-reg:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.cb-auth .cb-user{ display:flex; align-items:center; gap:10px; min-width:0; }
.cb-ava{ width:34px; height:34px; border-radius:50%; background:var(--brand,#0d9488); color:#fff;
  display:grid; place-items:center; font-size:14px; font-weight:700; flex:none; }
.cb-lang{ position:relative; flex:none; }
.cb-lang>summary{ list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:6px; padding:9px 14px;
  border:1px solid var(--hair,#E7E3DA); border-radius:999px; background:var(--surface,#fff);
  font-size:14px; font-weight:700; color:var(--text-muted,#5f6470);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent; }
.cb-lang>summary::-webkit-details-marker{ display:none; }
.cb-lang>summary:hover{ color:var(--text,#16181d); background:var(--surface-2,#F5F3EE); }
.cb-lang[open]>summary{ color:var(--brand,#0d9488);
  background:var(--brand-dim,#e4f4f1); border-color:var(--brand-dim,#e4f4f1); }
.cb-lang>summary .fa-solid{ font-size:10px; opacity:.55; margin-left:1px; }
/* ⚠ 用图片而不是 emoji：Windows 无国旗 emoji 字体，🇨🇳 会退化成 "CN" 与缩写重复 */
.cb-flag{ width:20px; height:auto; flex:none; border-radius:2.5px;
  box-shadow:0 0 0 1px rgba(16,20,26,.10); background:var(--surface-2,#F5F3EE); }
.cb-langmenu .cb-flag{ width:19px; }
.cb-lang>summary:focus-visible, .cb-langmenu a:focus-visible{
  outline:2px solid var(--brand,#0d9488); outline-offset:2px; }
.cb-langmenu{ position:absolute; right:0; top:calc(100% + 10px); z-index:320; min-width:214px;
  max-height:calc(100vh - 150px); overflow:auto; padding:6px;
  background:var(--surface,#fff); border:1px solid var(--hair,#E7E3DA);
  border-radius:16px; box-shadow:0 16px 40px -12px rgba(16,20,26,.22); }
.cb-langmenu a{ display:flex; align-items:center; gap:8px; padding:9px 11px;
  border-radius:10px; font-size:14px; color:var(--text,#16181d);
  text-decoration:none; white-space:nowrap; }
.cb-langmenu a:hover{ background:var(--surface-2,#F5F3EE); }
.cb-langmenu a.on{ background:var(--brand-dim,#e4f4f1); color:var(--brand,#0d9488); font-weight:700; }
.cb-langmenu a b{ margin-left:6px; font-weight:700; letter-spacing:.3px; }
.cb-langmenu a em{ margin-left:auto; font-style:normal; font-size:12.5px;
  color:var(--text-faint,#8a8f9a); }
.cb-langmenu a.on em{ color:var(--brand,#0d9488); }
.cb-un{ font-size:15px; font-weight:600; color:var(--text,#16181d); max-width:130px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cb-ext{ flex:none; display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px; border-radius:999px;
  border:1px solid rgba(13,148,136,.35); background:rgba(13,148,136,.07); color:var(--brand,#0d9488);
  cursor:pointer; font-size:13.5px; font-weight:700; text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:transform .08s ease, background .15s ease, border-color .15s ease; }
.cb-ext:hover{ background:rgba(13,148,136,.14); border-color:var(--brand,#0d9488); }
.cb-ext:active{ transform:scale(.95); }
@media (max-width:820px){
  .cb-lang>summary{ padding:8px 12px; font-size:13px; }
  .cb-langmenu{ min-width:196px; }
  .cb-flag{ width:18px; }
  .cb-in{ height:auto; min-height:62px; padding:calc(env(safe-area-inset-top,0px) + 6px) 16px 6px; gap:14px; }
  .cb-bs{ display:none; }
  .cb-logo{ height:26px; }
  .cb-share-txt{ display:none; }
  .cb-ext{ padding:0 11px; }
  .cb-bt{ font-size:16.5px; }
  .cb-links a{ padding:9px 12px; font-size:14px; }
  .cb-auth{ gap:8px; }
  .cb-auth .cb-login{ padding:9px 8px; }
  .cb-auth .cb-reg{ padding:9px 16px; }
  .cb-ava{ width:30px; height:30px; font-size:13px; }
  .cb-un{ display:none; }   /* 小屏只留头像圆点 */
  .cb-ext{ display:none !important; }   /* 移动端无需浏览器插件 */
}

/* ===== 升级迭代补强（批次 B/C，本地 3000 端口） ===== */
/* P1-95：移动端触达 ≥44px，避免误触清晰度 / 格式 */
@media (max-width:640px){
  .mini-btn,.pr-sel,.qf-chk input,.pr-btn{min-height:44px;}
  .qi-retry{min-height:44px;}
}
/* P1-78：完成态状态徽标打勾微动画 */
.queue-item.done .st-done{animation:ycPop .35s ease;}
@keyframes ycPop{0%{transform:scale(.6);opacity:.2}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
/* P1-93：空状态隐私说明 */
.empty-priv{font-size:12px;color:var(--text-muted,#5f6470);margin-top:8px;opacity:.85}

/* ===== 升级迭代补强（P1-22 / P1-20 / P1-14 / P1-76） ===== */
.qi-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 2px 12px; border-bottom:1px solid var(--hair,#E7E3DA); margin-bottom:12px; }
.qi-toolbar .qi-count{ font-size:12.5px; color:var(--text-muted,#5f6470); margin-right:auto; }
.qi-toolbar .qc-danger{ color:#ef4444; border-color:#ef4444; }
.qi-toolbar .qc-danger:hover{ background:#ef4444; color:#fff; }
.queue-item.playlist-done{ opacity:.92; }
/* P1-14：移动端输入框字号≥16px，禁止 iOS 聚焦缩放 */
@media (max-width:768px){
  #urlInput, #dropPaste, input[type="text"], input[type="url"], textarea, select.pr-sel{ font-size:16px !important; }
}
/* P1-76：统一按钮按压微反馈（去系统高亮后补回 :active） */
.mini-btn, .pr-btn, .qi-remove, .pr-sel, .qf-chk{ -webkit-tap-highlight-color:transparent; transition:transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease; }
.mini-btn:active, .pr-btn:active, .qi-remove:active{ transform:scale(.95); }

/* ===== P2-84 下载历史抽屉（复用 saveHistory 已存 localStorage 数据） ===== */
.yc-overlay{ position:fixed; inset:0; background:rgba(15,17,22,.5); display:none; align-items:center; justify-content:center; z-index:9000; padding:20px; }
.yc-overlay.show{ display:flex; }
.yc-drawer{ background:var(--surface,#fff); border-radius:16px; width:min(460px,100%); max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px -20px rgba(0,0,0,.5); }
.yc-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--hair,#E7E3DA); font-size:16px; }
.yc-drawer-head b{ display:flex; align-items:center; gap:8px; }
.yc-drawer-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px; border-top:1px solid var(--hair,#E7E3DA); }
.yc-hist-list{ overflow:auto; padding:10px 14px; }
.yc-hist-item{ display:flex; align-items:center; gap:10px; padding:10px 6px; border-bottom:1px solid var(--hair,#E7E3DA); }
.yc-hist-item:last-child{ border-bottom:none; }
.yc-hist-title{ flex:1; min-width:0; font-size:13.5px; color:var(--text,#16181d); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yc-hist-meta{ font-size:11.5px; color:var(--text-muted,#5f6470); flex:none; }

/* ===== P1-24 解析 / 排队中骨架屏（shimmer 占位） ===== */
.qi-skel{ display:flex; gap:8px; padding:6px 2px 2px; }
.qi-skel span{ height:8px; border-radius:99px; background:linear-gradient(90deg,var(--surface-2,#eef2f1) 25%,var(--brand-dim,#e4f4f1) 37%,var(--surface-2,#eef2f1) 63%); background-size:400% 100%; animation:ycShimmer 1.4s ease infinite; }
.qi-skel span:nth-child(1){ width:32%; }
.qi-skel span:nth-child(2){ width:46%; animation-delay:.15s; }
.qi-skel span:nth-child(3){ width:22%; animation-delay:.3s; }
@keyframes ycShimmer{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }

/* ===== M2 移动端通用补充（2026-10-12） ===== */
/* 登录/注册已移除，空容器隐藏避免占位 */
.cb-auth:empty{ display:none!important; }
/* 移动端禁用 hover 残留态（触摸设备无真实 hover） */
@media (hover:none){
  .cb-links a:hover, .cb-auth a:hover, .cb-reg:hover, .pl-row:hover, .pr-btn:hover,
  .ctx-menu button:hover, .ctx-menu button.danger:hover, .cb-lang>summary:hover,
  .cb-auth .cb-login:hover, .cb-auth .cb-reg:hover{ background:transparent!important; color:inherit!important; transform:none!important; filter:none!important; }
}
/* 触摸优化：消除 300ms 点击延迟；统一按压反馈 */
button, a, .pr-btn, .icon-btn, .cb-links a, summary, .cb-lang>summary{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button:active, .pr-btn:active, .icon-btn:active, .cb-links a:active, .cb-lang>summary:active{ transform:scale(.94); transition:transform .08s ease; }
/* 移动端内容区安全区 + 防吸底栏遮挡（平台页/首页共用） */
@media (max-width:760px){
  main.main{ padding-bottom:calc(env(safe-area-inset-bottom,0) + 96px); }
}

/* ===== M5 平台页/语言页 移动端补充（dl-core.css, 2026-10-12） ===== */
@media (max-width:760px){
  /* 输入框字号 16px：防 iOS 聚焦自动缩放跳动（基准 14px 过小） */
  .input-bar input{ font-size:16px; }
  /* 主 CTA「开始解析」点按区达标 48px */
  .input-bar .btn-primary{ min-height:48px; }
  /* 粘贴键点按区放大 */
  .input-paste{ width:42px; height:42px; }
  /* 底部 tabs 导航点按区达标（平台页吸底导航） */
  .tabs .tab{ min-height:44px; }
  /* 首屏收紧：标题缩小、说明行距收紧，让输入框更早入视口（输入优先） */
  .search-hero .sh-title{ font-size:22px; margin:10px 0 6px; }
  .search-hero .sh-lead{ font-size:13.5px; margin:0 0 10px; }
  .search-hero .hero-chips{ margin-top:10px; }
  .search-hero .sh-brand{ margin-bottom:8px; }
}

/* ===== M6 平台页小屏补充（dl-core.css, 2026-10-12）复用既有 640/760 断点，不新增断点 ===== */
@media (max-width:640px){
  /* 特性/步骤 小屏单列：步骤改纵向，避免 2 列在小屏挤压（860 块的 2 列仅适用中大屏） */
  .dy-page .dy-feats, .dy-page .dy-steps{ grid-template-columns:1fr; }
  .dy-page .dy-grid{ grid-template-columns:repeat(2,1fr); }
  .dy-page .dy-title{ font-size:22px; }
}
@media (max-width:760px){
  /* 移动端隐藏返回顶部：tabs 吸底栏已提供导航，避免右下角与底部栏打架 */
  .back-top{ display:none !important; }
  /* FAQ 点按区放大 + 答案字号略增 */
  .dy-page .dy-faq summary{ padding:14px 0; }
  .dy-page .dy-faq .ans{ font-size:13px; }
}

/* ===== 移动端导航重构：左汉堡 + 中 logo + 右语言（dl-core 共享, 2026-10-12） ===== */
.cb-burger{ display:none; }
@media (max-width:820px){
  .cb-burger{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; justify-self:start; border:none; background:transparent; color:var(--text); font-size:21px; border-radius:11px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s; }
  .cb-burger:active{ background:var(--surface-2); transform:scale(.94); }
  .cb-in{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; position:relative; }
  .cb-brand{ justify-self:center; }
  .cb-lang{ justify-self:end; }
  .cb-ext{ display:none !important; }
  .cb-links{ position:absolute; top:calc(100% + 8px); left:0; right:0; display:none; flex-direction:column; gap:2px; overflow:auto; max-height:72vh; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 20px 44px -14px rgba(0,0,0,.3); padding:8px; z-index:320; -webkit-overflow-scrolling:touch; }
  .catbar.open .cb-links{ display:flex; animation:cbDrop .18s ease; }
  @keyframes cbDrop{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:translateY(0);} }
  .cb-links a{ padding:13px 15px; border-radius:11px; font-size:15px; font-weight:600; color:var(--text); white-space:nowrap; }
  .cb-links a:active{ background:var(--surface-2); }
  .cb-links a.on{ background:var(--brand-dim); color:var(--brand); }
}

/* ===== 去顶部 SVG logo，改显文字品牌 Ubui（用户要求 2026-10-13）===== */
.cb-logo{ display:none !important; }
.cb-bt{ display:inline !important; }

/* 桌面导航平衡：插件+语言推到最右，消除语言钮右侧空白（2026-10-13） */
.cb-ext{ margin-left:auto; }
@media (max-width:820px){ .cb-auth{ display:none !important; } }

/* ===== 移动端首屏收紧兜底（2026-10-15 / v43） =====
 * 起因：软键盘弹起后可见区约 450-510px，而各页输入框距顶高达 588px，直接被挡。
 * 方案：分类页(cat-hero) 与平台页(search-hero) 的长描述 / 标签行在移动端隐藏，
 *       标题与徽章保留（身份不丢），目标输入框距顶 ≤ 260px。此处放文件末尾，
 *       同权重下覆盖各页内联媒体查询；必要时用 !important 强制压过内联样式。
 * ==================================================================== */
@media (max-width:760px){
  /* —— 平台页 search-hero —— */
  .search-hero{ padding:2px 0 14px !important; margin:0 0 12px !important; }
  .search-hero .sh-brand{ margin-bottom:6px !important; gap:9px !important; }
  .search-hero .sh-logo{ width:32px !important; height:32px !important; }
  .search-hero .sh-title{ font-size:22px !important; line-height:1.2 !important; margin:0 0 4px !important; }
  .search-hero .sh-lead{ display:none !important; }
  .search-hero .hero-chips{ display:none !important; }
  /* —— 分类页 cat-hero —— */
  .cat-hero{ padding:2px 0 12px !important; margin:0 0 12px !important; }
  .cat-hero .badge{ margin-bottom:6px !important; }
  .cat-hero h1{ font-size:24px !important; line-height:1.15 !important; margin:0 0 6px !important; }
  .cat-hero p{ display:none !important; }
  /* 子分类标签保留（分类页内部导航），改为横向可滑，不换行撑高 */
  .cat-hero .sub-tabs{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:7px !important; padding-bottom:2px; }
  .cat-hero .sub-tabs::-webkit-scrollbar{ display:none; }
  .cat-hero .sub-tabs a{ flex:none !important; white-space:nowrap !important; }
  /* —— 面板自身别再抢高度 —— */
  .main .panel.focus{ margin-top:0 !important; }
}
/* ===== 移动端结果卡可点性（G3/G4 · 2026-10-15 / v43b） =====
 * 手指点击目标 ≥44px，格式选择器在移动端放大成整行选择器（等价分段控件，好点准）。
 * ==================================================================== */
@media (max-width:760px){
  .qi-actions{ gap:8px; }
  .qi-actions .mini-btn, .qi-actions .pr-btn{ min-height:44px; padding:10px 14px; font-size:14px; }
  /* 格式 / 清晰度下拉：占满一行做选择器，避免挤在小按钮里点不准 */
  .qi-actions select.pr-sel{ flex:1 1 100%; min-height:44px; font-size:15px; padding:10px 12px; }
  /* 勾选项（去水印等）也要够大 */
  .qi-actions .qf-chk{ min-height:44px; display:inline-flex; align-items:center; gap:7px; font-size:14px; }
  .qi-actions .qf-chk input{ width:20px; height:20px; }
  .qi-toolbar .mini-btn{ min-height:44px; padding:10px 14px; }
}
/* ===== G7/G11 移动端下载进度汇总条 + 安全区避让（2026-10-16 / v45） =====
 * 手机上队列很长，进度条在屏幕外看不见 → 底部固定一条汇总进度（桌面端隐藏）。
 * ==================================================================== */
#ubuiMProg{ display:none; }
@media (max-width:760px){
  #ubuiMProg{
    position:fixed; left:0; right:0; bottom:0; z-index:400;
    display:block; transform:translateY(110%); transition:transform .28s ease;
    background:var(--surface); border-top:1px solid var(--hair);
    padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -8px 24px -16px rgba(0,0,0,.4);
  }
  #ubuiMProg.show{ transform:translateY(0); }
  #ubuiMProg .ump-txt{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-muted); margin-bottom:6px; }
  #ubuiMProg .ump-txt i{ color:var(--brand); }
  #ubuiMProg .ump-bar{ height:4px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
  #ubuiMProg .ump-bar i{ display:block; height:100%; width:0; background:var(--brand); border-radius:99px; transition:width .25s ease; }
  /* 底部安全区：iPhone 手势条避让，避免最后一个按钮点不到（G11） */
  .main{ padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); }
  .cb-in{ padding-bottom:env(safe-area-inset-bottom,0px); }
}.qi-dur{ margin-top:2px; font-size:11.5px; color:var(--text-faint); display:flex; align-items:center; gap:5px; }
.qi-dur i{ font-size:11px; }

/* ===== 友好错误提示（C12 · v53） =====
 * 引擎英文原文对用户毫无意义，这里统一渲染成「一句人话 + 一个下一步」。
 * ==================================================================== */
.qi-err{ margin:9px 0 10px; padding:10px 12px; border-radius:11px;
  background:color-mix(in srgb, #d6453f 7%, var(--surface));
  border:1px solid color-mix(in srgb, #d6453f 26%, transparent); }
.qi-err-t{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#c0392b; }
.qi-err-t i{ font-size:12px; }
.qi-err-tip{ margin-top:5px; font-size:12px; line-height:1.7; color:var(--text-muted); padding-left:19px; }

/* ===== 多链接识别提示（v53） =====
 * 用户常一次贴一堆链接却以为只能解析一条，这里把条数实时告诉他。
 * ==================================================================== */
.ubui-multi-hint{ display:none; margin-top:9px; padding:7px 12px; border-radius:9px;
  background:var(--brand-dim); border:1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  font-size:12.5px; color:var(--brand); font-weight:600;
  align-items:center; gap:6px; line-height:1.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ubui-multi-hint.show{ display:flex; }
.ubui-multi-hint b{ font-weight:800; }
.ubui-multi-hint > i{ flex:none; }
.ubui-multi-hint > b{ flex:none; }

/* ====================================================================
 * 音频下载列表 UI 重构（v54）
 * 改造前的问题：封面从不显示（用户认不出内容）、字幕按钮平铺爆行（一条视频 171 个
 * 控件、卡片被撑到 349px 高而其他只有 159px）、控件全挤顶部导致卡片内部大片空白。
 * ==================================================================== */
/* ---- 卡片：封面 + 内容区 并排（flex，比 grid 稳，不受 :has() 支持度影响） ---- */
.queue-item{ display:flex; align-items:flex-start; }
.qi-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

/* ---- 封面缩略图 ---- */
.qi-cover{ width:66px; height:66px; border-radius:11px; overflow:hidden;
  background:var(--surface-2); flex:none; margin-right:12px; }
.qi-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.qi-cover.fail{ background:var(--surface-2); }
.qi-cover.fail img{ display:none; }
.qi-cover-fallback{ display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:20px; letter-spacing:.5px; }

/* ---- 更多操作（折叠区） ---- */
.qi-more{ margin-top:9px; }
.qi-more > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:var(--text-faint); padding:4px 10px; border-radius:8px;
  border:1px solid var(--hair); user-select:none; }
.qi-more > summary::-webkit-details-marker{ display:none; }
.qi-more > summary:hover{ color:var(--text-muted); border-color:var(--brand); }
.qi-more[open] > summary{ color:var(--brand); border-color:var(--brand); }
.qi-more-body{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px;
  padding:10px 12px; background:var(--surface-2); border-radius:10px; }
.qi-sub-label{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  color:var(--text-faint); font-weight:600; }
.mini-btn-sm{ padding:5px 10px !important; font-size:11.5px !important; }

/* ---- 主操作行：横排换行，不再竖着堆 ---- */
.qi-actions{ margin-top:10px; }
.qi-actions-main{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.qi-actions-main .qf-chk{ white-space:nowrap; }
.qi-actions-main .pr-sel{ flex:none; }

/* ---- 移动端：封面缩小，控件仍横排 ---- */
@media (max-width:560px){
  .qi-cover{ width:54px; height:54px; margin-right:10px; }
}

/* ---- 标题与操作按钮同一行，不再被 flex-wrap 挤到独立一行 ---- */
.qi-body .qi-head{ display:flex; align-items:flex-start; gap:10px; flex-wrap:nowrap; }
.qi-body .qi-t{ flex:1 1 auto; min-width:0; }
.qi-body .qi-head > .mini-btn{ flex:none; margin-top:1px; }
.qi-body .qi-head > .qi-remove{ flex:none; margin-top:1px; }

/* ---- 清晰度下拉与格式下拉并排、留出行间距，避免挤成一坨 ---- */
.qi-body .qi-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.qi-body .qf-chk{ flex:none; white-space:nowrap; }
.qi-body .pr-sel{ flex:none; }.qi-more-nested{ margin-top:2px; margin-left:2px; }
.qi-more-nested > summary{ font-size:11.5px; padding:3px 8px; }
.qi-more-body .mini-btn-sm{ min-width:44px; text-align:center; }
/* ---- 进度条：解析/排队时走不确定态动画，避免用户以为卡死 ---- */
@keyframes qiIndeterminate{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(400%);} }
.qi-progress.indet > .qi-bar{ width:34% !important; opacity:.55;
  animation:qiIndeterminate 1.15s ease-in-out infinite; }

/* ---- 格式标签：音频页说清「这里选格式」 ---- */
.qi-fmt-label{ display:inline-flex; align-items:center; gap:4px;
  font-size:12px; color:var(--text-faint); font-weight:600; }
/* ====================================================================
 * 列表排版重构（v56）
 * 问题：状态/时长/按钮全堆在左侧一条线上，1024px 卡片右侧 400px 全是死白，
 *       整张卡像「没做完」；封面区域还空出 26px 无意义间隙。
 * 方案：一行三栏 —— 封面(66px) | 信息(自适应) | 操作(右对齐、纵向居中)。
 * ==================================================================== */
.qi-main{ display:flex; align-items:center; gap:16px; }
.qi-main > .qi-head{ flex:1 1 auto; min-width:0; display:flex; align-items:flex-start; gap:10px; }
.qi-main .qi-t{ flex:1 1 auto; min-width:0; }

/* ---- 右栏操作区 ---- */
.qi-ops{ flex:none; display:flex; align-items:center; gap:8px; }
.qi-primary{ display:inline-flex; align-items:center; gap:6px;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  padding:8px 16px; border-radius:10px; font-size:13px; font-weight:700;
  cursor:pointer; white-space:nowrap; transition:background .15s, transform .1s; }
.qi-primary:hover:not(:disabled){ background:var(--brand-hover); border-color:var(--brand-hover); }
.qi-primary:active:not(:disabled){ transform:translateY(1px); }
.qi-primary:disabled{ opacity:.6; cursor:not-allowed; }
.qi-ops .qi-remove{ flex:none; }

/* ---- 封面：与文字基线对齐，不再悬空 ---- */
.qi-body > .qi-cover{ align-self:flex-start; margin-top:0; }
.qi-main + .qi-progress{ margin-top:14px; }

/* ---- 选项行：不再是主操作区，视觉降级 ---- */
.qi-actions{ margin-top:14px; padding-top:13px; border-top:1px dashed var(--hair); }
.qi-actions:empty{ display:none; }

/* ---- 状态徽章：做成小胶囊，一眼可辨 ---- */
.qi-sub .st{ display:inline-block; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:700; }
.qi-sub .st-ready{ background:rgba(13,148,136,.1); color:var(--brand); }
.qi-sub .st-done{ background:rgba(16,185,129,.12); color:#059669; }
.qi-sub .st-downloading{ background:rgba(59,130,246,.12); color:#2563eb; }
.qi-sub .st-error{ background:rgba(214,69,63,.12); color:#c0392b; }
.qi-sub .st-parsing, .qi-sub .st-queued, .qi-sub .st-queued_dl{ background:var(--surface-2); color:var(--text-faint); }

/* ---- 时长与标题的层级差拉开 ---- */
.qi-main .qi-title{ font-size:14.5px; line-height:1.45; }
.qi-main .qi-dur{ margin-top:3px; }

@media (max-width:640px){
  .qi-main{ flex-wrap:wrap; gap:12px; }
  .qi-ops{ width:100%; justify-content:flex-end; }
}
/* ---- 底部行：格式选项与「更多操作」并排，省一行高度 ---- */
.qi-foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:13px;
  padding-top:12px; border-top:1px dashed var(--hair); }
.qi-foot > .qi-actions{ margin-top:0; padding-top:0; border-top:none; flex:1 1 auto; }
.qi-foot > .qi-more{ margin-top:0; flex:none; }

/* ---- 状态徽章：胶囊化，一眼可辨 ---- */
.qi-sub .st{ display:inline-block; padding:2px 10px; border-radius:99px;
  font-size:11px; font-weight:700; letter-spacing:.2px; }
/* ====================================================================
 * 进度条最终形态（v57）
 * 问题：L217 的 .qi-progress{display:none} 需要 .queue-item.downloading 才放开，
 *       而「音频提取」用的是 _audioBusy 状态 → 进度条尺寸 0×0，完全看不见。
 * 形态：贴在信息栏底部的一条细线（4px），宽度只占信息栏、不横跨整卡，避免笨重。
 * ==================================================================== */
.qi-body .qi-progress{ display:block; grid-column:auto; width:100%; height:4px;
  margin-top:11px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.qi-body .qi-progress.indet{ display:block; }
.qi-body .qi-progress .qi-bar{ display:block; height:100%; border-radius:99px;
  background:var(--brand); transition:width .3s ease; }

/* 提取中：整卡给一层极淡的品牌色底，状态一目了然 */
.queue-item.audbusy{ background:color-mix(in srgb, var(--brand) 5%, var(--surface));
  border-color:color-mix(in srgb, var(--brand) 30%, transparent); }
.queue-item.audbusy .qi-primary{ opacity:.55; cursor:progress; }
/* ---- 工具条按钮：图标 + 无待办时置灰 ---- */
.qi-toolbar .mini-btn{ display:inline-flex; align-items:center; gap:5px; }
.qi-toolbar .mini-btn.is-off,
.qi-toolbar .mini-btn:disabled{ opacity:.45; cursor:not-allowed; }
/* ---- 进度条：独立 class，不与历史 .qi-progress 规则互相覆盖 ---- */
.qi-pb-mini{ display:block !important; width:180px; max-width:100%; height:4px; margin-top:11px;
  background:var(--surface-2); border-radius:99px; overflow:hidden; flex:none; }
.qi-pb-mini > .qi-bar{ display:block !important; height:100%; width:0;
  background:var(--brand); border-radius:99px; transition:width .3s ease; }
.qi-pb-mini.indet > .qi-bar{ width:34% !important; opacity:.55;
  animation:qiIndeterminate 1.15s ease-in-out infinite; }