/* Converter (assets/convert.js).
   Stage (the black deck with a slowly turning gradient hairline + breathing RGB bars) → settings strip → batch console
   (ring, counter, the one gradient button) → conversion cards. Tokens only; the dark theme comes from app.css.
   Motion is transform/opacity only; `prefers-reduced-motion` and html.a11y-noanim freeze every animation into a
   readable static state (the a11y plugin also caps durations globally). Timeline-like values are dir="ltr" in the markup. */
.convert{padding-top:30px;gap:18px;position:relative;
  --cv-r:#FF4D4D;--cv-g:#36D399;--cv-b:#4D8DFF;
  --cv-grad:linear-gradient(100deg,var(--acc-a) 0%,var(--acc-p) 55%,var(--acc-b) 100%)}
html[dir="rtl"] .convert{--cv-grad:linear-gradient(-100deg,var(--acc-a) 0%,var(--acc-p) 55%,var(--acc-b) 100%)}
.cvhead{margin-bottom:2px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cvtabs{display:flex;border:1px solid var(--line2);border-radius:var(--r-sm);overflow:hidden;height:36px;flex:none;background:var(--btn-bg)}
.cvtabs button{border:0;background:transparent;padding:0 16px;font-size:13.5px;font-weight:500;border-inline-start:1px solid var(--line2);transition:background .15s,color .15s;color:var(--ink)}
.cvtabs button:first-child{border-inline-start:0}
.cvtabs button:hover:not(.on){background:var(--btn-hover)}
.cvtabs button.on{background:var(--sel-bg);color:var(--sel-fg)}
#cvAudio:not([hidden]),#cvImages:not([hidden]){display:flex;flex-direction:column;gap:14px}

/* ---------- the stage: a deck with a live gradient hairline ----------
   The hairline is a big pre-painted conic gradient that rotates (transform only, composited) behind the deck face
   (.cvsin, inset 1.5px); the glow breathes with opacity only. Nothing repaints per frame. */
.cvstage{position:relative;border-radius:var(--r-lg);color:var(--decktext);background:var(--deck);isolation:isolate;overflow:hidden;
  box-shadow:var(--sh-2);transition:transform .25s var(--ease),box-shadow .25s}
.cvstage::before{content:"";position:absolute;left:50%;top:50%;width:max(150%,110vh);aspect-ratio:1;translate:-50% -50%;z-index:0;pointer-events:none;opacity:.85;
  background:conic-gradient(from 0deg,var(--acc-a),var(--acc-p),var(--acc-b),var(--acc-a));animation:cvspin 9s linear infinite;will-change:transform}
@keyframes cvspin{to{transform:rotate(360deg)}}
.cvsin{position:relative;z-index:1;margin:1.5px;border-radius:calc(var(--r-lg) - 1.5px);background:var(--deck);overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.cvsin::before{content:"";position:absolute;inset:30% -10% -40% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side at 50% 100%,color-mix(in srgb,var(--acc-p) 30%,transparent),transparent 72%);
  animation:cvbreathe 5.5s ease-in-out infinite}
.cvsin>*{position:relative;z-index:1}
@keyframes cvbreathe{0%,100%{opacity:.45}50%{opacity:1}}
.cvsweep{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,var(--acc-a) 35%,transparent) 45%,color-mix(in srgb,var(--acc-b) 35%,transparent) 55%,transparent 70%);
  transform:translateX(-100%)}
.convert.over .cvsweep{animation:cvsweep 1.1s var(--ease) both}
@keyframes cvsweep{from{opacity:1;transform:translateX(-100%)}to{opacity:0;transform:translateX(100%)}}
.cvsin{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:44px 20px 34px}
.cvstage>.cvsin>b{font-size:20px;font-weight:600;text-wrap:balance;letter-spacing:-.01em}
.cvstage .snote{margin:0;max-width:600px;text-wrap:pretty;color:var(--deckmuted)}
.cvdi{width:72px;height:72px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--deck3);box-shadow:0 0 0 1px var(--deckline) inset;color:var(--decktext);
  transition:transform .3s var(--ease),box-shadow .3s}
