yuanxin
/
APP_UI


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779
							<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>总收益票据 · 订单与持仓 · 深空蓝</title>
<style>
/* ============================================================
   共赢票据投资者 APP — 深空蓝设计系统 (Deep-Space Blue)
   双主题：data-theme="light" | "dark"，可作用于 :root 或任意容器
   ============================================================ */

/* ---------- 浅色（默认） ---------- */
:root,
[data-theme="light"]{
  --canvas:#E7ECF4;          /* 图纸底 */
  --canvas-2:#F4F7FB;        /* 图纸卡片 */
  --canvas-line:#D3DCE8;
  --canvas-ink:#0F1B33;
  --canvas-mute:#647591;

  --app-bg:#F6F8FB;          /* App 页面底 */
  --surface:#FFFFFF;         /* 卡片/导航 */
  --surface-2:#F1F4F9;       /* 次级面/表头 */
  --surface-3:#E8EDF5;       /* 三级面 */
  --line:#E3E9F1;
  --line-2:#CFD9E7;
  --ink-1:#0F1B33;
  --ink-2:#4C5C78;
  --ink-3:#8A99B2;
  --ink-4:#AEBACD;

  --brand:#1B4FD8;
  --brand-2:#123CAE;
  --brand-weak:#E7EEFF;
  --brand-line:#B9CDFF;
  --on-brand:#FFFFFF;

  --accent:#B4700E;          /* 琥珀 强调 */
  --accent-weak:#FDF2DE;
  --accent-line:#EBCD97;

  --rise:#E5484D;            /* 涨 / 盈利 */
  --fall:#12A594;            /* 跌 / 亏损 */
  --rise-weak:#FDECEC;
  --fall-weak:#E3F7F3;
  --warn:#C2410C;
  --warn-weak:#FEF0E6;
  --danger:#DC2626;
  --danger-weak:#FDEBEB;
  --ok:#0F7B4F;
  --ok-weak:#E4F5EC;

  --shadow-card:0 1px 2px rgba(15,27,51,.05),0 8px 24px rgba(15,27,51,.06);
  --shadow-phone:0 18px 44px rgba(15,27,51,.16),0 2px 6px rgba(15,27,51,.08);
  --shadow-pop:0 12px 40px rgba(15,27,51,.20);
  --scrim:rgba(11,18,34,.42);
  --bezel:#C7D2E2;
  --glow:none;
}

/* ---------- 深色 ---------- */
[data-theme="dark"]{
  --canvas:#060A14;
  --canvas-2:#0E1526;
  --canvas-line:#1E2A44;
  --canvas-ink:#E9EFFA;
  --canvas-mute:#8797B4;

  --app-bg:#0B1020;
  --surface:#131B2E;
  --surface-2:#18223A;
  --surface-3:#1E2A45;
  --line:#232F4B;
  --line-2:#32436A;
  --ink-1:#EAF0FA;
  --ink-2:#A5B4D0;
  --ink-3:#7486A5;
  --ink-4:#54658A;

  --brand:#5B8CFF;
  --brand-2:#7FA6FF;
  --brand-weak:rgba(91,140,255,.16);
  --brand-line:rgba(91,140,255,.42);
  --on-brand:#05122E;

  --accent:#F0A93B;
  --accent-weak:rgba(240,169,59,.15);
  --accent-line:rgba(240,169,59,.42);

  --rise:#FF6B6E;
  --fall:#2FD4B9;
  --rise-weak:rgba(255,107,110,.14);
  --fall-weak:rgba(47,212,185,.14);
  --warn:#F59E42;
  --warn-weak:rgba(245,158,66,.14);
  --danger:#FF6B6E;
  --danger-weak:rgba(255,107,110,.14);
  --ok:#2FD4B9;
  --ok-weak:rgba(47,212,185,.14);

  --shadow-card:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.34);
  --shadow-phone:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(91,140,255,.10);
  --shadow-pop:0 14px 44px rgba(0,0,0,.62);
  --scrim:rgba(2,6,16,.62);
  --bezel:#26324C;
  --glow:0 0 0 1px rgba(91,140,255,.14);
}

/* ---------- 基础 ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--canvas);color:var(--canvas-ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:44px 46px 110px;
  transition:background .28s ease,color .28s ease;
}
.mono{font-family:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace}
.num{font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ---------- 图纸头 ---------- */
.sheet-head{
  display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between;
  padding-bottom:24px;margin-bottom:44px;border-bottom:1px solid var(--canvas-line);
}
.brandmark{display:flex;align-items:center;gap:14px}
.brandmark .glyph{
  width:44px;height:44px;border-radius:12px;flex:none;position:relative;
  background:linear-gradient(145deg,var(--brand),var(--brand-2));
  box-shadow:0 6px 18px rgba(27,79,216,.28);
}
.brandmark .glyph::before{
  content:"";position:absolute;inset:12px 11px;border:1.6px solid rgba(255,255,255,.9);
  border-radius:2px;border-bottom-width:4px;
}
.brandmark .glyph::after{
  content:"";position:absolute;right:8px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--accent);
}
.sheet-title{font-size:26px;font-weight:650;letter-spacing:.02em;line-height:1.2}
.sheet-sub{margin-top:6px;font-size:12.5px;color:var(--canvas-mute);letter-spacing:.02em}
.head-right{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.meta{display:flex;gap:26px}
.meta div{font-size:10.5px;color:var(--canvas-mute);letter-spacing:.1em;text-transform:uppercase}
.meta b{display:block;margin-top:5px;font-size:12.5px;color:var(--canvas-ink);font-weight:550;letter-spacing:0;text-transform:none}

/* 换肤开关 */
.skin{
  display:flex;align-items:center;gap:0;padding:3px;border-radius:9px;
  background:var(--canvas-2);border:1px solid var(--canvas-line);
}
.skin button{
  border:0;background:transparent;cursor:pointer;font:inherit;
  padding:7px 13px;border-radius:6px;font-size:12px;color:var(--canvas-mute);
  display:flex;align-items:center;gap:6px;letter-spacing:.04em;transition:.2s;
}
.skin button.on{background:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(27,79,216,.3)}
[data-theme="dark"] .skin button.on{color:#04122F}
.skin svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 章节 ---------- */
.sec{margin-bottom:60px}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:24px}
.sec-num{
  font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;color:var(--brand);
  letter-spacing:.12em;padding:3px 8px;border:1px solid var(--brand-line);border-radius:5px;background:var(--brand-weak);
}
.sec-name{font-size:17px;font-weight:600;letter-spacing:.04em}
.sec-rule{flex:1;height:1px;background:var(--canvas-line)}
.sec-note{font-size:12px;color:var(--canvas-mute)}

/* ---------- 说明卡 ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.card-x{background:var(--canvas-2);border:1px solid var(--canvas-line);border-radius:12px;padding:18px 20px}
.card-x h4{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--canvas-mute);margin-bottom:14px;text-transform:uppercase}
.kv{display:flex;flex-direction:column;gap:10px}
.kv .r{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;line-height:1.5}
.kv .r span{color:var(--canvas-mute)}
.kv .r b{font-weight:520;text-align:right;font-variant-numeric:tabular-nums}
.bullets{display:flex;flex-direction:column;gap:9px}
.bullets li{list-style:none;font-size:12.5px;line-height:1.65;color:var(--canvas-mute);padding-left:14px;position:relative}
.bullets li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:1.5px;background:var(--brand);border-radius:1px}
.bullets b{color:var(--canvas-ink);font-weight:560}
code{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11.5px;background:var(--surface-3);color:var(--canvas-ink);padding:1px 5px;border-radius:4px}

/* ---------- 色板 ---------- */
.pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.sw{border:1px solid var(--canvas-line);border-radius:10px;overflow:hidden;background:var(--canvas-2)}
.sw .chip{height:56px;display:flex;align-items:flex-end;justify-content:flex-end;padding:7px 9px}
.sw .chip i{font-style:normal;font-size:9.5px;color:rgba(255,255,255,.85);font-family:"SF Mono",monospace}
.sw .lb{padding:9px 11px}
.sw .lb b{display:block;font-size:12px;font-weight:560}
.sw .lb em{font-style:normal;display:block;font-size:10.5px;color:var(--canvas-mute);margin-top:3px;font-family:"SF Mono",monospace}

/* ---------- 表 ---------- */
table.spec{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--canvas-2);border:1px solid var(--canvas-line);border-radius:12px;overflow:hidden}
table.spec th{
  background:var(--surface-2);text-align:left;padding:11px 14px;font-size:10.5px;font-weight:600;
  letter-spacing:.1em;color:var(--canvas-mute);text-transform:uppercase;border-bottom:1px solid var(--canvas-line);
}
table.spec td{padding:11px 14px;border-bottom:1px solid var(--canvas-line);color:var(--canvas-mute);line-height:1.6;vertical-align:top}
table.spec tr:last-child td{border-bottom:0}
table.spec td b{color:var(--canvas-ink);font-weight:550}
table.spec td.m{font-family:"SF Mono",ui-monospace,Menlo,monospace;color:var(--canvas-ink);font-size:11.5px}

/* ---------- 画板 ---------- */
.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(390px,390px));gap:52px 36px;justify-content:start}
.frame{width:390px}
.frame.w2{grid-column:span 2}
.phone{
  width:390px;height:844px;border-radius:42px;overflow:hidden;position:relative;
  background:var(--app-bg);border:1px solid var(--bezel);box-shadow:var(--shadow-phone);
  font-size:15px;color:var(--ink-1);transition:background .28s ease,border-color .28s ease;
  isolation:isolate;
}
.cap{margin-top:18px;padding-left:13px;border-left:2px solid var(--brand)}
.cap-num{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--brand);letter-spacing:.12em}
.cap-title{font-size:14.5px;font-weight:600;margin:5px 0 8px;letter-spacing:.02em}
.cap ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.cap li{font-size:12px;line-height:1.62;color:var(--canvas-mute);padding-left:12px;position:relative}
.cap li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:1px;background:var(--canvas-line)}
.cap li b{color:var(--canvas-ink);font-weight:550}
.cap code{font-size:11px;background:var(--surface-3)}

/* ============================================================
   App 内部组件
   ============================================================ */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--app-bg)}

.statusbar{height:52px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 24px 6px;font-size:14.5px;font-weight:600;color:var(--ink-1)}
.statusbar .ic{display:flex;gap:6px;align-items:center;opacity:.9}
.statusbar svg{height:12px;fill:currentColor}
.homebar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:132px;height:5px;border-radius:3px;background:var(--ink-1);opacity:.26;z-index:60}

/* 顶栏 */
.navbar{height:46px;flex:none;display:flex;align-items:center;padding:0 16px;position:relative;background:var(--app-bg)}
.navbar h2{position:absolute;left:0;right:0;text-align:center;font-size:16.5px;font-weight:600;letter-spacing:.03em}
.navbar .bk,.navbar .rt{position:relative;z-index:2;color:var(--ink-2);display:flex;align-items:center;gap:5px;font-size:13px}
.navbar .rt{margin-left:auto;color:var(--brand)}
.icn{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icn.sm{width:14px;height:14px}
.icn.lg{width:22px;height:22px}

.appbar{padding:4px 20px 0;flex:none}
.appbar h1{font-size:22px;font-weight:650;letter-spacing:.02em;display:flex;align-items:center;gap:9px}
.appbar h1 .tiny{font-size:11px;font-weight:500;color:var(--ink-3);letter-spacing:.1em;padding:3px 7px;border:1px solid var(--line-2);border-radius:5px}
/* 顶栏铃铛 · 未读红点 */
.bellwrap{position:relative;display:inline-flex;flex:none}
.bellwrap .rd{position:absolute;top:-1px;right:0;width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--app-bg);font-style:normal}
/* 两行顶栏（标题 + 分段控件）的标题行：标题左、铃铛右 */
.apphd{display:flex;align-items:center;justify-content:space-between}

/* 分段控件 */
.seg{display:flex;padding:3px;background:var(--surface-2);border-radius:9px;gap:2px}
.seg span{flex:1;text-align:center;padding:7px 0;font-size:13.5px;color:var(--ink-3);border-radius:7px;transition:.2s}
.seg span.on{background:var(--surface);color:var(--ink-1);font-weight:600;box-shadow:var(--shadow-card)}
[data-theme="dark"] .seg span.on{background:var(--surface-3);color:var(--brand)}

/* 下划线 tab */
.tabs{display:flex;gap:24px;padding:0 20px;border-bottom:1px solid var(--line);flex:none;background:var(--app-bg)}
.tabs span{padding:12px 1px 11px;font-size:14.5px;color:var(--ink-3);position:relative;white-space:nowrap}
.tabs span.on{color:var(--ink-1);font-weight:600}
.tabs span.on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;width:22px;height:2.5px;border-radius:2px;background:var(--brand)}
.tabs span .dot{position:absolute;top:9px;right:-7px;width:6px;height:6px;padding:0;font-size:0;border-radius:50%;background:var(--danger)}
.tabs span em{font-style:normal;color:var(--danger)}

/* 底部 tabbar */
.tabbar{height:72px;flex:none;display:flex;background:var(--surface);border-top:1px solid var(--line);padding-bottom:10px}
.tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;color:var(--ink-3)}
.tb.on{color:var(--brand)}
.tb .icn{width:21px;height:21px;stroke-width:1.6}

/* 滚动体 */
.body{flex:1;overflow:hidden;position:relative}
.pad{padding:0 16px}

/* 卡片 */
.card{background:var(--surface);border-radius:14px;box-shadow:var(--shadow-card);overflow:hidden}
[data-theme="dark"] .card{border:1px solid var(--line)}
.card + .card:not(.pos):not(.qc){margin-top:11px}
.card-hd{display:flex;align-items:center;justify-content:space-between;padding:13px 15px 0}
.card-hd h3{font-size:14.5px;font-weight:600}
.card-hd .more{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:2px}

/* 资金看板 */
.hero{
  margin:10px 16px 0;border-radius:16px;padding:18px 18px 16px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#1B4FD8 0%,#123CAE 58%,#0C2C86 100%);color:#fff;
  box-shadow:0 12px 30px rgba(18,60,174,.30);
}
[data-theme="dark"] .hero{background:linear-gradient(150deg,#1A2C5C 0%,#132347 55%,#101B39 100%);box-shadow:0 12px 30px rgba(0,0,0,.5);border:1px solid rgba(91,140,255,.24)}
.hero::after{content:"";position:absolute;right:-40px;top:-52px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.07)}
[data-theme="dark"] .hero::after{background:rgba(91,140,255,.10)}
.hero .lb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:rgba(255,255,255,.76)}
.hero .lb .cur{display:flex;align-items:center;gap:3px;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.14);font-size:11.5px}
.hero .amt{margin-top:7px;font-size:33px;font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px}
.hero .amt .eye{opacity:.6}
.hero .arrow{position:absolute;right:18px;top:20px;opacity:.75}
.hero .grid3{display:flex;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16)}
.hero .grid3 div{flex:1}
.hero .grid3 span{display:block;font-size:11px;color:rgba(255,255,255,.7)}
.hero .grid3 b{display:block;margin-top:5px;font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums}

/* 币种表 */
.fxtab{width:100%;border-collapse:collapse;font-size:12.5px}
.fxtab th{padding:9px 15px;font-size:10.5px;font-weight:500;color:var(--ink-3);letter-spacing:.06em;text-align:right;background:var(--surface-2)}
.fxtab th:first-child{text-align:left}
.fxtab td{padding:10px 15px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-1);border-top:1px solid var(--line)}
.fxtab td:first-child{text-align:left;font-family:"SF Mono",monospace;font-size:12px;color:var(--ink-2)}

/* ============================================================
   资产详情 —— 净值块 + 分组列表（组头行 / 明细行 / 子行）
   ============================================================ */

/* 净值块：直接落在页面底色上，不做渐变卡 */
.netv{padding:12px 16px 15px}
.netv .lb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);height:22px}
.netv .cur{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:6px;background:var(--surface-2);color:var(--ink-2);font-size:12px;font-weight:500}
[data-theme="dark"] .netv .cur{background:var(--surface-3)}
.netv .cur .icn{width:11px;height:11px;color:var(--ink-3)}
.netv .amt{margin-top:6px;font-size:34px;line-height:41px;font-weight:600;letter-spacing:.005em;color:var(--ink-1);font-variant-numeric:tabular-nums}

/* 分组列表卡 */
.glist{background:var(--surface);border-radius:12px;overflow:hidden;margin:0 16px;box-shadow:var(--shadow-card)}
[data-theme="dark"] .glist{border:1px solid var(--line)}
.glist .r{display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px;padding:0 16px;position:relative;font-size:14.5px}
.glist .r::after{content:"";position:absolute;left:16px;right:0;bottom:0;height:1px;background:var(--line)}
.glist .r:last-child::after{display:none}
.glist .r .k{color:var(--ink-2);display:flex;align-items:center;gap:6px;min-width:0}
.glist .r .v{color:var(--ink-1);font-variant-numeric:tabular-nums;letter-spacing:.01em;flex:none}

/* 组头行：合计口径，灰底加粗 */
.glist .r.hd{height:46px;background:var(--surface-2)}
.glist .r.hd:not(:first-child){box-shadow:inset 0 1px 0 var(--line)}
.glist .r.hd::after{left:0}
.glist .r.hd .k{color:var(--ink-1);font-weight:600;font-size:15px}
.glist .r.hd .v{color:var(--ink-1);font-weight:600;font-size:15px}

/* 子行：缩进 + 降一级灰度，分隔线随缩进内收 */
.glist .r.sub{height:40px;padding-left:30px;font-size:13.5px}
.glist .r.sub::after{left:30px}
.glist .r.sub .k{color:var(--ink-3);font-size:13.5px}
.glist .r.sub .v{color:var(--ink-3);font-size:13.5px}

/* 父级行：有下级构成项，但与同卡其他一级行平级，不加底色 */
.glist .r.pa .v:empty{display:none}

/* 行内注记：不做胶囊，只降一级灰度，避免抢明细读数 */
.glist .note{font-size:10px;color:var(--ink-4);letter-spacing:.02em;font-weight:400;flex:none}

/* 分组标题（卡外，含右侧附注） */
.gtitle.tight{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:15px 16px 7px;font-size:12px;letter-spacing:.04em;color:var(--ink-3)}
.gtitle.tight b{color:var(--ink-2);font-weight:600}
.gtitle.tight em{font-style:normal;font-size:10.5px;color:var(--ink-4);letter-spacing:.02em;text-align:right;flex:none}

/* 滚动条示意 */
.sbar{position:absolute;right:3px;width:3px;border-radius:2px;background:var(--ink-4);opacity:.3;z-index:6}

/* 币种选择行 */
.curow{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--line);font-size:14.5px}
.curow:last-of-type{border-bottom:0}
.curow .cl{display:flex;align-items:center;gap:7px;color:var(--ink-1)}
.curow .cr{display:flex;align-items:center;gap:9px;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.curow.on .cl{font-weight:600}
.curow.on .cr{color:var(--brand)}
/* 快捷入口 */
.quick{display:flex;gap:11px;margin:11px 16px 0}
.qk{flex:1;background:var(--surface);border-radius:13px;padding:13px 12px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-card);position:relative}
[data-theme="dark"] .qk{border:1px solid var(--line)}
.qk .ib{width:32px;height:32px;border-radius:9px;background:var(--brand-weak);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.qk b{font-size:13.5px;font-weight:550}
.qk .rd{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--surface)}

/* 列表行 */
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;border-bottom:1px solid var(--line);font-size:14.5px}
.row:last-child{border-bottom:0}
.row .k{color:var(--ink-2);display:flex;align-items:center;gap:7px;flex:none}
.row .k .icn{color:var(--ink-3)}
.row .v{color:var(--ink-1);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px;text-align:right}
.row .v.ph{color:var(--ink-4)}
.row .v.m{font-family:"SF Mono",monospace;font-size:13.5px}
.hint{width:13px;height:13px;border-radius:50%;border:1px solid var(--ink-4);color:var(--ink-3);font-size:8.5px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;flex:none}

/* 标签 / 徽标 */
.tag{font-size:10.5px;padding:2px 6px;border-radius:4px;letter-spacing:.02em;font-weight:520;display:inline-flex;align-items:center;gap:3px;flex:none}
.t-brand{background:var(--brand-weak);color:var(--brand)}
.t-accent{background:var(--accent-weak);color:var(--accent)}
.t-rise{background:var(--rise-weak);color:var(--rise)}
.t-fall{background:var(--fall-weak);color:var(--fall)}
.t-ok{background:var(--ok-weak);color:var(--ok)}
.t-warn{background:var(--warn-weak);color:var(--warn)}
.t-mute{background:var(--surface-3);color:var(--ink-3)}
.t-solid{background:var(--brand);color:var(--on-brand)}
.t-danger{background:var(--danger);color:#fff}
.cmark{width:14px;height:14px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-size:9px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;flex:none;font-style:normal}
.corner{position:absolute;left:0;top:0;padding:2px 9px 2px 7px;font-size:9.5px;color:#fff;background:var(--danger);border-radius:12px 0 12px 0;letter-spacing:.04em;z-index:3}
.corner.due{background:var(--accent)}
.corner.pend{background:var(--ink-3)}

/* 状态点 */
.st{display:inline-flex;align-items:center;gap:5px;font-size:12.5px}
.st i{width:6px;height:6px;border-radius:50%;flex:none;background:currentColor}
.st.wait{color:var(--ink-3)}
.st.live{color:var(--accent)}
.st.live i{background:transparent;border:1.6px solid currentColor}
.st.done{color:var(--ok)}
.st.rej{color:var(--danger)}
.st.exp{color:var(--ink-4)}

/* 按钮 */
.btn{
  height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--brand);color:var(--on-brand);font-size:15.5px;font-weight:600;letter-spacing:.06em;
  box-shadow:0 6px 16px rgba(27,79,216,.24);
}
[data-theme="dark"] .btn{box-shadow:0 6px 18px rgba(91,140,255,.20)}
.btn.sm{height:38px;font-size:14px;border-radius:10px;box-shadow:none}
.btn.off{background:var(--surface-3);color:var(--ink-4);box-shadow:none}
.btn.ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink-2);box-shadow:none;font-weight:500}
.btn.danger{background:var(--danger);box-shadow:none;color:#fff}
.btn.wide{width:100%}
.iconbtn{width:46px;height:46px;border-radius:12px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--ink-2);flex:none;background:var(--surface)}

/* 输入 */
.field{background:var(--surface);border:1px solid var(--line-2);border-radius:11px;height:44px;display:flex;align-items:center;gap:9px;padding:0 13px;font-size:14.5px;color:var(--ink-1)}
.field.focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-weak)}
.field.err{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-weak)}
.field .ph{color:var(--ink-4)}
.field .icn{color:var(--ink-3)}
.field .unit{margin-left:auto;color:var(--ink-2);font-size:13.5px}
.lbl{font-size:11.5px;color:var(--ink-3);letter-spacing:.06em;margin-bottom:7px;display:block}
.errtip{font-size:11.5px;color:var(--danger);margin-top:6px;display:flex;align-items:center;gap:4px}

/* chips */
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{height:32px;padding:0 12px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-size:13px;display:flex;align-items:center;font-variant-numeric:tabular-nums}
.chip.on{background:var(--brand-weak);border-color:var(--brand-line);color:var(--brand);font-weight:560}
.chip.dash{border-style:dashed}

/* 单选 / 复选 */
.rad{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2)}
.rad i{width:15px;height:15px;border-radius:50%;border:1.4px solid var(--line-2);position:relative;flex:none}
.rad.on{color:var(--ink-1)}
.rad.on i{border-color:var(--brand)}
.rad.on i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--brand)}
.cb{width:16px;height:16px;border-radius:4.5px;border:1.4px solid var(--line-2);flex:none;display:flex;align-items:center;justify-content:center;color:transparent}
.cb.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.cb .icn{width:11px;height:11px;stroke-width:2.6}

/* 步进器 */
.stepper{height:38px;border:1px solid var(--line-2);border-radius:10px;display:flex;align-items:center;overflow:hidden;background:var(--surface)}
.stepper b{width:34px;text-align:center;font-weight:400;font-size:17px;color:var(--ink-3)}
.stepper i{flex:1;text-align:center;font-style:normal;font-variant-numeric:tabular-nums;font-size:15px;border-left:1px solid var(--line);border-right:1px solid var(--line);line-height:36px}
.stepper.err{border-color:var(--danger)}
.stepper.err i{color:var(--danger)}

/* 搜索 */
.search{height:38px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;gap:8px;padding:0 12px;font-size:14px;color:var(--ink-4)}
.search .icn{color:var(--ink-3)}
.search b{color:var(--ink-1);font-weight:500}
.sug{background:var(--surface);border-radius:12px;box-shadow:var(--shadow-pop);overflow:hidden;margin-top:6px}
.sug div{padding:11px 13px;font-size:14px;border-bottom:1px solid var(--line);display:flex;gap:8px}
.sug div:last-child{border-bottom:0}
.sug em{font-style:normal;color:var(--brand)}
.sug span{font-family:"SF Mono",monospace;font-size:12.5px;color:var(--ink-3)}

/* 弹窗 */
.scrim{position:absolute;inset:0;background:var(--scrim);z-index:40;display:flex;align-items:center;justify-content:center;padding:0 30px}
.scrim.bottom{align-items:flex-end;padding:0}
.dlg{width:100%;background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-pop)}
.dlg.sheet{border-radius:18px 18px 0 0;padding-bottom:22px}
.dlg-hd{padding:18px 18px 0;text-align:center}
.dlg-hd h3{font-size:16.5px;font-weight:600}
.dlg-bd{padding:14px 18px 4px;font-size:14px;color:var(--ink-2);line-height:1.65}
.dlg-ft{display:flex;border-top:1px solid var(--line);margin-top:16px}
.dlg-ft span{flex:1;text-align:center;padding:14px 0;font-size:15.5px;color:var(--brand);font-weight:550}
.dlg-ft span:first-child{color:var(--ink-2);border-right:1px solid var(--line)}
.dlg-ft.single span{color:var(--brand)}
.dlg-btns{display:flex;gap:11px;padding:16px 18px 0}
.dlg-btns .btn{flex:1}

/* toast */
.toast{
  position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);z-index:50;
  background:rgba(15,25,45,.90);color:#fff;padding:12px 20px;border-radius:11px;font-size:14px;max-width:290px;text-align:center;line-height:1.55;
}
[data-theme="dark"] .toast{background:rgba(230,238,250,.94);color:#0B1020}

/* 提示条 */
.notice{display:flex;gap:8px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.6}
.notice.warn{background:var(--warn-weak);color:var(--warn)}
.notice.info{background:var(--brand-weak);color:var(--brand)}
.notice.danger{background:var(--danger-weak);color:var(--danger)}
.notice .icn{flex:none;margin-top:1px}

/* 空态 */
.empty{padding:44px 0;text-align:center;color:var(--ink-4);font-size:13.5px}
.empty .icn{width:34px;height:34px;stroke-width:1.2;margin-bottom:10px;color:var(--ink-4)}

/* 分组标题 */
.gtitle{padding:16px 16px 8px;font-size:12px;color:var(--ink-3);letter-spacing:.06em}

/* 骨架/遮罩说明用 */
.dim{opacity:.45}

/* ============================================================
   空态占位（插画 + 文案 + 可选出口）
   ============================================================ */
.emptyslot{flex:1;display:flex;align-items:center;justify-content:center;padding:0 0 204px}
.emptybox{
  --il-a:#E7EDF6;   /* 主面 */
  --il-b:#D8E0EC;   /* 背板（略深） */
  --il-c:#F8FAFE;   /* 前盖高光 */
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 32px;
}
[data-theme="dark"] .emptybox{--il-a:#1F2A45;--il-b:#161F38;--il-c:#28355A}
.emptybox .illu{width:120px;height:104px;display:block}
.emptybox .etxt{margin-top:16px;font-size:14px;color:var(--ink-3);letter-spacing:.1em}
.emptybox .esub{margin-top:8px;font-size:12px;line-height:1.65;color:var(--ink-4);max-width:236px}
.emptybox .eact{margin-top:20px}
/* 紧凑档：卡片内 / 弹层内 */
.emptybox.sm{padding:26px 20px}
.emptybox.sm .illu{width:72px;height:62px}
.emptybox.sm .etxt{margin-top:11px;font-size:12.5px;letter-spacing:.08em}
/* 行内档：卡片内窄槽，图文横排 */
.emptybox.row{flex-direction:row;align-items:center;justify-content:center;gap:10px;padding:9px 0}
.emptybox.row .illu{width:30px;height:26px}
.emptybox.row .etxt{margin-top:0;font-size:12.5px;letter-spacing:.06em}

/* ============================================================
   下拉刷新 / 上拉加载
   ============================================================ */
@keyframes hh-spin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}

/* 下拉指示区：高度 = 当前下拉距离，内容垂直居中 */
.ptr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:none;background:var(--app-bg);overflow:hidden}
.ptr .txt{font-size:11.5px;color:var(--ink-3);letter-spacing:.06em;white-space:nowrap}
.ptr.ready .txt{color:var(--brand);font-weight:550}
.ptr.done .txt{color:var(--ok)}

/* 进度环 / 转圈 */
.ring{width:24px;height:24px;position:relative;flex:none}
.ring > svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.ring .trk{fill:none;stroke:var(--line-2);stroke-width:2.2}
.ring .bar{fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round}
.ring .ar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--brand)}
.ring .ar .icn{width:12px;height:12px;stroke-width:2.4}
.ring.sm{width:16px;height:16px}
.ring.sm .trk,.ring.sm .bar{stroke-width:2.8}
.spin{animation:hh-spin .9s linear infinite}

