/* Split clips page. Builds on app.css tokens (--surface, --ink, --line, --primary, --q*). */

.sp-main { max-inline-size: 68rem; margin-inline: auto; padding: 0 1.25rem 3rem; }
.sp-hero { padding-block: clamp(1.5rem, 5vw, 3.5rem) 1rem; }
.sp-hero .lead { margin: 0 0 1.25rem; color: var(--muted); max-inline-size: 60ch; }
.sp-user { color: var(--muted); font-size: .9rem; }
.sp-hint { margin: .75rem 0 0; color: var(--muted); font-size: .9rem; }
.ico { inline-size: 1.1em; block-size: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico use[href="#i-play"] { fill: currentColor; stroke: none; }

/* form */
.sp-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.sp-form[hidden], .sp-locked[hidden], .sp-empty[hidden], .sp-hint[hidden], .sp-user[hidden] { display: none; }
.sp-form > input[type="text"] {
  flex: 1 1 280px; min-inline-size: 0; padding: .8rem 1rem; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.sp-form > input[type="text"]:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.sp-quality { display: flex; gap: .25rem; margin: 0; padding: .25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sp-quality label { position: relative; cursor: pointer; }
.sp-quality input { position: absolute; opacity: 0; inset: 0; }
.sp-quality span { display: block; padding: .5rem .8rem; border-radius: 6px; font-size: .9rem; transition: background .15s, color .15s; }
.sp-quality input:checked + span { background: var(--primary); color: var(--primary-ink); }
.sp-quality input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
#split-btn[disabled] { opacity: .6; cursor: progress; }

/* locked / empty */
.sp-locked, .sp-empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.sp-locked { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-block-start: 1.5rem; }
.sp-locked h2 { color: var(--ink); margin: 0 0 .4rem; }

/* batches */
.sp-list { display: grid; gap: 1.5rem; margin-block-start: 2rem; }
.sp-batch { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 1rem; animation: sp-in .35s ease both; transition: opacity .25s, transform .25s; }
.sp-batch.leaving, .sp-card.leaving { opacity: 0; transform: scale(.96); pointer-events: none; }
.sp-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-block-end: 1rem; }
.sp-head h2 { flex: 1 1 240px; margin: 0; font-size: 1.05rem; line-height: 1.35; overflow-wrap: anywhere; }
.sp-meta { color: var(--muted); font-size: .85rem; }
.sp-timer { font-size: .8rem; padding: .25rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--q480) 15%, transparent); color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-timer.soon { background: color-mix(in srgb, var(--danger) 18%, transparent); }

.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
.sp-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; animation: sp-in .35s ease both; transition: opacity .25s, transform .25s, box-shadow .2s; }
.sp-card:hover { box-shadow: 0 6px 18px rgb(0 0 0 / .12); }
.sp-thumb { position: relative; display: block; inline-size: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000 center / cover no-repeat; cursor: pointer; }
.sp-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform .3s ease, opacity .3s; opacity: 0; }
.sp-thumb img.loaded { opacity: 1; }
.sp-card:hover .sp-thumb img { transform: scale(1.04); }
.sp-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgb(0 0 0 / .25); opacity: 0; transition: opacity .2s; }
.sp-play svg { inline-size: 2.6rem; block-size: 2.6rem; padding: .7rem; border-radius: 50%; background: rgb(0 0 0 / .55); backdrop-filter: blur(4px); }
.sp-thumb:hover .sp-play, .sp-thumb:focus-visible .sp-play { opacity: 1; }
.sp-thumb:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.sp-chip { position: absolute; inset-block-end: .4rem; inset-inline-end: .4rem; padding: .1rem .45rem; border-radius: 4px; background: rgb(0 0 0 / .7); color: #fff; font-size: .75rem; font-variant-numeric: tabular-nums; }
.sp-idx { position: absolute; inset-block-start: .4rem; inset-inline-start: .4rem; padding: .1rem .5rem; border-radius: 4px; background: var(--primary); color: var(--primary-ink); font-size: .75rem; font-weight: 600; }
.sp-bar { display: flex; align-items: center; gap: .4rem; padding: .5rem .6rem; }
.sp-size { flex: 1; color: var(--muted); font-size: .8rem; }
.sp-icon { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: .8rem; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.sp-icon:hover { border-color: var(--primary); }
.sp-icon.danger:hover, .sp-icon.confirm { background: var(--danger); border-color: var(--danger); color: #fff; }
.sp-icon:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* processing / failed */
.sp-progress { block-size: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.sp-progress i { display: block; block-size: 100%; inline-size: 0; border-radius: inherit; background: linear-gradient(90deg, var(--q480), var(--q720), var(--q1080)); background-size: 200% 100%; animation: sp-slide 2s linear infinite; transition: inline-size .6s ease; }
.sp-phase { margin: .6rem 0 0; color: var(--muted); font-size: .85rem; }
.sp-error { color: var(--danger); margin: 0 0 .75rem; }
.sp-note { margin: 0 0 .9rem; padding: .6rem .8rem; border-radius: var(--radius); background: color-mix(in srgb, var(--q360) 18%, transparent); font-size: .88rem; }

/* player */
.sp-player { inline-size: min(960px, 94vw); padding: 0; border: 0; border-radius: 12px; background: #0b0e18; color: #fff; }
.sp-player::backdrop { background: rgb(5 8 18 / .75); backdrop-filter: blur(3px); }
.sp-player[open] { animation: sp-pop .25s ease both; }
.sp-player-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .6rem .6rem 1rem; }
.sp-player video { display: block; inline-size: 100%; max-block-size: 78vh; background: #000; }
.sp-player .btn { color: #fff; }

.sp-toast { position: fixed; inset-inline: 0; inset-block-end: 1.25rem; margin-inline: auto; inline-size: fit-content; max-inline-size: 92vw; padding: .7rem 1.1rem; border-radius: 10px; background: var(--ink); color: var(--bg); box-shadow: 0 8px 24px rgb(0 0 0 / .3); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; }
.sp-toast.show { opacity: 1; transform: none; }

@keyframes sp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sp-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sp-slide { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 520px) { .sp-quality { inline-size: 100%; justify-content: space-between; } .sp-form .btn { inline-size: 100%; justify-content: center; } }

/* ---- v2: multi-add form, queue, folders, folder page ---- */
[hidden] { display: none !important; }
.sp-form-multi > textarea {
  flex: 1 1 100%; min-inline-size: 0; padding: .8rem 1rem; font: inherit; line-height: 1.5; color: var(--ink); resize: vertical;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s;
}
.sp-form-multi > textarea:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.sp-quality input[type="checkbox"]:checked + span { background: var(--primary); color: var(--primary-ink); }

.sp-h2 { margin: 2rem 0 .8rem; font-size: 1.1rem; }
.sp-count { color: var(--muted); font-weight: 400; }

/* queue */
.sp-qrow { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; margin-block-end: .6rem; animation: sp-in .3s ease both; transition: opacity .25s, transform .25s; }
.sp-qrow.leaving { opacity: 0; transform: translateY(-6px); }
.sp-qrow.waiting { opacity: .85; }
.sp-qtop { display: flex; align-items: center; gap: .6rem; margin-block-end: .6rem; }
.sp-qtitle { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-qchip { padding: .1rem .5rem; border-radius: 4px; font-size: .75rem; background: color-mix(in srgb, var(--primary) 15%, transparent); }
.sp-qrow.waiting .sp-progress i { animation: none; background: var(--line); }
.sp-qrow.failed { border-color: color-mix(in srgb, var(--danger) 50%, var(--line)); }
.sp-qrow.failed .sp-error { margin: 0; }

/* folder cards */
.sp-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.sp-folder { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 0 0 .1rem; animation: sp-in .35s ease both; transition: opacity .25s, transform .25s, box-shadow .2s, translate .2s; }
.sp-folder::before { content: ""; position: absolute; inset-block-start: -9px; inset-inline-start: -1px; inline-size: 38%; block-size: 10px; background: var(--surface); border: 1px solid var(--line); border-block-end: 0; border-radius: 8px 8px 0 0; }
.sp-folder:hover { box-shadow: 0 8px 22px rgb(0 0 0 / .14); translate: 0 -2px; }
.sp-folder.leaving { opacity: 0; transform: scale(.95); pointer-events: none; }
.sp-flink { display: flex; flex-direction: column; gap: .35rem; padding: .7rem .7rem .3rem; color: inherit; text-decoration: none; }
.sp-flink:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 12px; }
.sp-fthumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.sp-fthumb img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity .3s, transform .3s; }
.sp-fthumb img.loaded { opacity: 1; }
.sp-folder:hover .sp-fthumb img { transform: scale(1.05); }
.sp-fcount { position: absolute; inset-block-end: .4rem; inset-inline-end: .4rem; padding: .1rem .5rem; border-radius: 4px; background: rgb(0 0 0 / .7); color: #fff; font-size: .75rem; }
.sp-ftitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.sp-fmeta { color: var(--muted); font-size: .82rem; }

/* folder page */
.sp-back { display: inline-block; margin-block-end: 1rem; color: var(--muted); text-decoration: none; }
.sp-back:hover { color: var(--ink); }
.sp-fhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-block-end: 1.2rem; }
.sp-fhead h1 { margin: 0 0 .3rem; font-size: clamp(1.3rem, 3vw, 1.8rem); overflow-wrap: anywhere; }
.sp-fhead-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sp-run { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 1rem; margin-block-end: 1.2rem; animation: sp-in .35s ease both; transition: opacity .25s, transform .25s; }
.sp-run.leaving { opacity: 0; transform: scale(.97); }
.sp-runhead { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-block-end: .9rem; }
.sp-runhead .sp-meta { flex: 1; }
.sp-runsel { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.sp-runsel input, .sp-sel input { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--primary); cursor: pointer; }

.sp-tw { position: relative; }
.sp-sel { position: absolute; inset-block-start: .35rem; inset-inline-end: .35rem; display: grid; place-items: center; padding: .3rem; border-radius: 6px; background: rgb(0 0 0 / .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .15s; }
.sp-card:hover .sp-sel, .sp-sel:focus-within, .sp-card.selected .sp-sel, body.has-sel .sp-sel { opacity: 1; }
.sp-card.selected { outline: 2px solid var(--primary); outline-offset: -2px; }

.sp-selbar { position: fixed; inset-inline: 0; inset-block-end: 1rem; margin-inline: auto; inline-size: fit-content; max-inline-size: 94vw; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .6rem .8rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px rgb(0 0 0 / .3); animation: sp-in .25s ease both; z-index: 20; }
.sp-selbar-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.sp-timer:empty { display: none; }

/* ---- v3: per-video quality picker ---- */
.sp-picks { flex: 1 1 100%; display: grid; gap: .6rem; }
.sp-picks:empty { display: none; }
.sp-pick { display: grid; grid-template-columns: 112px 1fr auto; gap: .8rem; align-items: start; padding: .7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); animation: sp-in .3s ease both; transition: opacity .25s, transform .25s; }
.sp-pick.leaving { opacity: 0; transform: translateX(10px); }
.sp-pthumb { display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--line); }
.sp-pthumb img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.sp-pthumb img.loaded { opacity: 1; }
.sp-pbody { min-inline-size: 0; display: grid; gap: .5rem; }
.sp-ptitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-pq { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.qpill.off { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.sp-addbar { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; position: sticky; inset-block-end: .6rem; padding: .6rem .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 20px rgb(0 0 0 / .15); }
@media (max-width: 520px) { .sp-pick { grid-template-columns: 84px 1fr auto; } }

/* ---- v4: detailed queue status ---- */
.sp-steps { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: 0 0 .6rem; padding: 0; list-style: none; font-size: .82rem; color: var(--muted); }
.sp-steps li { display: inline-flex; align-items: center; gap: .4rem; transition: color .2s; }
.sp-dot { display: inline-grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; border: 1px solid var(--line); font-size: .7rem; font-weight: 700; transition: background .2s, border-color .2s, color .2s; }
.sp-steps li.st-now { color: var(--ink); font-weight: 600; }
.sp-steps li.st-now .sp-dot { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.sp-steps li.st-done { color: var(--ink); }
.sp-steps li.st-done .sp-dot { position: relative; background: var(--ok); border-color: var(--ok); color: transparent; }
.sp-steps li.st-done .sp-dot::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--primary-ink); font-size: .75rem; }
.sp-progress.idle i { background: repeating-linear-gradient(135deg, var(--q360) 0 10px, transparent 10px 20px); background-size: 28px 28px; opacity: .55; }
.sp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .5rem; margin-block-start: .7rem; }
.sp-stat { display: grid; gap: .1rem; padding: .45rem .65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.sp-stat[hidden] { display: none; }
.sp-sk { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.sp-sv { font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- v5: estimates ---- */
.sp-est { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.sp-est[hidden] { display: none; }
.sp-est.warn { color: var(--danger); font-weight: 600; }

/* ---- v6: failure details ---- */
.sp-qdetail-bar { display: flex; gap: .4rem; margin-block-start: .5rem; }
.sp-detail { margin: .5rem 0 0; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font: .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-block-size: 15rem; overflow: auto; user-select: all; }
.sp-detail[hidden] { display: none; }

/* ---- v7: time ranges, previews ---- */
.sp-qchip.alt { background: color-mix(in srgb, var(--q480) 22%, var(--surface)); font-variant-numeric: tabular-nums; }
.sp-range-chip { padding: 0.1rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--q480) 22%, var(--surface)); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.sp-size small { color: var(--muted); font-size: 0.72rem; }

.sp-rangebox { display: grid; gap: 0.5rem; }
.sp-check { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9rem; inline-size: fit-content; }
.sp-check input { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--primary); }
.sp-ranges { display: grid; gap: 0.5rem; padding: 0.7rem 0.8rem; border: 1px dashed var(--line); border-radius: 10px; background: color-mix(in srgb, var(--bg) 60%, transparent); }
.sp-ranges[hidden] { display: none; }
.rg-list { display: grid; gap: 0.45rem; }
.rg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.rg-row label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.rg-row input { inline-size: 7.5rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; }
.rg-row input:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.rg-row.bad input { border-color: var(--danger); }
.rg-len { min-inline-size: 5.5rem; color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.rg-add { inline-size: fit-content; }
.rg-err { margin: 0; font-size: 0.85rem; }

.sp-player-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0.8rem; }
.sp-seg { display: inline-flex; padding: 0.2rem; border-radius: 10px; background: rgb(255 255 255 / 0.1); }
.sp-seg[hidden] { display: none; }
.sp-seg button { display: inline-flex; align-items: baseline; gap: 0.1rem; padding: 0.4rem 0.8rem; border: 0; border-radius: 8px; background: none; color: #fff; font: inherit; font-size: 0.88rem; cursor: pointer; opacity: 0.75; transition: background 0.15s, opacity 0.15s; }
.sp-seg button small { font-size: 0.75rem; opacity: 0.8; }
.sp-seg button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); opacity: 1; font-weight: 600; }
.sp-seg button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sp-player-foot .btn { color: #fff; border-color: rgb(255 255 255 / 0.35); }

.qpill.conflict { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.qpill.conflict small { color: var(--danger); }

/* ---- v8: clip times, live folder, clip-to-clip navigation ---- */
.sp-when { padding: .3rem .6rem 0; color: var(--ink); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-live { padding: .1rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 18%, var(--surface)); font-size: .8rem; }
.sp-run.working { border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); }
.sp-run.working .sp-live::before { content: ""; display: inline-block; inline-size: .5rem; block-size: .5rem; margin-inline-end: .4rem; border-radius: 50%; background: var(--primary); animation: sp-pulse 1.2s ease-in-out infinite; }
@keyframes sp-pulse { 50% { opacity: .25; } }

.sp-stage { position: relative; touch-action: pan-y; }
.sp-nav { position: absolute; inset-block-start: 42%; translate: 0 -50%; display: grid; place-items: center; inline-size: 2.8rem; block-size: 2.8rem; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / .55); color: #fff; cursor: pointer; backdrop-filter: blur(4px); transition: background .15s, opacity .2s; }
.sp-nav .ico { inline-size: 1.4rem; block-size: 1.4rem; }
.sp-nav.prev { inset-inline-start: .6rem; }
.sp-nav.next { inset-inline-end: .6rem; }
.sp-nav:hover:not(:disabled) { background: var(--primary); color: var(--primary-ink); }
.sp-nav:disabled { opacity: .25; cursor: default; }
.sp-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sp-pcount { margin-inline-start: auto; color: rgb(255 255 255 / .7); font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-player-head strong { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-keys { color: rgb(255 255 255 / .55); font-size: .78rem; }
@media (hover: none) { .sp-keys { display: none; } }
@media (max-width: 520px) { .sp-nav { inline-size: 2.4rem; block-size: 2.4rem; } }

/* ---- v9: cancel ---- */
.sp-cancel-all { margin-inline-start: .8rem; font-size: .78rem; vertical-align: middle; }
.sp-qrow.cancelling { opacity: .65; }
.sp-qrow.cancelling .sp-progress i { animation: none; background: var(--line); }
.sp-icon:disabled { opacity: .55; cursor: progress; }