.cvdi svg{width:34px;height:34px}
.cvbars{display:flex;align-items:flex-end;gap:4px;height:34px}
.cvbars i{width:5px;height:100%;border-radius:3px;transform-origin:50% 100%;transform:scaleY(var(--h,.5));animation:cvbar 2.4s ease-in-out infinite;animation-delay:var(--dl,0s)}
.cvbars i:nth-child(1){background:var(--cv-r);--h:.35;--dl:-.2s}.cvbars i:nth-child(2){background:var(--cv-r);--h:.7;--dl:-1.1s}
.cvbars i:nth-child(3){background:var(--cv-g);--h:.5;--dl:-.6s}.cvbars i:nth-child(4){background:var(--cv-g);--h:.95;--dl:-1.7s}
.cvbars i:nth-child(5){background:var(--cv-g);--h:.6;--dl:-.9s}.cvbars i:nth-child(6){background:var(--cv-b);--h:.8;--dl:-1.4s}
.cvbars i:nth-child(7){background:var(--cv-b);--h:.4;--dl:-.3s}
@keyframes cvbar{0%,100%{transform:scaleY(var(--h))}50%{transform:scaleY(calc(var(--h) * .45 + .15))}}
.convert.over .cvstage{transform:translateY(-2px);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc-a) 35%,transparent),var(--sh-2)}
.convert.over .cvdi{transform:scale(1.1) rotate(-3deg);box-shadow:0 0 0 1px var(--acc-a) inset,0 0 28px -4px var(--acc-p)}
.convert.over .cvbars i{animation-duration:.55s}
.cvdb{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.cvstage .btn.solid{background:var(--decktext);color:var(--deck);border-color:var(--decktext);height:42px;padding:0 20px;font-size:15px}
.cvstage .btn.solid:hover{background:#fff;border-color:#fff;box-shadow:0 10px 24px -12px var(--acc-p)}
.cvstage :focus-visible{outline-color:#fff}
.cvpriv{display:inline-flex;align-items:center;gap:6px;font-size:12.5px!important;color:var(--deckmuted)!important;margin-top:2px!important}
.cvpriv svg{width:15px;height:15px;flex:none;color:var(--ok)}
/* format pills: what comes in → what goes out */
.cvpills{display:inline-flex;align-items:center;gap:10px;margin-top:2px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}
.cvpill{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--deck3);box-shadow:0 0 0 1px var(--deckline) inset;color:var(--decktext);white-space:nowrap}
.cvpill.dst{background:var(--decktext);color:var(--deck);box-shadow:none;font-weight:600}
.cvpill.morph{animation:cvmorph .45s var(--ease)}
@keyframes cvmorph{0%{transform:scale(.7);opacity:0;filter:blur(3px)}60%{transform:scale(1.06);opacity:1;filter:blur(0)}100%{transform:scale(1)}}
.cvflow{display:inline-flex;gap:4px}
.cvflow i{width:5px;height:5px;border-radius:50%;background:var(--deckmuted);animation:cvflow 1.4s ease-in-out infinite}
.cvflow i:nth-child(2){animation-delay:.18s}.cvflow i:nth-child(3){animation-delay:.36s}
@keyframes cvflow{0%,100%{opacity:.35;transform:translateX(0)}50%{opacity:1;transform:translateX(2px);background:var(--acc-a)}}
/* compact once there are files: a slim deck strip */
.cvstage.compact .cvsin{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;padding:12px 16px;gap:8px 18px;text-align:start}
.cvstage.compact .cvdi{width:40px;height:40px;border-radius:var(--r-sm)}
.cvstage.compact .cvbars{height:18px;gap:2.5px}.cvstage.compact .cvbars i{width:3px}
.cvstage.compact .cvdi svg{width:20px;height:20px}
.cvstage.compact>.cvsin>b{font-size:14.5px}
.cvstage.compact .cvsin>.snote:not(.cvpriv),.cvstage.compact .cvpriv{display:none}
.cvstage.compact .cvdb{margin:0;margin-inline-start:auto}
.cvstage.compact .btn.solid{height:36px;font-size:14px;padding:0 14px}
.cvstage.compact .cvsin::before{display:none}

/* ---------- settings strip ---------- */
.cvopts{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh-1)}
.cvog{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:stretch}
.cvtogs{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cvf{display:flex;flex-direction:column;gap:5px;min-width:0}
.cvf>span:first-child{font-size:12px;font-weight:600;color:var(--muted)}
.cvfmt{grid-column:span 2}
.cvseg{display:flex;height:var(--ctl-h);border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--btn-bg);padding:3px;gap:2px}
.cvseg label{flex:1;position:relative;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--r-sm) - 3px);font-size:13.5px;font-weight:500;cursor:pointer;color:var(--ink2);
  transition:background .2s var(--ease),color .2s,transform .2s var(--ease)}