/* 刷新完成勾 */
.okdot{width:24px;height:24px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
[data-theme="dark"] .okdot{color:#05122E}
.okdot .icn{width:14px;height:14px;stroke-width:2.8}

/* 上拉加载 footer */
.lmore{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;flex:none;font-size:12.5px;color:var(--ink-3);letter-spacing:.04em}
.lmore.end{gap:12px;color:var(--ink-4);font-size:11.5px}
.lmore.end i{width:44px;height:1px;background:var(--line);font-style:normal;flex:none}
.lmore.err{color:var(--ink-2)}
.lmore.err .icn{width:14px;height:14px;color:var(--ink-3)}
.lmore.err b{color:var(--brand);font-weight:550}

/* ============================================================
   业务组件
   ============================================================ */

/* 筛选栏 */
.filterbar{display:flex;gap:8px;padding:10px 16px;background:var(--app-bg);flex:none;align-items:center}
.fb{height:34px;padding:0 11px;border-radius:9px;background:var(--surface-2);color:var(--ink-2);font-size:13px;display:flex;align-items:center;gap:5px;white-space:nowrap}
.fb.on{background:var(--brand-weak);color:var(--brand);font-weight:550}
.fb .icn{width:13px;height:13px}
.fb.flex{flex:1;min-width:0}

/* 筛选栏 v2 —— 搜索行 + 条件行（时间在左，筛选入口在右） */
.fsearch{margin:10px 16px 0;height:40px;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;gap:9px;padding:0 13px;font-size:14px;color:var(--ink-4);flex:none}
.fsearch .icn{width:16px;height:16px;color:var(--ink-3);flex:none}
.fsearch b{color:var(--ink-1);font-weight:500}
.fsearch .clr{margin-left:auto;color:var(--ink-4)}
.fcond{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;flex:none;background:var(--app-bg)}
.fpill{height:34px;padding:0 14px;border-radius:17px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-size:13.5px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fpill .icn{width:13px;height:13px;color:var(--ink-3)}
.fpill.on{background:var(--brand-weak);border-color:var(--brand-line);color:var(--brand);font-weight:560}
.fpill.on .icn{color:var(--brand)}
.fmore{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2);position:relative;padding-right:2px}
.fmore .icn{width:15px;height:15px;color:var(--ink-3)}
.fmore.on{color:var(--brand);font-weight:560}
.fmore.on .icn{color:var(--brand)}
.fmore.on::after{content:"";position:absolute;right:-5px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--danger)}

/* 筛选面板 —— 底部弹层 */
.fsheet{padding-bottom:20px}
.fsheet-hd{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 2px}
.fsheet-hd b{font-size:17px;font-weight:600;letter-spacing:.02em}
.fsheet-hd .icn{width:19px;height:19px;color:var(--ink-3)}
.fsec{padding:16px 20px 0}
.fsec .lbl{margin-bottom:10px}
.optgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.opt{height:42px;border-radius:21px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-size:14px;display:flex;align-items:center;justify-content:center;white-space:nowrap;padding:0 10px}
.opt.on{background:var(--brand-weak);border-color:var(--brand);color:var(--brand);font-weight:600}
.opt.dis{background:var(--surface-2);border-color:var(--line);color:var(--ink-4)}
.fline{height:1px;background:var(--line);margin:18px 20px 0}

/* 自定义区间 · 日期段 + 滚轮 */
.dtrow{display:flex;gap:11px}
.dt{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:8px 12px 10px}
.dt em{display:block;font-style:normal;font-size:11px;color:var(--ink-3);letter-spacing:.04em}
.dt b{display:block;margin-top:3px;font-size:16px;font-weight:600;color:var(--ink-1);font-variant-numeric:tabular-nums;font-family:"SF Mono",ui-monospace,Menlo,monospace}
.dt.act{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-weak)}
.dt.act em{color:var(--brand)}
.dt.err{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-weak)}
.wheel{position:relative;margin:14px 20px 0;padding:4px 8px;display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.wheel .band{position:absolute;left:6px;right:6px;top:50%;height:40px;transform:translateY(-50%);background:var(--surface-2);border-radius:10px}
.wcol{position:relative;z-index:1;display:flex;flex-direction:column}
.wcol span{height:40px;line-height:40px;font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.wcol span.far{color:var(--ink-4);opacity:.5}
.wcol span.now{color:var(--ink-1);font-size:16px;font-weight:600}
.fsheet-ft{display:flex;gap:12px;padding:20px 20px 0}
.fsheet-ft .btn{flex:1.18}
.fsheet-ft .btn.ghost{flex:.82;background:var(--surface-2);border:0;color:var(--ink-2);font-weight:600}

/* 持仓卡片 */
.pos{position:relative;margin:0 16px 11px;padding:13px 0 0}
.pos-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 14px}
.pos-name{font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.pos-code{font-size:11px;color:var(--ink-3);margin-top:4px;letter-spacing:.02em;font-family:"SF Mono",monospace}
.pos-val{text-align:right;flex:none}
.pos-val b{display:block;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.pos-val span{display:block;font-size:10.5px;color:var(--ink-3);margin-top:3px}
.pos-pl{display:flex;justify-content:flex-end;gap:9px;padding:6px 14px 0;font-size:12.5px;font-variant-numeric:tabular-nums}
.up{color:var(--rise)} .down{color:var(--fall)} .flat{color:var(--ink-3)}
.pos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px;padding:12px 14px 13px;margin-top:10px;border-top:1px solid var(--line)}
.pos-grid div span{display:block;font-size:10px;color:var(--ink-3);letter-spacing:.02em}
.pos-grid div b{display:block;margin-top:4px;font-size:12.5px;font-weight:550;font-variant-numeric:tabular-nums;white-space:nowrap}
.pos-grid div b em{font-style:normal;color:var(--ink-3);font-weight:400;font-size:11px}
.pos-ops{display:flex;border-top:1px solid var(--line);background:var(--surface-2)}
.pos-ops span{flex:1;text-align:center;padding:11px 0;font-size:13.5px;color:var(--ink-2);border-right:1px solid var(--line)}
.pos-ops span:last-child{border-right:0}
.pos-ops span.pri{color:var(--brand);font-weight:550}
.pos-ops span.hot{color:var(--danger);font-weight:550}
.pos-ops span.off{color:var(--ink-4)}

/* 冻结列表格（数据模式） */
.gridtab{display:flex;font-size:12px;overflow:hidden}
.gt-fix{flex:none;width:118px;border-right:1px solid var(--line-2);background:var(--surface);position:relative;z-index:2;box-shadow:4px 0 10px rgba(15,27,51,.06)}
[data-theme="dark"] .gt-fix{box-shadow:4px 0 10px rgba(0,0,0,.35)}
.gt-scroll{flex:1;overflow:hidden;background:var(--surface)}
.gt-h{height:36px;display:flex;align-items:center;background:var(--surface-2);color:var(--ink-3);font-size:10.5px;letter-spacing:.02em;padding:0 10px;border-bottom:1px solid var(--line);white-space:nowrap;gap:14px}
.gt-r{height:52px;display:flex;align-items:center;padding:0 10px;border-bottom:1px solid var(--line);white-space:nowrap;gap:14px;font-variant-numeric:tabular-nums}
.gt-fix .gt-r{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;position:relative;padding-left:14px}
.gt-fix .gt-h{padding-left:14px}
/* 表格形式的「新报价」角标：斜切丝带，带 NEW 文案；冻结列左内边距统一 14px 给丝带让位，行内文字不被压 */
.gt-new{position:absolute;left:0;top:0;width:34px;height:34px;overflow:hidden;z-index:3;pointer-events:none}
.gt-new::before{content:"NEW";position:absolute;left:-17px;top:1px;width:48px;padding:1px 0;transform:rotate(-45deg);background:var(--danger);color:#fff;font-size:7.5px;font-weight:600;font-style:normal;letter-spacing:.04em;text-align:center;line-height:1.35}
.gt-r i{font-style:normal;display:inline-block;text-align:right}
.gt-h i{display:inline-block;text-align:right}

/* 询价 / 订单卡片 */
.qc{margin:0 16px 10px;padding:13px 14px;position:relative}
.qc-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.qc-name{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px}
.qc-sub{font-size:11px;color:var(--ink-3);margin-top:4px;font-family:"SF Mono",monospace}
.qc-r{text-align:right;flex:none}
.qc-time{font-size:10.5px;color:var(--ink-3);margin-top:5px;font-family:"SF Mono",monospace}
.qc-meta{display:flex;gap:16px;margin-top:10px;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.qc-meta em{font-style:normal;color:var(--ink-3);font-size:11px;margin-right:4px}
.qc-open{margin-top:12px;border-top:1px dashed var(--line-2);padding-top:10px}
.qt{display:grid;grid-template-columns:1.1fr .8fr .8fr .9fr;font-size:12px;font-variant-numeric:tabular-nums;align-items:center}
.qt.h{color:var(--ink-3);font-size:10.5px;padding-bottom:7px}
.qt.r{padding:9px 8px;margin:0 -8px;border-radius:8px}
.qt.r:hover,.qt.r.hl{background:var(--brand-weak)}
.qt .p{color:var(--brand);font-weight:600}
.qt .t{color:var(--ink-3);font-size:10.5px;text-align:right}
/* 「新」标记分工：卡片/行角标表明本单有新报价，行内红点指出具体是哪一条 */
.qt span:first-child{position:relative;padding-left:12px}
.qt .newdot{position:absolute;left:0;top:50%;margin:0;transform:translateY(-50%);vertical-align:0}
.newdot{width:6px;height:6px;border-radius:50%;background:var(--danger);display:inline-block;margin-right:5px;vertical-align:1px}

/* 时间线（流水） */
.tl{padding:0 16px}
.tl-i{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.tl-i .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none;margin-top:5px;box-shadow:0 0 0 3px var(--brand-weak)}
.tl-i .dot.out{background:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.tl-i .c{flex:1}
.tl-i .c b{font-size:14.5px;font-weight:550}
.tl-i .c span{display:block;font-size:11px;color:var(--ink-3);margin-top:4px;font-family:"SF Mono",monospace}
.tl-i .amt{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* 设置项列表 */
.menu{background:var(--surface);border-radius:14px;overflow:hidden;margin:0 16px 12px;box-shadow:var(--shadow-card)}
[data-theme="dark"] .menu{border:1px solid var(--line)}
.mi{display:flex;align-items:center;gap:12px;padding:15px 15px;border-bottom:1px solid var(--line);font-size:15px}
.mi:last-child{border-bottom:0}
.mi .ib{width:30px;height:30px;border-radius:9px;background:var(--brand-weak);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.mi .ib.am{background:var(--accent-weak);color:var(--accent)}
.mi .tx{flex:1}
.mi .tx em{font-style:normal;display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px}
.mi .rv{color:var(--ink-3);font-size:13.5px;display:flex;align-items:center;gap:4px}

/* 开关 */
.sw2{width:44px;height:26px;border-radius:14px;background:var(--line-2);position:relative;flex:none;transition:.2s}
.sw2::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s}
.sw2.on{background:var(--brand)}
.sw2.on::after{left:21px}

/* 数据表（App 内） */
.dt{width:100%;border-collapse:collapse;font-size:12.5px}
.dt th{background:var(--surface-2);color:var(--ink-3);font-size:10.5px;font-weight:500;padding:9px 10px;text-align:right;letter-spacing:.02em}
.dt th:first-child{text-align:left}
.dt td{padding:10px;text-align:right;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.dt td:first-child{text-align:left;color:var(--ink-2)}

/* 键盘 */
.kbd{background:var(--surface-2);padding:8px 6px 26px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.kbd span{height:44px;border-radius:8px;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:500;box-shadow:0 1px 2px rgba(15,27,51,.10)}
[data-theme="dark"] .kbd span{box-shadow:none;border:1px solid var(--line)}
.kbd span.fn{background:transparent;box-shadow:none;font-size:15px;color:var(--ink-2)}
.kbd span.ok{background:var(--brand);color:var(--on-brand);font-size:16px}

/* 对照页专用 */
.pair{display:grid;grid-template-columns:390px 390px;gap:36px;justify-content:start}
.pair-lb{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--canvas-mute);margin-bottom:12px;letter-spacing:.08em}
.pair-lb i{width:12px;height:12px;border-radius:3px;border:1px solid var(--canvas-line);flex:none}

/* 角标占位：有角标的卡片顶部让出空间，避免压住标的名 */
.pos:has(.corner) .pos-hd{padding-top:15px}
.qc:has(.corner){padding-top:26px}

/* 列表视图切换：卡片 / 表格 */
.viewtog{display:inline-flex;padding:2px;background:var(--surface-2);border-radius:8px;gap:2px;flex:none;position:relative}
.viewtog.sep{margin-left:4px}
.viewtog.sep::before{content:"";position:absolute;left:-7px;top:2px;bottom:2px;width:1px;background:var(--line-2)}
.viewtog span{width:28px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--ink-3)}
.viewtog span.on{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-card)}
[data-theme="dark"] .viewtog span.on{background:var(--surface-3)}
.viewtog .icn{width:15px;height:15px;stroke-width:1.8}
.fright{display:flex;align-items:center;gap:12px}


/* ==== v1.3 · TRN 专用 BEGIN ==== */
/* ---------- 品类 Tab（票据页大标题位 / 账户页持仓区）---------- */
.cattab{display:flex;align-items:baseline;gap:18px;padding:4px 20px 0;flex:none}
.cattab span{font-size:17px;font-weight:500;color:var(--ink-3)}
.cattab span.on{font-size:22px;font-weight:650;color:var(--ink-1);letter-spacing:.02em}
.cattab .srt{margin-left:auto;align-self:center;width:30px;height:30px;border-radius:9px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.cattab .srt .icn{width:17px;height:17px}
.tabs span .dot{top:8px;right:-8px}
.holdhd{display:flex;align-items:center;gap:10px;padding:16px 16px 9px}
.holdhd h3{font-size:14.5px;font-weight:600;flex:none}
.holdhd .seg{flex:1;max-width:220px;margin-left:auto}
.holdhd .seg span{padding:5px 0;font-size:12.5px}
.holdhd .srt{width:28px;height:28px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--ink-2);flex:none}
.holdhd .srt .icn{width:16px;height:16px}

/* ---------- 订单卡片（订单号作标题）---------- */
.oc{margin:0 16px 11px;padding:13px 14px 14px}
.oc .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.oc .no{font-family:var(--font-mono);font-size:13.5px;font-weight:600;color:var(--ink-1);letter-spacing:.01em}
.oc .tm{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);margin-top:4px}
.oc .kvs{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
.oc .kv2{display:flex;justify-content:space-between;font-size:12.5px}
.oc .kv2 span{color:var(--ink-3)}
.oc .kv2 b{font-weight:500;font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--ink-1)}
.oc .kv2 b.em{color:var(--brand);font-weight:600;font-size:13.5px}
.oc .ops{display:flex;gap:8px;margin-top:13px}
.oc .ops .btn{flex:1;height:36px;font-size:13.5px;border-radius:10px;box-shadow:none;letter-spacing:.02em}
.oc .ops .btn.pri{flex:1.5}
.oc .ops .btn.off{background:var(--surface-2);color:var(--ink-4);border:0}
.oc .rsn{margin-top:8px;font-size:12px;color:var(--danger)}
.st.set{color:var(--ink-2)}
.st.cf{color:var(--brand)}
.st.cf i{background:transparent;border:1.6px solid currentColor}

/* ---------- 票据持仓卡（编号作标题、六格）---------- */
.nc{margin:0 16px 11px;padding:13px 14px 4px}
.nc .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.nc .no{font-family:var(--font-mono);font-size:14px;font-weight:600}
.nc .se{font-size:11px;color:var(--ink-3);margin-top:4px}
.nc .tg{display:flex;gap:5px;align-items:center}
.nc .val{display:flex;align-items:baseline;justify-content:space-between;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.nc .val span{display:block;font-size:11px;color:var(--ink-3);margin-bottom:3px}
.nc .val b{font-size:19px;font-weight:600;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.nc .val b small{font-size:12px;font-weight:400;color:var(--ink-2);margin-left:3px}
.nc .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 8px;padding:10px 0 12px}
.nc .g3 span{display:block;font-size:10.5px;color:var(--ink-3)}
.nc .g3 b{display:block;margin-top:4px;font-size:12.5px;font-weight:500;font-family:var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.nc.sold .no,.nc.sold .val b{color:var(--ink-3)}
.tag.zb{background:var(--warn);color:#fff}
.tag.zb.dg{background:var(--danger)}
[data-theme="dark"] .tag.zb{color:#05122E}

/* ---------- 票据详情概要 ---------- */
.sumc{margin:10px 16px 0;padding:14px 15px 4px}
.sumc .hd{display:flex;justify-content:space-between;align-items:flex-start}
.sumc .no{font-family:var(--font-mono);font-size:14.5px;font-weight:600}
.sumc .se{font-size:11px;color:var(--ink-3);margin-top:4px}
.sumc .vl{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);display:flex;align-items:center}
.sumc .vl span{display:block;font-size:11.5px;color:var(--ink-3)}
.sumc .vl b{display:block;margin-top:4px;font-size:25px;font-weight:700;font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:.005em}
.sumc .vl b small{font-size:13px;font-weight:500;color:var(--ink-2);margin-left:4px}
.sumc .vl .icn{margin-left:auto;color:var(--ink-3)}
.sumc .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px;padding:13px 0 12px}
.sumc .g3 span{display:block;font-size:10.5px;color:var(--ink-3)}
.sumc .g3 b{display:block;margin-top:4px;font-size:13px;font-weight:500;font-family:var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.rk-ok{color:var(--ok)!important} .rk-warn{color:var(--warn)!important} .rk-dg{color:var(--danger)!important}
.dtabs{margin-top:6px;background:var(--app-bg)}
.dtabs span{flex:1;text-align:center}
.tabs.dtabs{gap:0;padding:0 8px}

/* ---------- 底部操作栏（追保 · 调仓 · 更多）---------- */
.abar{display:flex;gap:10px;padding:10px 16px 28px;background:var(--surface);border-top:1px solid var(--line);flex:none}
.abar .btn{height:44px;font-size:15px;box-shadow:none}
.abar .btn.ghost{flex:1}
.abar .btn.pri{flex:1.5}
.abar .btn.more{flex:none;width:64px}
.bbar2{display:flex;gap:11px;padding:10px 16px 28px;background:var(--surface);border-top:1px solid var(--line);flex:none}
.bbar2 .btn{flex:1;box-shadow:none}
.btn.rise{background:var(--rise);color:#fff}
.btn.fall{background:var(--fall);color:#fff}
[data-theme="dark"] .btn.rise,[data-theme="dark"] .btn.fall{color:#05122E}
.agree{display:flex;align-items:flex-start;gap:8px;padding:12px 16px 0;font-size:12.5px;color:var(--ink-2);line-height:1.55;background:var(--surface)}
.agree .cb{margin-top:1px}
.agree a,.lk2{color:var(--brand);text-decoration:none}

/* ---------- 市场 / 交易渠道标签 ---------- */
.mk{display:inline-block;font-family:var(--font-num);font-size:9.5px;font-weight:700;line-height:13px;padding:0 3px;border-radius:3px;margin-right:4px;vertical-align:1px}
.mk.a{color:var(--accent);background:var(--accent-weak)}
.mk.hk{color:var(--danger);background:var(--danger-weak)}
.mk.us{color:var(--brand);background:var(--brand-weak)}
.chn{display:inline-flex;align-items:center;font-size:9.5px;line-height:13px;padding:0 4px;border-radius:3px;border:1px solid var(--accent-line);color:var(--accent);margin-left:5px;white-space:nowrap;font-family:"PingFang SC",system-ui,sans-serif;font-weight:500}
.sname b{display:flex;align-items:center;font-size:12.5px;font-weight:500}
.sname span{display:block;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);margin-top:3px}
.sname b .chn{display:inline-flex;margin-top:0;font-family:"PingFang SC",system-ui,sans-serif;font-size:9.5px;color:var(--accent)}
.dir-up{color:var(--rise);font-weight:600} .dir-dn{color:var(--fall);font-weight:600}

/* ---------- 数据表（窄表，表头 34 / 行 50，带排序箭头）---------- */
.tt{background:var(--surface)}
.tt .r{display:flex;align-items:center;min-height:50px;padding:6px 12px;border-bottom:1px solid var(--line);gap:8px;font-size:12px}
.tt .r.h{min-height:34px;background:var(--surface-2);color:var(--ink-3);font-size:10.5px;padding:0 12px}
.tt .r>*{flex:1;min-width:0}
.tt .c.n{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.tt .r.h .c.n{font-family:inherit}
.tt .c.n i{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3);margin-top:2px}
.tt .r.h .c.n i{font-size:9.5px;color:var(--ink-4);margin-top:1px}
.tt .c .srt{display:inline-block;width:9px;height:9px;vertical-align:-1px;color:var(--ink-4)}
.tt .c .srt.on{color:var(--brand)}
.tt .r.sel{background:var(--brand-weak)}
.tt .xops{display:flex;gap:0;background:var(--surface-2);border-bottom:1px solid var(--line)}
.tt .xops span{flex:1;text-align:center;padding:10px 0;font-size:13px;color:var(--brand);font-weight:550;border-right:1px solid var(--line)}
.tt .xops span:last-child{border-right:0}
.tt .xops span.off{color:var(--ink-4);font-weight:400}
.tt .foot{padding:11px 0 13px;text-align:center;font-size:11px;color:var(--ink-4)}
.tcard{margin:12px 16px 0;padding:0}
.tcard .tt{border-radius:14px;overflow:hidden}

/* ---------- 指令 Tab 分段 / 历史快捷筛选 ---------- */
.seg2{margin:12px 16px 10px}
.seg2 span em{font-style:normal;font-family:var(--font-num);margin-left:2px}
.qfb{display:flex;align-items:center;gap:16px;padding:12px 16px 10px}
.qfb span{font-size:13px;color:var(--ink-2);display:inline-flex;align-items:center;gap:3px}
.qfb span .icn{width:12px;height:12px;color:var(--ink-3)}
.qfb span.on{color:var(--brand);font-weight:560}
.qfb span.on .icn{color:var(--brand)}
.qfb .fmore{margin-left:auto}

/* ---------- 菜单（查询 Tab）---------- */
.qmenu{margin:12px 16px 0}
.qmenu .mi{font-size:14.5px;padding:15px 15px}
.qmenu .mi .icn{color:var(--ink-4);width:15px;height:15px}

/* ---------- 底部动作抽屉（更多）---------- */
.asheet{padding-bottom:26px}
.asheet .ah{text-align:center;font-size:12px;color:var(--ink-3);padding:14px 0 8px}
.asheet .ai{text-align:center;padding:15px 0;font-size:15.5px;border-top:1px solid var(--line);color:var(--ink-1)}
.asheet .gap{height:8px;background:var(--surface-2)}
.asheet .ai.cancel{border-top:0;color:var(--ink-3)}

/* ---------- 品类排序抽屉 ---------- */
.drag{display:flex;align-items:center;gap:12px;margin:0 18px;padding:14px 4px;border-bottom:1px solid var(--line);font-size:15px}
.drag .icn{color:var(--ink-4)}
.drag em{font-style:normal;font-size:11.5px;color:var(--ink-3);margin-left:auto}
.drag.lift{background:var(--surface);box-shadow:var(--shadow-pop);border-radius:12px;border-bottom:0;padding:14px 14px;margin:6px 12px;transform:rotate(-1deg)}

/* ---------- 弹框里的只读行 / 输入 / 对比表 ---------- */
.dk{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13.5px}
.dk span{color:var(--ink-3)}
.dk b{font-weight:500;font-family:var(--font-num);font-variant-numeric:tabular-nums;text-align:right}
.dk b.dg{color:var(--danger)} .dk b.m{font-family:var(--font-mono);font-size:12.5px} .dk b.em{color:var(--brand);font-weight:600}
.dbody{padding:12px 18px 0;text-align:left}
.flbl{font-size:12.5px;color:var(--ink-2);margin:12px 0 7px;display:flex;align-items:center;gap:3px}
.flbl i{font-style:normal;color:var(--danger)}
.flbl em{font-style:normal;margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.field.sm{height:42px;font-size:14px}
.field .num{font-family:var(--font-num)}
.field .unit{font-family:var(--font-num)}
.field.ro{background:var(--surface-2);border-color:transparent;color:var(--ink-2)}
.field.area{height:64px;align-items:flex-start;padding-top:11px}
.hint2{font-size:11px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.cmp{margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cmp div{display:flex;padding:9px 12px;font-size:12.5px;align-items:center}
.cmp div+div{border-top:1px solid var(--line)}
.cmp div span{flex:1;text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.cmp div span:first-child{text-align:left;color:var(--ink-2);font-family:inherit}
.cmp .h{background:var(--surface-2);padding:7px 12px}
.cmp .h span{font-size:10.5px;color:var(--ink-3);font-family:inherit}
.cmp .arw{color:var(--ink-4);font-size:11px;margin:0 2px}
.cmpt{font-size:12px;color:var(--ink-3);margin-top:14px}

/* ---------- 表单页（票据变更 / 调仓）---------- */
.fcard{margin:12px 16px 0;padding:2px 15px}
.fr{display:flex;align-items:center;gap:12px;min-height:52px;padding:7px 0;border-bottom:1px solid var(--line)}
.fr:last-child{border-bottom:0}
.fr>label{flex:none;width:110px;font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:2px}
.fr>label i{font-style:normal;color:var(--danger)}
.fr>.ctl{flex:1;min-width:0;display:flex;align-items:center;gap:7px;justify-content:flex-end}
.fr>.ctl .field{flex:1;height:38px;border-radius:10px;font-size:13.5px;padding:0 11px}
.fr>.ctl .stepper{flex:1;height:36px}
.fr>.ctl .stepper b{width:32px;color:var(--brand)}
.fr>.ctl .stepper i{font-size:14px}
.fr>.ctl .stepper.ro{background:var(--surface-2)}
.fr>.ctl .stepper.ro b{color:var(--ink-4)}
.fr>.ctl .stepper.ro i{color:var(--ink-3)}
.fr>.ctl .ib2{width:36px;height:36px;border-radius:10px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--brand);flex:none;background:var(--surface)}
.fr>.ctl .ib2 .icn{width:16px;height:16px}
.fr>.ctl b.v{font-weight:500;font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:14px}
.fr>.ctl b.v.mu{color:var(--ink-4)}
.fr .sel2{flex:1;height:38px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);display:flex;align-items:center;justify-content:space-between;padding:0 11px;font-size:13.5px}
.fr .sel2 .icn{width:13px;height:13px;color:var(--ink-3)}
.fr .sel2.ro{background:var(--surface-2);border-color:transparent;color:var(--ink-3)}
.fr.sub{min-height:0;padding:0 0 9px;border-bottom:1px solid var(--line);justify-content:flex-end;gap:14px;font-size:11.5px;color:var(--ink-3)}
.fr.sub b{font-weight:400;font-family:var(--font-num)}
.quote{display:flex;align-items:baseline;gap:10px;padding:2px 0 11px}
.quote b{font-size:24px;font-weight:600;font-family:var(--font-num);color:var(--rise)}
.quote span{font-size:13px;font-family:var(--font-num);color:var(--rise)}
.qty{padding:10px 0 12px;border-top:1px solid var(--line)}
.qty .qr{display:flex;align-items:center;gap:6px;margin-top:7px}
.qty .qr:first-child{margin-top:0}
.qty .qr>span{flex:none;width:118px;white-space:nowrap;font-size:11px;color:var(--ink-3)}
.qty .qr>span b{font-weight:500;color:var(--ink-1);font-family:var(--font-num)}
.qty .qc2{display:flex;gap:5px;overflow:hidden}
.qty .qc2 em{font-style:normal;height:24px;padding:0 6px;border-radius:12px;font-size:11.5px;display:flex;align-items:center;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap;font-family:var(--font-num)}
.qty .qr.op .qc2 em{border-color:var(--rise);color:var(--rise)}
.qty .qr.cl .qc2 em{border-color:var(--fall);color:var(--fall)}
.qty .qr .qc2 em.on{background:var(--rise);color:#fff}
.qty .qc2 em.ed{border-color:var(--brand-line);color:var(--brand)}
.qty .qr.off .qc2 em{border-color:var(--line);color:var(--ink-4)}
.book{margin:12px 16px 0;padding:12px 0;display:flex}
.book>div{flex:1;padding:0 13px}
.book>div+div{border-left:1px solid var(--line)}
.book h5{font-size:12.5px;font-weight:600;margin-bottom:6px}
.book .lv{display:flex;align-items:center;gap:7px;height:25px;font-size:12px;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.book .lv i{width:15px;height:15px;border-radius:3px;font-style:normal;font-size:9.5px;font-weight:600;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--rise)}
.book .sell .lv i{background:var(--fall)}
[data-theme="dark"] .book .lv i{color:#05122E}
.book .lv b{font-weight:500;flex:1}
.book .lv span{color:var(--ink-3);font-size:11px}
.sech{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink-3);padding:13px 0 2px}
.sech b{font-size:13px;color:var(--ink-1);font-weight:600}
.secbad{font-size:10.5px;color:var(--ink-3);background:var(--surface-2);border-radius:4px;padding:1px 6px}

/* ---------- 快捷选项编辑 ---------- */
.qedit{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 18px 0}
.qedit span{position:relative;height:36px;border-radius:18px;border:1px solid var(--rise);color:var(--rise);display:flex;align-items:center;justify-content:center;font-size:13px;font-family:var(--font-num)}
.qedit span i{position:absolute;right:-5px;top:-5px;width:16px;height:16px;border-radius:50%;background:var(--ink-3);color:#fff;font-style:normal;font-size:10px;display:flex;align-items:center;justify-content:center;line-height:1}
.qedit span.add{border-style:dashed;border-color:var(--line-2);color:var(--ink-3);font-size:18px}
.qedit span.lift{box-shadow:var(--shadow-pop);background:var(--surface);transform:scale(1.06)}
.qtip{font-size:11.5px;color:var(--ink-3);text-align:center;margin-top:5px}
.segr{display:flex;gap:8px;padding:14px 18px 0}
.segr span{flex:1;height:34px;border-radius:9px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:13.5px;color:var(--ink-2)}
.segr span.on{border-color:var(--brand);background:var(--brand-weak);color:var(--brand);font-weight:600}

/* ---------- 记录列表（三四列）---------- */
.rt{background:var(--surface)}
.rt .r{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:12.5px}
.rt .r.h{padding:8px 14px;background:var(--surface-2);font-size:10.5px;color:var(--ink-3)}
.rt .r>*{flex:1;min-width:0}
.rt .c{white-space:nowrap}
.rt .c.w2{flex:2.2}
.rt .c.st0{flex:.8}
.rt .c .ln span{flex:1;overflow:hidden;text-overflow:ellipsis}
.rt .c .ln b{flex:none;min-width:44px;text-align:right}
.wlbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 0;font-size:12px;color:var(--ink-3)}
.wlbar .rt2{display:flex;gap:8px}
.wlbar .rt2 span{font-size:12.5px;color:var(--brand);border:1px solid var(--brand-line);border-radius:14px;padding:4px 11px;background:var(--brand-weak)}
.wlbar .rt2 span.pl{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.rt .c.n{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.rt .r.h .c.n{font-family:inherit}
.rt .c.t{text-align:right;font-family:var(--font-num);font-size:11.5px;color:var(--ink-2);line-height:1.45}
.rt .c.t i{display:block;font-style:normal;color:var(--ink-3);font-size:10.5px}
.rt .c .ln{display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:1.6}
.rt .c .ln b{font-weight:400;font-family:var(--font-num)}
.rt .pos{color:var(--rise)} .rt .neg{color:var(--fall)}
.rtcard{margin:0 16px;border-radius:14px;overflow:hidden}
.ffb{display:flex;align-items:center;gap:8px;padding:11px 16px;flex-wrap:nowrap}
.ffb .fpill{height:32px;padding:0 12px;font-size:12.5px}
.ffb .fsearch{margin:0;height:32px;flex:1;min-width:0;border-radius:16px;font-size:12.5px;padding:0 11px}
.ffb .fsearch .icn{width:14px;height:14px}
.navbar .rt2{margin-left:auto;position:relative;z-index:2;display:flex;gap:8px}
.navbar .rt2 span{font-size:12.5px;color:var(--brand);border:1px solid var(--brand-line);border-radius:14px;padding:4px 10px;background:var(--brand-weak)}
.navbar .rt2 span.pl{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.frow.rs>b{color:var(--danger)}
.frow>b.rk{font-weight:600}
.frow b.lkm{color:var(--brand);font-family:var(--font-mono);font-size:12.5px}
.frow b.m{font-family:var(--font-mono);font-size:12.5px}
.frow b.mu{color:var(--ink-4)}
.frow b .arr{color:var(--ink-4);margin:0 4px}
.frow b.dg{color:var(--danger)}
.frow b.em{color:var(--brand);font-weight:600}
.dcard{margin:0 16px}
.fgrp{margin:0 16px;padding:0}
.fgrp .fh{display:flex;justify-content:space-between;align-items:center;padding:13px 15px 9px;font-size:13.5px;font-weight:600}
.fgrp .fh em{font-style:normal;font-size:12px;color:var(--brand);font-weight:500;display:flex;align-items:center;gap:2px}
.fgrp .fh em.mu{color:var(--ink-3)}
.fgrp .fh .icn{width:12px;height:12px}
.fgrp+.fgrp{margin-top:0;border-top:1px solid var(--line);border-radius:0}
.ftab{font-size:11px}
.ftab .r{display:flex;padding:8px 15px;border-top:1px solid var(--line);gap:6px}
.ftab .r.h{background:var(--surface-2);color:var(--ink-3);font-size:10px}
.ftab .r span{flex:1;white-space:nowrap}
.ftab .r span.w{flex:2.5;white-space:normal}
.ftab .r span:first-child{flex:.85}
.ptab .r.h .icn{width:10px;height:10px;vertical-align:-1px;color:var(--ink-4);margin-left:1px}
.ptab .r.h .icn.on{color:var(--brand)}
.ptab .r{height:54px}
.ptab .r.h{height:36px}
.ptab .xops{display:flex;background:var(--surface-2);border-bottom:1px solid var(--line)}
.ptab .xops span{flex:1;text-align:center;padding:10px 0;font-size:13px;color:var(--brand);font-weight:550;border-right:1px solid var(--line)}
.ptab .xops span:last-child{border-right:0}
.ptab .xops span.off{color:var(--ink-4);font-weight:400}
.ptab .c.n b{font-weight:500}
.ptab .c.dir b{display:block;font-size:12.5px}
.ptab .c.dir span{display:block;font-size:10.5px;margin-top:3px;color:var(--accent)}
.ptab .c.dir span.dn{color:var(--ok)} .ptab .c.dir span.gy{color:var(--ink-3)} .ptab .c.dir span.rj{color:var(--danger)}
.ptab .c.tm{font-family:var(--font-num);font-size:11px;color:var(--ink-2);text-align:right}
.ptab .c.tm i{display:block;font-style:normal;color:var(--ink-3);font-size:10.5px;margin-top:2px}
.tfoot{padding:11px 0 12px;text-align:center;font-size:11px;color:var(--ink-4);background:var(--surface)}
.ftab .r span.n{text-align:right;font-family:var(--font-num)}
.note-t{font-size:11.5px;color:var(--ink-3);padding:10px 16px 0;line-height:1.6}
.bbar1{padding:12px 16px 30px;border-top:1px solid var(--line);background:var(--surface);flex:none}
.bbar1 .btn{box-shadow:none}
.cfc{margin:0 16px 10px;padding:13px 14px}
.cfc .t{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.cfc .r{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:8px}
.cfc .r+.r{margin-top:6px}
.cfc .r span{font-size:12.5px;color:var(--ink-3)}
.cfc .r b{font-size:14.5px;font-weight:500}
.cfc .r b.n{font-size:15px;font-weight:600;font-family:var(--font-num)}
.cfc .r b.o{color:var(--ink-2)}
.cfc.nw{box-shadow:var(--shadow-card),inset 3px 0 0 var(--brand)}

/* 钱包表（同 04 A1，代码 DataTable 小表） */
.wtab .wr{display:flex;align-items:center;gap:14px;padding:0 10px;height:38px;border-bottom:1px solid var(--line);font-size:12px;white-space:nowrap}
.wtab .wr.h{height:36px;background:var(--surface-2);font-size:10.5px;letter-spacing:.02em;color:var(--ink-3)}
.wtab .wr>*{flex:1;text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.wtab .wr.h>*{font-family:inherit}
.wtab .wr>*:first-child{flex:none;width:22px;text-align:left;font-family:var(--font-mono);color:var(--ink-2)}
.wtab .wr.h>*:first-child{font-family:inherit;color:var(--ink-3)}
.wtab .wr:last-child{border-bottom:0}
.wfoot{display:flex;justify-content:flex-end;padding:9px 15px;border-top:1px solid var(--line)}
.wfoot span{font-size:12.5px;color:var(--brand);display:flex;align-items:center;gap:3px}
.quick.one .qk{justify-content:center}
/* 共赢 Tab：展期记录入口行 + 列表头 */
.rocard{margin:0 16px 10px;display:flex;align-items:center;gap:10px;padding:12px 14px;position:relative}
.rocard .ib{width:30px;height:30px;border-radius:9px;background:var(--brand-weak);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.rocard b{font-size:14px;font-weight:550}
.rocard .rd{width:7px;height:7px;border-radius:50%;background:var(--danger);margin-left:-4px;align-self:flex-start;margin-top:6px}
.rocard .go{margin-left:auto;font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:2px}
.rocard .go .icn{width:13px;height:13px}
.lsthd{display:flex;align-items:center;justify-content:space-between;padding:4px 16px 10px}
.lsthd .cnt{font-size:12.5px;color:var(--ink-3)}
.lsthd .more{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:2px}
.lsthd .more .icn{width:13px;height:13px}
/* 资产详情（同 05 S1） */
.glist .r .v{font-family:var(--font-num)}
.netv .amt{font-family:var(--font-num)}
.gtitle.tight em{font-family:var(--font-num)}
/* 品类 Tab 上的红点（未选中的品类有待处理时） */
.cattab span{position:relative}
.cattab span .dot{position:absolute;top:-1px;right:-8px;width:7px;height:7px;border-radius:50%;background:var(--danger)}
/* 共赢订单卡片筛选胶囊（同 03 O1） */
.filterbar .fb em{font-style:normal;color:var(--ink-3);font-weight:400}
/* 合适性评估弹窗（同 02 Q23 / Q24） */
.stab{border-top:1px solid var(--line)}
.stab>div{display:grid;grid-template-columns:1.2fr 1.15fr 1fr 52px;gap:6px;padding:9px 10px;border-bottom:1px solid var(--line);font-size:11px;line-height:1.45;color:var(--ink-1);align-items:start}
.stab>div span{text-align:right}
.stab>div span:first-child{text-align:left;color:var(--ink-2)}
.stab .sh{background:var(--surface-2);font-size:10.5px;color:var(--ink-3);padding:8px 10px;white-space:nowrap}
.stab .sh span:first-child{color:var(--ink-3)}
.stab .y{color:var(--ok)} .stab .n{color:var(--danger)}
.reasons{padding:10px 16px 0;display:flex;flex-direction:column;gap:9px}
.reasons .rad{font-size:12.5px;align-items:flex-start;line-height:1.5}
.reasons .rad i{margin-top:2px}
.reasons .oth{display:flex;align-items:center;gap:10px}
.reasons .oth .field{flex:1;height:36px;font-size:12.5px}
/* 导航栏右侧图标（全部历史指令的筛选） */
.navbar .nfic{margin-left:auto;position:relative;z-index:2;color:var(--ink-2);display:flex}
.navbar .nfic .icn{width:19px;height:19px}
/* 列表上方就地下拉（记录类列表 / 历史快捷筛选）：胶囊下方展开，余下列表区压暗 */
.ffwrap{position:relative;z-index:6}
.ffwrap .ffmask{position:absolute;left:0;right:0;top:100%;height:900px;background:var(--scrim)}
.ffwrap .ffpop{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-radius:0 0 16px 16px;box-shadow:var(--shadow-pop);padding:4px 0 8px}
.ffpop .fo{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;font-size:14px;color:var(--ink-2)}
.ffpop .fo+.fo{border-top:1px solid var(--line)}
.ffpop .fo.on{color:var(--brand);font-weight:600}
.ffpop .fo .icn{width:15px;height:15px;color:var(--brand)}
.ffpop .fq{display:flex;gap:9px;padding:12px 18px 0}
.ffpop .fq span{flex:1;height:34px;border-radius:17px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink-2)}
.ffpop .fq span.on{border-color:var(--brand);background:var(--brand-weak);color:var(--brand);font-weight:600}
.ffpop .fd{display:flex;align-items:center;gap:8px;padding:12px 18px 0}
.ffpop .fd .dt{flex:1}
.ffpop .fd i{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.ffpop .fbtn{display:flex;gap:12px;padding:14px 18px 6px}
.ffpop .fbtn .btn{flex:1;height:40px;font-size:14.5px;box-shadow:none}
.ffpop .fbtn .btn.ghost{background:var(--surface-2);border:0;color:var(--ink-2);font-weight:600}
.ffpop .fsr{display:flex;align-items:center;gap:10px;padding:8px 16px 4px}
.ffpop .fsr .fsearch{margin:0;flex:1;height:38px;border-radius:19px}
.ffpop .fsr .fsearch b{font-weight:500}
.ffpop .fsr>span{font-size:14px;color:var(--brand)}
.ffpop .sgi{display:flex;align-items:center;gap:8px;padding:12px 18px;font-size:14px;border-top:1px solid var(--line)}
.ffpop .sgi em{font-style:normal;color:var(--brand)}
.ffpop .sgi span{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
.qfb span.open .icn{transform:rotate(180deg)}
.ffb .fpill.open .icn{transform:rotate(180deg)}
/* 调仓：证券联想浮层、跟价中、算法时间提示 */
.sugabs{position:absolute;left:16px;right:16px;z-index:8;margin-top:0}
.sugabs div{align-items:center}
.sugabs .mk{margin-right:0}
.fr>.ctl .ib2.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.fr>label em.fl{font-style:normal;font-size:10px;color:var(--brand);background:var(--brand-weak);border-radius:4px;padding:0 4px;margin-left:4px;line-height:15px}
.fr.tip{min-height:0;padding:0 0 9px;justify-content:flex-end;font-size:11px;color:var(--ink-3)}
.fr .sel2{font-size:13px}
.fr .sel2 span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow>span{flex:none;white-space:nowrap}
.fr>.ctl .field.ro{background:var(--surface-2);border-color:transparent;color:var(--ink-3)}
.fr>.ctl .stepper.err{border-color:var(--danger)}
.fr>.ctl .stepper.err i{color:var(--danger)}
.book.ph .lv b,.book.ph .lv span{color:var(--ink-4)}
.book.ph .lv i{opacity:.45}
/* ==== v1.3 · TRN 专用 END ==== */
/* ==== v1.3 公共覆盖 BEGIN · 2026-10-14 按代码现状对齐（同一段注入全部图纸，改动从清单目录的 common-v13.css 同步） ==== */
/* 字体：数值走 Inter（代码 NumText），代码 / 编号走 iOS 的 Menlo（代码 MonoText），正文仍是系统字 */
@font-face{font-family:"Inter";src:url("assets/fonts/Inter-Regular.subset.otf") format("opentype");font-weight:400}
@font-face{font-family:"Inter";src:url("assets/fonts/Inter-Medium.subset.otf") format("opentype");font-weight:500}
@font-face{font-family:"Inter";src:url("assets/fonts/Inter-SemiBold.subset.otf") format("opentype");font-weight:600}
@font-face{font-family:"Inter";src:url("assets/fonts/Inter-Bold.subset.otf") format("opentype");font-weight:700}
:root{--font-num:"Inter","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;--font-mono:Menlo,"SF Mono",ui-monospace,monospace}
.phone .num,.hero .amt,.hero .grid3 b,.fxtab td,.pos-val b,.pos-pl,.pos-grid div b,.qt,.gt-r,.stepper i,.kbd span,.tl-i .amt{font-family:var(--font-num)}
.statusbar .num{font-family:inherit}
.phone .mono,.pos-code,.qc-sub,.qc-time,.fxtab td:first-child,.sug span,.tl-i .c span,.row .v.m{font-family:var(--font-mono)}

/* 底栏：四个 Tab（票据 / 账户 / 消息 / 我的）；消息 Tab 只有红点，后端不给条数 */
.tb .tbi{position:relative;display:inline-flex;flex:none}
.tb .tbi .rdot{position:absolute;top:-2px;left:14px;width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--surface)}

/* 二级页导航栏：iOS 系统导航栏，表面色底、居中 17 / 600 标题、品牌色返回箭头、无分隔线（H5 标题靠左，见 00 规范） */
.navbar{height:44px;background:var(--surface)}
.statusbar:has(+ .navbar){background:var(--surface)}
.navbar h2{font-size:17px;font-weight:600;letter-spacing:0}
.navbar .bk{color:var(--brand)}
.navbar .bk .icn{width:22px;height:22px;stroke-width:2.1}

/* 图注里的身份标记：本期未上线 / v1.3 新增 / 平台限定 */
.cap-flags{display:inline-flex;gap:6px;margin-left:8px;vertical-align:1px}
.cap-flag{font-family:"PingFang SC",system-ui,sans-serif;font-size:10px;letter-spacing:.04em;padding:1px 6px;border-radius:4px;border:1px solid var(--canvas-line);color:var(--canvas-mute);background:var(--canvas-2)}
.cap-flag.off{color:var(--accent);border-color:var(--accent-line);background:var(--accent-weak)}
.cap-flag.new{color:var(--brand);border-color:var(--brand-line);background:var(--brand-weak)}
.cap-flag.plat{color:var(--ok);border-color:rgba(15,123,79,.35);background:var(--ok-weak)}
/* 实心底上的文字（角标 / 实心标签 / 危险按钮）：浅色白字，深色下底色被提亮、改配近黑字（代码 $onFill / $onDanger） */
[data-theme="dark"] .corner,[data-theme="dark"] .t-danger,[data-theme="dark"] .btn.danger,[data-theme="dark"] .mb,[data-theme="dark"] .gt-new::before{color:#05122E}
/* 表格首列的迷你角标（代码 CornerBadge variant="mini"）：9 / 600、左右 4 */
.mb{display:inline-flex;align-items:center;font-size:9px;font-weight:600;line-height:12px;padding:1px 4px;border-radius:4px;color:#fff;background:var(--ink-3);white-space:nowrap}
.mb.d{background:var(--danger)} .mb.a{background:var(--accent)} .mb.m{background:var(--ink-3)} .mb.b{background:var(--brand)}
/* Toast：按内容定宽、最宽 290（代码 maxW 290），单行放得下就不折行；位置 top 76% */
.toast{width:max-content;max-width:290px}
/* ---- 通用组件（代码 components/ 的对应件） ---- */
/* 资金看板右上「>」用 lg 档 */
.hero .arrow{width:22px;height:22px}
/* 只读行：InfoRow（无分隔线）/ FieldRow（带分隔线，.frow），左 ink2 右 Inter */
.irow{display:flex;justify-content:space-between;align-items:center;padding:14px 15px;font-size:14.5px}
.irow span{color:var(--ink-2)}
.irow b{font-weight:400;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.irow b.dg{color:var(--danger)}
.frow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 15px;border-bottom:1px solid var(--line);font-size:14.5px}
.frow>span{color:var(--ink-2);display:flex;align-items:center;gap:6px}
.frow>b{font-weight:400;font-family:var(--font-num);font-variant-numeric:tabular-nums;text-align:right}
.frow.hl{background:var(--brand-weak)}
.frow.hl>span,.frow.hl>b{color:var(--brand)}
.frow.hl>b{font-weight:600}
.frow.last,.frow:last-child{border-bottom:0}
/* 字段说明 ⓘ（代码 IconButton name="info"，ink4 14） */
.xi{width:14px;height:14px;color:var(--ink-4);flex:none}
/* 弹窗里的证券行（代码在前）与行情行 */
.secl{display:flex;align-items:center;gap:7px}
.secl .mono{font-size:12px;color:var(--ink-3)}
.secl b{font-size:14.5px;font-weight:600}
.phint{display:flex;gap:14px;margin-top:9px;font-size:12px;color:var(--ink-3)}
.phint b{font-weight:400;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.field .num{font-family:var(--font-num)}
.errtip .icn{width:13px;height:13px}
.errtip.r{justify-content:flex-end}
/* 时间片块（代码 TradingWindowDialog） */
.twin{border-radius:10px;background:var(--surface-2);padding:13px 0;display:flex;flex-direction:column;align-items:center;gap:5px}
.twin span{font-size:13px;color:var(--ink-3)}
.twin b{font-size:17px;font-weight:600;font-family:var(--font-num)}
/* 弹窗标题区（代码 DialogHeading）：图标圆 44 + 标题 16.5 / 600 + 说明 14 / ink2 / 行高 23 */
.dicon{width:44px;height:44px;border-radius:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 6px}
.dicon.warn{background:var(--warn-weak);color:var(--warn)}
.dicon.danger{background:var(--danger-weak);color:var(--danger)}
.dicon.ok{background:var(--ok-weak);color:var(--ok)}
.dicon.brand{background:var(--brand-weak);color:var(--brand)}
.dlg-hd .dsc{margin-top:6px;font-size:14px;color:var(--ink-2);line-height:23px}
.dlg-ft span{font-weight:500}
.dlg-ft span.off{color:var(--brand);opacity:.4}
.dlg-ft span.dg{color:var(--danger)}
/* 底部面板标题行（代码 SheetFrame 的四套头）：select 左标题 + 右 × ／ centered 居中无关闭 ／ centered-close 居中 + 右 × ／ filter 左大标题 + 右 × */
.shd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 6px}
.shd b{font-size:15.5px;font-weight:600}
.shd .icn{color:var(--ink-3)}
.shd-c{padding:16px 18px 4px;text-align:center;position:relative}
.shd-c b{font-size:16.5px;font-weight:600}
.shd-c .icn{position:absolute;right:18px;top:17px;color:var(--ink-3)}
/* 单选面板的选项行（代码 SelectSheet） */
.opt-row{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}
.opt-row .icn{width:14px;height:14px;color:var(--brand)}
.opt-row b{font-weight:400;color:var(--ink-1)}
.opt-row.sel b{font-weight:600}
.opt-row:last-child{border-bottom:0}
/* 叠在另一层弹窗之上的第二层遮罩 */
.scrim.top2{z-index:45}
/* 列表尾的文字入口（历史票据 > 等） */
.listfoot{display:flex;justify-content:center;align-items:center;gap:3px;padding:12px 0;font-size:13px;color:var(--brand)}
.listfoot .icn{width:13px;height:13px}
/* 分组标题（代码 Section 的标题：12 / ink3，上 16 下 8） */
.gtitle{padding:16px 16px 8px}
/* 转圈（代码 ProgressRing，下拉刷新 / 上拉加载 / 检索在搜共用） */
@keyframes hh-spin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
.ring{width:16px;height:16px;position:relative;flex:none;display:inline-block}
.ring>svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.ring .trk{fill:none;stroke:var(--line-2);stroke-width:2.8}
.ring .bar{fill:none;stroke:var(--brand);stroke-width:2.8;stroke-linecap:round}
.spin{animation:hh-spin .9s linear infinite}
.ring.lg{width:24px;height:24px}
.ring.lg .trk,.ring.lg .bar{stroke-width:2.2}
/* 空态（代码 EmptyState）：整页 120×104 / sm 72×62 / row 30×26 三档，插画取色走 --il-* */
.emptyslot{flex:1;display:flex;align-items:center;justify-content:center;padding:0 0 204px}
.emptybox{--il-a:#E7EDF6;--il-b:#D8E0EC;--il-c:#F8FAFE;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 32px}
[data-theme="dark"] .emptybox{--il-a:#1F2A45;--il-b:#161F38;--il-c:#28355A}
.emptybox .illu{width:120px;height:104px;display:block}
.emptybox .etxt{margin-top:16px;font-size:14px;color:var(--ink-3);letter-spacing:.1em}
.emptybox .esub{margin-top:8px;font-size:12px;line-height:1.65;color:var(--ink-4);max-width:236px}
.emptybox .eact{margin-top:20px}
.emptybox.sm{padding:26px 20px}
.emptybox.sm .illu{width:72px;height:62px}
.emptybox.sm .etxt{margin-top:11px;font-size:12.5px;letter-spacing:.08em}
.emptybox.row{flex-direction:row;align-items:center;justify-content:center;gap:10px;padding:9px 0}
.emptybox.row .illu{width:30px;height:26px}
.emptybox.row .etxt{margin-top:0;font-size:12.5px;letter-spacing:.06em}
/* 状态点「已提交」档（代码 StatusSemantic submitted：未报 / 待报 / 待审批）：品牌色空心 */
.st.sub{color:var(--brand)}
.st.sub i{background:transparent;border:1.6px solid currentColor}
/* ---- 持仓卡片（代码 PositionCard）与通用表格（代码 DataTable） ---- */
/* 持仓卡片：多枚角标并排；有角标时顶部只让到 15；估值后的币种小一号 */
.pos .corners{position:absolute;left:0;top:0;display:flex;z-index:3}
.pos .corners .corner{position:static}
.pos:has(.corners) .pos-hd{padding-top:2px}
.pos-val b small{font-size:13.5px;font-weight:400;color:var(--ink-2)}
.pos-code b{font-weight:400;color:var(--accent)}
/* 信息格五项一行：整行按宽度降档 12.5 / 11.5 / 10.5，最小档仍放不下时成对的值拆成两行（i） */
.pos-grid.f5{display:flex;flex-wrap:wrap;column-gap:6px;row-gap:10px}
.pos-grid.f5>div{flex:1 0 auto}
.pos-grid.f5 div span{font-size:10px;letter-spacing:.02em}
.pos-grid.f5 div b{font-size:12.5px;font-weight:500}
.pos-grid.f5 div b em{font-size:11px;font-weight:400}
.pos-grid.f5 div i{display:block;font-style:normal;font-size:11px;color:var(--ink-3);font-family:var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.pos-grid.f5.s115 div b{font-size:11.5px}.pos-grid.f5.s115 div b em{font-size:10px}
.pos-grid.f5.s105 div b{font-size:10.5px}.pos-grid.f5.s105 div b em{font-size:9px}
.pos-ops span.pri,.pos-ops span.hot{font-weight:500}
/* 表格模式（DataTable）：表头 36 / 行 52、单元格 12、列距 14，前两列冻结带右投影 */
.ptab{background:var(--surface);overflow:hidden}
.ptab .r{display:flex;align-items:stretch;height:52px;border-bottom:1px solid var(--line);font-size:12px;white-space:nowrap}
.ptab .r.h{height:36px;background:var(--surface-2);font-size:10.5px;letter-spacing:.02em;color:var(--ink-3)}
.ptab .fz,.ptab .sc{display:flex;align-items:center;gap:14px;flex:none}
.ptab .fz{padding:0 14px 0 10px;background:var(--surface);position:relative;z-index:2;box-shadow:4px 0 10px rgba(15,27,51,.06)}
[data-theme="dark"] .ptab .fz{box-shadow:4px 0 10px rgba(0,0,0,.35)}
.ptab .r.h .fz{background:var(--surface-2)}
.ptab .c{flex:none}
.ptab .c.n{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.ptab .r.h .c.n{font-family:inherit}
.ptab .c.n .sub{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.ptab .cat b{display:block;font-size:12px;font-weight:600}
.ptab .cat b.db{color:var(--accent)}
.ptab .cat .mbs{display:flex;gap:3px;margin-top:3px}
.ptab .scd b{display:block;font-size:12px;font-weight:400}
.ptab .scd span{display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:11px;color:var(--ink-3);margin-top:3px}
.ptab .scd .cmark{width:13px;height:13px;font-size:8.5px}
.ptab .opsrow{border-bottom:1px solid var(--line)}
.ptab .opsrow .pos-ops{border-top:0}
.ptab .r.sel,.ptab .r.sel .fz{background:var(--brand-weak)}
.ptab .xrow{background:var(--surface-2);border-bottom:1px solid var(--line)}
/* ---- 卡片 / 表格切换（代码 ViewModeToggle） ---- */
.viewtog{display:inline-flex;padding:2px;background:var(--surface-2);border-radius:8px;gap:2px;flex:none;position:relative}
.viewtog.sep{margin-left:4px}
.viewtog.sep::before{content:"";position:absolute;left:-7px;top:2px;bottom:2px;width:1px;background:var(--line-2)}
.viewtog span{width:28px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--ink-3)}
.viewtog span.on{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-card)}
[data-theme="dark"] .viewtog span.on{background:var(--surface-3)}
.viewtog .icn{width:15px;height:15px;stroke-width:1.8}
/* ==== v1.3 公共覆盖 END ==== */
</style>
</head>
<body>

<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<g id="i-back"><polyline points="15 4 7 12 15 20"/></g>
<g id="i-right"><polyline points="9 4 17 12 9 20"/></g>
<g id="i-down"><polyline points="5 9 12 16 19 9"/></g>
<g id="i-up"><polyline points="5 15 12 8 19 15"/></g>
<g id="i-search"><circle cx="11" cy="11" r="6.5"/><line x1="16" y1="16" x2="21" y2="21"/></g>
<g id="i-x"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></g>
<g id="i-check"><polyline points="4 12.5 9.5 18 20 6"/></g>
<g id="i-plus"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></g>
<g id="i-minus"><line x1="5" y1="12" x2="19" y2="12"/></g>
<g id="i-eye"><path d="M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z"/><circle cx="12" cy="12" r="2.6"/></g>
<g id="i-eyeoff"><path d="M4 5l16 14"/><path d="M9.5 6.2A9.7 9.7 0 0 1 12 5.5c6.4 0 10 6.5 10 6.5a17 17 0 0 1-3.3 4"/><path d="M6.2 8.3A16.6 16.6 0 0 0 2 12s3.6 6.5 10 6.5a10 10 0 0 0 3.3-.55"/></g>
<g id="i-clock"><circle cx="12" cy="12" r="8.5"/><polyline points="12 7 12 12 15.5 14"/></g>
<g id="i-history"><path d="M3.5 12a8.5 8.5 0 1 0 2.6-6.1"/><polyline points="3 4 3 9 8 9"/><polyline points="12 7.5 12 12 15.5 14"/></g>
<g id="i-filter"><path d="M4 6h16l-6.2 7.4V19l-3.6-2v-3.6z"/></g>
<g id="i-calendar"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><line x1="3.5" y1="9.5" x2="20.5" y2="9.5"/><line x1="8" y1="3" x2="8" y2="6.5"/><line x1="16" y1="3" x2="16" y2="6.5"/></g>
<g id="i-note"><path d="M6 3h8l4.5 4.5V21H6z"/><polyline points="14 3 14 8 18.5 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="13" y2="17"/></g>
<g id="i-wallet"><rect x="3" y="6" width="18" height="14" rx="3"/><path d="M3 10h18"/><circle cx="16.5" cy="15" r="1.3" fill="currentColor" stroke="none"/></g>
<g id="i-user"><circle cx="12" cy="8.5" r="3.8"/><path d="M4.5 20.5a7.5 7.5 0 0 1 15 0"/></g>
<g id="i-transfer"><polyline points="7 7 4 10 7 13"/><path d="M4 10h12a4 4 0 0 1 0 8h-3"/><polyline points="17 17 20 14 17 11" opacity="0"/></g>
<g id="i-swap"><polyline points="8 5 4.5 8.5 8 12"/><line x1="4.5" y1="8.5" x2="19" y2="8.5"/><polyline points="16 19 19.5 15.5 16 12"/><line x1="19.5" y1="15.5" x2="5" y2="15.5"/></g>
<g id="i-refresh"><path d="M20 12a8 8 0 1 1-2.4-5.7"/><polyline points="20 4 20 9 15 9"/></g>
<g id="i-help"><circle cx="12" cy="12" r="8.6"/><path d="M9.6 9.6a2.5 2.5 0 1 1 3.2 2.4c-.6.2-.9.7-.9 1.4v.5"/><circle cx="11.9" cy="16.6" r=".9" fill="currentColor" stroke="none"/></g>
<g id="i-info"><circle cx="12" cy="12" r="8.6"/><line x1="12" y1="11" x2="12" y2="16.5"/><circle cx="12" cy="7.8" r=".9" fill="currentColor" stroke="none"/></g>
<g id="i-alert"><path d="M12 4.5 21 19.5H3z"/><line x1="12" y1="10" x2="12" y2="14.5"/><circle cx="12" cy="17" r=".9" fill="currentColor" stroke="none"/></g>
<g id="i-lock"><rect x="5" y="10.5" width="14" height="10" rx="2.5"/><path d="M8.2 10.5V8a3.8 3.8 0 0 1 7.6 0v2.5"/></g>
<g id="i-key"><circle cx="8" cy="14" r="4"/><path d="M11 11.5 20 3"/><line x1="17" y1="6" x2="19" y2="8"/></g>
<g id="i-shield"><path d="M12 3.5 19 6v6c0 4.2-2.9 7.2-7 8.5-4.1-1.3-7-4.3-7-8.5V6z"/><polyline points="9 12 11.3 14.3 15.3 10.3"/></g>
<g id="i-font"><path d="M4 19 10 5l6 14"/><line x1="6.2" y1="14.5" x2="13.8" y2="14.5"/><path d="M17 19l3-8 3 8" transform="scale(.72) translate(6.5 5)"/></g>
<g id="i-doc"><rect x="4.5" y="3.5" width="15" height="17" rx="2.5"/><line x1="8" y1="9" x2="16" y2="9"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="12.5" y2="17"/></g>
<g id="i-logout"><path d="M14 5H6.5A2.5 2.5 0 0 0 4 7.5v9A2.5 2.5 0 0 0 6.5 19H14"/><polyline points="16.5 8 20.5 12 16.5 16"/><line x1="20.5" y1="12" x2="10" y2="12"/></g>
<g id="i-fee"><circle cx="12" cy="12" r="8.5"/><path d="M9.5 9h5M9.5 12h5M12 9v8"/></g>
<g id="i-theme"><circle cx="12" cy="12" r="7.5"/><path d="M12 4.5v15a7.5 7.5 0 0 0 0-15z" fill="currentColor" stroke="none"/></g>
<g id="i-sun"><circle cx="12" cy="12" r="4.2"/><line x1="12" y1="2.5" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="21.5"/><line x1="2.5" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="21.5" y2="12"/><line x1="5.4" y1="5.4" x2="7.1" y2="7.1"/><line x1="16.9" y1="16.9" x2="18.6" y2="18.6"/><line x1="5.4" y1="18.6" x2="7.1" y2="16.9"/><line x1="16.9" y1="7.1" x2="18.6" y2="5.4"/></g>
<g id="i-moon"><path d="M20 14.2A8.4 8.4 0 0 1 9.8 4 8.6 8.6 0 1 0 20 14.2z"/></g>
<g id="i-bell"><path d="M18 16V11a6 6 0 1 0-12 0v5l-1.6 2.5h15.2z"/><path d="M9.8 21a2.4 2.4 0 0 0 4.4 0"/></g>
<g id="i-list"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></g>
<g id="i-sort"><polyline points="7 9 10 6 13 9"/><polyline points="7 15 10 18 13 15"/></g>
<g id="i-trend"><polyline points="3 16 9 10 13 14 21 6"/><polyline points="15.5 6 21 6 21 11.5"/></g>
<g id="i-img"><rect x="3.5" y="5" width="17" height="14" rx="2.5"/><circle cx="9" cy="10" r="1.6"/><polyline points="5 17 10 12 13.5 15.5 16.5 13 19.5 16"/></g>
<g id="i-upload"><path d="M12 16V5"/><polyline points="7.5 9.5 12 5 16.5 9.5"/><path d="M4 15v3.5A2.5 2.5 0 0 0 6.5 21h11a2.5 2.5 0 0 0 2.5-2.5V15"/></g>
<g id="i-face"><rect x="4" y="4" width="16" height="16" rx="4"/><circle cx="9.3" cy="10.5" r=".9" fill="currentColor" stroke="none"/><circle cx="14.7" cy="10.5" r=".9" fill="currentColor" stroke="none"/><path d="M9 15c1.8 1.5 4.2 1.5 6 0"/></g>
<g id="i-cardview"><rect x="3.5" y="4" width="17" height="7" rx="2"/><rect x="3.5" y="13" width="17" height="7" rx="2"/></g>
<g id="i-tableview"><rect x="3.5" y="4.5" width="17" height="15" rx="2"/><line x1="3.5" y1="9.5" x2="20.5" y2="9.5"/><line x1="3.5" y1="14.5" x2="20.5" y2="14.5"/><line x1="9.6" y1="4.5" x2="9.6" y2="19.5"/></g>
<g id="i-grip"><circle cx="9" cy="6" r="1.2" fill="currentColor" stroke="none"/><circle cx="15" cy="6" r="1.2" fill="currentColor" stroke="none"/><circle cx="9" cy="12" r="1.2" fill="currentColor" stroke="none"/><circle cx="15" cy="12" r="1.2" fill="currentColor" stroke="none"/><circle cx="9" cy="18" r="1.2" fill="currentColor" stroke="none"/><circle cx="15" cy="18" r="1.2" fill="currentColor" stroke="none"/></g>
<g id="i-edit"><path d="M4 20h4L19 9l-4-4L4 16z"/><line x1="13.5" y1="6.5" x2="17.5" y2="10.5"/></g>
<g id="i-bolt"><path d="M13 3 5 13.5h6L10 21l8-10.5h-6z"/></g>
<g id="i-more"><circle cx="6" cy="12" r="1.3" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.3" fill="currentColor" stroke="none"/><circle cx="18" cy="12" r="1.3" fill="currentColor" stroke="none"/></g>
<g id="i-trash"><path d="M5 7h14"/><path d="M9.5 7V4.5h5V7"/><path d="M6.5 7l1 13h9l1-13"/></g>
<g id="i-sortv"><polyline points="8 10 12 6 16 10"/><polyline points="8 14 12 18 16 14"/></g>
</defs></svg>

<div class="sheet-head">
  <div class="brandmark">
    <div class="glyph"></div>
    <div>
      <div class="sheet-title">总收益票据 · 订单与持仓</div>
      <div class="sheet-sub">票据投资者 APP ／ v2.0.0 新增品类 · 品类 Tab 与排序 · 买入 / 卖出订单 · 票据持仓 · 票据详情（概要 · 持仓 · 指令 · 历史 · 查询）</div>
    </div>
  </div>
  <div class="head-right">
    <div class="meta">
      <div>模块<b>总收益票据 TRN</b></div>
      <div>规格<b>iOS 390 &times; 844 @3x</b></div>
      <div>主题<b>深空蓝 Light / Dark</b></div>
      <div>版本<b>v2.0 草案 · 2026-11-09</b></div>
    </div>
    <div class="skin" role="group" aria-label="主题切换">
      <button data-set="light" class="on"><svg viewBox="0 0 24 24"><use href="#i-sun"/></svg>浅色</button>
      <button data-set="dark"><svg viewBox="0 0 24 24"><use href="#i-moon"/></svg>深色</button>
    </div>
  </div>
</div>
<div class="sec">
  <div class="sec-head"><span class="sec-num">01</span><span class="sec-name">范围 · 入口 · 口径</span><span class="sec-rule"></span><span class="sec-note">依据 <code>原型/v2.0.0/需求文档/客户端.md</code>（主）与 <code>销售APP/总收益票据.html</code>（布局）；本稿先于代码，标「v2.0 新增」</span></div>
  <div class="cards">
    <div class="card-x">
      <h4>入口 ENTRY</h4>
      <div class="bullets">
        <li><b>买入 / 卖出订单</b>　← 底栏「票据」→ 品类 Tab「总收益票据」</li>
        <li><b>票据持仓</b>　← 底栏「账户」→ 持仓区品类分段「总收益票据」</li>
        <li><b>票据详情</b>　← 持仓卡整卡 / 买入详情「关联票据」/ 卖出详情「卖出票据编号」</li>
        <li><b>资金详情</b>　← 票据详情概要「票据估值」行右侧箭头</li>
        <li><b>操作与查询子页</b>　← 底栏「追保 · 调仓 · 更多」与查询 Tab，见 <code>11</code></li>
        <li><b>红点</b>：有待处理买入单时，底栏「票据」· 品类 Tab「总收益票据」· 「买入订单」三处都挂</li>
        <li><b>开户 / 加开品类与账户信息</b>　见 <code>12</code></li>
      </div>
    </div>
    <div class="card-x">
      <h4>通用口径 RULES</h4>
      <div class="kv">
        <div class="r"><span>盈亏 / 涨跌</span><b>红涨绿跌（跟随「我的 → 外观」）</b></div>
        <div class="r"><span>可点文字</span><b>品牌色</b></div>
        <div class="r"><span>价格精度</span><b>按标的市场原精度，不补零到别的市场</b></div>
        <div class="r"><span>风险状态</span><b>正常 / 预警 / 强平（危险 → 预警）</b></div>
        <div class="r"><span>交易限制</span><b>不限 / 限制买入 / 限制卖出 / 限制买入/卖出</b></div>
        <div class="r"><span>品类默认顺序</span><b>共赢票据在前，两处联动</b></div>
      </div>
    </div>
    <div class="card-x">
      <h4>待产品确认 OPEN</h4>
      <div class="bullets">
        <li><b>买入「确认中」</b>：需求 1.1.3 列为独立状态，原型并进「待处理」；本稿<b>单列「确认中」</b>（品牌色空心点），避免「待处理却没有按钮」</li>
        <li><b>卖出中间态</b>：1.2.2 说统一显示「待处理」，1.2.3 表里又分开显示；本稿按 1.2.2 + 原型合并</li>
        <li><b>交易时段条件</b>：客户端.md:93 写「营业日 &gt; 自然日」，订单管理 2.1 为「&lt;」</li>
        <li><b>交易限制「不限」</b>：需求写「不限」、原型写「无限制」，本稿取需求</li>
        <li><b>资产详情</b>：原型删掉了「待生效票据 / 存续期票据」两行，需求没写，共赢票据仍有待生效（H14）</li>
        <li><b>资金流水入口</b>：需求三写「资产卡片右上角 ›」进资金流水，代码现状右上进资产详情、钱包表尾进资金流水；本稿沿用代码</li>
        <li><b>持仓区标题</b>：原型「票据持仓」、代码「持仓票据」，本稿沿用代码</li>
        <li><b>合适性「通过」</b>：需求 1.1.4 写通过后直接等发行方回报，平铺版 A3 写沿用既有弹框；本稿画弹框（R13b）</li>
        <li><b>单品类 / 无品类</b>：只剩一个品类时原型账户页仍留一项分段，本稿分段与图标都不出（H21）；两个品类都不可见时票据页未定义（R15）</li>
        <li><b>历史状态筛选</b>：需求筛选表列「执行中 · 已成交 · 已撤 · 已过期 · 废单」五项，映射表只有四行且写「已撤销」；本稿取映射表四档（H7 / H19）</li>
        <li><b>改撤可操作状态</b>：2.4.5「操作按钮」写已报、部分成交，改单表与撤单条又含未报；本稿取前者（H5c）</li>
        <li><b>强平调减指令</b>在列表 / 详情里怎么标识，需求与原型都没定义，本稿未画标识；<b>空态文案</b>「暂无持仓票据」（H20）待定</li>
        <li>出处：<code>原型审查报告-v2.0.0-20261105.md</code> F-2 / A-H4</li>
      </div>
    </div>
  </div>
</div>

<div class="sec">
  <div class="sec-head"><span class="sec-num">02</span><span class="sec-name">订单 · 买入与卖出</span><span class="sec-rule"></span><span class="sec-note">25 帧 · 点右上角「深色 / 浅色」实时换肤</span></div>
  <div class="frames">

  <!-- ===== R1 票据 · 总收益票据 · 买入订单 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span>共赢票据</span><span class="on">总收益票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span class="on">买入订单<i class="dot"></i></span><span>卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626001</div><div class="tm">2026-06-26 16:33:50</div></div><span class="st live"><i></i>待处理</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>1,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>800,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.80%</b></div><div class="kv2"><span>订单金额</span><b class="em">1,011,000.00</b></div></div>
            <div class="ops"><span class="btn ghost">详情</span><span class="btn ghost">拒绝</span><span class="btn pri">确认买入</span></div>
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626009</div><div class="tm">2026-06-26 11:02:15</div></div><span class="st cf"><i></i>确认中</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>CNY</b></div><div class="kv2"><span>票据面值</span><b>2,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>1,600,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>全额计息 · 6.00%</b></div><div class="kv2"><span>订单金额</span><b class="em">2,022,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260625003</div><div class="tm">2026-06-25 09:40:00</div></div><span class="st done"><i></i>已完成</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>3,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>2,400,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.50%</b></div><div class="kv2"><span>订单金额</span><b class="em">3,031,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R1</div>
      <div class="cap-title">票据 · 总收益票据 · 买入订单<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>大标题位换成<b>品类 Tab</b>：共赢票据 / 总收益票据，当前品类 22 号、另一个 17 号灰；右侧排序图标进 R10（只剩一个可见品类时图标与另一个 Tab 都不出，见 R15）</li>
        <li>二级 Tab：买入订单 / 卖出订单；买入订单里有「待处理」时标题右上挂<b>红点</b></li>
        <li>卡片以<b>订单编号</b>作标题，右上状态；五行：结算币种、票据面值、融资金额、计息方式 / 融资利率、订单金额（品牌色）</li>
        <li>只有待处理有按钮「详情 · 拒绝 · 确认买入」；确认中、已完成、已拒绝、已撤、已结算不出按钮（R1b），点卡片进详情（R3c）</li>
        <li>不分页；待处理在前，其余按创建时间倒序</li>
      </ul>
    </div>
  </div>

  <!-- ===== R1b 买入订单 · 终态卡片（下滑） ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span>共赢票据</span><span class="on">总收益票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span class="on">买入订单<i class="dot"></i></span><span>卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260624002</div><div class="tm">2026-06-24 15:12:40</div></div><span class="st rej"><i></i>已拒绝</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>USD</b></div><div class="kv2"><span>票据面值</span><b>500,000.00</b></div><div class="kv2"><span>融资金额</span><b>400,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 6.20%</b></div><div class="kv2"><span>订单金额</span><b class="em">505,500.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260623005</div><div class="tm">2026-06-23 10:05:18</div></div><span class="st exp"><i></i>已撤</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>1,500,000.00</b></div><div class="kv2"><span>融资金额</span><b>1,200,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.80%</b></div><div class="kv2"><span>订单金额</span><b class="em">1,516,500.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260618001</div><div class="tm">2026-06-18 09:30:00</div></div><span class="st set"><i></i>已结算</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>4,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>8,000,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.80%</b></div><div class="kv2"><span>订单金额</span><b class="em">4,044,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R1b</div>
      <div class="cap-title">买入订单 · 终态卡片（下滑）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>已拒绝（红）· 已撤（浅灰）· 已结算（灰实心）三种终态与确认中、已完成一样<b>不出按钮</b>，点整卡进详情（R3c）</li>
        <li>已撤 = 发行方在客户确认前撤单；已完成在营业日日切后转已结算；被拒绝、被撤的订单留在列表里</li>
        <li>排序：待处理在最前，其余不分状态按创建时间倒序</li>
      </ul>
    </div>
  </div>

  <!-- ===== R11 票据 · 停在共赢票据（红点） ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span class="on">共赢票据</span><span>总收益票据<i class="dot"></i></span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span>询价</span><span class="on">订单</span></div>
        <div class="filterbar"><span class="fb on">全部<em>(50)</em></span><span class="fb">可撤<em>(20)</em></span><span class="fb">已完成<em>(19)</em></span><span class="fright" style="margin-left:auto"><span style="color:var(--ink-2);display:flex"><svg class="icn" viewBox="0 0 24 24"><use href="#i-history"/></svg></span><span class="viewtog sep"><span class="on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-cardview"/></svg></span><span><svg class="icn" viewBox="0 0 24 24"><use href="#i-tableview"/></svg></span></span></span></div>
        <div class="body">
          <div class="card qc">
            <div class="qc-top"><div><div class="qc-name">贵州茅台 <i class="cmark">C</i> <span class="tag t-brand">买入</span></div><div class="qc-sub">600519.SH</div></div>
            <div class="qc-r"><span class="st live"><i></i>待处理</span><div class="qc-time">13:31:02</div></div></div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>价格要求</em>限价 11.23</span></div>
          </div>
          <div class="card qc">
            <div class="qc-top"><div><div class="qc-name">贵州燃气 <i class="cmark">C</i> <span class="tag t-brand">买入</span></div><div class="qc-sub">600903.SH</div></div>
            <div class="qc-r"><span class="st live"><i></i>执行中</span><div class="qc-time">12:20:11</div></div></div>
            <div class="qc-meta"><span><em>名义本金</em>200万</span><span><em>价格要求</em>市价</span></div>
          </div>
          <div class="card qc">
            <div class="qc-top"><div><div class="qc-name">贵州茅台 <i class="cmark">C</i> <span class="tag t-brand">买入</span></div><div class="qc-sub">600519.SH</div></div>
            <div class="qc-r"><span class="st done"><i></i>已完成</span><div class="qc-time">09:10:00</div></div></div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>价格要求</em>限价 11.23</span></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R11</div>
      <div class="cap-title">票据 · 停在共赢票据（红点）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>共赢票据页面本身不变（<code>02</code> / <code>03</code>），只是大标题位换成品类 Tab</li>
        <li>总收益票据有待处理买入单时，菜单路径三处挂红点：底栏「票据」· 品类 Tab「总收益票据」（未选中时）· 「买入订单」标题（R1）</li>
        <li>红点只说明有待处理买入单，单子确认 / 拒绝 / 被撤后即消失；消息 Tab 的红点另算</li>
      </ul>
    </div>
  </div>

  <!-- ===== R15 票据 · 只有总收益票据可见 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span class="on">总收益票据</span></div>
        <div class="tabs" style="margin-top:8px"><span class="on">买入订单<i class="dot"></i></span><span>卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626001</div><div class="tm">2026-06-26 16:33:50</div></div><span class="st live"><i></i>待处理</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>1,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>800,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.80%</b></div><div class="kv2"><span>订单金额</span><b class="em">1,011,000.00</b></div></div>
            <div class="ops"><span class="btn ghost">详情</span><span class="btn ghost">拒绝</span><span class="btn pri">确认买入</span></div>
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626009</div><div class="tm">2026-06-26 11:02:15</div></div><span class="st cf"><i></i>确认中</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>CNY</b></div><div class="kv2"><span>票据面值</span><b>2,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>1,600,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>全额计息 · 6.00%</b></div><div class="kv2"><span>订单金额</span><b class="em">2,022,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260625003</div><div class="tm">2026-06-25 09:40:00</div></div><span class="st done"><i></i>已完成</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>3,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>2,400,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.50%</b></div><div class="kv2"><span>订单金额</span><b class="em">3,031,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R15</div>
      <div class="cap-title">票据 · 只有总收益票据可见<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>品类透出规则 3：机构或本人任一不允许交易、且该品类下没有数据 → 该品类 Tab 隐藏。只剩一个可见品类时大标题位只有它自己，<b>排序图标不出</b></li>
        <li>只剩共赢票据时同理，即 <code>02</code> / <code>03</code> 现状（大标题「共赢票据」）</li>
        <li>两个品类都不可见（两边都不允许交易且都没有数据）时票据页怎么显示，需求没写，见 01 节待确认</li>
      </ul>
    </div>
  </div>

  <!-- ===== R12 买入订单 · 空态 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span>共赢票据</span><span class="on">总收益票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span class="on">买入订单</span><span>卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="emptyslot" style="padding:130px 0 0;flex:none"><div class="emptybox"><svg class="illu" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="il2b" x1="10" y1="14" x2="104" y2="90" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-a)"/><stop offset="1" stop-color="var(--il-b)"/></linearGradient><linearGradient id="il2f" x1="18" y1="42" x2="98" y2="94" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-c)"/><stop offset="1" stop-color="var(--il-a)"/></linearGradient></defs><path d="M12 86V22q0-8 8-8h24q4.2 0 6.8 3.3L56 23.4q2.4 3 6.2 3H100q8 0 8 8V86q0 8-8 8H20q-8 0-8-8Z" fill="url(#il2b)"/><path d="M8.6 42h102.8q4.8 0 3.9 4.7l-7.6 41q-.9 5-6 5H18.3q-5.1 0-6-5l-7.6-41Q3.8 42 8.6 42Z" fill="url(#il2f)"/></svg><div class="etxt">暂无买入订单</div></div></div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R12</div>
      <div class="cap-title">买入订单 · 空态<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>没有买入订单时列表区出整页空态「暂无买入订单」，卖出订单同理「暂无卖出订单」</li>
        <li>没有待处理单：「买入订单」标题与底栏「票据」都不挂红点</li>
      </ul>
    </div>
  </div>

  <!-- ===== R2 确认买入 · 订单金额确认 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span>共赢票据</span><span class="on">总收益票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span class="on">买入订单<i class="dot"></i></span><span>卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626001</div><div class="tm">2026-06-26 16:33:50</div></div><span class="st live"><i></i>待处理</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>1,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>800,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.80%</b></div><div class="kv2"><span>订单金额</span><b class="em">1,011,000.00</b></div></div>
            <div class="ops"><span class="btn ghost">详情</span><span class="btn ghost">拒绝</span><span class="btn pri">确认买入</span></div>
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626009</div><div class="tm">2026-06-26 11:02:15</div></div><span class="st cf"><i></i>确认中</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>CNY</b></div><div class="kv2"><span>票据面值</span><b>2,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>1,600,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>全额计息 · 6.00%</b></div><div class="kv2"><span>订单金额</span><b class="em">2,022,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260625003</div><div class="tm">2026-06-25 09:40:00</div></div><span class="st done"><i></i>已完成</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>3,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>2,400,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.50%</b></div><div class="kv2"><span>订单金额</span><b class="em">3,031,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><h3>订单金额确认</h3></div>
            <div class="dbody"><div class="dk"><span>结算币种</span><b>HKD</b></div><div class="dk"><span>订单金额</span><b class="em">1,011,000.00 HKD</b></div><div class="dk"><span>HKD 购买力</span><b>5,000,000.00 HKD</b></div><div class="agree" style="padding:14px 0 0;background:none"><span class="cb"></span><span>我已阅读并同意<a>《销售说明》</a>和<a>《风险披露》</a>的全部内容</span></div></div>
            <div class="dlg-ft"><span>取消</span><span class="off">确认买入</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R2</div>
      <div class="cap-title">确认买入 · 订单金额确认<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>只在<b>列表卡片</b>点「确认买入」时弹（详情页不弹，直接校验）：结算币种、订单金额、对应币种购买力</li>
        <li>协议一句一个勾：「我已阅读并同意《销售说明》和《风险披露》的全部内容」，文件名品牌色，点开为文件预览页（同 <code>02</code> Q14）；<b>未勾选时「确认买入」置灰</b></li>
      </ul>
    </div>
  </div>

  <!-- ===== R2b 确认买入 · 购买力不足 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span>共赢票据</span><span class="on">总收益票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span class="on">买入订单<i class="dot"></i></span><span>卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626001</div><div class="tm">2026-06-26 16:33:50</div></div><span class="st live"><i></i>待处理</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>1,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>800,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.80%</b></div><div class="kv2"><span>订单金额</span><b class="em">1,011,000.00</b></div></div>
            <div class="ops"><span class="btn ghost">详情</span><span class="btn ghost">拒绝</span><span class="btn pri">确认买入</span></div>
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626009</div><div class="tm">2026-06-26 11:02:15</div></div><span class="st cf"><i></i>确认中</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>CNY</b></div><div class="kv2"><span>票据面值</span><b>2,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>1,600,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>全额计息 · 6.00%</b></div><div class="kv2"><span>订单金额</span><b class="em">2,022,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260625003</div><div class="tm">2026-06-25 09:40:00</div></div><span class="st done"><i></i>已完成</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>3,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>2,400,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.50%</b></div><div class="kv2"><span>订单金额</span><b class="em">3,031,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><h3>订单金额确认</h3></div>
            <div class="dbody"><div class="dk"><span>结算币种</span><b>HKD</b></div><div class="dk"><span>订单金额</span><b class="em">1,011,000.00 HKD</b></div><div class="dk"><span>HKD 购买力</span><b class="dg">980,000.00 HKD</b></div><div class="agree" style="padding:14px 0 0;background:none"><span class="cb on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span>我已阅读并同意<a>《销售说明》</a>和<a>《风险披露》</a>的全部内容</span></div></div>
            <div class="dlg-ft"><span>取消</span><span>确认买入</span></div>
          </div>
        </div>
        <div class="toast" style="top:70%">HKD购买力不足</div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R2b</div>
      <div class="cap-title">确认买入 · 购买力不足<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>订单金额 > 对应币种购买力时，购买力数值<b>红字</b>；按钮不置灰，点了 Toast「{币种}购买力不足」</li>
        <li>校验顺序：交易时段 → 清算态 → 购买力 → 合适性。合适性三种结果：通过（R13b）· 申报原因后通过（R13）· 不通过（R14）</li>
        <li>点「确认买入」后按钮立即不可点；校验通过订单转「确认中」，回报已完成 Toast「买入成功」、回报已撤 Toast「买入失败」（R2c）</li>
      </ul>
    </div>
  </div>

  <!-- ===== R13b 合适性评估 · 通过 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span>共赢票据</span><span class="on">总收益票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span class="on">买入订单<i class="dot"></i></span><span>卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626001</div><div class="tm">2026-06-26 16:33:50</div></div><span class="st live"><i></i>待处理</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>1,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>800,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.80%</b></div><div class="kv2"><span>订单金额</span><b class="em">1,011,000.00</b></div></div>
            <div class="ops"><span class="btn ghost">详情</span><span class="btn ghost">拒绝</span><span class="btn pri">确认买入</span></div>
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626009</div><div class="tm">2026-06-26 11:02:15</div></div><span class="st cf"><i></i>确认中</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>CNY</b></div><div class="kv2"><span>票据面值</span><b>2,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>1,600,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>全额计息 · 6.00%</b></div><div class="kv2"><span>订单金额</span><b class="em">2,022,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260625003</div><div class="tm">2026-06-25 09:40:00</div></div><span class="st done"><i></i>已完成</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>3,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>2,400,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.50%</b></div><div class="kv2"><span>订单金额</span><b class="em">3,031,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><h3>合适性评估</h3></div>
            <div style="padding:12px 14px 0"><div class="stab"><div class="sh"><span>检验项目</span><span>产品要求</span><span>我</span><span>匹配结果</span></div><div><span>风险等级</span><span>R5-高风险</span><span>5-非常进取型</span><span class="y">通过</span></div><div><span>投资目标</span><span>4-增长主导</span><span>5-积极增长</span><span class="y">通过</span></div><div><span>投资年限</span><span>产品周期1Y（1年）</span><span>1-3年</span><span class="y">通过</span></div><div><span>投资年龄</span><span>到期年龄不超过80岁</span><span>35-50岁（按35岁计算）</span><span class="y">通过</span></div><div><span>投资经验</span><span>有衍生品/结构性产品投资经验</span><span>有</span><span class="y">通过</span></div><div><span>账户总资产集中度</span><span>不超过60.00%</span><span>41.20%</span><span class="y">通过</span></div><div><span>个人总资产集中度</span><span>不超过60.00%</span><span>28.00%</span><span class="y">通过</span></div></div></div>
            <div style="padding:12px 14px 0"><div class="notice info"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-info"/></svg><span>合适性评估：通过，请确认买入。</span></div></div>
            <div class="dlg-ft"><span>取消</span><span>确认</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R13b</div>
      <div class="cap-title">合适性评估 · 通过<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>七项全部通过：信息条「合适性评估：通过，请确认买入。」，点「确认」订单才转确认中；版式同 <code>02</code> Q13，多一项「个人总资产集中度」</li>
        <li>需求 1.1.4 写「通过」后直接等发行方回报，平铺版 A3 写三种结果都沿用既有弹框；本稿按既有弹框画，见 01 节待确认</li>
      </ul>
    </div>
  </div>

  <!-- ===== R13 合适性评估 · 需申报 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span>共赢票据</span><span class="on">总收益票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span class="on">买入订单<i class="dot"></i></span><span>卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626001</div><div class="tm">2026-06-26 16:33:50</div></div><span class="st live"><i></i>待处理</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>1,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>800,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.80%</b></div><div class="kv2"><span>订单金额</span><b class="em">1,011,000.00</b></div></div>
            <div class="ops"><span class="btn ghost">详情</span><span class="btn ghost">拒绝</span><span class="btn pri">确认买入</span></div>
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626009</div><div class="tm">2026-06-26 11:02:15</div></div><span class="st cf"><i></i>确认中</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>CNY</b></div><div class="kv2"><span>票据面值</span><b>2,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>1,600,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>全额计息 · 6.00%</b></div><div class="kv2"><span>订单金额</span><b class="em">2,022,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260625003</div><div class="tm">2026-06-25 09:40:00</div></div><span class="st done"><i></i>已完成</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>3,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>2,400,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.50%</b></div><div class="kv2"><span>订单金额</span><b class="em">3,031,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><h3>合适性评估</h3></div>
            <div style="padding:12px 14px 0"><div class="stab"><div class="sh"><span>检验项目</span><span>产品要求</span><span>我</span><span>匹配结果</span></div><div><span>风险等级</span><span>R5-高风险</span><span>5-非常进取型</span><span class="y">通过</span></div><div><span>投资目标</span><span>4-增长主导</span><span>2-收入主导</span><span class="n">不通过</span></div><div><span>投资年限</span><span>产品周期1Y（1年）</span><span>1-3年</span><span class="y">通过</span></div><div><span>投资年龄</span><span>到期年龄不超过80岁</span><span>35-50岁（按35岁计算）</span><span class="y">通过</span></div><div><span>投资经验</span><span>有衍生品/结构性产品投资经验</span><span>有</span><span class="y">通过</span></div><div><span>账户总资产集中度</span><span>不超过60.00%</span><span>72.50%</span><span class="n">不通过</span></div><div><span>个人总资产集中度</span><span>不超过60.00%</span><span>45.00%</span><span class="y">通过</span></div></div></div>
            <div style="padding:12px 14px 0"><div class="notice warn"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-alert"/></svg><span>如需继续买入，请确认风险并选择你的理由。</span></div></div>
            <div class="reasons"><span class="rad"><i></i>产品目标符合本人投资目标</span><span class="rad on"><i></i>为达至平衡资产配置的目的</span><span class="rad"><i></i>考虑本人在账户外的资产，本人确定此风险属可接受范围</span><span class="rad"><i></i>已寻求独立投资或财务顾问专业意见后做出此投资决定</span><div class="oth"><span class="rad"><i></i>其他</span><div class="field"><span class="ph">请录入少于20字其他原因</span></div></div></div>
            <div class="dlg-ft"><span>取消</span><span>确认</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R13</div>
      <div class="cap-title">合适性评估 · 需申报<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>购买力校验通过后弹出，弹窗同 <code>02</code> Q23；七项：风险等级 · 投资目标 · 投资年限 · 投资年龄 · 投资经验 · 账户总资产集中度 · 个人总资产集中度</li>
        <li><b>投资年限</b>：产品周期（1Y / 2Y / 3Y / 5Y / 10Y）小于所选年限上限才通过；<b>集中度</b> =（本次面值 + 存续期共赢 A / B 与总收益票据面值）/ 总资产</li>
        <li>需申报：选一个理由（「其他」填少于 20 字）后「确认」才可点，确认后订单转确认中；票据变更面值增加时复用同一弹窗</li>
      </ul>
    </div>
  </div>

  <!-- ===== R14 合适性评估 · 不通过 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span>共赢票据</span><span class="on">总收益票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span class="on">买入订单<i class="dot"></i></span><span>卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626001</div><div class="tm">2026-06-26 16:33:50</div></div><span class="st live"><i></i>待处理</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>1,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>800,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.80%</b></div><div class="kv2"><span>订单金额</span><b class="em">1,011,000.00</b></div></div>
            <div class="ops"><span class="btn ghost">详情</span><span class="btn ghost">拒绝</span><span class="btn pri">确认买入</span></div>
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626009</div><div class="tm">2026-06-26 11:02:15</div></div><span class="st cf"><i></i>确认中</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>CNY</b></div><div class="kv2"><span>票据面值</span><b>2,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>1,600,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>全额计息 · 6.00%</b></div><div class="kv2"><span>订单金额</span><b class="em">2,022,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260625003</div><div class="tm">2026-06-25 09:40:00</div></div><span class="st done"><i></i>已完成</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>3,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>2,400,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.50%</b></div><div class="kv2"><span>订单金额</span><b class="em">3,031,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><h3>合适性评估</h3></div>
            <div style="padding:12px 14px 0"><div class="stab"><div class="sh"><span>检验项目</span><span>产品要求</span><span>我</span><span>匹配结果</span></div><div><span>风险等级</span><span>R5-高风险</span><span>4-进取型</span><span class="n">不通过</span></div><div><span>投资目标</span><span>4-增长主导</span><span>5-积极增长</span><span class="y">通过</span></div><div><span>投资年限</span><span>产品周期1Y（1年）</span><span>1-3年</span><span class="y">通过</span></div><div><span>投资年龄</span><span>到期年龄不超过80岁</span><span>35-50岁（按35岁计算）</span><span class="y">通过</span></div><div><span>投资经验</span><span>有衍生品/结构性产品投资经验</span><span>有</span><span class="y">通过</span></div><div><span>账户总资产集中度</span><span>--</span><span>--</span><span class="n">不通过</span></div><div><span>个人总资产集中度</span><span>--</span><span>--</span><span class="n">不通过</span></div></div></div>
            <div style="padding:12px 14px 0"><div class="notice danger"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-alert"/></svg><span>合适性评估：不通过，不允许买入。</span></div></div>
            <div class="dlg-ft"><span>取消</span><span class="off">确认</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R14</div>
      <div class="cap-title">合适性评估 · 不通过<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>第 1 项风险等级不通过时，第 6、7 项的产品要求与「我」都显示 --，结果直接不通过</li>
        <li>危险条「合适性评估：不通过，不允许买入。」；「确认」置灰只能取消，订单保持待处理</li>
      </ul>
    </div>
  </div>

  <!-- ===== R2c 确认买入 · 买入成功 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span>共赢票据</span><span class="on">总收益票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span class="on">买入订单</span><span>卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626001</div><div class="tm">2026-06-26 16:33:50</div></div><span class="st done"><i></i>已完成</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>1,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>800,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.80%</b></div><div class="kv2"><span>订单金额</span><b class="em">1,011,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626009</div><div class="tm">2026-06-26 11:02:15</div></div><span class="st cf"><i></i>确认中</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>CNY</b></div><div class="kv2"><span>票据面值</span><b>2,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>1,600,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>全额计息 · 6.00%</b></div><div class="kv2"><span>订单金额</span><b class="em">2,022,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260625003</div><div class="tm">2026-06-25 09:40:00</div></div><span class="st done"><i></i>已完成</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>3,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>2,400,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.50%</b></div><div class="kv2"><span>订单金额</span><b class="em">3,031,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="toast" style="top:76%">买入成功</div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R2c</div>
      <div class="cap-title">确认买入 · 买入成功<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>校验通过后订单先转「确认中」（卡片按钮消失，防重复提交）；发行方回报<b>已完成</b>：Toast「买入成功」，卡片转已完成并生成票据</li>
        <li>发行方回报<b>已撤</b>：Toast「买入失败」，卡片转已撤</li>
        <li>没有待处理单后，「买入订单」标题与底栏「票据」的红点一并消失</li>
      </ul>
    </div>
  </div>

  <!-- ===== R3 买入订单详情 · 待处理（上屏） ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>买入订单详情</h2></div>
        <div class="body" id="r3body">
          <div class="card dcard" style="margin-top:12px">
            <div class="frow"><span>订单编号</span><b class="m">TRNBUY20260626001</b></div>
            <div class="frow"><span>创建时间</span><b>2026-06-26 16:33:50</b></div>
            <div class="frow"><span>订单状态</span><b><span class="st live"><i></i>待处理</span></b></div>
          </div>
          <div class="gtitle">票据信息</div>
          <div class="card dcard"><div class="frow"><span>结算币种</span><b>HKD</b></div><div class="frow"><span>票据面值</span><b>1,000,000.00 HKD</b></div><div class="frow"><span>融资金额</span><b>800,000.00 HKD</b></div><div class="frow"><span>融资额度上限</span><b>2,000,000.00 HKD</b></div><div class="frow"><span>最高投资组合名义金额</span><b>3,000,000.00 HKD</b></div><div class="frow"><span>计息方式</span><b>净额计息</b></div><div class="frow"><span>融资利率</span><b>5.80%</b></div><div class="frow"><span>预警比例</span><b>30.00%</b></div><div class="frow"><span>强平比例</span><b>20.00%</b></div><div class="frow"><span>发行价</span><b>1,009,000.00 HKD</b></div><div class="frow"><span>承销费用</span><b>2,000.00 HKD</b></div><div class="frow"><span>订单金额</span><b class="em">1,011,000.00 HKD</b></div></div>
          <div class="gtitle">调仓费用</div>
          <div class="card dcard">
            <div class="fgrp"><div class="fh">A股 · QFII<em>收起 <svg class="icn" viewBox="0 0 24 24"><use href="#i-up"/></svg></em></div><div class="ftab"><div class="r h"><span>收费项目</span><span class="w">收费节点</span><span>收费策略</span><span class="n">费用</span><span class="n">最低收费</span><span class="n">最高收费</span></div><div class="r"><span>佣金</span><span class="w">调增成交、调减成交</span><span>百分比</span><span class="n">0.05%</span><span class="n">8.00</span><span class="n">--</span></div><div class="r"><span>平台费</span><span class="w">调增成交、调减成交</span><span>固定收费</span><span class="n">15.00</span><span class="n">--</span><span class="n">--</span></div><div class="r"><span>印花税</span><span class="w">调减成交</span><span>百分比</span><span class="n">0.05%</span><span class="n">--</span><span class="n">--</span></div><div class="r"><span>规费</span><span class="w">调增成交、调减成交</span><span>百分比</span><span class="n">0.002%</span><span class="n">--</span><span class="n">--</span></div></div></div>
            <div class="fgrp"><div class="fh">A股 · 沪深港通<em class="mu">不收取费用</em></div></div>
            <div class="fgrp"><div class="fh">港股<em>展开 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></em></div></div>
            <div class="fgrp"><div class="fh">美股<em>展开 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></em></div></div>
          </div>
          <div style="height:20px"></div>
        </div>
        <div class="agree"><span class="cb"></span><span>我已阅读并同意<a>《销售说明》</a>和<a>《风险披露》</a>的全部内容</span></div>
        <div class="bbar2" style="border-top:0;padding-top:12px"><span class="btn ghost">拒绝</span><span class="btn off">确认买入</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R3</div>
      <div class="cap-title">买入订单详情 · 待处理（上屏）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>平铺分组：页首（订单编号 · 创建时间 · 订单状态）→ 票据信息 12 行 → 调仓费用 → 关联票据（R4）；金额全部带币种</li>
        <li>待处理时底部固定：协议勾选在<b>按钮上方</b>，「拒绝 · 确认买入」；未勾选「确认买入」置灰（已勾选见 R3b，其余状态见 R3c）</li>
        <li>详情页的「确认买入」<b>不弹订单金额确认</b>，勾选后直接走购买力 + 合适性校验，结果同 R2b</li>
      </ul>
    </div>
  </div>

  <!-- ===== R3b 买入订单详情 · 已勾选（下屏） ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>买入订单详情</h2></div>
        <div class="body"><div style="margin-top:-330px">
          <div class="card dcard" style="margin-top:12px">
            <div class="frow"><span>订单编号</span><b class="m">TRNBUY20260626001</b></div>
            <div class="frow"><span>创建时间</span><b>2026-06-26 16:33:50</b></div>
            <div class="frow"><span>订单状态</span><b><span class="st live"><i></i>待处理</span></b></div>
          </div>
          <div class="gtitle">票据信息</div>
          <div class="card dcard"><div class="frow"><span>结算币种</span><b>HKD</b></div><div class="frow"><span>票据面值</span><b>1,000,000.00 HKD</b></div><div class="frow"><span>融资金额</span><b>800,000.00 HKD</b></div><div class="frow"><span>融资额度上限</span><b>2,000,000.00 HKD</b></div><div class="frow"><span>最高投资组合名义金额</span><b>3,000,000.00 HKD</b></div><div class="frow"><span>计息方式</span><b>净额计息</b></div><div class="frow"><span>融资利率</span><b>5.80%</b></div><div class="frow"><span>预警比例</span><b>30.00%</b></div><div class="frow"><span>强平比例</span><b>20.00%</b></div><div class="frow"><span>发行价</span><b>1,009,000.00 HKD</b></div><div class="frow"><span>承销费用</span><b>2,000.00 HKD</b></div><div class="frow"><span>订单金额</span><b class="em">1,011,000.00 HKD</b></div></div>
          <div class="gtitle">调仓费用</div>
          <div class="card dcard">
            <div class="fgrp"><div class="fh">A股 · QFII<em>收起 <svg class="icn" viewBox="0 0 24 24"><use href="#i-up"/></svg></em></div><div class="ftab"><div class="r h"><span>收费项目</span><span class="w">收费节点</span><span>收费策略</span><span class="n">费用</span><span class="n">最低收费</span><span class="n">最高收费</span></div><div class="r"><span>佣金</span><span class="w">调增成交、调减成交</span><span>百分比</span><span class="n">0.05%</span><span class="n">8.00</span><span class="n">--</span></div><div class="r"><span>平台费</span><span class="w">调增成交、调减成交</span><span>固定收费</span><span class="n">15.00</span><span class="n">--</span><span class="n">--</span></div><div class="r"><span>印花税</span><span class="w">调减成交</span><span>百分比</span><span class="n">0.05%</span><span class="n">--</span><span class="n">--</span></div><div class="r"><span>规费</span><span class="w">调增成交、调减成交</span><span>百分比</span><span class="n">0.002%</span><span class="n">--</span><span class="n">--</span></div></div></div>
            <div class="fgrp"><div class="fh">A股 · 沪深港通<em class="mu">不收取费用</em></div></div>
            <div class="fgrp"><div class="fh">港股<em>展开 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></em></div></div>
            <div class="fgrp"><div class="fh">美股<em>展开 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></em></div></div>
          </div>
          <div style="height:20px"></div>
        </div></div>
        <div class="agree"><span class="cb on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span>我已阅读并同意<a>《销售说明》</a>和<a>《风险披露》</a>的全部内容</span></div>
        <div class="bbar2" style="border-top:0;padding-top:12px"><span class="btn ghost">拒绝</span><span class="btn">确认买入</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R3b</div>
      <div class="cap-title">买入订单详情 · 已勾选（下屏）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>勾选协议后「确认买入」点亮；《销售说明》《风险披露》点开为文件预览页（同 <code>02</code> Q14）</li>
        <li>点「确认买入」后按钮立即不可点，依次过交易时段 → 清算态 → 购买力 → 合适性，结果同 R2b / R13 / R13b / R14</li>
        <li>待处理订单还没有票据，「关联票据」整组不出</li>
      </ul>
    </div>
  </div>

  <!-- ===== R3c 买入订单详情 · 确认中 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>买入订单详情</h2></div>
        <div class="body">
          <div class="card dcard" style="margin-top:12px">
            <div class="frow"><span>订单编号</span><b class="m">TRNBUY20260626009</b></div>
            <div class="frow"><span>创建时间</span><b>2026-06-26 11:02:15</b></div>
            <div class="frow"><span>订单状态</span><b><span class="st cf"><i></i>确认中</span></b></div>
          </div>
          <div class="gtitle">票据信息</div>
          <div class="card dcard"><div class="frow"><span>结算币种</span><b>CNY</b></div><div class="frow"><span>票据面值</span><b>2,000,000.00 CNY</b></div><div class="frow"><span>融资金额</span><b>1,600,000.00 CNY</b></div><div class="frow"><span>融资额度上限</span><b>4,000,000.00 CNY</b></div><div class="frow"><span>最高投资组合名义金额</span><b>6,000,000.00 CNY</b></div><div class="frow"><span>计息方式</span><b>全额计息</b></div><div class="frow"><span>融资利率</span><b>6.00%</b></div><div class="frow"><span>预警比例</span><b>30.00%</b></div><div class="frow"><span>强平比例</span><b>20.00%</b></div><div class="frow"><span>发行价</span><b>2,018,000.00 CNY</b></div><div class="frow"><span>承销费用</span><b>4,000.00 CNY</b></div><div class="frow"><span>订单金额</span><b class="em">2,022,000.00 CNY</b></div></div>
          <div class="gtitle">调仓费用</div>
          <div class="card dcard">
            <div class="fgrp"><div class="fh">A股 · QFII<em>收起 <svg class="icn" viewBox="0 0 24 24"><use href="#i-up"/></svg></em></div><div class="ftab"><div class="r h"><span>收费项目</span><span class="w">收费节点</span><span>收费策略</span><span class="n">费用</span><span class="n">最低收费</span><span class="n">最高收费</span></div><div class="r"><span>佣金</span><span class="w">调增成交、调减成交</span><span>百分比</span><span class="n">0.05%</span><span class="n">8.00</span><span class="n">--</span></div><div class="r"><span>平台费</span><span class="w">调增成交、调减成交</span><span>固定收费</span><span class="n">15.00</span><span class="n">--</span><span class="n">--</span></div><div class="r"><span>印花税</span><span class="w">调减成交</span><span>百分比</span><span class="n">0.05%</span><span class="n">--</span><span class="n">--</span></div><div class="r"><span>规费</span><span class="w">调增成交、调减成交</span><span>百分比</span><span class="n">0.002%</span><span class="n">--</span><span class="n">--</span></div></div></div>
            <div class="fgrp"><div class="fh">A股 · 沪深港通<em class="mu">不收取费用</em></div></div>
            <div class="fgrp"><div class="fh">港股<em>展开 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></em></div></div>
            <div class="fgrp"><div class="fh">美股<em>展开 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></em></div></div>
          </div>
          <div style="height:20px"></div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R3c</div>
      <div class="cap-title">买入订单详情 · 确认中<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>确认中 / 已完成 / 已结算 / 已拒绝 / 已撤：<b>没有协议勾选和底部按钮</b>，整页只读</li>
        <li>已完成、已结算才有「关联票据」（R4）；确认中、已拒绝、已撤没有</li>
      </ul>
    </div>
  </div>

  <!-- ===== R4 买入订单详情 · 调仓费用与关联票据 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>买入订单详情</h2></div>
        <div class="body">
          <div class="card dcard" style="margin-top:12px"><div class="frow"><span>承销费用</span><b>4,000.00 HKD</b></div><div class="frow"><span>订单金额</span><b class="em">3,031,000.00 HKD</b></div></div>
          <div class="gtitle">调仓费用</div>
          <div class="card dcard">
            <div class="fgrp"><div class="fh">A股 · QFII<em>收起 <svg class="icn" viewBox="0 0 24 24"><use href="#i-up"/></svg></em></div><div class="ftab"><div class="r h"><span>收费项目</span><span class="w">收费节点</span><span>收费策略</span><span class="n">费用</span><span class="n">最低收费</span><span class="n">最高收费</span></div><div class="r"><span>佣金</span><span class="w">调增成交、调减成交</span><span>百分比</span><span class="n">0.05%</span><span class="n">8.00</span><span class="n">--</span></div><div class="r"><span>平台费</span><span class="w">调增成交、调减成交</span><span>固定收费</span><span class="n">15.00</span><span class="n">--</span><span class="n">--</span></div><div class="r"><span>印花税</span><span class="w">调减成交</span><span>百分比</span><span class="n">0.05%</span><span class="n">--</span><span class="n">--</span></div><div class="r"><span>规费</span><span class="w">调增成交、调减成交</span><span>百分比</span><span class="n">0.002%</span><span class="n">--</span><span class="n">--</span></div></div></div>
            <div class="fgrp"><div class="fh">A股 · 沪深港通<em class="mu">不收取费用</em></div></div>
            <div class="fgrp"><div class="fh">港股<em>展开 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></em></div></div>
            <div class="fgrp"><div class="fh">美股<em>展开 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></em></div></div>
          </div>
          <div class="gtitle">关联票据</div>
          <div class="card dcard"><div class="frow"><span>总收益票据</span><b class="lkm">TRN20260625003 <svg class="icn sm" viewBox="0 0 24 24"><use href="#i-right"/></svg></b></div></div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R4</div>
      <div class="cap-title">买入订单详情 · 调仓费用与关联票据<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>调仓费用按 A股 · QFII / A股 · 沪深港通 / 港股 / 美股四组完整透出（收费项目 · 收费节点 · 收费策略 · 费用 · 最低 · 最高）；无费用的组只写「不收取费用」，其余组可展开 / 收起</li>
        <li><b>关联票据</b>：已生成票据后出「总收益票据 TRN…」文字链，点进票据详情（H2）；未生成时整组隐藏</li>
        <li>此帧为已完成订单下滑后：没有底部按钮</li>
      </ul>
    </div>
  </div>

  <!-- ===== R5 拒绝买入 · 二次确认 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span>共赢票据</span><span class="on">总收益票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span class="on">买入订单<i class="dot"></i></span><span>卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626001</div><div class="tm">2026-06-26 16:33:50</div></div><span class="st live"><i></i>待处理</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>1,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>800,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.80%</b></div><div class="kv2"><span>订单金额</span><b class="em">1,011,000.00</b></div></div>
            <div class="ops"><span class="btn ghost">详情</span><span class="btn ghost">拒绝</span><span class="btn pri">确认买入</span></div>
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626009</div><div class="tm">2026-06-26 11:02:15</div></div><span class="st cf"><i></i>确认中</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>CNY</b></div><div class="kv2"><span>票据面值</span><b>2,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>1,600,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>全额计息 · 6.00%</b></div><div class="kv2"><span>订单金额</span><b class="em">2,022,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260625003</div><div class="tm">2026-06-25 09:40:00</div></div><span class="st done"><i></i>已完成</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>3,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>2,400,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.50%</b></div><div class="kv2"><span>订单金额</span><b class="em">3,031,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><h3>拒绝买入</h3><p class="dsc">确认拒绝买入订单 TRNBUY20260626001？</p></div>
            
            <div class="dlg-ft"><span>取消</span><span class="dg">确定</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R5</div>
      <div class="cap-title">拒绝买入 · 二次确认<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>「确定」前先做清算态校验（销售端与发行端营业日一致、订单营业日与系统营业日一致），不一致 Toast「系统清算处理中，请稍后再试」（R6）</li>
        <li>通过后 Toast「已拒绝」，订单转已拒绝，不扣款；卡片留在列表（终态按创建时间排在待处理之后）</li>
      </ul>
    </div>
  </div>

  <!-- ===== R6 确认买入 · 时段 / 清算拦截 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span>共赢票据</span><span class="on">总收益票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span class="on">买入订单<i class="dot"></i></span><span>卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626001</div><div class="tm">2026-06-26 16:33:50</div></div><span class="st live"><i></i>待处理</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>1,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>800,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.80%</b></div><div class="kv2"><span>订单金额</span><b class="em">1,011,000.00</b></div></div>
            <div class="ops"><span class="btn ghost">详情</span><span class="btn ghost">拒绝</span><span class="btn pri">确认买入</span></div>
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626009</div><div class="tm">2026-06-26 11:02:15</div></div><span class="st cf"><i></i>确认中</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>CNY</b></div><div class="kv2"><span>票据面值</span><b>2,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>1,600,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>全额计息 · 6.00%</b></div><div class="kv2"><span>订单金额</span><b class="em">2,022,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260625003</div><div class="tm">2026-06-25 09:40:00</div></div><span class="st done"><i></i>已完成</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>3,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>2,400,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.50%</b></div><div class="kv2"><span>订单金额</span><b class="em">3,031,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="toast" style="top:76%">该笔订单已失效，无法确认买入</div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R6</div>
      <div class="cap-title">确认买入 · 时段 / 清算拦截<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>交易时段限制内（营业日晚于当天，或当天已过所属销售机构的 Cutoff）：Toast「该笔订单已失效，无法确认买入」，订单保持待处理</li>
        <li>清算态不一致：Toast「系统清算处理中，请稍后再试」；拒绝、撤单同一句</li>
        <li>需求原文把时段条件写成「营业日 > 自然日」，按订单管理 2.1 口径应为「<」，见 01 节待确认</li>
      </ul>
    </div>
  </div>

  <!-- ===== R7 票据 · 总收益票据 · 卖出订单 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span>共赢票据</span><span class="on">总收益票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span>买入订单<i class="dot"></i></span><span class="on">卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNSELL20260626010</div><div class="tm">2026-06-26 11:05:32</div></div><span class="st live"><i></i>待处理</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>CNY</b></div><div class="kv2"><span>卖出票据面值</span><b>2,000,000.00</b></div><div class="kv2"><span>订单金额</span><b class="em">1,820,000.00</b></div></div>
            <div class="ops"><span class="btn ghost">详情</span><span class="btn ghost">撤单</span></div>
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNSELL20260626011</div><div class="tm">2026-06-26 11:02:15</div></div><span class="st live"><i></i>待处理</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>卖出票据面值</span><b>600,000.00</b></div><div class="kv2"><span>订单金额</span><b class="em">612,000.00</b></div></div>
            <div class="ops"><span class="btn ghost">详情</span><span class="btn off">撤单</span></div>
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNSELL20260620003</div><div class="tm">2026-06-20 14:30:00</div></div><span class="st set"><i></i>已结算</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>卖出票据面值</span><b>1,000,000.00</b></div><div class="kv2"><span>订单金额</span><b class="em">1,120,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNSELL20260610007</div><div class="tm">2026-06-10 15:20:00</div></div><span class="st rej"><i></i>已拒绝</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>卖出票据面值</span><b>500,000.00</b></div><div class="kv2"><span>订单金额</span><b class="em">505,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R7</div>
      <div class="cap-title">票据 · 总收益票据 · 卖出订单<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>卡片三行：结算币种、卖出票据面值、订单金额；按创建时间倒序，不分页</li>
        <li><b>未报 / 待报 / 待处理 / 撤单中在客户端都显示「待处理」</b>，按钮按真实状态：未报、待处理「撤单」可点；待报、撤单中「撤单」置灰（第二张）</li>
        <li>已完成、已拒绝、已撤、已结算不出按钮（R7b），点卡片进详情</li>
      </ul>
    </div>
  </div>

  <!-- ===== R7b 卖出订单 · 终态卡片（下滑） ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span>共赢票据</span><span class="on">总收益票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span>买入订单<i class="dot"></i></span><span class="on">卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNSELL20260625004</div><div class="tm">2026-06-25 10:18:09</div></div><span class="st done"><i></i>已完成</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>卖出票据面值</span><b>800,000.00</b></div><div class="kv2"><span>订单金额</span><b class="em">846,200.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNSELL20260623002</div><div class="tm">2026-06-23 16:40:27</div></div><span class="st exp"><i></i>已撤</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>USD</b></div><div class="kv2"><span>卖出票据面值</span><b>300,000.00</b></div><div class="kv2"><span>订单金额</span><b class="em">309,450.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNSELL20260620003</div><div class="tm">2026-06-20 14:30:00</div></div><span class="st set"><i></i>已结算</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>卖出票据面值</span><b>1,000,000.00</b></div><div class="kv2"><span>订单金额</span><b class="em">1,120,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNSELL20260610007</div><div class="tm">2026-06-10 15:20:00</div></div><span class="st rej"><i></i>已拒绝</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>卖出票据面值</span><b>500,000.00</b></div><div class="kv2"><span>订单金额</span><b class="em">505,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R7b</div>
      <div class="cap-title">卖出订单 · 终态卡片（下滑）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>已完成（绿）· 已撤（浅灰）· 已结算（灰实心）· 已拒绝（红）都不出按钮，点整卡进详情；拒绝原因只在详情页显示（R8b）</li>
        <li>已完成 = 发行方接受，订单金额计入当日卖出、票据转已卖出；日切后转已结算</li>
      </ul>
    </div>
  </div>

  <!-- ===== R8 卖出订单详情 · 待处理 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>卖出订单详情</h2></div>
        <div class="body">
          <div class="card dcard" style="margin-top:12px">
            <div class="frow"><span>订单编号</span><b class="m">TRNSELL20260626010</b></div>
            <div class="frow"><span>创建时间</span><b>2026-06-26 11:05:32</b></div>
            <div class="frow"><span>订单状态</span><b><span class="st live"><i></i>待处理</span></b></div>
          </div>
          <div class="gtitle">订单信息</div>
          <div class="card dcard"><div class="frow"><span>卖出票据编号</span><b class="lkm">TRN20260520002 <svg class="icn sm" viewBox="0 0 24 24"><use href="#i-right"/></svg></b></div><div class="frow"><span>结算币种</span><b>CNY</b></div><div class="frow"><span>卖出票据面值</span><b>2,000,000.00 CNY</b></div><div class="frow"><span>订单金额</span><b class="em">1,820,000.00 CNY</b></div></div>
        </div>
        <div class="bbar1"><div class="btn ghost">撤单</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R8</div>
      <div class="cap-title">卖出订单详情 · 待处理<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>页首 + 订单信息四行；「卖出票据编号」品牌色文字链，点进对应票据详情；金额全部带币种</li>
        <li>未报、待处理时底栏「撤单」；待报、撤单中底栏按钮置灰（R8c）；交互同卡片（R9）</li>
      </ul>
    </div>
  </div>

  <!-- ===== R8c 卖出订单详情 · 待报 / 撤单中 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>卖出订单详情</h2></div>
        <div class="body">
          <div class="card dcard" style="margin-top:12px">
            <div class="frow"><span>订单编号</span><b class="m">TRNSELL20260626011</b></div>
            <div class="frow"><span>创建时间</span><b>2026-06-26 11:02:15</b></div>
            <div class="frow"><span>订单状态</span><b><span class="st live"><i></i>待处理</span></b></div>
          </div>
          <div class="gtitle">订单信息</div>
          <div class="card dcard"><div class="frow"><span>卖出票据编号</span><b class="lkm">TRN20260305007 <svg class="icn sm" viewBox="0 0 24 24"><use href="#i-right"/></svg></b></div><div class="frow"><span>结算币种</span><b>HKD</b></div><div class="frow"><span>卖出票据面值</span><b>600,000.00 HKD</b></div><div class="frow"><span>订单金额</span><b class="em">612,000.00 HKD</b></div></div>
        </div>
        <div class="bbar1"><div class="btn off">撤单</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R8c</div>
      <div class="cap-title">卖出订单详情 · 待报 / 撤单中<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>待报（已转发发行端、等待受理）与撤单中（撤单指令处理中）：状态仍显示「待处理」，底栏「撤单」<b>置灰</b></li>
        <li>已完成 / 已结算 / 已撤：没有底栏，版式同 R8b 去掉拒绝原因行</li>
      </ul>
    </div>
  </div>

  <!-- ===== R8b 卖出订单详情 · 已拒绝 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>卖出订单详情</h2></div>
        <div class="body">
          <div class="card dcard" style="margin-top:12px">
            <div class="frow"><span>订单编号</span><b class="m">TRNSELL20260610007</b></div>
            <div class="frow"><span>创建时间</span><b>2026-06-10 15:20:00</b></div>
            <div class="frow"><span>订单状态</span><b><span class="st rej"><i></i>已拒绝</span></b></div><div class="frow rs"><span>拒绝原因</span><b>该票据存在未完成的调仓任务，暂不可赎回</b></div>
          </div>
          <div class="gtitle">订单信息</div>
          <div class="card dcard"><div class="frow"><span>卖出票据编号</span><b class="lkm">TRN20260418009 <svg class="icn sm" viewBox="0 0 24 24"><use href="#i-right"/></svg></b></div><div class="frow"><span>结算币种</span><b>HKD</b></div><div class="frow"><span>卖出票据面值</span><b>500,000.00 HKD</b></div><div class="frow"><span>订单金额</span><b class="em">505,000.00 HKD</b></div></div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R8b</div>
      <div class="cap-title">卖出订单详情 · 已拒绝<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>已拒绝：订单状态下多一行红字「拒绝原因」，取发行方录入或系统二次前置校验写入的原因</li>
        <li>终态不出底栏</li>
      </ul>
    </div>
  </div>

  <!-- ===== R9 撤单 · 二次确认 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span>共赢票据</span><span class="on">总收益票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span>买入订单<i class="dot"></i></span><span class="on">卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNSELL20260626010</div><div class="tm">2026-06-26 11:05:32</div></div><span class="st live"><i></i>待处理</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>CNY</b></div><div class="kv2"><span>卖出票据面值</span><b>2,000,000.00</b></div><div class="kv2"><span>订单金额</span><b class="em">1,820,000.00</b></div></div>
            <div class="ops"><span class="btn ghost">详情</span><span class="btn ghost">撤单</span></div>
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNSELL20260626011</div><div class="tm">2026-06-26 11:02:15</div></div><span class="st live"><i></i>待处理</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>卖出票据面值</span><b>600,000.00</b></div><div class="kv2"><span>订单金额</span><b class="em">612,000.00</b></div></div>
            <div class="ops"><span class="btn ghost">详情</span><span class="btn off">撤单</span></div>
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNSELL20260620003</div><div class="tm">2026-06-20 14:30:00</div></div><span class="st set"><i></i>已结算</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>卖出票据面值</span><b>1,000,000.00</b></div><div class="kv2"><span>订单金额</span><b class="em">1,120,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNSELL20260610007</div><div class="tm">2026-06-10 15:20:00</div></div><span class="st rej"><i></i>已拒绝</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>卖出票据面值</span><b>500,000.00</b></div><div class="kv2"><span>订单金额</span><b class="em">505,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><h3>撤单</h3><p class="dsc">确认撤销卖出订单 TRNSELL20260626010？</p></div>
            
            <div class="dlg-ft"><span>取消</span><span class="dg">确定</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R9</div>
      <div class="cap-title">撤单 · 二次确认<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>先过清算态校验，再弹确认；确定后：<b>未报</b>直接已撤，Toast「已撤单」；<b>待处理</b>转撤单中（按钮随即置灰），发行端撤单成功后 Toast「已撤单」</li>
        <li>发行端已先接受 / 拒绝：以发行端为准，Toast「订单已被处理，撤单失败」并刷新为实际状态</li>
      </ul>
    </div>
  </div>

  <!-- ===== R10 品类排序 · 底部面板 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span>共赢票据</span><span class="on">总收益票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span class="on">买入订单<i class="dot"></i></span><span>卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626001</div><div class="tm">2026-06-26 16:33:50</div></div><span class="st live"><i></i>待处理</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>1,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>800,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.80%</b></div><div class="kv2"><span>订单金额</span><b class="em">1,011,000.00</b></div></div>
            <div class="ops"><span class="btn ghost">详情</span><span class="btn ghost">拒绝</span><span class="btn pri">确认买入</span></div>
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626009</div><div class="tm">2026-06-26 11:02:15</div></div><span class="st cf"><i></i>确认中</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>CNY</b></div><div class="kv2"><span>票据面值</span><b>2,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>1,600,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>全额计息 · 6.00%</b></div><div class="kv2"><span>订单金额</span><b class="em">2,022,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260625003</div><div class="tm">2026-06-25 09:40:00</div></div><span class="st done"><i></i>已完成</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>3,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>2,400,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.50%</b></div><div class="kv2"><span>订单金额</span><b class="em">3,031,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="scrim bottom">
          <div class="dlg sheet fsheet">
            <div class="fsheet-hd"><b>品类排序</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            <div class="note-t" style="padding:6px 20px 8px">拖动调整顺序，靠前的品类默认优先展示；【票据】与【账户 · 持仓票据】两处同步</div>
            <div class="drag lift"><svg class="icn" viewBox="0 0 24 24"><use href="#i-grip"/></svg><b style="font-weight:500">总收益票据</b><em>拖动中</em></div>
            <div class="drag"><svg class="icn" viewBox="0 0 24 24"><use href="#i-grip"/></svg><span>共赢票据</span></div>
            <div class="fsheet-ft"><span class="btn ghost">取消</span><span class="btn">保存</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R10</div>
      <div class="cap-title">品类排序 · 底部面板<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>入口：票据页与账户页持仓区品类 Tab 右侧的排序图标；只列当前可见品类，拖拽手柄排序</li>
        <li>「取消 / 保存」：保存后即时生效，<b>两处 Tab 顺序联动</b>；默认共赢票据在前；进入页面默认选中排序最靠前的可见品类（保存后见 R10b）</li>
        <li>透出：机构与投资者都允许交易 → 出；任一不允许但该品类有数据 → 仍出；任一不允许且无数据 → 隐藏</li>
      </ul>
    </div>
  </div>

  <!-- ===== R10b 品类排序 · 保存后 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="cattab"><span class="on">总收益票据</span><span>共赢票据</span><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
        <div class="tabs" style="margin-top:8px"><span class="on">买入订单<i class="dot"></i></span><span>卖出订单</span></div>
        <div class="body" style="padding-top:12px">
          <div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626001</div><div class="tm">2026-06-26 16:33:50</div></div><span class="st live"><i></i>待处理</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>1,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>800,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.80%</b></div><div class="kv2"><span>订单金额</span><b class="em">1,011,000.00</b></div></div>
            <div class="ops"><span class="btn ghost">详情</span><span class="btn ghost">拒绝</span><span class="btn pri">确认买入</span></div>
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260626009</div><div class="tm">2026-06-26 11:02:15</div></div><span class="st cf"><i></i>确认中</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>CNY</b></div><div class="kv2"><span>票据面值</span><b>2,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>1,600,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>全额计息 · 6.00%</b></div><div class="kv2"><span>订单金额</span><b class="em">2,022,000.00</b></div></div>
            
          </div><div class="card oc">
            <div class="hd"><div><div class="no">TRNBUY20260625003</div><div class="tm">2026-06-25 09:40:00</div></div><span class="st done"><i></i>已完成</span></div>
            <div class="kvs"><div class="kv2"><span>结算币种</span><b>HKD</b></div><div class="kv2"><span>票据面值</span><b>3,000,000.00</b></div><div class="kv2"><span>融资金额</span><b>2,400,000.00</b></div><div class="kv2"><span>计息方式 / 融资利率</span><b>净额计息 · 5.50%</b></div><div class="kv2"><span>订单金额</span><b class="em">3,031,000.00</b></div></div>
            
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="toast" style="top:76%">排序已保存</div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">R10b</div>
      <div class="cap-title">品类排序 · 保存后<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>点「保存」：抽屉收起，Toast「排序已保存」，票据页与账户页持仓区的品类顺序立即对调</li>
        <li>之后每次进这两处都默认选中排在最前的可见品类（此例总收益票据）；点「取消」或 × 不保存</li>
      </ul>
    </div>
  </div>

  </div>
</div>

<div class="sec">
  <div class="sec-head"><span class="sec-num">03</span><span class="sec-name">票据持仓 · 票据详情</span><span class="sec-rule"></span><span class="sec-note">33 帧 · 账户页两个品类 Tab · 资产详情 · 详情页四个 Tab：持仓 / 指令 / 历史 / 查询</span></div>
  <div class="frames">

  <!-- ===== H12 资金账户 · 主页（总收益票据 Tab） ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>资金账户</h1></div>
        <div class="body">
          <div class="hero">
            <div class="lb">合计资产净值 <span class="cur">HKD <svg class="icn" style="width:11px;height:11px" viewBox="0 0 24 24"><use href="#i-down"/></svg></span></div>
            <div class="amt num">7,930,712.56 <svg class="icn sm eye" viewBox="0 0 24 24"><use href="#i-eye"/></svg></div>
            <svg class="icn lg arrow" viewBox="0 0 24 24"><use href="#i-right"/></svg>
            <div class="grid3">
              <div><span>票据估值</span><b class="num">5,320,728.86</b></div>
              <div><span>冻结金额</span><b class="num">22,511.75</b></div>
              <div><span>现金可用</span><b class="num">2,607,803.59</b></div>
            </div>
          </div>
          <div class="card wtab" style="margin:11px 16px 0">
            <div class="wr h"><span>币种</span><span>现金余额</span><span>可取金额</span><span>购买力</span></div>
            <div class="wr"><span>HKD</span><span>2,163,462.56</span><span>2,162,440.36</span><span>2,162,440.36</span></div>
            <div class="wr"><span>USD</span><span>44,198.68</span><span>44,198.68</span><span>44,198.68</span></div>
            <div class="wr"><span>CNY</span><span>93,368.29</span><span>92,305.99</span><span>92,305.99</span></div>
            <div class="wfoot"><span>资金流水 <svg class="icn sm" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div>
          </div>
          <div class="quick one"><div class="qk"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-swap"/></svg></span><b>资金划转</b></div></div>
          <div class="holdhd"><h3>持仓票据</h3><div class="seg"><span>共赢票据</span><span class="on">总收益票据</span></div><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
          <div class="card nc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><div class="tg"><span class="tag t-brand">存续期</span></div></div>
            <div class="val"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><div style="text-align:right"><span>票据净值</span><b style="font-size:15px">96.40%</b></div></div>
            <div class="g3"><div><span>票据面值</span><b>4,000,000.00</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>持仓组合市值</span><b>4,799,251.23</b></div></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H12</div>
      <div class="cap-title">资金账户 · 主页（总收益票据 Tab）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>看板、钱包表同 <code>04</code> A1；<b>快捷入口只剩「资金划转」一张整行卡</b>，展期记录挪进共赢票据 Tab（H13）</li>
        <li>持仓区：标题「持仓票据」+ 品类分段 + 品类排序图标；进页默认选中排序最靠前的可见品类，只有一个可见品类时分段与排序图标都不出（H21）；没有持仓时见 H20</li>
        <li>总收益票据 Tab 没有排序下拉、卡片 / 表格切换与「历史票据 &gt;」：存续期与已卖出都在这一个列表（H1）</li>
        <li>底栏「票据」红点：总收益票据有待处理买入单（R11）</li>
      </ul>
    </div>
  </div>

  <!-- ===== H1 资金账户 · 总收益票据 Tab（上滑） ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>资金账户</h1></div>
        <div class="body">
          <div class="holdhd"><h3>持仓票据</h3><div class="seg"><span>共赢票据</span><span class="on">总收益票据</span></div><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div><div class="card nc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><div class="tg"><span class="tag t-brand">存续期</span></div></div>
            <div class="val"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><div style="text-align:right"><span>票据净值</span><b style="font-size:15px">96.40%</b></div></div>
            <div class="g3"><div><span>票据面值</span><b>4,000,000.00</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>持仓组合市值</span><b>4,799,251.23</b></div></div>
          </div><div class="card nc">
            <div class="hd"><div><div class="no">TRN20260520002</div><div class="se">系列号 001</div></div><div class="tg"><span class="tag zb">追保</span><span class="tag t-brand">存续期</span></div></div>
            <div class="val"><div><span>票据估值</span><b>1,746,740.00<small>CNY</small></b></div><div style="text-align:right"><span>票据净值</span><b style="font-size:15px">88.10%</b></div></div>
            <div class="g3"><div><span>票据面值</span><b>2,000,000.00</b></div><div><span>融资金额</span><b>1,000,000.00</b></div><div><span>持仓组合市值</span><b>1,820,000.00</b></div></div>
          </div><div class="card nc sold">
            <div class="hd"><div><div class="no">TRN20260410003</div><div class="se">系列号 002</div></div><div class="tg"><span class="tag t-mute">已卖出</span></div></div>
            <div class="val"><div><span>票据估值</span><b>0.00<small>HKD</small></b></div><div style="text-align:right"><span>票据净值</span><b style="font-size:15px">--</b></div></div>
            <div class="g3"><div><span>票据面值</span><b>0.00</b></div><div><span>融资金额</span><b>0.00</b></div><div><span>持仓组合市值</span><b>0.00</b></div></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H1</div>
      <div class="cap-title">资金账户 · 总收益票据 Tab（上滑）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>账户页上滑到持仓区（上半屏见 H12）：标题「持仓票据」右侧是<b>品类分段</b>（共赢票据 / 总收益票据）+ 排序图标（R10，与票据页联动）</li>
        <li>卡片以<b>票据编号</b>作标题，下挂系列号；右上票据状态（存续期品牌弱底、已卖出灰）</li>
        <li>风险状态为预警 / 强平时，状态标签<b>左侧</b>加实心「追保」标识（预警橙、强平红见 H1b），只提示不可点；危险在客户端按预警处理</li>
        <li>票据估值 19 号带结算币种，右侧票据净值；下列票据面值 · 融资金额 · 持仓组合市值。卡片没有按钮，点整卡进详情</li>
        <li>不设历史票据页：存续期在前、已卖出在后，同状态按发行日期倒序；共赢票据 Tab 维持现状，展期记录入口挪进共赢票据 Tab</li>
      </ul>
    </div>
  </div>

  <!-- ===== H1b 总收益票据 Tab · 强平与预警 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>资金账户</h1></div>
        <div class="body">
          
          <div class="holdhd"><h3>持仓票据</h3><div class="seg"><span>共赢票据</span><span class="on">总收益票据</span></div><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div><div class="card nc">
            <div class="hd"><div><div class="no">TRN20260305007</div><div class="se">系列号 004</div></div><div class="tg"><span class="tag zb dg">追保</span><span class="tag t-brand">存续期</span></div></div>
            <div class="val"><div><span>票据估值</span><b>412,650.00<small>HKD</small></b></div><div style="text-align:right"><span>票据净值</span><b style="font-size:15px">68.78%</b></div></div>
            <div class="g3"><div><span>票据面值</span><b>600,000.00</b></div><div><span>融资金额</span><b>2,400,000.00</b></div><div><span>持仓组合市值</span><b>2,731,400.00</b></div></div>
          </div><div class="card nc">
            <div class="hd"><div><div class="no">TRN20260520002</div><div class="se">系列号 001</div></div><div class="tg"><span class="tag zb">追保</span><span class="tag t-brand">存续期</span></div></div>
            <div class="val"><div><span>票据估值</span><b>1,746,740.00<small>CNY</small></b></div><div style="text-align:right"><span>票据净值</span><b style="font-size:15px">88.10%</b></div></div>
            <div class="g3"><div><span>票据面值</span><b>2,000,000.00</b></div><div><span>融资金额</span><b>1,000,000.00</b></div><div><span>持仓组合市值</span><b>1,820,000.00</b></div></div>
          </div><div class="card nc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><div class="tg"><span class="tag t-brand">存续期</span></div></div>
            <div class="val"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><div style="text-align:right"><span>票据净值</span><b style="font-size:15px">96.40%</b></div></div>
            <div class="g3"><div><span>票据面值</span><b>4,000,000.00</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>持仓组合市值</span><b>4,799,251.23</b></div></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H1b</div>
      <div class="cap-title">总收益票据 Tab · 强平与预警<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>风险状态<b>强平</b>：「追保」标识为危险色实心；<b>预警</b>（含发行端的「危险」）为警示色实心；正常不出标识</li>
        <li>标识只做提示、不可点，点整卡进详情（H2b），在底栏「追保」里补保证金（<code>11</code> K1）</li>
        <li>风险状态不参与排序：仍是存续期在前、已卖出在后，同状态按发行日期倒序</li>
      </ul>
    </div>
  </div>

  <!-- ===== H20 总收益票据 Tab · 暂无持仓 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>资金账户</h1></div>
        <div class="body">
          <div class="hero">
            <div class="lb">合计资产净值 <span class="cur">HKD <svg class="icn" style="width:11px;height:11px" viewBox="0 0 24 24"><use href="#i-down"/></svg></span></div>
            <div class="amt num">7,930,712.56 <svg class="icn sm eye" viewBox="0 0 24 24"><use href="#i-eye"/></svg></div>
            <svg class="icn lg arrow" viewBox="0 0 24 24"><use href="#i-right"/></svg>
            <div class="grid3">
              <div><span>票据估值</span><b class="num">5,320,728.86</b></div>
              <div><span>冻结金额</span><b class="num">22,511.75</b></div>
              <div><span>现金可用</span><b class="num">2,607,803.59</b></div>
            </div>
          </div>
          <div class="card wtab" style="margin:11px 16px 0">
            <div class="wr h"><span>币种</span><span>现金余额</span><span>可取金额</span><span>购买力</span></div>
            <div class="wr"><span>HKD</span><span>2,163,462.56</span><span>2,162,440.36</span><span>2,162,440.36</span></div>
            <div class="wr"><span>USD</span><span>44,198.68</span><span>44,198.68</span><span>44,198.68</span></div>
            <div class="wr"><span>CNY</span><span>93,368.29</span><span>92,305.99</span><span>92,305.99</span></div>
            <div class="wfoot"><span>资金流水 <svg class="icn sm" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div>
          </div>
          <div class="quick one"><div class="qk"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-swap"/></svg></span><b>资金划转</b></div></div>
          <div class="holdhd"><h3>持仓票据</h3><div class="seg"><span>共赢票据</span><span class="on">总收益票据</span></div><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div><div class="emptyslot" style="padding:34px 0 0;flex:none"><div class="emptybox sm"><svg class="illu" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="il4b" x1="10" y1="14" x2="104" y2="90" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-a)"/><stop offset="1" stop-color="var(--il-b)"/></linearGradient><linearGradient id="il4f" x1="18" y1="42" x2="98" y2="94" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-c)"/><stop offset="1" stop-color="var(--il-a)"/></linearGradient></defs><path d="M12 86V22q0-8 8-8h24q4.2 0 6.8 3.3L56 23.4q2.4 3 6.2 3H100q8 0 8 8V86q0 8-8 8H20q-8 0-8-8Z" fill="url(#il4b)"/><path d="M8.6 42h102.8q4.8 0 3.9 4.7l-7.6 41q-.9 5-6 5H18.3q-5.1 0-6-5l-7.6-41Q3.8 42 8.6 42Z" fill="url(#il4f)"/></svg><div class="etxt">暂无持仓票据</div></div></div>
        </div>
        <div class="tabbar"><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H20</div>
      <div class="cap-title">总收益票据 Tab · 暂无持仓<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>品类允许交易就透出 Tab，不看有没有数据——刚开通、还没买入时持仓区是空态，分段与排序图标照常</li>
        <li>空态用紧凑档插画 + 「暂无持仓票据」；原型与需求都没给这句文案，待产品确认</li>
      </ul>
    </div>
  </div>

  <!-- ===== H21 资金账户 · 只有总收益票据可见 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>资金账户</h1></div>
        <div class="body">
          <div class="hero">
            <div class="lb">合计资产净值 <span class="cur">HKD <svg class="icn" style="width:11px;height:11px" viewBox="0 0 24 24"><use href="#i-down"/></svg></span></div>
            <div class="amt num">7,930,712.56 <svg class="icn sm eye" viewBox="0 0 24 24"><use href="#i-eye"/></svg></div>
            <svg class="icn lg arrow" viewBox="0 0 24 24"><use href="#i-right"/></svg>
            <div class="grid3">
              <div><span>票据估值</span><b class="num">5,320,728.86</b></div>
              <div><span>冻结金额</span><b class="num">22,511.75</b></div>
              <div><span>现金可用</span><b class="num">2,607,803.59</b></div>
            </div>
          </div>
          <div class="card wtab" style="margin:11px 16px 0">
            <div class="wr h"><span>币种</span><span>现金余额</span><span>可取金额</span><span>购买力</span></div>
            <div class="wr"><span>HKD</span><span>2,163,462.56</span><span>2,162,440.36</span><span>2,162,440.36</span></div>
            <div class="wr"><span>USD</span><span>44,198.68</span><span>44,198.68</span><span>44,198.68</span></div>
            <div class="wr"><span>CNY</span><span>93,368.29</span><span>92,305.99</span><span>92,305.99</span></div>
            <div class="wfoot"><span>资金流水 <svg class="icn sm" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div>
          </div>
          <div class="quick one"><div class="qk"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-swap"/></svg></span><b>资金划转</b></div></div>
          <div class="holdhd"><h3>持仓票据</h3></div><div class="card nc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><div class="tg"><span class="tag t-brand">存续期</span></div></div>
            <div class="val"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><div style="text-align:right"><span>票据净值</span><b style="font-size:15px">96.40%</b></div></div>
            <div class="g3"><div><span>票据面值</span><b>4,000,000.00</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>持仓组合市值</span><b>4,799,251.23</b></div></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H21</div>
      <div class="cap-title">资金账户 · 只有总收益票据可见<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>只剩一个可见品类：品类分段与排序图标<b>都不出</b>，「持仓票据」标题下直接是该品类的列表（共赢票据单独可见时即 <code>04</code> A1 现状）</li>
        <li>原型此时仍保留只有一项的分段、只隐藏排序图标；需求只写了「排序图标隐藏」，见 01 节待确认</li>
        <li>快捷入口仍只有「资金划转」；展期记录属共赢票据，这里没有入口</li>
      </ul>
    </div>
  </div>

  <!-- ===== H13 资金账户 · 共赢票据 Tab ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>资金账户</h1></div>
        <div class="body">
          <div class="holdhd"><h3>持仓票据</h3><div class="seg"><span class="on">共赢票据</span><span>总收益票据</span></div><span class="srt"><svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></span></div>
          <div class="card rocard"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-calendar"/></svg></span><b>展期记录</b><i class="rd"></i><span class="go">查看 <svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div>
          <div class="lsthd"><span class="cnt">共 8 只</span><span class="fright"><span class="more">默认排序（创建时间倒序）<svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span class="viewtog sep"><span class="on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-cardview"/></svg></span><span><svg class="icn" viewBox="0 0 24 24"><use href="#i-tableview"/></svg></span></span></span></div>
          <div class="card pos">
            <div class="corners"><span class="corner">增额</span><span class="corner due">到期</span></div>
            <div class="pos-hd">
              <div><div class="pos-name">贵州茅台 <i class="cmark">C</i></div><div class="pos-code">600519.SH · Delta A</div></div>
              <div class="pos-val"><b class="num">221,234.00<small> HKD</small></b><span>票据估值</span></div>
            </div>
            <div class="pos-pl"><span class="down">-178,766.00 HKD</span><span class="down">-89.38%</span></div>
            <div class="pos-grid f5"><div><span>名义/冻结名义</span><b>200万 CNY</b><i>20万 CNY</i></div><div><span>票据面值</span><b>20万 HKD</b></div><div><span>现价/期初价</span><b>1,234.56</b><i>1,204.56</i></div><div><span>强平价</span><b style="color:var(--danger)">1,000.00</b></div><div><span>到期日</span><b>12/16</b></div></div>
            <div class="pos-ops"><span class="pri">详情</span><span>卖出</span><span>增额</span><span class="hot">展期</span></div>
          </div>
          <div class="card pos">
            <div class="corners"><span class="corner due">到期</span></div>
            <div class="pos-hd">
              <div><div class="pos-name">贵州茅台 <i class="cmark">C</i></div><div class="pos-code">600519.SH · Delta A</div></div>
              <div class="pos-val"><b class="num">161,234.00<small> HKD</small></b><span>票据估值</span></div>
            </div>
            <div class="pos-pl"><span class="down">-38,766.00 HKD</span><span class="down">-19.38%</span></div>
            <div class="pos-grid f5 s105"><div><span>名义/冻结名义</span><b>200万<em> / 0 CNY</em></b></div><div><span>票据面值</span><b>20万 HKD</b></div><div><span>现价/期初价</span><b>1,234.56<em> / 1,204.56</em></b></div><div><span>强平价</span><b style="color:var(--danger)">1,000.00</b></div><div><span>到期日</span><b>12/16</b></div></div>
            <div class="pos-ops"><span class="pri">详情</span><span>卖出</span><span>增额</span><span class="hot">展期</span></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg><i class="rdot"></i></span>票据</div><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H13</div>
      <div class="cap-title">资金账户 · 共赢票据 Tab<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>共赢票据 Tab 首行是<b>展期记录</b>入口（共赢专属，有变更挂红点、看过即消失），下面是原持仓列表：条数 · 排序下拉（<code>04</code> A13）· 卡片 / 表格切换</li>
        <li>卡片、表格、操作条（详情 · 卖出 · 增额 · 展期）与列表底「历史票据 &gt;」都不变</li>
        <li>排序下拉只排本 Tab 的共赢持仓；分段右侧的排序图标是<b>品类排序</b>（R10），两者不是一回事</li>
      </ul>
    </div>
  </div>

  <!-- ===== H14 资产详情 · 上屏 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>资产详情</h2></div>
        <div class="body" id="h14body">
          <div class="netv">
            <div class="lb">合计资产净值 <span class="cur">HKD <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span></div>
            <div class="amt">7,930,712.56</div>
          </div>
          <div class="glist">
            <div class="r"><span class="k">票据估值</span><span class="v">5,320,728.86</span></div><div class="r"><span class="k">冻结金额</span><span class="v">22,511.75</span></div><div class="r"><span class="k">现金可用</span><span class="v">2,607,803.59</span></div>
          </div>
          <div class="glist" style="margin-top:12px"><div class="r hd"><span class="k">现金余额 · HKD</span><span class="v">2,609,983.70</span></div><div class="r"><span class="k">HKD</span><span class="v">2,163,462.56</span></div><div class="r"><span class="k">USD</span><span class="v">44,198.68</span></div><div class="r"><span class="k">CNY</span><span class="v">93,368.29</span></div></div>
          <div class="glist" style="margin-top:12px"><div class="r hd"><span class="k">可取金额 · HKD</span><span class="v">2,607,803.59</span></div><div class="r"><span class="k">HKD</span><span class="v">2,162,440.36</span></div><div class="r"><span class="k">USD</span><span class="v">44,198.68</span></div><div class="r"><span class="k">CNY</span><span class="v">92,305.99</span></div></div>
          <div class="glist" style="margin-top:12px"><div class="r hd"><span class="k">购买力 · HKD</span><span class="v">2,607,803.59</span></div><div class="r"><span class="k">HKD</span><span class="v">2,162,440.36</span></div><div class="r"><span class="k">USD</span><span class="v">44,198.68</span></div><div class="r"><span class="k">CNY</span><span class="v">92,305.99</span></div></div>
          <div class="gtitle tight"><span><b>今日统计</b></span><em>2026-06-30</em></div>
          <div class="glist">
            <div class="r hd"><span class="k">当日买入</span><span class="v"></span></div><div class="r"><span class="k">成交笔数</span><span class="v">3</span></div><div class="r pa"><span class="k">成交金额</span><span class="v"></span></div><div class="r sub"><span class="k">HKD</span><span class="v">1,232,234.00</span></div><div class="r sub"><span class="k">USD</span><span class="v">0.00</span></div><div class="r sub"><span class="k">CNY</span><span class="v">2,022,000.00</span></div>
            <div class="r hd"><span class="k">当日卖出</span><span class="v"></span></div><div class="r"><span class="k">成交笔数</span><span class="v">2</span></div><div class="r pa"><span class="k">成交金额</span><span class="v"></span></div><div class="r sub"><span class="k">HKD</span><span class="v">1,341,234.00</span></div><div class="r sub"><span class="k">USD</span><span class="v">0.00</span></div><div class="r sub"><span class="k">CNY</span><span class="v">0.00</span></div>
          </div>
          <div style="height:20px"></div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H14</div>
      <div class="cap-title">资产详情 · 上屏<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>版式同 <code>05</code> S1，<b>票据估值下不再拆「待生效票据 / 存续期票据」两行</b>（原型删除；总收益票据没有待生效）</li>
        <li>票据估值、冻结金额、现金余额 / 可取金额 / 购买力都已含总收益票据，取后端值</li>
      </ul>
    </div>
  </div>

  <!-- ===== H14b 资产详情 · 下屏 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>资产详情</h2></div>
        <div class="body"><div style="margin-top:-700px" data-clone="#h14body"></div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H14b</div>
      <div class="cap-title">资产详情 · 下屏<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>今日统计：当日买入 / 当日卖出的成交笔数与成交金额<b>把总收益票据订单合并计入</b>（与共赢票据一起统计），版式不变</li>
      </ul>
    </div>
  </div>

  <!-- ===== H2 票据详情 · 概要 + 持仓 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span class="on">持仓</span><span>指令</span><span>历史</span><span>查询</span></div>
          <div class="ptab" style="margin:12px 16px 0;border-radius:14px"><div class="r h">
                <div class="fz"><div class="c" style="width:104px">名称代码</div></div>
                <div class="sc"><div class="c n" style="width:96px">市值<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg><span class="sub">交易 / 结算币种</span></div><div class="c n" style="width:58px">持仓/可用<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></div><div class="c n" style="width:56px">现价/成本<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></div><div class="c n" style="width:72px">浮动盈亏<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg><span class="sub">HKD</span></div><div class="c n" style="width:56px">盈亏比例<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>平安银行<span class="chn">深股通</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>565,586.00 CNY</b><span class="sub">655,967.12 HKD</span></div><div class="c n" style="width:58px">14,200<span class="sub">0</span></div><div class="c n" style="width:56px">39.83<span class="sub">40.91</span></div><div class="c n down" style="width:72px">-17,847.08</div><div class="c n down" style="width:56px">-2.65%</div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>平安银行<span class="chn">QFII</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>199,150.00 CNY</b><span class="sub">217,073.50 HKD</span></div><div class="c n" style="width:58px">5,000<span class="sub">5,000</span></div><div class="c n" style="width:56px">39.83<span class="sub">38.50</span></div><div class="c n up" style="width:72px">+6,650.00</div><div class="c n up" style="width:56px">+3.45%</div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>贵州茅台<span class="chn">沪股通</span></b><span><i class="mk a">A</i>600519.SH</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>533,214.00 CNY</b><span class="sub">618,422.04 HKD</span></div><div class="c n" style="width:58px">1,800<span class="sub">1,800</span></div><div class="c n" style="width:56px">296.23<span class="sub">331.18</span></div><div class="c n down" style="width:72px">-72,971.25</div><div class="c n down" style="width:56px">-10.55%</div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>805,200.00 HKD</b><span class="sub">805,200.00 HKD</span></div><div class="c n" style="width:58px">2,000<span class="sub">2,000</span></div><div class="c n" style="width:56px">402.60<span class="sub">380.50</span></div><div class="c n up" style="width:72px">+44,200.00</div><div class="c n up" style="width:56px">+5.81%</div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>苹果</b><span><i class="mk us">US</i>AAPL.US</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>254,880.00 USD</b><span class="sub">1,988,064.00 HKD</span></div><div class="c n" style="width:58px">1,200<span class="sub">1,200</span></div><div class="c n" style="width:56px">212.40<span class="sub">185.30</span></div><div class="c n up" style="width:72px">+42,378.00</div><div class="c n up" style="width:56px">+12.78%</div></div>
              </div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H2</div>
      <div class="cap-title">票据详情 · 概要 + 持仓<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>概要：编号 · 系列号 · 状态；票据估值单独一行 25 号加粗带结算币种，右侧箭头进资金详情（H4）</li>
        <li>其余六项每行三个、名在上值在下：持仓市值 · 总资产 · 风险状态 / 账簿余额 · 融资金额 · 交易限制；风险状态<b>只变字色</b>（正常绿 / 预警橙 / 强平红），交易限制「不限」绿、限制橙（H2b）</li>
        <li>交易限制映射：含限制调增 →「限制买入」、含限制调减 →「限制卖出」、两者都有 →「限制买入/卖出」</li>
        <li>持仓表：名称代码冻结（市场 A / HK / US + 交易渠道标签，<b>同一 A股按 QFII / 深股通 / 沪股通拆行</b>），其余列横滑：市值（交易 / 结算币种）· 持仓 / 可用 · 现价 / 成本 · 浮动盈亏（结算币种）· 盈亏比例</li>
        <li>底栏常驻「追保 · 调仓 · 更多」；价格按标的市场原精度，金额两位</li>
      </ul>
    </div>
  </div>

  <!-- ===== H2b 票据详情 · 强平 / 交易受限 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260305007</div><div class="se">系列号 004</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>412,650.00<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>2,731,400.00</b></div><div><span>总资产</span><b>2,818,950.00</b></div><div><span>风险状态</span><b><span class="rk-dg">强平</span></b></div><div><span>账簿余额</span><b>87,550.00</b></div><div><span>融资金额</span><b>2,400,000.00</b></div><div><span>交易限制</span><b><span class="rk-warn">限制买入/卖出</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span class="on">持仓</span><span>指令</span><span>历史</span><span>查询</span></div>
          <div class="ptab" style="margin:12px 16px 0;border-radius:14px"><div class="r h">
                <div class="fz"><div class="c" style="width:104px">名称代码</div></div>
                <div class="sc"><div class="c n" style="width:96px">市值<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg><span class="sub">交易 / 结算币种</span></div><div class="c n" style="width:58px">持仓/可用<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></div><div class="c n" style="width:56px">现价/成本<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></div><div class="c n" style="width:72px">浮动盈亏<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg><span class="sub">HKD</span></div><div class="c n" style="width:56px">盈亏比例<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>平安银行<span class="chn">深股通</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>565,586.00 CNY</b><span class="sub">655,967.12 HKD</span></div><div class="c n" style="width:58px">14,200<span class="sub">0</span></div><div class="c n" style="width:56px">39.83<span class="sub">40.91</span></div><div class="c n down" style="width:72px">-17,847.08</div><div class="c n down" style="width:56px">-2.65%</div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>平安银行<span class="chn">QFII</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>199,150.00 CNY</b><span class="sub">217,073.50 HKD</span></div><div class="c n" style="width:58px">5,000<span class="sub">5,000</span></div><div class="c n" style="width:56px">39.83<span class="sub">38.50</span></div><div class="c n up" style="width:72px">+6,650.00</div><div class="c n up" style="width:56px">+3.45%</div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>贵州茅台<span class="chn">沪股通</span></b><span><i class="mk a">A</i>600519.SH</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>533,214.00 CNY</b><span class="sub">618,422.04 HKD</span></div><div class="c n" style="width:58px">1,800<span class="sub">1,800</span></div><div class="c n" style="width:56px">296.23<span class="sub">331.18</span></div><div class="c n down" style="width:72px">-72,971.25</div><div class="c n down" style="width:56px">-10.55%</div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>805,200.00 HKD</b><span class="sub">805,200.00 HKD</span></div><div class="c n" style="width:58px">2,000<span class="sub">2,000</span></div><div class="c n" style="width:56px">402.60<span class="sub">380.50</span></div><div class="c n up" style="width:72px">+44,200.00</div><div class="c n up" style="width:56px">+5.81%</div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>苹果</b><span><i class="mk us">US</i>AAPL.US</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>254,880.00 USD</b><span class="sub">1,988,064.00 HKD</span></div><div class="c n" style="width:58px">1,200<span class="sub">1,200</span></div><div class="c n" style="width:56px">212.40<span class="sub">185.30</span></div><div class="c n up" style="width:72px">+42,378.00</div><div class="c n up" style="width:56px">+12.78%</div></div>
              </div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H2b</div>
      <div class="cap-title">票据详情 · 强平 / 交易受限<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>风险状态只变字色：正常绿 · 预警橙（含危险）· <b>强平红</b>；详情页首<b>不出</b>「追保」标识（只在持仓卡上有）</li>
        <li>交易限制：不限绿；限制买入 / 限制卖出 / 限制买入/卖出一律橙色（由风险监控的「限制调增 / 限制调减」映射）</li>
        <li>底栏不因风险状态与交易限制置灰：受限时点调增 / 调减在提交校验里拦截（<code>11</code> K19）；资金详情「风控信息」两行同色（H4b）</li>
      </ul>
    </div>
  </div>

  <!-- ===== H3 持仓 Tab · 行展开与排序 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span class="on">持仓</span><span>指令</span><span>历史</span><span>查询</span></div>
          <div class="ptab" style="margin:12px 16px 0;border-radius:14px"><div class="r h">
                <div class="fz"><div class="c" style="width:104px">名称代码</div></div>
                <div class="sc"><div class="c n" style="width:96px">市值<svg class="icn on" viewBox="0 0 24 24"><use href="#i-down"/></svg><span class="sub">交易 / 结算币种</span></div><div class="c n" style="width:58px">持仓/可用<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></div><div class="c n" style="width:56px">现价/成本<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></div><div class="c n" style="width:72px">浮动盈亏<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg><span class="sub">HKD</span></div><div class="c n" style="width:56px">盈亏比例<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>苹果</b><span><i class="mk us">US</i>AAPL.US</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>254,880.00 USD</b><span class="sub">1,988,064.00 HKD</span></div><div class="c n" style="width:58px">1,200<span class="sub">1,200</span></div><div class="c n" style="width:56px">212.40<span class="sub">185.30</span></div><div class="c n up" style="width:72px">+42,378.00</div><div class="c n up" style="width:56px">+12.78%</div></div>
              </div><div class="r sel">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>805,200.00 HKD</b><span class="sub">805,200.00 HKD</span></div><div class="c n" style="width:58px">2,000<span class="sub">2,000</span></div><div class="c n" style="width:56px">402.60<span class="sub">380.50</span></div><div class="c n up" style="width:72px">+44,200.00</div><div class="c n up" style="width:56px">+5.81%</div></div>
              </div><div class="xops"><span>调仓</span></div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>平安银行<span class="chn">深股通</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>565,586.00 CNY</b><span class="sub">655,967.12 HKD</span></div><div class="c n" style="width:58px">14,200<span class="sub">0</span></div><div class="c n" style="width:56px">39.83<span class="sub">40.91</span></div><div class="c n down" style="width:72px">-17,847.08</div><div class="c n down" style="width:56px">-2.65%</div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>贵州茅台<span class="chn">沪股通</span></b><span><i class="mk a">A</i>600519.SH</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>533,214.00 CNY</b><span class="sub">618,422.04 HKD</span></div><div class="c n" style="width:58px">1,800<span class="sub">1,800</span></div><div class="c n" style="width:56px">296.23<span class="sub">331.18</span></div><div class="c n down" style="width:72px">-72,971.25</div><div class="c n down" style="width:56px">-10.55%</div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>平安银行<span class="chn">QFII</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>199,150.00 CNY</b><span class="sub">217,073.50 HKD</span></div><div class="c n" style="width:58px">5,000<span class="sub">5,000</span></div><div class="c n" style="width:56px">39.83<span class="sub">38.50</span></div><div class="c n up" style="width:72px">+6,650.00</div><div class="c n up" style="width:56px">+3.45%</div></div>
              </div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H3</div>
      <div class="cap-title">持仓 Tab · 行展开与排序<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>点某行展开操作条，只有「调仓」：进调仓页并预填该行证券与交易渠道（<code>11</code> K7）</li>
        <li>默认排序：开盘市场在前 → A股 / 港股 / 美股 → 证券代码；表头「市值、持仓、成本、浮动盈亏、盈亏比例」可点做升降序：当前列箭头变品牌色并指示方向（此例市值降序），再点一次反向</li>
        <li>浮动盈亏、盈亏比例按红涨绿跌</li>
      </ul>
    </div>
  </div>

  <!-- ===== H4 资金详情 · 上屏 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>资金详情</h2></div>
        <div class="body" id="h4body"><div class="gtitle">基础信息</div><div class="card dcard"><div class="frow"><span>票据编号</span><b class="m">TRN20260618001</b></div><div class="frow"><span>系列号</span><b>003</b></div><div class="frow"><span>票据状态</span><b>存续期</b></div><div class="frow"><span>发行日期</span><b>2026-06-18</b></div><div class="frow"><span>到期日期</span><b>2027-06-18</b></div><div class="frow"><span>融资额度上限</span><b>10,000,000.00 HKD</b></div><div class="frow"><span>最高投资组合名义金额</span><b>15,000,000.00 HKD</b></div></div><div class="gtitle">初始资金</div><div class="card dcard"><div class="frow"><span>结算币种</span><b>HKD</b></div><div class="frow"><span>票据面值</span><b>4,000,000.00 HKD</b></div><div class="frow"><span>融资金额</span><b>8,000,000.00 HKD</b></div></div><div class="gtitle">当前资金</div><div class="card dcard"><div class="frow"><span>票据估值</span><b class="em">3,855,909.95 HKD</b></div><div class="frow"><span>票据净值</span><b>96.40%</b></div><div class="frow"><span>账簿余额</span><b>7,063,672.40 HKD</b></div><div class="frow"><span>冻结金额</span><b>0.00 HKD</b></div><div class="frow"><span>持仓市值</span><b>4,799,251.23 HKD</b></div><div class="frow"><span>总资产</span><b>11,862,923.63 HKD</b></div></div><div class="gtitle">利息信息</div><div class="card dcard"><div class="frow"><span>计息方式</span><b>净额计息</b></div><div class="frow"><span>融资利率</span><b>5.80%</b></div><div class="frow"><span>应付利息</span><b>7,013.68 HKD</b></div><div class="frow"><span>已付利息</span><b>12,300.00 HKD</b></div></div><div class="gtitle">风控信息</div><div class="card dcard"><div class="frow"><span>预警比例</span><b>30.00%</b></div><div class="frow"><span>强平比例</span><b>20.00%</b></div><div class="frow"><span>净持比</span><b>148.30%</b></div><div class="frow"><span>风险状态</span><b class="rk"><span class="rk-ok">正常</span></b></div><div class="frow"><span>交易限制</span><b class="rk"><span class="rk-ok">不限</span></b></div></div><div style="height:24px"></div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H4</div>
      <div class="cap-title">资金详情 · 上屏<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>五组按序：基础信息 · 初始资金 · 当前资金 · 利息信息 · 风控信息；金额带币种</li>
        <li>基础信息含融资额度上限、最高投资组合名义金额；当前资金含冻结金额、总资产</li>
      </ul>
    </div>
  </div>

  <!-- ===== H4b 资金详情 · 下屏 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>资金详情</h2></div>
        <div class="body"><div style="margin-top:-800px" data-clone="#h4body"></div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H4b</div>
      <div class="cap-title">资金详情 · 下屏<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>利息信息：计息方式 · 融资利率 · 应付利息 · 已付利息（取利息明细「累计已收取金额」）</li>
        <li>风控信息：预警比例 · 强平比例 · 净持比 · 风险状态 · 交易限制，后两项与概要同一套纯字色</li>
      </ul>
    </div>
  </div>

  <!-- ===== H5 指令 Tab · 未完成 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span>持仓</span><span class="on">指令</span><span>历史</span><span>查询</span></div>
          <div class="seg seg2"><span class="on">未完成<em>(4)</em></span><span>已完成<em>(2)</em></span></div><div class="ptab" style="margin:0 16px;border-radius:14px"><div class="r h">
                <div class="fz"><div class="c" style="width:48px">方向/状态</div><div class="c" style="width:92px">名称代码</div></div>
                <div class="sc"><div class="c n" style="width:78px">委托数量/价格</div><div class="c n" style="width:62px">成交数量/价格</div><div class="c n" style="width:72px">委托时间</div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="gy">部成待撤</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">3,000<span class="sub">POV · 市价</span></div><div class="c n" style="width:62px">1,000<span class="sub">402.50</span></div><div class="c tm" style="width:72px">06-30<i>10:25:00</i></div></div>
              </div><div class="r sel">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="">已报</span></div><div class="c" style="width:92px"><div class="sname"><b>平安银行<span class="chn">QFII</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">20,000<span class="sub">TWAP · 市价</span></div><div class="c n" style="width:62px">8,000<span class="sub">39.79</span></div><div class="c tm" style="width:72px">06-30<i>10:20:00</i></div></div>
              </div><div class="xops"><span>详情</span><span>改单</span><span>撤单</span></div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="">待报</span></div><div class="c" style="width:92px"><div class="sname"><b>贵州茅台<span class="chn">QFII</span></b><span><i class="mk a">A</i>600519.SH</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">200<span class="sub">限价 301.00</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">06-30<i>10:05:40</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="">部分成交</span></div><div class="c" style="width:92px"><div class="sname"><b>平安银行<span class="chn">深股通</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">10,000<span class="sub">限价 39.80</span></div><div class="c n" style="width:62px">4,000<span class="sub">39.78</span></div><div class="c tm" style="width:72px">06-29<i>14:01:23</i></div></div>
              </div><div class="tfoot">最近24小时内指令</div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H5</div>
      <div class="cap-title">指令 Tab · 未完成<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>只看<b>近 24 小时</b>委托；分段「未完成（n）/ 已完成（n）」，表尾居中注「最近24小时内指令」</li>
        <li>列：方向 / 状态（调增红、调减绿，状态按<b>真实母单状态</b>）· 名称代码 · 委托数量 / 价格 · 成交数量 / 价格 · 委托时间；委托时间倒序</li>
        <li>未完成点行展开「详情 · 改单 · 撤单」；改单、撤单只在已报、部分成交可点，其余置灰（H5c）；<b>发行端强平调减单不可改不可撤</b>；没有指令时见 H5b</li>
        <li>已完成点行直接进调仓指令详情（H8），只读</li>
      </ul>
    </div>
  </div>

  <!-- ===== H5c 指令 Tab · 展开后不可改撤 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span>持仓</span><span class="on">指令</span><span>历史</span><span>查询</span></div>
          <div class="seg seg2"><span class="on">未完成<em>(4)</em></span><span>已完成<em>(2)</em></span></div><div class="ptab" style="margin:0 16px;border-radius:14px"><div class="r h">
                <div class="fz"><div class="c" style="width:48px">方向/状态</div><div class="c" style="width:92px">名称代码</div></div>
                <div class="sc"><div class="c n" style="width:78px">委托数量/价格</div><div class="c n" style="width:62px">成交数量/价格</div><div class="c n" style="width:72px">委托时间</div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="gy">部成待撤</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">3,000<span class="sub">POV · 市价</span></div><div class="c n" style="width:62px">1,000<span class="sub">402.50</span></div><div class="c tm" style="width:72px">06-30<i>10:25:00</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="">已报</span></div><div class="c" style="width:92px"><div class="sname"><b>平安银行<span class="chn">QFII</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">20,000<span class="sub">TWAP · 市价</span></div><div class="c n" style="width:62px">8,000<span class="sub">39.79</span></div><div class="c tm" style="width:72px">06-30<i>10:20:00</i></div></div>
              </div><div class="r sel">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="">待报</span></div><div class="c" style="width:92px"><div class="sname"><b>贵州茅台<span class="chn">QFII</span></b><span><i class="mk a">A</i>600519.SH</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">200<span class="sub">限价 301.00</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">06-30<i>10:05:40</i></div></div>
              </div><div class="xops"><span>详情</span><span class="off">改单</span><span class="off">撤单</span></div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="">部分成交</span></div><div class="c" style="width:92px"><div class="sname"><b>平安银行<span class="chn">深股通</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">10,000<span class="sub">限价 39.80</span></div><div class="c n" style="width:62px">4,000<span class="sub">39.78</span></div><div class="c tm" style="width:72px">06-29<i>14:01:23</i></div></div>
              </div><div class="tfoot">最近24小时内指令</div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H5c</div>
      <div class="cap-title">指令 Tab · 展开后不可改撤<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>未报 / 待报 / 待改 / 待撤 / 部成待撤：展开后「改单 · 撤单」<b>置灰</b>，只有「详情」可点（此例待报）</li>
        <li>撤单确认后指令转待撤 / 部成待撤，这两个按钮随即置灰（H16）；发行端强平调减单任何状态都不可改、不可撤</li>
        <li>限价单 / TWAP / POV 在已报、部分成交可改撤；市价单只有美股可改单（改单页见 <code>11</code> K12）</li>
      </ul>
    </div>
  </div>

  <!-- ===== H5b 指令 Tab · 暂无数据 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span>持仓</span><span class="on">指令</span><span>历史</span><span>查询</span></div>
          <div class="seg seg2"><span class="on">未完成<em>(0)</em></span><span>已完成<em>(2)</em></span></div><div class="ptab" style="margin:0 16px;border-radius:14px"><div class="emptybox sm"><svg class="illu" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="il6b" x1="10" y1="14" x2="104" y2="90" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-a)"/><stop offset="1" stop-color="var(--il-b)"/></linearGradient><linearGradient id="il6f" x1="18" y1="42" x2="98" y2="94" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-c)"/><stop offset="1" stop-color="var(--il-a)"/></linearGradient></defs><path d="M12 86V22q0-8 8-8h24q4.2 0 6.8 3.3L56 23.4q2.4 3 6.2 3H100q8 0 8 8V86q0 8-8 8H20q-8 0-8-8Z" fill="url(#il6b)"/><path d="M8.6 42h102.8q4.8 0 3.9 4.7l-7.6 41q-.9 5-6 5H18.3q-5.1 0-6-5l-7.6-41Q3.8 42 8.6 42Z" fill="url(#il6f)"/></svg><div class="etxt">暂无数据</div></div><div class="tfoot">最近24小时内指令</div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H5b</div>
      <div class="cap-title">指令 Tab · 暂无数据<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>近 24 小时没有未完成指令：分段计数为 (0)，表格位置出紧凑空态「暂无数据」，表尾「最近24小时内指令」照常</li>
        <li>已完成子列表为空时相同</li>
      </ul>
    </div>
  </div>

  <!-- ===== H15 指令 Tab · 已完成 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span>持仓</span><span class="on">指令</span><span>历史</span><span>查询</span></div>
          <div class="seg seg2"><span>未完成<em>(4)</em></span><span class="on">已完成<em>(2)</em></span></div><div class="ptab" style="margin:0 16px;border-radius:14px"><div class="r h">
                <div class="fz"><div class="c" style="width:48px">方向/状态</div><div class="c" style="width:92px">名称代码</div></div>
                <div class="sc"><div class="c n" style="width:78px">委托数量/价格</div><div class="c n" style="width:62px">成交数量/价格</div><div class="c n" style="width:72px">委托时间</div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="dn">部撤</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">500<span class="sub">市价</span></div><div class="c n" style="width:62px">200<span class="sub">402.30</span></div><div class="c tm" style="width:72px">06-30<i>10:12:00</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>平安银行<span class="chn">深股通</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">6,000<span class="sub">限价 39.85</span></div><div class="c n" style="width:62px">6,000<span class="sub">39.83</span></div><div class="c tm" style="width:72px">06-30<i>09:45:12</i></div></div>
              </div><div class="tfoot">最近24小时内指令</div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H15</div>
      <div class="cap-title">指令 Tab · 已完成<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>近 24 小时内已到终态的指令（已成交 · 部撤 · 部废 · 已撤销 · 废单），状态按真实母单状态</li>
        <li>点行直接进调仓指令详情（H8，只读、没有底栏）；表尾同样注「最近24小时内指令」</li>
      </ul>
    </div>
  </div>

  <!-- ===== H16 调仓指令 · 撤单确认 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span>持仓</span><span class="on">指令</span><span>历史</span><span>查询</span></div>
          <div class="seg seg2"><span class="on">未完成<em>(4)</em></span><span>已完成<em>(2)</em></span></div><div class="ptab" style="margin:0 16px;border-radius:14px"><div class="r h">
                <div class="fz"><div class="c" style="width:48px">方向/状态</div><div class="c" style="width:92px">名称代码</div></div>
                <div class="sc"><div class="c n" style="width:78px">委托数量/价格</div><div class="c n" style="width:62px">成交数量/价格</div><div class="c n" style="width:72px">委托时间</div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="gy">部成待撤</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">3,000<span class="sub">POV · 市价</span></div><div class="c n" style="width:62px">1,000<span class="sub">402.50</span></div><div class="c tm" style="width:72px">06-30<i>10:25:00</i></div></div>
              </div><div class="r sel">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="">已报</span></div><div class="c" style="width:92px"><div class="sname"><b>平安银行<span class="chn">QFII</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">20,000<span class="sub">TWAP · 市价</span></div><div class="c n" style="width:62px">8,000<span class="sub">39.79</span></div><div class="c tm" style="width:72px">06-30<i>10:20:00</i></div></div>
              </div><div class="xops"><span>详情</span><span>改单</span><span>撤单</span></div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="">待报</span></div><div class="c" style="width:92px"><div class="sname"><b>贵州茅台<span class="chn">QFII</span></b><span><i class="mk a">A</i>600519.SH</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">200<span class="sub">限价 301.00</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">06-30<i>10:05:40</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="">部分成交</span></div><div class="c" style="width:92px"><div class="sname"><b>平安银行<span class="chn">深股通</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">10,000<span class="sub">限价 39.80</span></div><div class="c n" style="width:62px">4,000<span class="sub">39.78</span></div><div class="c tm" style="width:72px">06-29<i>14:01:23</i></div></div>
              </div><div class="tfoot">最近24小时内指令</div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><h3>撤单</h3><p class="dsc">确认撤销调仓指令 AD20260630004？</p></div>
            
            <div class="dlg-ft"><span>取消</span><span class="dg">确定</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H16</div>
      <div class="cap-title">调仓指令 · 撤单确认<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>未完成行展开或详情页点「撤单」：只有已报、部分成交可撤，发行端强平调减单不可撤</li>
        <li>确定后 Toast「已撤单」，指令转待撤 / 部成待撤，在未完成列表按真实状态显示，终态后进已完成</li>
      </ul>
    </div>
  </div>

  <!-- ===== H6 历史 Tab · 快捷筛选 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span>持仓</span><span>指令</span><span class="on">历史</span><span>查询</span></div>
          <div class="qfb"><span>方向 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span>名称代码 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span>状态 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span class="fmore">筛选 <svg class="icn" viewBox="0 0 24 24"><use href="#i-filter"/></svg></span></div><div class="ptab" style="margin:0 16px;border-radius:14px"><div class="r h">
                <div class="fz"><div class="c" style="width:48px">方向/状态</div><div class="c" style="width:92px">名称代码</div></div>
                <div class="sc"><div class="c n" style="width:78px">委托数量/价格</div><div class="c n" style="width:62px">成交数量/价格</div><div class="c n" style="width:72px">委托时间</div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="dn">部撤</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">500<span class="sub">市价</span></div><div class="c n" style="width:62px">200<span class="sub">402.30</span></div><div class="c tm" style="width:72px">2026-06-30<i>10:12:00</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>平安银行<span class="chn">深股通</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">6,000<span class="sub">限价 39.85</span></div><div class="c n" style="width:62px">6,000<span class="sub">39.83</span></div><div class="c tm" style="width:72px">2026-06-30<i>09:45:12</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="gy">已撤销</span></div><div class="c" style="width:92px"><div class="sname"><b>苹果</b><span><i class="mk us">US</i>AAPL.US</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">100<span class="sub">限价 210.5000</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">2026-06-27<i>22:31:08</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="rj">废单</span></div><div class="c" style="width:92px"><div class="sname"><b>贵州茅台<span class="chn">QFII</span></b><span><i class="mk a">A</i>600519.SH</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">300<span class="sub">限价 301.00</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">2026-06-25<i>14:58:40</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">1,000<span class="sub">限价 398.20</span></div><div class="c n" style="width:62px">1,000<span class="sub">398.20</span></div><div class="c tm" style="width:72px">2026-06-20<i>10:02:11</i></div></div>
              </div></div><div class="listfoot" style="background:none">查看全部（24）<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H6</div>
      <div class="cap-title">历史 Tab · 快捷筛选<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>展示全部调仓指令，列同指令 Tab，委托时间两行（日期 / 时间）；只读，点行进详情</li>
        <li>列表上方三项<b>快捷筛选</b>：方向（H19c）· 名称代码（H19b）· 状态（H19），右侧「筛选」开抽屉（H7），两边条件联动</li>
        <li>默认最多 20 条，超过出「查看全部（n）&gt;」进独立列表页（同一套筛选）；默认委托日期近三月；无结果见 H6b</li>
      </ul>
    </div>
  </div>

  <!-- ===== H19c 历史 · 方向下拉 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span>持仓</span><span>指令</span><span class="on">历史</span><span>查询</span></div>
          <div class="ffwrap"><div class="qfb"><span class="on open">调减 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span>名称代码 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span>状态 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span class="fmore">筛选 <svg class="icn" viewBox="0 0 24 24"><use href="#i-filter"/></svg></span></div><div class="ffmask"></div><div class="ffpop"><div class="fo"><span>全部方向</span></div><div class="fo"><span>调增</span></div><div class="fo on"><span>调减</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></div></div></div><div class="ptab" style="margin:0 16px;border-radius:14px"><div class="r h">
                <div class="fz"><div class="c" style="width:48px">方向/状态</div><div class="c" style="width:92px">名称代码</div></div>
                <div class="sc"><div class="c n" style="width:78px">委托数量/价格</div><div class="c n" style="width:62px">成交数量/价格</div><div class="c n" style="width:72px">委托时间</div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="dn">部撤</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">500<span class="sub">市价</span></div><div class="c n" style="width:62px">200<span class="sub">402.30</span></div><div class="c tm" style="width:72px">2026-06-30<i>10:12:00</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="rj">废单</span></div><div class="c" style="width:92px"><div class="sname"><b>贵州茅台<span class="chn">QFII</span></b><span><i class="mk a">A</i>600519.SH</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">300<span class="sub">限价 301.00</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">2026-06-25<i>14:58:40</i></div></div>
              </div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H19c</div>
      <div class="cap-title">历史 · 方向下拉<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>「方向」单选：全部方向 / 调增 / 调减，选中即生效并收起，胶囊回显所选值变品牌色</li>
        <li>与 H19（状态，多选）是同一个就地下拉；下拉外区域压暗，点击即收起</li>
      </ul>
    </div>
  </div>

  <!-- ===== H19b 历史 · 名称代码搜索 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span>持仓</span><span>指令</span><span class="on">历史</span><span>查询</span></div>
          <div class="ffwrap"><div class="qfb"><span>方向 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span class="on open">名称代码 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span>状态 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span class="fmore">筛选 <svg class="icn" viewBox="0 0 24 24"><use href="#i-filter"/></svg></span></div><div class="ffmask"></div><div class="ffpop">
              <div class="fsr"><div class="fsearch"><svg class="icn" viewBox="0 0 24 24"><use href="#i-search"/></svg><b>腾讯</b><span class="clr"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-x"/></svg></span></div><span>取消</span></div>
              <div class="sgi"><b style="font-weight:400"><em>腾讯</em>控股</b><i class="mk hk">HK</i><span>00700.HK</span></div><div class="sgi"><b style="font-weight:400"><em>腾讯</em>音乐</b><i class="mk us">US</i><span>TME.US</span></div>
            </div></div><div class="ptab" style="margin:0 16px;border-radius:14px"><div class="r h">
                <div class="fz"><div class="c" style="width:48px">方向/状态</div><div class="c" style="width:92px">名称代码</div></div>
                <div class="sc"><div class="c n" style="width:78px">委托数量/价格</div><div class="c n" style="width:62px">成交数量/价格</div><div class="c n" style="width:72px">委托时间</div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="dn">部撤</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">500<span class="sub">市价</span></div><div class="c n" style="width:62px">200<span class="sub">402.30</span></div><div class="c tm" style="width:72px">2026-06-30<i>10:12:00</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>平安银行<span class="chn">深股通</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">6,000<span class="sub">限价 39.85</span></div><div class="c n" style="width:62px">6,000<span class="sub">39.83</span></div><div class="c tm" style="width:72px">2026-06-30<i>09:45:12</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="gy">已撤销</span></div><div class="c" style="width:92px"><div class="sname"><b>苹果</b><span><i class="mk us">US</i>AAPL.US</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">100<span class="sub">限价 210.5000</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">2026-06-27<i>22:31:08</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="rj">废单</span></div><div class="c" style="width:92px"><div class="sname"><b>贵州茅台<span class="chn">QFII</span></b><span><i class="mk a">A</i>600519.SH</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">300<span class="sub">限价 301.00</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">2026-06-25<i>14:58:40</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">1,000<span class="sub">限价 398.20</span></div><div class="c n" style="width:62px">1,000<span class="sub">398.20</span></div><div class="c tm" style="width:72px">2026-06-20<i>10:02:11</i></div></div>
              </div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H19b</div>
      <div class="cap-title">历史 · 名称代码搜索<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>点「名称代码」展开搜索面板：输入框 + 取消，边输边出联想（命中字品牌色 · 市场标签 · 代码），点选后按该证券筛选</li>
        <li>联想范围为本票据历史指令里出现过的证券；忽略首尾空格、代码不分大小写；没有命中时一行「无匹配证券」</li>
        <li>选定后胶囊回显证券名并变品牌色；与抽屉里的「名称代码」是同一个条件</li>
      </ul>
    </div>
  </div>

  <!-- ===== H19 历史 · 快捷筛选下拉 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span>持仓</span><span>指令</span><span class="on">历史</span><span>查询</span></div>
          <div class="ffwrap"><div class="qfb"><span>方向 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span>名称代码 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span class="on open">已成交 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span class="fmore">筛选 <svg class="icn" viewBox="0 0 24 24"><use href="#i-filter"/></svg></span></div><div class="ffmask"></div><div class="ffpop"><div class="fo"><span>全部状态</span></div><div class="fo"><span>执行中</span></div><div class="fo on"><span>已成交</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></div><div class="fo"><span>已撤销</span></div><div class="fo"><span>废单</span></div></div></div><div class="ptab" style="margin:0 16px;border-radius:14px"><div class="r h">
                <div class="fz"><div class="c" style="width:48px">方向/状态</div><div class="c" style="width:92px">名称代码</div></div>
                <div class="sc"><div class="c n" style="width:78px">委托数量/价格</div><div class="c n" style="width:62px">成交数量/价格</div><div class="c n" style="width:72px">委托时间</div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="dn">部撤</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">500<span class="sub">市价</span></div><div class="c n" style="width:62px">200<span class="sub">402.30</span></div><div class="c tm" style="width:72px">2026-06-30<i>10:12:00</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>平安银行<span class="chn">深股通</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">6,000<span class="sub">限价 39.85</span></div><div class="c n" style="width:62px">6,000<span class="sub">39.83</span></div><div class="c tm" style="width:72px">2026-06-30<i>09:45:12</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="gy">已撤销</span></div><div class="c" style="width:92px"><div class="sname"><b>苹果</b><span><i class="mk us">US</i>AAPL.US</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">100<span class="sub">限价 210.5000</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">2026-06-27<i>22:31:08</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="rj">废单</span></div><div class="c" style="width:92px"><div class="sname"><b>贵州茅台<span class="chn">QFII</span></b><span><i class="mk a">A</i>600519.SH</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">300<span class="sub">限价 301.00</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">2026-06-25<i>14:58:40</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">1,000<span class="sub">限价 398.20</span></div><div class="c n" style="width:62px">1,000<span class="sub">398.20</span></div><div class="c tm" style="width:72px">2026-06-20<i>10:02:11</i></div></div>
              </div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H19</div>
      <div class="cap-title">历史 · 快捷筛选下拉<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>三项快捷筛选点开就地下拉，不弹抽屉：方向（单选，H19c）· 名称代码（输入联想，H19b）· 状态（多选带勾，本帧）</li>
        <li>选定后胶囊回显所选值并变品牌色（多选用「/」连接）；与右侧「筛选」抽屉是同一份条件；点遮罩收起</li>
      </ul>
    </div>
  </div>

  <!-- ===== H6b 历史 Tab · 筛选无结果 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span>持仓</span><span>指令</span><span class="on">历史</span><span>查询</span></div>
          <div class="qfb"><span class="on">调减 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span class="on">苹果 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span class="on">废单 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span class="fmore on">筛选 <svg class="icn" viewBox="0 0 24 24"><use href="#i-filter"/></svg></span></div><div class="ptab" style="margin:0 16px;border-radius:14px"><div class="emptybox sm"><svg class="illu" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="il7b" x1="10" y1="14" x2="104" y2="90" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-a)"/><stop offset="1" stop-color="var(--il-b)"/></linearGradient><linearGradient id="il7f" x1="18" y1="42" x2="98" y2="94" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-c)"/><stop offset="1" stop-color="var(--il-a)"/></linearGradient></defs><path d="M12 86V22q0-8 8-8h24q4.2 0 6.8 3.3L56 23.4q2.4 3 6.2 3H100q8 0 8 8V86q0 8-8 8H20q-8 0-8-8Z" fill="url(#il7b)"/><path d="M8.6 42h102.8q4.8 0 3.9 4.7l-7.6 41q-.9 5-6 5H18.3q-5.1 0-6-5l-7.6-41Q3.8 42 8.6 42Z" fill="url(#il7f)"/></svg><div class="etxt">暂无数据</div></div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H6b</div>
      <div class="cap-title">历史 Tab · 筛选无结果<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>当前条件下没有指令（或票据还没有任何调仓指令）：表格位置出「暂无数据」，不出「查看全部」</li>
        <li>有非默认条件时对应胶囊与「筛选」都是品牌色；全部历史指令页（H17）无结果时同样处理</li>
        <li>不足 20 条时也不出「查看全部」</li>
      </ul>
    </div>
  </div>

  <!-- ===== H7 历史筛选 · 底部面板 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span>持仓</span><span>指令</span><span class="on">历史</span><span>查询</span></div>
          <div class="qfb"><span>方向 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span>名称代码 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span>状态 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span class="fmore">筛选 <svg class="icn" viewBox="0 0 24 24"><use href="#i-filter"/></svg></span></div><div class="ptab" style="margin:0 16px;border-radius:14px"><div class="r h">
                <div class="fz"><div class="c" style="width:48px">方向/状态</div><div class="c" style="width:92px">名称代码</div></div>
                <div class="sc"><div class="c n" style="width:78px">委托数量/价格</div><div class="c n" style="width:62px">成交数量/价格</div><div class="c n" style="width:72px">委托时间</div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="dn">部撤</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">500<span class="sub">市价</span></div><div class="c n" style="width:62px">200<span class="sub">402.30</span></div><div class="c tm" style="width:72px">2026-06-30<i>10:12:00</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>平安银行<span class="chn">深股通</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">6,000<span class="sub">限价 39.85</span></div><div class="c n" style="width:62px">6,000<span class="sub">39.83</span></div><div class="c tm" style="width:72px">2026-06-30<i>09:45:12</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="gy">已撤销</span></div><div class="c" style="width:92px"><div class="sname"><b>苹果</b><span><i class="mk us">US</i>AAPL.US</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">100<span class="sub">限价 210.5000</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">2026-06-27<i>22:31:08</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="rj">废单</span></div><div class="c" style="width:92px"><div class="sname"><b>贵州茅台<span class="chn">QFII</span></b><span><i class="mk a">A</i>600519.SH</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">300<span class="sub">限价 301.00</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">2026-06-25<i>14:58:40</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">1,000<span class="sub">限价 398.20</span></div><div class="c n" style="width:62px">1,000<span class="sub">398.20</span></div><div class="c tm" style="width:72px">2026-06-20<i>10:02:11</i></div></div>
              </div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="scrim bottom">
          <div class="dlg sheet fsheet" style="padding-bottom:18px">
            <div class="fsheet-hd"><b>历史指令筛选</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            <div class="fsec" style="padding-top:12px"><span class="lbl">方向</span><div class="optgrid" style="grid-template-columns:repeat(3,1fr);gap:9px"><span class="opt" style="height:36px">调增</span><span class="opt" style="height:36px">调减</span></div></div>
            <div class="fsec" style="padding-top:12px"><span class="lbl">市场（可多选）</span><div class="optgrid" style="grid-template-columns:repeat(3,1fr);gap:9px"><span class="opt on" style="height:36px">A股</span><span class="opt on" style="height:36px">港股</span><span class="opt" style="height:36px">美股</span></div></div>
            <div class="fsec" style="padding-top:12px"><span class="lbl">名称代码</span><div class="fsearch" style="margin:0;height:38px"><svg class="icn" viewBox="0 0 24 24"><use href="#i-search"/></svg>请输入证券名称或代码</div></div>
            <div class="fsec" style="padding-top:12px"><span class="lbl">状态（可多选）</span><div class="optgrid" style="grid-template-columns:repeat(4,1fr);gap:8px"><span class="opt" style="height:36px;font-size:13px">执行中</span><span class="opt on" style="height:36px;font-size:13px">已成交</span><span class="opt" style="height:36px;font-size:13px">已撤销</span><span class="opt" style="height:36px;font-size:13px">废单</span></div></div>
            <div class="fsec" style="padding-top:12px"><span class="lbl">委托日期</span><div class="optgrid" style="grid-template-columns:repeat(3,1fr);gap:9px"><span class="opt" style="height:34px;font-size:13px">近一周</span><span class="opt" style="height:34px;font-size:13px">近一月</span><span class="opt on" style="height:34px;font-size:13px">近三月</span></div>
              <div class="dtrow" style="margin-top:10px"><div class="dt"><em>开始日期</em><b>2026-03-30</b></div><div class="dt"><em>结束日期</em><b>2026-06-30</b></div></div></div>
            <div class="fsheet-ft" style="padding-top:16px"><span class="btn ghost">重置</span><span class="btn">确定</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H7</div>
      <div class="cap-title">历史筛选 · 底部面板<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>五项：方向（单选）· 市场（多选）· 名称代码（模糊，忽略首尾空格，代码不分大小写）· 状态（多选）· 委托日期（快捷 + 起止日期，最长 1 年、不可选未来，日期滚轮见 H7b）</li>
        <li>状态四档聚合：执行中 = 未报 / 待报 / 已报 / 部分成交 / 待改 / 待撤 / 部成待撤；已成交 = 部撤 / 部废 / 已成交；已撤销；废单</li>
        <li>项间「且」、项内「或」；「重置」回默认（近三月），「确定」才生效</li>
      </ul>
    </div>
  </div>

  <!-- ===== H7b 历史筛选 · 自定义日期 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span>持仓</span><span>指令</span><span class="on">历史</span><span>查询</span></div>
          <div class="qfb"><span>方向 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span>名称代码 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span>状态 <svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></span><span class="fmore">筛选 <svg class="icn" viewBox="0 0 24 24"><use href="#i-filter"/></svg></span></div><div class="ptab" style="margin:0 16px;border-radius:14px"><div class="r h">
                <div class="fz"><div class="c" style="width:48px">方向/状态</div><div class="c" style="width:92px">名称代码</div></div>
                <div class="sc"><div class="c n" style="width:78px">委托数量/价格</div><div class="c n" style="width:62px">成交数量/价格</div><div class="c n" style="width:72px">委托时间</div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="dn">部撤</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">500<span class="sub">市价</span></div><div class="c n" style="width:62px">200<span class="sub">402.30</span></div><div class="c tm" style="width:72px">2026-06-30<i>10:12:00</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>平安银行<span class="chn">深股通</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">6,000<span class="sub">限价 39.85</span></div><div class="c n" style="width:62px">6,000<span class="sub">39.83</span></div><div class="c tm" style="width:72px">2026-06-30<i>09:45:12</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="gy">已撤销</span></div><div class="c" style="width:92px"><div class="sname"><b>苹果</b><span><i class="mk us">US</i>AAPL.US</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">100<span class="sub">限价 210.5000</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">2026-06-27<i>22:31:08</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="rj">废单</span></div><div class="c" style="width:92px"><div class="sname"><b>贵州茅台<span class="chn">QFII</span></b><span><i class="mk a">A</i>600519.SH</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">300<span class="sub">限价 301.00</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">2026-06-25<i>14:58:40</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">1,000<span class="sub">限价 398.20</span></div><div class="c n" style="width:62px">1,000<span class="sub">398.20</span></div><div class="c tm" style="width:72px">2026-06-20<i>10:02:11</i></div></div>
              </div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="scrim bottom">
          <div class="dlg sheet fsheet" style="padding-bottom:18px">
            <div class="fsheet-hd"><b>历史指令筛选</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            <div class="fsec" style="padding-top:12px"><span class="lbl">方向</span><div class="optgrid" style="grid-template-columns:repeat(3,1fr);gap:9px"><span class="opt" style="height:36px">调增</span><span class="opt" style="height:36px">调减</span></div></div>
            <div class="fsec" style="padding-top:12px"><span class="lbl">市场（可多选）</span><div class="optgrid" style="grid-template-columns:repeat(3,1fr);gap:9px"><span class="opt on" style="height:36px">A股</span><span class="opt on" style="height:36px">港股</span><span class="opt" style="height:36px">美股</span></div></div>
            <div class="fsec" style="padding-top:12px"><span class="lbl">名称代码</span><div class="fsearch" style="margin:0;height:38px"><svg class="icn" viewBox="0 0 24 24"><use href="#i-search"/></svg>请输入证券名称或代码</div></div>
            <div class="fsec" style="padding-top:12px"><span class="lbl">状态（可多选）</span><div class="optgrid" style="grid-template-columns:repeat(4,1fr);gap:8px"><span class="opt" style="height:36px;font-size:13px">执行中</span><span class="opt on" style="height:36px;font-size:13px">已成交</span><span class="opt" style="height:36px;font-size:13px">已撤销</span><span class="opt" style="height:36px;font-size:13px">废单</span></div></div>
            <div class="fsec" style="padding-top:12px"><span class="lbl">委托日期</span><div class="optgrid" style="grid-template-columns:repeat(3,1fr);gap:9px"><span class="opt" style="height:34px;font-size:13px">近一周</span><span class="opt" style="height:34px;font-size:13px">近一月</span><span class="opt" style="height:34px;font-size:13px">近三月</span></div>
              <div class="dtrow" style="margin-top:10px"><div class="dt act"><em>开始日期</em><b>2026-01-15</b></div><div class="dt"><em>结束日期</em><b>2026-06-30</b></div></div></div>
            <div class="wheel" style="margin-top:8px"><div class="band"></div>
              <div class="wcol"><span class="far">&nbsp;</span><span>2025年</span><span class="now">2026年</span><span>&nbsp;</span><span class="far">&nbsp;</span></div>
              <div class="wcol"><span class="far">&nbsp;</span><span>&nbsp;</span><span class="now">1月</span><span>2月</span><span class="far">3月</span></div>
              <div class="wcol"><span class="far">13日</span><span>14日</span><span class="now">15日</span><span>16日</span><span class="far">17日</span></div>
            </div>
            <div class="fsheet-ft" style="padding-top:10px"><span class="btn ghost">重置</span><span class="btn">确定</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H7b</div>
      <div class="cap-title">历史筛选 · 自定义日期<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>点「开始日期 / 结束日期」在抽屉内展开年月日滚轮（同 <code>03</code> O13），当前编辑的一格品牌描边；手改日期后快捷项取消选中</li>
        <li>跨度最长 1 年、不可选未来日期（超出的滚轮项不可选）；开始晚于结束点「确定」：Toast「开始日期不可晚于结束日期」</li>
        <li>「重置」回默认近三月并清空其余四项</li>
      </ul>
    </div>
  </div>

  <!-- ===== H17 全部历史指令 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>全部历史指令</h2><span class="nfic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-filter"/></svg></span></div>
        <div class="body" style="padding-top:12px">
          <div class="ptab" style="margin:0 16px;border-radius:14px"><div class="r h">
                <div class="fz"><div class="c" style="width:48px">方向/状态</div><div class="c" style="width:92px">名称代码</div></div>
                <div class="sc"><div class="c n" style="width:78px">委托数量/价格</div><div class="c n" style="width:62px">成交数量/价格</div><div class="c n" style="width:72px">委托时间</div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="dn">部撤</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">500<span class="sub">市价</span></div><div class="c n" style="width:62px">200<span class="sub">402.30</span></div><div class="c tm" style="width:72px">2026-06-30<i>10:12:00</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>平安银行<span class="chn">深股通</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">6,000<span class="sub">限价 39.85</span></div><div class="c n" style="width:62px">6,000<span class="sub">39.83</span></div><div class="c tm" style="width:72px">2026-06-30<i>09:45:12</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="gy">已撤销</span></div><div class="c" style="width:92px"><div class="sname"><b>苹果</b><span><i class="mk us">US</i>AAPL.US</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">100<span class="sub">限价 210.5000</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">2026-06-27<i>22:31:08</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="rj">废单</span></div><div class="c" style="width:92px"><div class="sname"><b>贵州茅台<span class="chn">QFII</span></b><span><i class="mk a">A</i>600519.SH</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">300<span class="sub">限价 301.00</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">2026-06-25<i>14:58:40</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">1,000<span class="sub">限价 398.20</span></div><div class="c n" style="width:62px">1,000<span class="sub">398.20</span></div><div class="c tm" style="width:72px">2026-06-20<i>10:02:11</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>苹果</b><span><i class="mk us">US</i>AAPL.US</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">200<span class="sub">限价 211.8000</span></div><div class="c n" style="width:62px">200<span class="sub">211.8000</span></div><div class="c tm" style="width:72px">2026-06-18<i>23:05:44</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>贵州茅台<span class="chn">QFII</span></b><span><i class="mk a">A</i>600519.SH</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">500<span class="sub">TWAP · 限价 300.00</span></div><div class="c n" style="width:62px">500<span class="sub">299.86</span></div><div class="c tm" style="width:72px">2026-06-16<i>10:30:00</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-dn">调减</b><span class="gy">已撤销</span></div><div class="c" style="width:92px"><div class="sname"><b>平安银行<span class="chn">QFII</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">1,000<span class="sub">限价 40.20</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">2026-06-12<i>14:10:05</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="dn">已成交</span></div><div class="c" style="width:92px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">500<span class="sub">POV · 市价</span></div><div class="c n" style="width:62px">500<span class="sub">396.40</span></div><div class="c tm" style="width:72px">2026-06-10<i>11:20:31</i></div></div>
              </div><div class="r">
                <div class="fz"><div class="c dir" style="width:48px"><b class="dir-up">调增</b><span class="rj">废单</span></div><div class="c" style="width:92px"><div class="sname"><b>苹果</b><span><i class="mk us">US</i>AAPL.US</span></div></div></div>
                <div class="sc"><div class="c n" style="width:78px">300<span class="sub">限价 198.0000</span></div><div class="c n" style="width:62px">0<span class="sub">--</span></div><div class="c tm" style="width:72px">2026-06-08<i>21:47:19</i></div></div>
              </div></div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H17</div>
      <div class="cap-title">全部历史指令<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>历史 Tab「查看全部 &gt;」进入：全部调仓指令按委托时间倒序，不再截 20 条（上拉加载同 <code>05</code> P5–P7）</li>
        <li>导航栏右侧筛选图标开同一个抽屉（H7），条件与历史 Tab 联动；有非默认条件时图标品牌色</li>
      </ul>
    </div>
  </div>

  <!-- ===== H8 调仓指令详情 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>调仓指令详情</h2></div>
        <div class="body">
          <div class="gtitle">指令详情</div>
          <div class="card dcard"><div class="frow"><span>调整方向</span><b><span class="dir-up">调增</span></b></div><div class="frow"><span>指令状态</span><b>部分成交</b></div><div class="frow"><span>市场</span><b>A股</b></div><div class="frow"><span>代码名称</span><b class="m">000001.SZ 平安银行</b></div><div class="frow"><span>交易渠道</span><b>深股通</b></div><div class="frow"><span>指令类型</span><b>限价单</b></div><div class="frow"><span>委托数量</span><b>10,000</b></div><div class="frow"><span>委托价格</span><b>限价 39.80 CNY</b></div><div class="frow"><span>成交数量</span><b>4,000</b></div><div class="frow"><span>成交价格</span><b>39.78 CNY</b></div><div class="frow"><span>成交金额</span><b>159,120.00 CNY</b></div><div class="frow"><span>委托时间</span><b>2026-06-30 10:01:23</b></div><div class="frow"><span>指令编号</span><b class="m">AD20260630001</b></div></div>
          <div class="gtitle">费用详情</div>
          <div class="card dcard"><div class="frow"><span>佣金</span><b>95.47 CNY</b></div><div class="frow"><span>平台费</span><b>15.00 CNY</b></div><div class="frow"><span>规费</span><b>3.18 CNY</b></div><div class="frow"><span>合计费用</span><b class="em">113.65 CNY</b></div></div>
          <div class="gtitle">资金情况</div>
          <div class="card dcard"><div class="frow"><span>结算币种</span><b>HKD</b></div><div class="frow"><span>结算汇率</span><b>1.085000</b></div><div class="frow"><span>发生金额（交易币种）</span><b>-159,233.65 CNY</b></div><div class="frow"><span>发生金额（结算币种）</span><b>-172,768.51 HKD</b></div></div>
        </div>
        <div class="bbar2"><span class="btn ghost">改单</span><span class="btn ghost">撤单</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H8</div>
      <div class="cap-title">调仓指令详情<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>三组：指令详情 13 行（委托价格 = 价格要求 + 价格）· 费用详情（逐项 + 合计，未成交时没有明细）· 资金情况（结算币种、结算汇率、交易 / 结算币种发生金额）</li>
        <li>底栏「改单 · 撤单」，置灰规则同列表（置灰见 H18）；已完成指令没有底栏（H8b）</li>
      </ul>
    </div>
  </div>

  <!-- ===== H18 调仓指令详情 · 未成交 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>调仓指令详情</h2></div>
        <div class="body"><div style="margin-top:-330px">
          <div class="gtitle">指令详情</div>
          <div class="card dcard"><div class="frow"><span>调整方向</span><b><span class="dir-dn">调减</span></b></div><div class="frow"><span>指令状态</span><b>待报</b></div><div class="frow"><span>市场</span><b>A股</b></div><div class="frow"><span>代码名称</span><b class="m">600519.SH 贵州茅台</b></div><div class="frow"><span>交易渠道</span><b>QFII</b></div><div class="frow"><span>指令类型</span><b>限价单</b></div><div class="frow"><span>委托数量</span><b>200</b></div><div class="frow"><span>委托价格</span><b>限价 301.00 CNY</b></div><div class="frow"><span>成交数量</span><b>0</b></div><div class="frow"><span>成交价格</span><b class="mu">--</b></div><div class="frow"><span>成交金额</span><b class="mu">--</b></div><div class="frow"><span>委托时间</span><b>2026-06-30 10:05:40</b></div><div class="frow"><span>指令编号</span><b class="m">RD20260630002</b></div></div>
          <div class="gtitle">费用详情</div>
          <div class="card dcard"><div class="emptybox row"><svg class="illu" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="il3b" x1="10" y1="14" x2="104" y2="90" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-a)"/><stop offset="1" stop-color="var(--il-b)"/></linearGradient><linearGradient id="il3f" x1="18" y1="42" x2="98" y2="94" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-c)"/><stop offset="1" stop-color="var(--il-a)"/></linearGradient></defs><path d="M12 86V22q0-8 8-8h24q4.2 0 6.8 3.3L56 23.4q2.4 3 6.2 3H100q8 0 8 8V86q0 8-8 8H20q-8 0-8-8Z" fill="url(#il3b)"/><path d="M8.6 42h102.8q4.8 0 3.9 4.7l-7.6 41q-.9 5-6 5H18.3q-5.1 0-6-5l-7.6-41Q3.8 42 8.6 42Z" fill="url(#il3f)"/></svg><div class="etxt">暂无成交，无费用明细</div></div></div>
          <div class="gtitle">资金情况</div>
          <div class="card dcard"><div class="frow"><span>结算币种</span><b>HKD</b></div><div class="frow"><span>结算汇率</span><b>1.090000</b></div><div class="frow"><span>发生金额（交易币种）</span><b class="mu">--</b></div><div class="frow"><span>发生金额（结算币种）</span><b class="mu">--</b></div></div>
        </div></div>
        <div class="bbar2"><span class="btn off">改单</span><span class="btn off">撤单</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H18</div>
      <div class="cap-title">调仓指令详情 · 未成交<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>未成交时费用详情只有一行空态「暂无成交，无费用明细」，成交价格 / 成交金额 / 发生金额都为 --</li>
        <li>待报：改单、撤单都置灰（只有已报、部分成交可操作）；市价单只有美股可改单</li>
      </ul>
    </div>
  </div>

  <!-- ===== H8b 调仓指令详情 · 已完成（港股） ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>调仓指令详情</h2></div>
        <div class="body"><div style="margin-top:-590px">
          <div class="gtitle">指令详情</div>
          <div class="card dcard"><div class="frow"><span>调整方向</span><b><span class="dir-dn">调减</span></b></div><div class="frow"><span>指令状态</span><b>部撤</b></div><div class="frow"><span>市场</span><b>港股</b></div><div class="frow"><span>代码名称</span><b class="m">00700.HK 腾讯控股</b></div><div class="frow"><span>交易渠道</span><b class="mu">--</b></div><div class="frow"><span>指令类型</span><b>市价单</b></div><div class="frow"><span>委托数量</span><b>500</b></div><div class="frow"><span>委托价格</span><b>市价</b></div><div class="frow"><span>成交数量</span><b>200</b></div><div class="frow"><span>成交价格</span><b>402.30 HKD</b></div><div class="frow"><span>成交金额</span><b>80,460.00 HKD</b></div><div class="frow"><span>委托时间</span><b>2026-06-30 10:12:00</b></div><div class="frow"><span>指令编号</span><b class="m">RD20260630011</b></div></div>
          <div class="gtitle">费用详情</div>
          <div class="card dcard"><div class="frow"><span>佣金</span><b>64.37 HKD</b></div><div class="frow"><span>平台费</span><b>15.00 HKD</b></div><div class="frow"><span>印花税</span><b>80.46 HKD</b></div><div class="frow"><span>交易费</span><b>4.55 HKD</b></div><div class="frow"><span>交易征费</span><b>2.17 HKD</b></div><div class="frow"><span>结算费</span><b>2.00 HKD</b></div><div class="frow"><span>合计费用</span><b class="em">168.55 HKD</b></div></div>
          <div class="gtitle">资金情况</div>
          <div class="card dcard"><div class="frow"><span>结算币种</span><b>HKD</b></div><div class="frow"><span>结算汇率</span><b>1.000000</b></div><div class="frow"><span>发生金额（交易币种）</span><b>80,291.45 HKD</b></div><div class="frow"><span>发生金额（结算币种）</span><b>80,291.45 HKD</b></div></div>
          <div style="height:20px"></div>
        </div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H8b</div>
      <div class="cap-title">调仓指令详情 · 已完成（港股）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>已完成 / 历史指令（已成交 · 部撤 · 部废 · 已撤销 · 废单）进详情<b>没有底栏</b>，只读</li>
        <li>费用详情按市场与方向列实际收取的项：港股为佣金 · 平台费 · 印花税 · 交易费 · 交易征费 · 结算费；A股调减多印花税，美股调减多证监会费、交易活动费；末行「合计费用」</li>
        <li>非 A股没有交易渠道，该行显示 --；发生金额本稿按调减为正、调增为负（H8），原型不带符号、需求没写，待产品确认</li>
      </ul>
    </div>
  </div>

  <!-- ===== H9 查询 Tab · 菜单 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span>持仓</span><span>指令</span><span>历史</span><span class="on">查询</span></div>
          <div class="menu qmenu"><div class="mi"><span class="tx">可交易证券清单</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div><div class="mi"><span class="tx">费用信息</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div><div class="mi"><span class="tx">现金提取记录</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div><div class="mi"><span class="tx">票据变更记录</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div><div class="mi"><span class="tx">账簿余额变动记录</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div><div class="mi"><span class="tx">持仓变动记录</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H9</div>
      <div class="cap-title">查询 Tab · 菜单<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>六个入口，顺序固定：可交易证券清单 · 费用信息 · 现金提取记录 · 票据变更记录 · 账簿余额变动记录 · 持仓变动记录（各子页见 <code>11</code> E1–E10）</li>
        <li>子页返回时回到本票据的查询 Tab</li>
      </ul>
    </div>
  </div>

  <!-- ===== H10 更多 · 底部抽屉 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260618001</div><div class="se">系列号 003</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>3,855,909.95<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>4,799,251.23</b></div><div><span>总资产</span><b>11,862,923.63</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>7,063,672.40</b></div><div><span>融资金额</span><b>8,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span class="on">持仓</span><span>指令</span><span>历史</span><span>查询</span></div>
          <div class="ptab" style="margin:12px 16px 0;border-radius:14px"><div class="r h">
                <div class="fz"><div class="c" style="width:104px">名称代码</div></div>
                <div class="sc"><div class="c n" style="width:96px">市值<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg><span class="sub">交易 / 结算币种</span></div><div class="c n" style="width:58px">持仓/可用<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></div><div class="c n" style="width:56px">现价/成本<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></div><div class="c n" style="width:72px">浮动盈亏<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg><span class="sub">HKD</span></div><div class="c n" style="width:56px">盈亏比例<svg class="icn" viewBox="0 0 24 24"><use href="#i-sortv"/></svg></div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>平安银行<span class="chn">深股通</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>565,586.00 CNY</b><span class="sub">655,967.12 HKD</span></div><div class="c n" style="width:58px">14,200<span class="sub">0</span></div><div class="c n" style="width:56px">39.83<span class="sub">40.91</span></div><div class="c n down" style="width:72px">-17,847.08</div><div class="c n down" style="width:56px">-2.65%</div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>平安银行<span class="chn">QFII</span></b><span><i class="mk a">A</i>000001.SZ</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>199,150.00 CNY</b><span class="sub">217,073.50 HKD</span></div><div class="c n" style="width:58px">5,000<span class="sub">5,000</span></div><div class="c n" style="width:56px">39.83<span class="sub">38.50</span></div><div class="c n up" style="width:72px">+6,650.00</div><div class="c n up" style="width:56px">+3.45%</div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>贵州茅台<span class="chn">沪股通</span></b><span><i class="mk a">A</i>600519.SH</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>533,214.00 CNY</b><span class="sub">618,422.04 HKD</span></div><div class="c n" style="width:58px">1,800<span class="sub">1,800</span></div><div class="c n" style="width:56px">296.23<span class="sub">331.18</span></div><div class="c n down" style="width:72px">-72,971.25</div><div class="c n down" style="width:56px">-10.55%</div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>腾讯控股</b><span><i class="mk hk">HK</i>00700.HK</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>805,200.00 HKD</b><span class="sub">805,200.00 HKD</span></div><div class="c n" style="width:58px">2,000<span class="sub">2,000</span></div><div class="c n" style="width:56px">402.60<span class="sub">380.50</span></div><div class="c n up" style="width:72px">+44,200.00</div><div class="c n up" style="width:56px">+5.81%</div></div>
              </div><div class="r">
                <div class="fz"><div class="c" style="width:104px"><div class="sname"><b>苹果</b><span><i class="mk us">US</i>AAPL.US</span></div></div></div>
                <div class="sc"><div class="c n" style="width:96px"><b>254,880.00 USD</b><span class="sub">1,988,064.00 HKD</span></div><div class="c n" style="width:58px">1,200<span class="sub">1,200</span></div><div class="c n" style="width:56px">212.40<span class="sub">185.30</span></div><div class="c n up" style="width:72px">+42,378.00</div><div class="c n up" style="width:56px">+12.78%</div></div>
              </div></div>
        </div>
        <div class="abar"><span class="btn ghost">追保</span><span class="btn pri">调仓</span><span class="btn ghost more">更多</span></div>
        <div class="scrim bottom">
          <div class="dlg sheet asheet">
            <div class="ah">更多操作</div>
            <div class="ai">新增可交易证券</div><div class="ai">现金提取</div><div class="ai">票据变更</div><div class="ai">卖出</div>
            <div class="gap"></div><div class="ai cancel">取消</div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H10</div>
      <div class="cap-title">更多 · 底部抽屉<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>底栏「更多」收纳：新增可交易证券 · 现金提取 · 票据变更 · 卖出；底部「取消」</li>
        <li>各项流程见 <code>11</code>：K13 新增可交易证券、K3 现金提取、K4 票据变更、K5 卖出</li>
      </ul>
    </div>
  </div>

  <!-- ===== H11 票据详情 · 已卖出 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260410003</div><div class="se">系列号 002</div></div><span class="tag t-mute">已卖出</span></div>
            <div class="vl"><div><span>票据估值</span><b>0.00<small>HKD</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>0.00</b></div><div><span>总资产</span><b>0.00</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>0.00</b></div><div><span>融资金额</span><b>0.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span class="on">持仓</span><span>指令</span><span>历史</span><span>查询</span></div>
          <div class="emptyslot" style="padding:60px 0 0;flex:none"><div class="emptybox sm"><svg class="illu" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="il1b" x1="10" y1="14" x2="104" y2="90" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-a)"/><stop offset="1" stop-color="var(--il-b)"/></linearGradient><linearGradient id="il1f" x1="18" y1="42" x2="98" y2="94" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-c)"/><stop offset="1" stop-color="var(--il-a)"/></linearGradient></defs><path d="M12 86V22q0-8 8-8h24q4.2 0 6.8 3.3L56 23.4q2.4 3 6.2 3H100q8 0 8 8V86q0 8-8 8H20q-8 0-8-8Z" fill="url(#il1b)"/><path d="M8.6 42h102.8q4.8 0 3.9 4.7l-7.6 41q-.9 5-6 5H18.3q-5.1 0-6-5l-7.6-41Q3.8 42 8.6 42Z" fill="url(#il1f)"/></svg><div class="etxt">暂无持仓</div></div></div>
        </div>
        
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H11</div>
      <div class="cap-title">票据详情 · 已卖出<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li><b>已卖出、或存续期但有在途卖出订单（H11b）</b>时不出底部操作栏；详情、各 Tab 与查询照常可看</li>
        <li>已卖出票据数值归零，净值「--」；持仓 Tab 空态用紧凑档插画</li>
      </ul>
    </div>
  </div>

  <!-- ===== H11b 票据详情 · 有在途卖出订单 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>票据详情</h2></div>
        <div class="body">
          <div class="card sumc">
            <div class="hd"><div><div class="no">TRN20260520002</div><div class="se">系列号 001</div></div><span class="tag t-brand">存续期</span></div>
            <div class="vl"><div><span>票据估值</span><b>1,820,000.00<small>CNY</small></b></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></div>
            <div class="g3"><div><span>持仓市值</span><b>0.00</b></div><div><span>总资产</span><b>2,826,400.00</b></div><div><span>风险状态</span><b><span class="rk-ok">正常</span></b></div><div><span>账簿余额</span><b>2,826,400.00</b></div><div><span>融资金额</span><b>1,000,000.00</b></div><div><span>交易限制</span><b><span class="rk-ok">不限</span></b></div></div>
          </div>
          <div class="tabs dtabs"><span class="on">持仓</span><span>指令</span><span>历史</span><span>查询</span></div>
          <div class="emptyslot" style="padding:60px 0 0;flex:none"><div class="emptybox sm"><svg class="illu" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="il5b" x1="10" y1="14" x2="104" y2="90" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-a)"/><stop offset="1" stop-color="var(--il-b)"/></linearGradient><linearGradient id="il5f" x1="18" y1="42" x2="98" y2="94" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-c)"/><stop offset="1" stop-color="var(--il-a)"/></linearGradient></defs><path d="M12 86V22q0-8 8-8h24q4.2 0 6.8 3.3L56 23.4q2.4 3 6.2 3H100q8 0 8 8V86q0 8-8 8H20q-8 0-8-8Z" fill="url(#il5b)"/><path d="M8.6 42h102.8q4.8 0 3.9 4.7l-7.6 41q-.9 5-6 5H18.3q-5.1 0-6-5l-7.6-41Q3.8 42 8.6 42Z" fill="url(#il5f)"/></svg><div class="etxt">暂无持仓</div></div></div>
        </div>
        
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">H11b</div>
      <div class="cap-title">票据详情 · 有在途卖出订单<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>存续期，但有在途卖出订单（未报 / 待报 / 待处理 / 撤单中）：<b>不出底部操作栏</b>，票据不能再做任何操作；各 Tab 与查询照常可看</li>
        <li>发起卖出前持仓须全部调减，所以此时持仓 Tab 为空、持仓市值 0.00，估值等数值仍在（与已卖出的 H11 归零不同）</li>
        <li>卖出订单被拒绝 / 撤单后底栏恢复；原型此状态仍显示底栏、靠提交时 Toast 拦截，本稿取需求 2.3.3</li>
      </ul>
    </div>
  </div>

  </div>
</div>

<div class="sec" style="margin-bottom:20px">
  <div class="sec-head"><span class="sec-num">04</span><span class="sec-name">订单与指令状态 · 展示与按钮</span><span class="sec-rule"></span><span class="sec-note">状态点沿用设计系统 StatusSemantic；按钮按真实状态控制</span></div>
  <table class="spec">
    <tr><th style="width:90px">订单</th><th style="width:110px">真实状态</th><th style="width:130px">客户端展示</th><th style="width:220px">卡片按钮</th><th>说明</th></tr>
    <tr><td><b>买入</b></td><td>待处理</td><td>琥珀空心「待处理」</td><td>详情 · 拒绝 · 确认买入</td><td>有待处理时「买入订单」挂红点；排在最前</td></tr>
    <tr><td><b>买入</b></td><td>确认中</td><td>品牌空心「确认中」</td><td>无</td><td>防重复提交的中间态，转发发行端处理中</td></tr>
    <tr><td><b>买入</b></td><td>已完成 / 已结算</td><td>绿「已完成」/ 灰实心「已结算」</td><td>无</td><td>已完成触发生成票据；日切后转已结算</td></tr>
    <tr><td><b>买入</b></td><td>已拒绝 / 已撤</td><td>红「已拒绝」/ 浅灰「已撤」</td><td>无</td><td>已撤 = 发行方在客户确认前撤单</td></tr>
    <tr><td><b>卖出</b></td><td>未报 · 待处理</td><td>「待处理」</td><td>详情 · 撤单（可点）</td><td>未报直接撤；待处理转撤单中</td></tr>
    <tr><td><b>卖出</b></td><td>待报 · 撤单中</td><td>「待处理」</td><td>详情 · 撤单（置灰）</td><td>四种都算在途：不允许再次卖出，待处理 / 撤单中锁定票据</td></tr>
    <tr><td><b>卖出</b></td><td>已完成 / 已结算 / 已拒绝 / 已撤</td><td>同买入配色</td><td>无</td><td>已拒绝详情多一行红字拒绝原因；状态筛选不含未报 / 待报 / 撤单中</td></tr>
    <tr><td><b>调仓指令</b></td><td>已报 · 部分成交</td><td>琥珀字，按真实状态</td><td>详情 · 改单 · 撤单</td><td>未完成；市价单只有美股可改单；发行端强平调减单不可改不可撤</td></tr>
    <tr><td><b>调仓指令</b></td><td>未报 · 待报 · 待改</td><td>琥珀字，按真实状态</td><td>详情 · 改单（灰）· 撤单（灰）</td><td>未完成；报单 / 改单处理中（H5c）</td></tr>
    <tr><td><b>调仓指令</b></td><td>待撤 · 部成待撤</td><td>灰字，按真实状态</td><td>详情 · 改单（灰）· 撤单（灰）</td><td>未完成；撤单处理中</td></tr>
    <tr><td><b>调仓指令</b></td><td>已成交 · 部撤 · 部废</td><td>绿字，按真实状态</td><td>无，点行进详情</td><td>已完成 / 历史；筛选归「已成交」</td></tr>
    <tr><td><b>调仓指令</b></td><td>已撤销 / 废单</td><td>灰字 / 红字</td><td>无，点行进详情</td><td>已完成 / 历史；详情没有底栏（H8b）</td></tr>
  </table>
</div>

<script>
(function(){
  var root=document.documentElement,btns=document.querySelectorAll('.skin button');
  document.querySelectorAll('[data-clone]').forEach(function(el){
    var src=document.querySelector(el.getAttribute('data-clone'));
    if(src) el.innerHTML=src.innerHTML;
  });
  function set(t){
    root.setAttribute('data-theme',t);
    btns.forEach(function(b){b.classList.toggle('on',b.dataset.set===t)});
    document.querySelectorAll('.phone:not([data-lock])').forEach(function(p){p.setAttribute('data-theme',t)});
    try{localStorage.setItem('hh-skin',t)}catch(e){}
  }
  btns.forEach(function(b){b.addEventListener('click',function(){set(b.dataset.set)})});
  document.body.setAttribute('data-h',String(document.body.scrollHeight));
  var hash=(location.hash||'').replace('#','');
  var saved=null;try{saved=localStorage.getItem('hh-skin')}catch(e){}
  set(hash==='dark'||hash==='light'?hash:(saved||'light'));
})();
</script>
</body>
</html>