.cvseg label:hover:not(.on){background:var(--btn-hover);color:var(--ink)}
.cvseg label.on{background:var(--sel-bg);color:var(--sel-fg);animation:cvpop .3s var(--ease)}
@keyframes cvpop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.cvseg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cvseg label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:1px}
.cvf .sel{width:100%;min-width:0}
.cvfix{height:var(--ctl-h);display:flex;align-items:center;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--muted);font-size:14px;background:var(--soft)}
.cvtog{font-size:13.5px;min-height:44px}
.cvtog>span:first-child{flex:1;min-width:0}
.cvfade{cursor:default;flex-direction:column;align-items:flex-start;gap:8px}
.cvfade>span:first-child{flex:none}
.cvfi{display:flex;gap:10px;flex-wrap:wrap}
.cvfi label{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.cvfi input{width:54px;height:30px;padding:0 6px;border:1px solid var(--field-bd);border-radius:var(--r-xs);background:var(--field);color:var(--ink);font-size:13px;text-align:center;font-variant-numeric:tabular-nums}
.cvfi i{font-style:normal}
.cvinote{grid-column:1/-1;margin:0}
.cvsum{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;font-family:var(--mono);font-size:12.5px;color:var(--ink2);padding-top:10px;border-top:1px dashed var(--line2)}
.cvsum bdi{white-space:nowrap}
.cvsum i{font-style:normal;color:var(--faint);padding:0 8px}
.cvsum:empty{display:none}

/* ---------- batch console ---------- */
.cvconsole{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;position:relative}
.cvconsole:empty{display:none}
.cvcs{display:flex;align-items:center;gap:12px;flex:1 1 220px;min-width:0}
.cvring{width:44px;height:44px;flex:none;transform:rotate(-90deg)}
.cvring circle{fill:none;stroke-width:3}
.cvring .bg{stroke:var(--line2)}
.cvring .fg{stroke:var(--acc-a);stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.cvring.live .fg{stroke:url(#cvRingGrad)}
.cvring stop:nth-child(1){stop-color:var(--acc-a)}.cvring stop:nth-child(2){stop-color:var(--acc-p)}.cvring stop:nth-child(3){stop-color:var(--acc-b)}
.cvring .tick{fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(90deg);transform-origin:50% 50%}
.cvring.full .fg{stroke:var(--ok)}
.cvring.full .tick{animation:cvdraw .5s var(--ease) .15s forwards}
@keyframes cvdraw{to{stroke-dashoffset:0}}
.cvcst{display:flex;flex-direction:column;gap:1px;min-width:0}
.cvcnt{font-family:var(--mono);font-size:18px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1}
.cvcnt i{font-style:normal;color:var(--faint);padding:0 3px;font-weight:400}
.cvstat{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);min-height:18px}
.cvconsole.fin .cvstat{color:var(--ok);font-weight:500}
.cveta{font-family:var(--mono);font-size:12px;color:var(--faint)}
.cvdot{width:8px;height:8px;border-radius:50%;background:var(--acc-a);flex:none;box-shadow:0 0 0 0 color-mix(in srgb,var(--acc-a) 50%,transparent);animation:cvpulse 1.3s ease-out infinite}
@keyframes cvpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc-a) 55%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
.cvcb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
.btn.cvgo{position:relative;overflow:hidden;height:44px;padding:0 18px;font-size:15px;gap:10px;isolation:isolate}
.btn.cvgo.pri{background:var(--cv-grad);color:#fff;border-color:transparent;text-shadow:0 1px 1px rgba(0,0,0,.25);box-shadow:0 10px 24px -14px var(--acc-p)}
.btn.cvgo.pri:hover:not([disabled]){background:var(--cv-grad);border-color:transparent;box-shadow:0 14px 30px -14px var(--acc-p);filter:saturate(1.15) brightness(1.05)}
.btn.cvgo.pri:active:not([disabled]){transform:translateY(1px) scale(.99)}
.btn.cvgo.pri::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn.cvgo.pri:hover:not([disabled])::before{transform:translateX(120%)}
.btn.cvgo .cvto{font-family:var(--mono);font-size:12.5px;opacity:.85;padding-inline-start:10px;border-inline-start:1px solid rgba(255,255,255,.35)}
.btn.cvgo .pct{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;min-width:4ch;text-align:end}
.btn.cvgo.run[disabled]{opacity:1;cursor:progress}
.btn.cvgo.run::after{content:"";position:absolute;inset:0;inset-inline-start:var(--p,0%);background:rgba(0,0,0,.42);transition:inset-inline-start .25s linear;z-index:0;pointer-events:none}
.btn.cvgo.run>*{position:relative;z-index:1}
.btn.cvgo.quiet{height:40px;font-size:14px;border-color:var(--line2);background:transparent}
.btn.ghost.quiet{color:var(--muted)}
.btn.ghost.quiet:hover:not([disabled]){color:var(--ink)}
/* confetti-lite */
.cvconf{position:absolute;inset:-130px 0 0 0;pointer-events:none;overflow:hidden;z-index:3}
.cvconf i{position:absolute;inset-inline-end:60px;top:calc(130px + 50%);width:7px;height:7px;border-radius:2px;background:var(--acc-a);animation:cvconf 1.3s cubic-bezier(.2,.6,.3,1) var(--d,0s) both}
.cvconf i[style*="--h:1"]{background:var(--acc-p);border-radius:50%}.cvconf i[style*="--h:2"]{background:var(--acc-b)}
@keyframes cvconf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(calc(var(--x) * 140px),-110px) rotate(540deg)}}
.cvconsole.fin::before{content:"";position:absolute;inset:-6px -8px;border-radius:var(--r-md);pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,color-mix(in srgb,var(--ok) 18%,transparent) 50%,transparent 65%) no-repeat;background-size:300% 100%;background-position:100% 0;animation:cvshine 1.2s var(--ease) both}
@keyframes cvshine{from{background-position:100% 0;opacity:1}to{background-position:0 0;opacity:0}}

/* ---------- messages & bars ---------- */
.cvmsg{margin:0;min-height:0;font-size:13.5px;color:var(--ink2)}
.cvmsg:empty{display:none}
.cvmsg.err{color:var(--signal)}
.convert .bar{height:6px;border-radius:3px;background:var(--soft2);overflow:hidden;flex:1;min-width:80px;display:block;position:relative}
.convert .bar i{display:block;height:100%;width:var(--p,0%);background:var(--cv-grad);border-radius:3px;transition:width .25s linear;position:relative;overflow:hidden}
.convert .bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);transform:translateX(-100%);animation:cvsheen 1.6s ease-in-out infinite}
@keyframes cvsheen{to{transform:translateX(100%)}}
html[dir="rtl"] .convert .bar i::after{animation-name:cvsheenr}
@keyframes cvsheenr{to{transform:translateX(-100%)}}

/* ---------- ffmpeg first load ---------- */
.cvengine{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh-1);padding:14px 16px;animation:cvin .35s var(--ease) both}
.cven{display:flex;flex-direction:column;gap:8px}
.cvenh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:15px}
.cvenh .pct{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink2)}
.cven .snote{margin:0}
.cven .bar{flex:none;width:100%;height:8px;border-radius:4px}
.cvengine .cvpriv{color:var(--muted)!important;margin:0!important}
.cvsteps{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;font-family:var(--mono);color:var(--faint);letter-spacing:.02em}
.cvsteps li{display:inline-flex;align-items:center;gap:5px;transition:color .25s}
.cvsteps li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line2);flex:none;transition:background .25s,transform .25s var(--ease)}
.cvsteps li+li::after{content:"";order:-1;width:12px;height:1px;background:var(--line2);margin-inline-end:2px}
.cvsteps li.done{color:var(--muted)}
.cvsteps li.done::before{background:var(--ok)}
.cvsteps li.now{color:var(--ink)}
.cvsteps li.now::before{background:var(--acc-a);transform:scale(1.35);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc-a) 25%,transparent)}
.cvensteps{font-size:12.5px}

/* ---------- conversion cards ---------- */
.cvlist{display:block}
.cvcards{display:flex;flex-direction:column;gap:8px}
.cvcard{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh-1);
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;will-change:auto}
.cvcard:hover{transform:translateY(-1px);box-shadow:var(--sh-2);border-color:var(--line2)}
.cvcard.fresh{animation:cvin .45s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes cvin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cvcard.shake{animation:cvshake .5s var(--ease)}
@keyframes cvshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.cvcard.just{animation:cvjust .7s var(--ease)}
@keyframes cvjust{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.cvcard.error{border-color:color-mix(in srgb,var(--signal) 45%,var(--line))}
.cvcard.cancelled,.cvcard.queued{opacity:.72}
.cvcard.queued .cvbadge.dst{opacity:.6}
.cvfb{display:inline-flex;align-items:center;gap:6px;flex:none}
.cvbadge{display:inline-grid;place-items:center;min-width:46px;height:30px;padding:0 7px;border-radius:var(--r-xs);font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.04em;white-space:nowrap;transition:background .3s,color .3s,transform .3s var(--ease)}
.cvbadge.src{background:var(--soft2);color:var(--ink2)}
.cvbadge.dst{background:var(--sel-bg);color:var(--sel-fg);position:relative;overflow:hidden}
.cvbadge.dst::after{content:"";position:absolute;inset-inline:6px;bottom:0;height:2px;background:var(--acc-grad);border-radius:2px}
.cvcard.done .cvbadge.dst{background:var(--ok);color:#fff}
.cvcard.done .cvbadge.dst::after{display:none}
.cvcard.error .cvbadge.dst{background:var(--soft2);color:var(--muted)}
.cvarrow{width:14px;height:2px;background:var(--line2);position:relative;flex:none;border-radius:1px}
.cvarrow::after{content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;border:2px solid var(--line2);border-width:2px 2px 0 0;transform:rotate(45deg);border-radius:1px}
.cvcard.reading .cvarrow,.cvcard.decoding .cvarrow,.cvcard.analyzing .cvarrow,.cvcard.processing .cvarrow,.cvcard.encoding .cvarrow,.cvcard.tagging .cvarrow{background:var(--acc-grad);background-size:200% 100%;animation:cvarr .9s linear infinite}
.cvcard.reading .cvarrow::after,.cvcard.decoding .cvarrow::after,.cvcard.analyzing .cvarrow::after,.cvcard.processing .cvarrow::after,.cvcard.encoding .cvarrow::after,.cvcard.tagging .cvarrow::after{border-color:var(--acc-p)}
@keyframes cvarr{to{background-position:-200% 0}}
.cvcard.done .cvarrow,.cvcard.done .cvarrow::after{background:var(--ok);border-color:var(--ok)}
.cvmain{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.cvnm{min-width:0}
.cvmain{text-align:start}
.cvnm bdi{display:block;text-align:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:14.5px}
.cvnm small{display:block;text-align:inherit;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cvstate{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:20px}
.cvstate .bar{flex:1 1 140px;max-width:280px}
.cvstate .cvsteps{flex:1 0 100%}
.cvst{font-size:13px}
.cvst.ok{color:var(--ok);font-weight:600}
.cvst.err{color:var(--signal)}
.cvst.dim{color:var(--muted)}
.cvst.run{color:var(--ink)}
.cvpct{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:3.5ch;text-align:end}
.cvok,.cvbadx{width:20px;height:20px;flex:none}
.cvok{color:var(--ok)}
.cvok circle,.cvok path{stroke-dasharray:1;stroke-dashoffset:1;animation:cvdraw .45s var(--ease) forwards}
.cvok path{animation-delay:.25s}
.cvbadx{color:var(--signal)}
/* the mini RGB equalizer that plays while a card converts */
.cveq{display:inline-flex;align-items:flex-end;gap:2px;height:16px;width:22px;flex:none}
.cveq i{flex:1;height:100%;border-radius:1.5px;transform-origin:50% 100%;animation:cveq .9s ease-in-out infinite;animation-delay:var(--dl,0s);transform:scaleY(var(--h,.5))}
.cveq i:nth-child(1){background:var(--cv-r);--h:.45;--dl:-.1s}.cveq i:nth-child(2){background:var(--cv-r);--h:.85;--dl:-.5s}
.cveq i:nth-child(3){background:var(--cv-g);--h:.6;--dl:-.3s}.cveq i:nth-child(4){background:var(--cv-b);--h:.95;--dl:-.7s}.cveq i:nth-child(5){background:var(--cv-b);--h:.5;--dl:-.2s}
@keyframes cveq{0%,100%{transform:scaleY(var(--h))}50%{transform:scaleY(calc(var(--h) * .3 + .1))}}
.cvside{display:flex;align-items:center;gap:14px;flex:none}
.cvsz{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;font-family:var(--mono);font-size:12.5px;color:var(--ink2);font-variant-numeric:tabular-nums;max-width:260px}
.cvnum{white-space:nowrap}
.cvnum.out{color:var(--ink);font-weight:600}
.cvszarr{color:var(--faint)}
.cvmeta{flex:1 0 100%;text-align:end;color:var(--faint);font-size:11.5px}
.cvchip{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--r-pill);font-size:11px;font-weight:600;letter-spacing:.02em}
.cvchip.dn{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.cvchip.up{background:color-mix(in srgb,var(--warn) 18%,transparent);color:color-mix(in srgb,var(--warn) 70%,var(--ink))}
.cvact{display:flex;align-items:center;gap:4px;white-space:nowrap}
.cvact .btn{height:34px;padding:0 12px;font-size:13px}
.cvdl{gap:6px}
.cvcard.done .cvdl{border-color:var(--ink);animation:cvpop .35s var(--ease)}
.cvsm{margin-inline-start:4px}
.cvx{display:inline-grid;place-items:center;width:30px;height:30px;border:0;background:transparent;border-radius:var(--r-xs);color:var(--muted);padding:0;transition:background .15s,color .15s,transform .15s}
.cvx:hover{background:var(--btn-hover);color:var(--ink)}
.cvx:active{transform:scale(.9)}
.cvx svg{width:14px;height:14px}

/* ---------- images: thumbnails with a flip to the output size ---------- */
.cvigrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.cvimg{align-items:flex-start;flex-wrap:wrap}
.cvimg .cvact{flex:1 0 100%;justify-content:flex-end;margin:0}
.cvimg .cvmain{gap:6px}
.cvimg .cvsz{justify-content:flex-start;max-width:none}
.cvimg .cvmeta{flex:0 0 auto;text-align:start}
.cvthumb{width:64px;height:64px;flex:none;position:relative;perspective:400px}
.cvthumb .face{position:absolute;inset:0;border-radius:var(--r-sm);overflow:hidden;display:grid;place-items:center;backface-visibility:hidden;background:var(--soft2);color:var(--muted);transition:transform .55s var(--ease)}
.cvthumb .face img{width:100%;height:100%;object-fit:cover;display:block}
.cvthumb .face svg{width:26px;height:26px}
.cvthumb .face.b{transform:rotateY(180deg);background:var(--sel-bg);color:var(--sel-fg);flex-direction:column;font-family:var(--mono);font-size:10.5px;line-height:1.25;text-align:center;place-content:center;display:flex;align-items:center;justify-content:center;padding:4px}
.cvthumb .face.b b{font-size:11.5px}
.cvthumb .face.b small{font-size:10px;opacity:.75}
.cvthumb.flip:hover .face.a,.cvcard.cvimg:focus-within .cvthumb.flip .face.a{transform:rotateY(180deg)}
.cvthumb.flip:hover .face.b,.cvcard.cvimg:focus-within .cvthumb.flip .face.b{transform:rotateY(360deg)}

/* ---------- motion off: static, readable states ---------- */
@media (prefers-reduced-motion:reduce){
  .cvstage::before,.cvsin::before,.cvbars i,.cvflow i,.cveq i,.cvdot,.convert .bar i::after,.cvcard.fresh,.cvcard.just,.cvcard.shake,.cvseg label.on,.cvpill.morph,.cvarrow,.cvengine,.cvconsole.fin::before,.cvconf i,.cvok circle,.cvok path,.cvring .tick,.cvdl,.cvsweep{animation:none!important}
  .cvsin::before{opacity:.7}
  .cvok circle,.cvok path,.cvring.full .tick{stroke-dashoffset:0}
  .cvcard,.cvdi,.cvstage,.btn.cvgo.pri::before{transition:none}
  .cvcard:hover{transform:none}
  .cvdot{box-shadow:0 0 0 3px color-mix(in srgb,var(--acc-a) 30%,transparent)}
  .cvconf{display:none}
}
html.a11y-noanim .cvsin::before{opacity:.7}
html.a11y-noanim .cvok circle,html.a11y-noanim .cvok path,html.a11y-noanim .cvring.full .tick{stroke-dashoffset:0}
html.a11y-noanim .cvconf{display:none}
html.a11y-noanim .convert .bar i::after{display:none}

/* ---------- phone ---------- */
@media (max-width:760px){
  .convert{padding-top:18px}
  .cvhead{align-items:flex-start}
  .cvtabs{height:34px}
  .cvsin{padding:30px 16px 24px}
  .cvstage>.cvsin>b{font-size:17px}
  .cvfmt{grid-column:1/-1}
  .cvcard:not(.cvimg){display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;padding:12px;align-items:start}
  .cvfb{flex-direction:column;align-items:center;gap:4px;margin-top:2px}
  .cvfb .cvarrow{transform:rotate(90deg);margin:3px 0}
  .cvsteps{font-size:10.5px;letter-spacing:0;gap:4px}
  .cvsteps li+li::after{width:8px}
  .cvside{grid-column:1/-1;justify-content:space-between;gap:8px;align-items:flex-end}
  .cvsz{justify-content:flex-start;max-width:none}
  .cvmeta{text-align:start}
  .cvstate .bar{max-width:none}
  .cvcb{margin-inline-start:0;width:100%}
  .btn.cvgo.pri{flex:1 1 auto}
  .cvigrid{grid-template-columns:1fr}
  .cvstage.compact .cvdb{margin-inline-start:0}
}