yuanxin
/
APP_UI


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581
							<!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}

/* 登录页（同 01 L2，代码 SignInScreen） */
.lgtop{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 18px 0 20px;flex:none}
.lgtop .lang{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2)}
.lgtop .icn{width:18px;height:18px;color:var(--ink-2)}
.lgtop .hp .icn{width:22px;height:22px;color:var(--ink-3)}
.lgbody{padding:18px 26px 0}
.lgbody .mark{width:56px;height:56px;border-radius:16px;display:block}
.lgbody h1{font-size:25px;font-weight:600;letter-spacing:.02em;margin-top:22px}
.lgbody .sub{font-size:13.5px;color:var(--ink-3);margin-top:8px}
.lgbody .fld{margin-top:30px}
.lgbody .fld+.fld{margin-top:16px}
.lgbody .field .ph{color:var(--ink-4)}
.lgbody .field .tr{margin-left:auto;color:var(--ink-3);display:flex}
.lgbody .field .tr .icn{width:16px;height:16px}
.lgbody .btn{margin-top:26px}
.lgfoot{position:absolute;left:0;right:0;bottom:30px;text-align:center;font-size:11px;color:var(--ink-4);line-height:1.7}
.lgfoot b{font-weight:400;color:var(--ink-2)}
.lgapply{margin-top:20px;text-align:center;font-size:14.5px;color:var(--brand);font-weight:550;letter-spacing:.04em}
/* 步骤条 */
.steps{display:flex;padding:14px 10px 12px;background:var(--surface);border-bottom:1px solid var(--line);flex:none}
.step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;font-size:11.5px;color:var(--ink-3)}
.step::before{content:"";position:absolute;top:11px;left:calc(-50% + 15px);right:calc(50% + 15px);height:1.5px;background:var(--line-2)}
.step:first-child::before{display:none}
.step .dot{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:11px;font-family:var(--font-num);color:var(--ink-3);position:relative;z-index:1}
.step .dot .icn{width:12px;height:12px;stroke-width:2.6}
.step .tx{margin-top:6px;white-space:nowrap}
.step.done .dot{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.step.done::before,.step.on::before{background:var(--brand)}
.step.on .dot{border-color:var(--brand);color:var(--brand);font-weight:600;box-shadow:0 0 0 3px var(--brand-weak)}
.step.on .tx{color:var(--ink-1);font-weight:600}
.step.done .tx{color:var(--ink-2)}
.res .steps{background:none;border:0;margin-top:30px;padding:0;width:100%}
/* 页内标题 */
.h1{font-size:18px;font-weight:600;padding:20px 20px 12px;letter-spacing:.02em}
/* 品类选项 */
.copt{margin:0 16px 10px;display:flex;align-items:center;gap:12px;padding:16px 15px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.copt.on{border-color:var(--brand);background:var(--brand-weak)}
.copt .cb{width:20px;height:20px;border-radius:6px}
.copt .cb .icn{width:13px;height:13px}
.copt b{font-size:15px;font-weight:600}
/* 协议列表 */
.sgn .frow>span{color:var(--ink-1);white-space:normal;flex:1;line-height:1.5}
.sgn .frow>b{flex:none}
.sgst{font-size:12px;color:var(--accent);background:var(--accent-weak);padding:2px 9px;border-radius:10px;font-family:"PingFang SC",system-ui,sans-serif}
.sgok{color:var(--ok);display:flex;align-items:center;gap:3px;font-size:12.5px;font-family:"PingFang SC",system-ui,sans-serif}
.sgok .icn{width:14px;height:14px;stroke-width:2.4}
.ftbar{display:flex;gap:11px;padding:12px 16px 30px;background:var(--surface);border-top:1px solid var(--line);flex:none}
.ftbar .btn{flex:1;box-shadow:none}
.ftbar .btn.ghost{flex:.72}
.ftbar.eq .btn.ghost{flex:1}
/* 协议阅读面板 */
.reader{height:772px;display:flex;flex-direction:column;padding-bottom:30px}
.reader .rh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 18px 4px}
.reader .rh b{font-size:15.5px;font-weight:600;line-height:1.45}
.reader .rh .icn{color:var(--ink-3);flex:none;margin-top:2px}
.reader .rmeta{padding:0 18px 12px;font-size:11.5px;color:var(--ink-3)}
.reader .rbox{flex:1;margin:0 16px;border-radius:12px;background:var(--surface-2);padding:14px 16px 14px 14px;font-size:13px;line-height:1.95;color:var(--ink-2);overflow:hidden;position:relative}
.reader .rbox p+p{margin-top:9px}
.reader .rbox h6{font-size:13px;font-weight:600;color:var(--ink-1);margin:12px 0 2px}
.reader .rbox h6:first-child{margin-top:0}
.reader .rbox .end{margin-top:14px;text-align:center;font-size:12px;color:var(--ink-3);letter-spacing:.04em}
.reader .rbar{position:absolute;right:4px;width:3px;height:90px;border-radius:2px;background:var(--line-2)}
.reader .rbtn{padding:14px 16px 0}
.reader .rbtn .btn{box-shadow:none}
/* 结果 / 拦截页 */
.res{display:flex;flex-direction:column;align-items:center;text-align:center;padding:76px 30px 0}
.res .bic{width:68px;height:68px;border-radius:34px;display:flex;align-items:center;justify-content:center}
.res .bic .icn{width:32px;height:32px;stroke-width:2}
.res .bic.ok{background:var(--ok-weak);color:var(--ok)}
.res .bic.warn{background:var(--warn-weak);color:var(--warn)}
.res .bic.fail{background:var(--danger-weak);color:var(--danger)}
.res .bic.wait{background:var(--brand-weak);color:var(--brand)}
.res h3{margin-top:20px;font-size:18px;font-weight:600;letter-spacing:.02em;line-height:1.5}
.res h3 b{color:var(--brand);font-weight:600}
.res p{margin-top:10px;font-size:13.5px;color:var(--ink-3);line-height:1.75}
/* 资格校验 */
.qual{margin:22px 16px 0}
.qual .frow>span{white-space:normal;flex:1;color:var(--ink-1);line-height:1.5}
.qual .frow>b{flex:none}
.qst{font-size:12.5px;display:inline-flex;align-items:center;gap:5px;font-weight:500;font-family:"PingFang SC",system-ui,sans-serif}
.qst i{width:6px;height:6px;border-radius:50%;background:currentColor}
.qst.ok{color:var(--ok)} .qst.wait{color:var(--accent)} .qst.go{color:var(--brand)}
.qst.go .icn{width:13px;height:13px}
/* 风险披露 */
.vcard{margin:0 16px;display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.vcard .th{width:62px;height:62px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--ink-3);flex:none}
.vcard .th .icn{width:24px;height:24px}
.vcard .in{flex:1;font-size:12.5px;line-height:1.85;color:var(--ink-2)}
.vcard .sp{font-size:11px;color:var(--accent);border:1px solid var(--accent-line);border-radius:10px;padding:1px 7px;font-family:var(--font-num)}
.vcard .pl{width:36px;height:36px;border-radius:18px;background:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center;flex:none}
.vcard .pl .icn{width:16px;height:16px}
.rbox2{margin:12px 16px 0;height:236px;border-radius:12px;background:var(--surface-2);padding:14px;font-size:13px;line-height:1.95;color:var(--ink-2);overflow:hidden}
.agr{display:flex;align-items:flex-start;gap:9px;padding:14px 18px 0;font-size:13px;color:var(--ink-1);line-height:1.6}
.agr .rd{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;margin-top:1px}
.agr .rd.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center}
.agr .rd.on .icn{width:11px;height:11px;stroke-width:3}
.nodoc{margin:0 16px;padding:24px 0;text-align:center;font-size:13px;color:var(--ink-3)}
.pwf .errtip{margin-top:7px}
/* 设置密码 */
.pwacct{display:flex;align-items:center;gap:12px;margin:0 16px;padding:14px 15px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-card)}
.pwacct span{font-size:13px;color:var(--ink-3)}
.pwacct b{font-family:var(--font-mono);font-size:15px;font-weight:600}
.pwf{padding:6px 20px 0}
.pwf .lbl{margin-top:16px}
.pwf .field .ph{color:var(--ink-4)}
.pwf .field .tr{margin-left:auto;color:var(--ink-3);display:flex}
.pwtip{font-size:11.5px;color:var(--ink-3);margin-top:12px;line-height:1.75}
/* 账户信息（同 06 M8） */
.gtitle.eye{display:flex;justify-content:space-between;align-items:center}
.gtitle.eye .icn{width:15px;height:15px;color:var(--ink-3)}
.gtitle.act{display:flex;justify-content:space-between;align-items:center}
.gtitle.act a{font-size:12.5px;color:var(--brand);font-weight:550;letter-spacing:0;display:flex;align-items:center;gap:2px}
.gtitle.act a .icn{width:12px;height:12px}
.frow b.ok{color:var(--ok)}
.catrow .frow>span{color:var(--ink-1);font-weight:600}
.catrow .frow>b{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.catrow .frow>b small{font-size:11px;color:var(--ink-3);font-family:"PingFang SC",system-ui,sans-serif;font-weight:400}
.t-rej{background:var(--danger-weak);color:var(--danger)}
.fileic{width:30px;height:30px;border-radius:9px;background:var(--brand-weak);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.fileic .icn{width:15px;height:15px}
.menu .mi .tx{font-size:14px;line-height:1.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>
<g id="i-globe"><circle cx="12" cy="12" r="8.6"/><ellipse cx="12" cy="12" rx="4.1" ry="8.6"/><line x1="3.6" y1="9" x2="20.4" y2="9"/><line x1="3.6" y1="15" x2="20.4" y2="15"/></g>
<g id="i-play"><path d="M8.5 5.5v13l10-6.5z" fill="currentColor" stroke="none"/></g>
<g id="i-video"><rect x="3" y="6.5" width="12.5" height="11" rx="2.5"/><path d="M15.5 10.5 21 8v8l-5.5-2.5z"/></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 · 登录页申请开户 · 账户信息交易品类四态 · 加开入口 · 前置拦截 · 资格校验 · 选择品类 · 签署协议 · 风险披露 · 设置密码 · 提交反馈</div>
    </div>
  </div>
  <div class="head-right">
    <div class="meta">
      <div>模块<b>开户与加开 ONBOARDING</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>销售APP/H5线上开户.html</code>、<code>index.html</code> 与《销售机构管理新增配置…》第四章；本稿先于代码</span></div>
  <div class="cards">
    <div class="card-x">
      <h4>入口 ENTRY</h4>
      <div class="bullets">
        <li><b>开户</b>　← 登录页「申请开户」（机构支持自主开户时才出）</li>
        <li><b>加开交易品类</b>　← 我的 → 账户信息 → 交易品类组标题右侧（<b>仅 H5</b>）</li>
        <li><b>交易品类状态</b>　← 我的 → 账户信息（三端都有）</li>
        <li>两条流程都是 H5 页面；前置检查不过落拦截页或弹窗，见 04 节</li>
      </div>
    </div>
    <div class="card-x">
      <h4>机构配置联动 CONFIG</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类</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>：原型「返回账户信息」，开户时尚无账户（U15）</li>
        <li><b>步骤名</b>：需求第四章四步为「选择品类 · 签署协议 · 确认账户 · 开户密码」，原型为「… 确认账户 · 开户审核」，本稿取原型（审查报告 F-27）</li>
        <li><b>总收益票据是否要风险披露视频</b>：原型只给共赢 B 类（F-27 待确认）</li>
        <li><b>代客加开</b>没有设计（F-14），本稿只画投资者自主加开</li>
        <li><b>加开第三步</b>：需求第四章五写「第三步及之后沿用开户流程」，原型加开只有三步、签完即提交；本稿取原型（U9 / U10c）</li>
        <li><b>设置密码报错</b>：原型没做校验、需求未给文案，暂沿用 <code>06</code> M5（U14c）</li>
        <li><b>中途返回</b>：原型直接清空已选品类与已签协议，是否加退出确认未定（U8b）</li>
        <li><b>文件组标题</b>：原型「签署协议」，本稿沿用 <code>06</code> M8「开户文件」；<b>外部账号登录页</b>为外部页面，不出帧</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">15 帧 · 点右上角「深色 / 浅色」实时换肤</span></div>
  <div class="frames">

  <!-- ===== U1 登录 · 申请开户入口 ===== -->
  <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="lgtop"><span class="lang"><svg class="icn" viewBox="0 0 24 24"><use href="#i-globe"/></svg>简体中文</span><span class="hp"><svg class="icn" viewBox="0 0 24 24"><use href="#i-help"/></svg></span></div>
        <div class="body lgbody">
          <img class="mark" src="assets/brand/honmatrix-icon.png" alt="">
          <h1>欢迎回来</h1>
          <div class="sub">登录后查看您的票据持仓与询价</div>
          <div class="fld"><span class="lbl">账号</span><div class="field"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-user"/></svg><span class="ph">输入账号</span></div></div>
          <div class="fld"><span class="lbl">密码</span><div class="field"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lock"/></svg><span class="ph">登录密码</span><span class="tr"><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></span></div></div>
          <div class="btn wide off">登录</div>
          <div class="lgapply">申请开户</div>
        </div>
        <div class="lgfoot">登录即代表您已阅读并同意<b>《用户协议》</b>与<b>《隐私政策》</b></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U1</div>
      <div class="cap-title">登录 · 申请开户入口<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>机构配置「是否支持投资者自主开户」为「是」时（目前仅 AUL711HK），登录按钮下出「申请开户」文字链；为「否」时不渲染，即 <code>01</code> L2 现状</li>
        <li>点「申请开户」按序做前置检查（04 节表）：外部账号登录态 → 票据账号已存在 / 已绑定（U1b）→ 最新开户审批 → 证券账户 → 资格条件，命中即落对应拦截，全部通过进第一步（U8）</li>
        <li>开户流程是 H5 页面，原型里 APP 用网页容器打开</li>
      </ul>
    </div>
  </div>

  <!-- ===== U1b 申请开户 · 已有票据账号 ===== -->
  <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="lgtop"><span class="lang"><svg class="icn" viewBox="0 0 24 24"><use href="#i-globe"/></svg>简体中文</span><span class="hp"><svg class="icn" viewBox="0 0 24 24"><use href="#i-help"/></svg></span></div>
        <div class="body lgbody">
          <img class="mark" src="assets/brand/honmatrix-icon.png" alt="">
          <h1>欢迎回来</h1>
          <div class="sub">登录后查看您的票据持仓与询价</div>
          <div class="fld"><span class="lbl">账号</span><div class="field"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-user"/></svg><span class="ph">输入账号</span></div></div>
          <div class="fld"><span class="lbl">密码</span><div class="field"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lock"/></svg><span class="ph">登录密码</span><span class="tr"><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></span></div></div>
          <div class="btn wide off">登录</div>
          <div class="lgapply">申请开户</div>
        </div>
        <div class="lgfoot">登录即代表您已阅读并同意<b>《用户协议》</b>与<b>《隐私政策》</b></div>
        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd" style="padding-bottom:0"><h3 style="font-size:15px;line-height:1.6;font-weight:500">您已有票据账号OTCSN637383866，可直接前往登录。</h3></div>
            
            <div class="dlg-ft single"><span>我知道了</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U1b</div>
      <div class="cap-title">申请开户 · 已有票据账号<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>前置检查第 2 项：该外部账号已有票据账号、或已绑定票据账号 → 弹此窗，不进开户流程；版式同 <code>01</code> L7（整句作标题 · 单键「我知道了」）</li>
        <li>原型为标题「提示」+ 右上 ×、无按钮；本稿沿用代码 ConfirmDialog，点「我知道了」或遮罩关闭后留在登录页</li>
        <li>第 1 项「无外部账号登录态」直接跳外部账号登录页——该页属外部系统（原型为文字占位），本稿不出帧</li>
      </ul>
    </div>
  </div>

  <!-- ===== U2 账户信息 · 交易品类与加开入口 ===== -->
  <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:-300px">
          <div class="gtitle eye"><span>基础信息</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></div>
          <div class="card dcard"><div class="frow"><span>票据账号</span><b class="m">OTCSN637383866</b></div><div class="frow"><span>中文名</span><b>张*</b></div><div class="frow"><span>英文名</span><b>ZHANG ****</b></div><div class="frow"><span>证件类型</span><b>大陆身份证</b></div><div class="frow"><span>证件号码</span><b class="m">4401**********6754</b></div><div class="frow"><span>手机号码</span><b class="m">+86 188****4567</b></div><div class="frow"><span>邮箱</span><b>zh****@163.com</b></div><div class="frow"><span>联系地址</span><b>中国广东省深圳市南山区</b></div></div>
          <div class="gtitle">其它信息</div>
          <div class="card dcard"><div class="frow"><span>风险等级</span><b>5-非常进取型</b></div><div class="frow"><span>衍生产品问卷</span><b class="ok">通过</b></div><div class="frow"><span>专业投资者认证</span><b>未通过</b></div></div>
          <div class="gtitle act"><span>交易品类</span><a>加开交易品类 <svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></a></div>
          <div class="card dcard catrow">
            <div class="frow"><span>共赢票据A类</span><b><span class="tag t-ok">✔ 已开通</span></b></div>
            <div class="frow"><span>共赢票据B类</span><b><span class="tag t-accent">审核中</span></b></div>
            <div class="frow last"><span>总收益票据</span><b><span class="tag t-rej">开通申请已驳回</span><small>驳回原因：风险测评等级不满足要求</small></b></div>
          </div>
          <div class="gtitle">开户文件</div>
          <div class="menu"><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">共赢票据A类协议.pdf</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">共赢票据A类风险披露.pdf</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div style="height:24px"></div>
        </div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U2</div>
      <div class="cap-title">账户信息 · 交易品类与加开入口<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li><code>06</code> M8 的「交易品类」改为与机构配置联动：机构勾了哪些品类就列哪些（含总收益票据）</li>
        <li>每行四态之一：✔ 已开通（安全色）· 审核中（琥珀）· 未开通（灰，U2b）· 开通申请已驳回（危险色，下挂「驳回原因：…」，原因由销售机构审批回传）；四态 APP 与 H5 都展示</li>
        <li>组标题右侧「加开交易品类 &gt;」：<b>仅 H5</b>，且机构支持自主开户、本人有未开通或已驳回的品类时才出</li>
        <li>「开户文件」列已开通品类的已签署开户协议 PDF（发行方、销售方、投资者三方电子签名），点开进文件查看器预览 / 下载（同 <code>06</code> M8）；没有时见 U2c</li>
      </ul>
    </div>
  </div>

  <!-- ===== U2b 账户信息 · 未开通（无加开入口） ===== -->
  <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:-300px">
          <div class="gtitle eye"><span>基础信息</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></div>
          <div class="card dcard"><div class="frow"><span>票据账号</span><b class="m">OTCSN637383866</b></div><div class="frow"><span>中文名</span><b>张*</b></div><div class="frow"><span>英文名</span><b>ZHANG ****</b></div><div class="frow"><span>证件类型</span><b>大陆身份证</b></div><div class="frow"><span>证件号码</span><b class="m">4401**********6754</b></div><div class="frow"><span>手机号码</span><b class="m">+86 188****4567</b></div><div class="frow"><span>邮箱</span><b>zh****@163.com</b></div><div class="frow"><span>联系地址</span><b>中国广东省深圳市南山区</b></div></div>
          <div class="gtitle">其它信息</div>
          <div class="card dcard"><div class="frow"><span>风险等级</span><b>5-非常进取型</b></div><div class="frow"><span>衍生产品问卷</span><b class="ok">通过</b></div><div class="frow"><span>专业投资者认证</span><b>未通过</b></div></div>
          <div class="gtitle act"><span>交易品类</span></div>
          <div class="card dcard catrow">
            <div class="frow"><span>共赢票据A类</span><b><span class="tag t-ok">✔ 已开通</span></b></div>
            <div class="frow"><span>共赢票据B类</span><b><span class="tag t-accent">审核中</span></b></div>
            <div class="frow last"><span>总收益票据</span><b><span class="tag t-mute">未开通</span></b></div>
          </div>
          <div class="gtitle">开户文件</div>
          <div class="menu"><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">共赢票据A类协议.pdf</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">共赢票据A类风险披露.pdf</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div style="height:24px"></div>
        </div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U2b</div>
      <div class="cap-title">账户信息 · 未开通（无加开入口）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li><b>APP 与 H5 都展示</b>交易品类及四态；「加开交易品类」入口只在 H5 出——APP 端即使有未开通 / 已驳回的品类也是本帧这样没有入口</li>
        <li>H5 里机构「是否支持投资者自主开户」为「否」时同样不出入口</li>
        <li>「未开通」灰标签：机构新勾选了总收益票据、本人还没申请时的默认状态；「其它信息」里风险等级过了有效期固定显示「已过期」</li>
      </ul>
    </div>
  </div>

  <!-- ===== U2c 账户信息 · 开户审核中（暂无开户文件） ===== -->
  <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:-250px">
          <div class="gtitle eye"><span>基础信息</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></div>
          <div class="card dcard"><div class="frow"><span>票据账号</span><b class="m">OTCSN637383866</b></div><div class="frow"><span>中文名</span><b>张*</b></div><div class="frow"><span>英文名</span><b>ZHANG ****</b></div><div class="frow"><span>证件类型</span><b>大陆身份证</b></div><div class="frow"><span>证件号码</span><b class="m">4401**********6754</b></div><div class="frow"><span>手机号码</span><b class="m">+86 188****4567</b></div><div class="frow"><span>邮箱</span><b>zh****@163.com</b></div><div class="frow"><span>联系地址</span><b>中国广东省深圳市南山区</b></div></div>
          <div class="gtitle">其它信息</div>
          <div class="card dcard"><div class="frow"><span>风险等级</span><b>5-非常进取型</b></div><div class="frow"><span>衍生产品问卷</span><b class="ok">通过</b></div><div class="frow"><span>专业投资者认证</span><b>未通过</b></div></div>
          <div class="gtitle act"><span>交易品类</span></div>
          <div class="card dcard catrow">
            <div class="frow"><span>共赢票据A类</span><b><span class="tag t-accent">审核中</span></b></div>
            <div class="frow"><span>共赢票据B类</span><b><span class="tag t-mute">未开通</span></b></div>
            <div class="frow last"><span>总收益票据</span><b><span class="tag t-accent">审核中</span></b></div>
          </div>
          <div class="gtitle">开户文件</div>
          <div class="card nodoc">暂无已签署协议</div>
          <div style="height:24px"></div>
        </div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U2c</div>
      <div class="cap-title">账户信息 · 开户审核中（暂无开户文件）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span></span></div>
      <ul>
        <li>开户资料提交后（U15）进账户信息：本次申请的品类都是「审核中」，没申请的为「未开通」</li>
        <li>还没有已开通品类时「开户文件」为空，组内一行「暂无已签署协议」；审核通过后才列出对应品类的已签协议</li>
        <li>此帧为 APP 端；H5 上因有未开通品类，组标题右侧会出「加开交易品类」（U2）</li>
      </ul>
    </div>
  </div>

  <!-- ===== U3 加开 · 前置拦截弹窗 ===== -->
  <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:-300px">
          <div class="gtitle eye"><span>基础信息</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></div>
          <div class="card dcard"><div class="frow"><span>票据账号</span><b class="m">OTCSN637383866</b></div><div class="frow"><span>中文名</span><b>张*</b></div><div class="frow"><span>英文名</span><b>ZHANG ****</b></div><div class="frow"><span>证件类型</span><b>大陆身份证</b></div><div class="frow"><span>证件号码</span><b class="m">4401**********6754</b></div><div class="frow"><span>手机号码</span><b class="m">+86 188****4567</b></div><div class="frow"><span>邮箱</span><b>zh****@163.com</b></div><div class="frow"><span>联系地址</span><b>中国广东省深圳市南山区</b></div></div>
          <div class="gtitle">其它信息</div>
          <div class="card dcard"><div class="frow"><span>风险等级</span><b>5-非常进取型</b></div><div class="frow"><span>衍生产品问卷</span><b class="ok">通过</b></div><div class="frow"><span>专业投资者认证</span><b>未通过</b></div></div>
          <div class="gtitle act"><span>交易品类</span><a>加开交易品类 <svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></a></div>
          <div class="card dcard catrow">
            <div class="frow"><span>共赢票据A类</span><b><span class="tag t-ok">✔ 已开通</span></b></div>
            <div class="frow"><span>共赢票据B类</span><b><span class="tag t-accent">审核中</span></b></div>
            <div class="frow last"><span>总收益票据</span><b><span class="tag t-rej">开通申请已驳回</span><small>驳回原因：风险测评等级不满足要求</small></b></div>
          </div>
          <div class="gtitle">开户文件</div>
          <div class="menu"><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">共赢票据A类协议.pdf</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">共赢票据A类风险披露.pdf</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div style="height:24px"></div>
        </div></div>
        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd" style="padding-bottom:0"><h3>您的票据账户当前处于「停用」状态，无法进行此操作。</h3></div>
            
            <div class="dlg-ft single"><span>我知道了</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U3</div>
      <div class="cap-title">加开 · 前置拦截弹窗<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>点「加开交易品类」先过加开专属检查：票据账户停用 / 销户 → 本弹窗（状态词按实际）；未绑定证券账户 → U3b</li>
        <li>两句都是整句作标题、单键「我知道了」；其余检查（证券账户、资格条件）与开户相同</li>
      </ul>
    </div>
  </div>

  <!-- ===== U3b 加开 · 未绑定证券账户 ===== -->
  <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:-300px">
          <div class="gtitle eye"><span>基础信息</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></div>
          <div class="card dcard"><div class="frow"><span>票据账号</span><b class="m">OTCSN637383866</b></div><div class="frow"><span>中文名</span><b>张*</b></div><div class="frow"><span>英文名</span><b>ZHANG ****</b></div><div class="frow"><span>证件类型</span><b>大陆身份证</b></div><div class="frow"><span>证件号码</span><b class="m">4401**********6754</b></div><div class="frow"><span>手机号码</span><b class="m">+86 188****4567</b></div><div class="frow"><span>邮箱</span><b>zh****@163.com</b></div><div class="frow"><span>联系地址</span><b>中国广东省深圳市南山区</b></div></div>
          <div class="gtitle">其它信息</div>
          <div class="card dcard"><div class="frow"><span>风险等级</span><b>5-非常进取型</b></div><div class="frow"><span>衍生产品问卷</span><b class="ok">通过</b></div><div class="frow"><span>专业投资者认证</span><b>未通过</b></div></div>
          <div class="gtitle act"><span>交易品类</span><a>加开交易品类 <svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></a></div>
          <div class="card dcard catrow">
            <div class="frow"><span>共赢票据A类</span><b><span class="tag t-ok">✔ 已开通</span></b></div>
            <div class="frow"><span>共赢票据B类</span><b><span class="tag t-accent">审核中</span></b></div>
            <div class="frow last"><span>总收益票据</span><b><span class="tag t-rej">开通申请已驳回</span><small>驳回原因：风险测评等级不满足要求</small></b></div>
          </div>
          <div class="gtitle">开户文件</div>
          <div class="menu"><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">共赢票据A类协议.pdf</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">共赢票据A类风险披露.pdf</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div style="height:24px"></div>
        </div></div>
        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd" style="padding-bottom:0"><h3 style="font-size:15px;line-height:1.6;font-weight:500">您的票据账户暂未绑定证券账户，请联系客户经理绑定后，再行操作！</h3></div>
            
            <div class="dlg-ft single"><span>我知道了</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U3b</div>
      <div class="cap-title">加开 · 未绑定证券账户<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>加开专属检查第 2 项：票据账户未绑定外部账号（证券账户）→ 本弹窗，只能「我知道了」，线下找客户经理绑定</li>
        <li>与 U3 同一弹窗换一句话；两项都通过后再查证券账户与资格条件</li>
      </ul>
    </div>
  </div>

  <!-- ===== U4 资格校验 · 四项并行 ===== -->
  <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="res" style="padding-top:36px"><div class="bic warn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-alert"/></svg></div><h3 style="font-size:16px">需符合以下全部条件后，才能申请<br><b>加开交易品类</b></h3></div>
          <div class="card dcard qual"><div class="frow"><span>风险承受能力为【非常进取型】</span><b><span class="qst ok"><i></i>已符合</span></b></div><div class="frow"><span>通过衍生产品问卷</span><b><span class="qst wait"><i></i>审核中</span></b></div><div class="frow"><span>认证专业投资者</span><b><span class="qst go">前往认证 <svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></b></div><div class="frow last"><span>具备开户电子签名</span><b><span class="qst ok"><i></i>已符合</span></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">U4</div>
      <div class="cap-title">资格校验 · 四项并行<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>四项并行校验：风险承受能力（5 级）· 衍生产品问卷 · 专业投资者（PI / IPI）· 开户电子签名；每项三态：已符合 · 审核中 · 不符合（含驳回，行尾「前往办理」跳对应页，此处「前往认证」）</li>
        <li>有任一项未符合时按钮置灰；四项全部符合才亮（U4b，开户场景）</li>
      </ul>
    </div>
  </div>

  <!-- ===== U4b 资格校验 · 全部符合（开户） ===== -->
  <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="res" style="padding-top:36px"><div class="bic warn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-alert"/></svg></div><h3 style="font-size:16px">需符合以下全部条件后，才能申请<br><b>开通票据账户</b></h3></div>
          <div class="card dcard qual"><div class="frow"><span>风险承受能力为【非常进取型】</span><b><span class="qst ok"><i></i>已符合</span></b></div><div class="frow"><span>通过衍生产品问卷</span><b><span class="qst ok"><i></i>已符合</span></b></div><div class="frow"><span>认证专业投资者</span><b><span class="qst ok"><i></i>已符合</span></b></div><div class="frow last"><span>具备开户电子签名</span><b><span class="qst ok"><i></i>已符合</span></b></div></div>
        </div>
        <div class="bbar1"><div class="btn">已符合上述条件，继续开户</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U4b</div>
      <div class="cap-title">资格校验 · 全部符合（开户）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>四项都「已符合」时底部按钮点亮，点击进第一步「选择品类」（U8）</li>
        <li>开户场景：导航栏与提示句为「开通票据账户」，按钮「已符合上述条件，继续开户」；加开场景见 U4</li>
      </ul>
    </div>
  </div>

  <!-- ===== U5 拦截 · 证券账户信息获取失败 ===== -->
  <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="res"><div class="bic warn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-alert"/></svg></div><h3>证券账户信息获取失败</h3><p>温馨提示：请您先开通证券账户后，再申请开通票据账户。</p></div>
        </div>
        <div class="bbar1"><div class="btn">去开通证券账户 &gt;&gt;</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U5</div>
      <div class="cap-title">拦截 · 证券账户信息获取失败<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>未开通证券账户：引导「去开通证券账户 &gt;&gt;」跳证券账户开户页；加开场景提示句换成「再申请加开交易品类」</li>
      </ul>
    </div>
  </div>

  <!-- ===== U6 拦截 · 证券账户未激活 ===== -->
  <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="res"><div class="bic warn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-alert"/></svg></div><h3>不符合开通票据账户条件</h3><p>温馨提示：您的证券账户处于未激活状态，请选择“存入资金、转入股票”任一方式激活证券账户后，再申请开通票据账户。</p></div>
        </div>
        <div class="ftbar eq"><span class="btn ghost">存入资金 &gt;</span><span class="btn ghost">转入股票 &gt;</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U6</div>
      <div class="cap-title">拦截 · 证券账户未激活<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>证券账户三种异常共用此版式，只换说明与出口：<b>未激活</b>（本帧，存入资金 / 转入股票两个出口，分别跳入金页 / 入股页）· <b>激活审核中</b>（U6b）· <b>激活审核已驳回</b>（U6c）</li>
      </ul>
    </div>
  </div>

  <!-- ===== U6b 拦截 · 证券账户激活审核中 ===== -->
  <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="res"><div class="bic warn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-alert"/></svg></div><h3>不符合开通票据账户条件</h3><p>温馨提示：您的证券账户正在激活审核中，请在审核通过后，再申请开通票据账户。</p></div>
        </div>
        <div class="bbar1"><div class="btn ghost">返回</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U6b</div>
      <div class="cap-title">拦截 · 证券账户激活审核中<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>证券账户正在激活审核：只换说明句，没有办理出口，底栏单个描边「返回」（开户回登录页，加开回账户信息）</li>
        <li>加开场景标题与说明里的「开通票据账户」换成「加开交易品类」</li>
      </ul>
    </div>
  </div>

  <!-- ===== U6c 拦截 · 证券账户激活审核已驳回 ===== -->
  <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="res"><div class="bic warn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-alert"/></svg></div><h3>不符合加开交易品类条件</h3><p>温馨提示：您的证券账户激活审核未通过，需激活后，才能申请加开交易品类。</p></div>
        </div>
        <div class="bbar1"><div class="btn">查看未通过原因并修改 &gt;&gt;</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U6c</div>
      <div class="cap-title">拦截 · 证券账户激活审核已驳回<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>激活审核未通过：底栏单个主按钮「查看未通过原因并修改 &gt;&gt;」，回 APP 首页并触发激活审核驳回弹框</li>
        <li>此帧为<b>加开</b>场景的换词：导航栏「加开交易品类」、标题「不符合加开交易品类条件」；U5 / U6 / U6b 加开时同理</li>
      </ul>
    </div>
  </div>

  <!-- ===== U7 拦截 · 开户审核不通过 ===== -->
  <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="res"><div class="bic fail"><svg class="icn" viewBox="0 0 24 24"><use href="#i-x"/></svg></div><h3>开户审核不通过</h3><p>不通过原因：非 PI 客户无法开通票据账户。</p></div>
        </div>
        <div class="bbar1"><div class="btn">重新提交开户 &gt;&gt;</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U7</div>
      <div class="cap-title">拦截 · 开户审核不通过<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>最新一笔开户审批为已驳回：展示不通过原因，「重新提交开户 &gt;&gt;」重走前置检查后进第一步</li>
        <li>最新审批为待审核：落「开户审核中」页（U7b）</li>
      </ul>
    </div>
  </div>

  <!-- ===== U7b 拦截 · 开户审核中 ===== -->
  <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="res"><div class="bic wait"><svg class="icn" viewBox="0 0 24 24"><use href="#i-clock"/></svg></div><h3>开户审核中</h3><p>您的开户申请将在 1~2 个工作日完成审核，请耐心等待。</p></div>
        </div>
        <div class="bbar1"><div class="btn ghost">返回</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U7b</div>
      <div class="cap-title">拦截 · 开户审核中<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>最新一笔开户审批为待审核时点「申请开户」落本页：品牌色时钟 +「开户审核中」+ 时效说明，底栏只有「返回」</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">19 帧 · 开户四步，加开三步（无确认账户）· 含各步按钮置灰 / 点亮与报错态</span></div>
  <div class="frames">

  <!-- ===== U8 第一步 · 选择品类（开户） ===== -->
  <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="steps"><div class="step on"><span class="dot">1</span><span class="tx">选择品类</span></div><div class="step "><span class="dot">2</span><span class="tx">签署协议</span></div><div class="step "><span class="dot">3</span><span class="tx">确认账户</span></div><div class="step "><span class="dot">4</span><span class="tx">开户审核</span></div></div>
        <div class="body">
          <div class="h1">请选择要开通的交易品类</div><div class="copt on"><span class="cb on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><b>共赢票据A类</b></div><div class="copt"><span class="cb"></span><b>共赢票据B类</b></div><div class="copt on"><span class="cb on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><b>总收益票据</b></div>
        </div>
        <div class="bbar1"><div class="btn">下一步</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U8</div>
      <div class="cap-title">第一步 · 选择品类（开户）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>步骤条四步：选择品类 · 签署协议 · 确认账户 · 开户审核</li>
        <li>只列机构配置勾选的可交易品类（含本次新增的总收益票据），机构不可交易的品类<b>不展示、不置灰</b>；可多选，至少选一个「下一步」才亮（未勾选见 U8b）</li>
      </ul>
    </div>
  </div>

  <!-- ===== U8b 第一步 · 未勾选 ===== -->
  <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="steps"><div class="step on"><span class="dot">1</span><span class="tx">选择品类</span></div><div class="step "><span class="dot">2</span><span class="tx">签署协议</span></div><div class="step "><span class="dot">3</span><span class="tx">确认账户</span></div><div class="step "><span class="dot">4</span><span class="tx">开户审核</span></div></div>
        <div class="body">
          <div class="h1">请选择要开通的交易品类</div><div class="copt"><span class="cb"></span><b>共赢票据A类</b></div><div class="copt"><span class="cb"></span><b>共赢票据B类</b></div><div class="copt"><span class="cb"></span><b>总收益票据</b></div>
        </div>
        <div class="bbar1"><div class="btn off">下一步</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U8b</div>
      <div class="cap-title">第一步 · 未勾选<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>进入第一步时一个都不勾，「下一步」置灰；勾选任一品类后点亮（U8）</li>
        <li>中途返回会清空已选品类与已签协议，再进来回到本态（原型如此，是否加退出确认待产品确认）</li>
      </ul>
    </div>
  </div>

  <!-- ===== U9 第一步 · 选择品类（加开） ===== -->
  <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="steps"><div class="step on"><span class="dot">1</span><span class="tx">选择品类</span></div><div class="step "><span class="dot">2</span><span class="tx">签署协议</span></div><div class="step "><span class="dot">3</span><span class="tx">加开审核</span></div></div>
        <div class="body">
          <div class="h1">请选择要开通的交易品类</div><div class="copt on"><span class="cb on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><b>总收益票据</b></div>
        </div>
        <div class="bbar1"><div class="btn">下一步</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U9</div>
      <div class="cap-title">第一步 · 选择品类（加开）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>加开步骤条只有三步：选择品类 · 签署协议 · 加开审核（没有确认账户 / 设密码）</li>
        <li>只列「机构可交易且本人未开通 / 开通申请已驳回」的品类；已开通、审核中与机构不可交易的都不出（此例只剩总收益票据）</li>
      </ul>
    </div>
  </div>

  <!-- ===== U10b 第二步 · 初始（开始阅读） ===== -->
  <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="steps"><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">选择品类</span></div><div class="step on"><span class="dot">2</span><span class="tx">签署协议</span></div><div class="step "><span class="dot">3</span><span class="tx">确认账户</span></div><div class="step "><span class="dot">4</span><span class="tx">开户审核</span></div></div>
        <div class="body">
          <div class="h1">签署协议</div><div class="card dcard sgn"><div class="frow"><span>共赢票据A类协议</span><b><span class="sgst">待阅读</span></b></div><div class="frow"><span>共赢票据A类风险披露</span><b><span class="sgst">待阅读</span></b></div><div class="frow"><span>Valuable_总收益票据_Risk Disclosure Statement</span><b><span class="sgst">待阅读</span></b></div><div class="frow last"><span>Valuable_总收益票据_Side Letter</span><b><span class="sgst">待阅读</span></b></div></div>
        </div>
        <div class="ftbar"><span class="btn ghost">上一步</span><span class="btn">开始阅读</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U10b</div>
      <div class="cap-title">第二步 · 初始（开始阅读）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>刚进第二步：所选品类的全部协议都是「待阅读」，主按钮「开始阅读」，点后从第一份打开（U11）</li>
        <li>读了一部分回到列表：已读的变「已签署」，主按钮变「继续阅读」（U10）</li>
      </ul>
    </div>
  </div>

  <!-- ===== U10 第二步 · 签署协议 ===== -->
  <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="steps"><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">选择品类</span></div><div class="step on"><span class="dot">2</span><span class="tx">签署协议</span></div><div class="step "><span class="dot">3</span><span class="tx">确认账户</span></div><div class="step "><span class="dot">4</span><span class="tx">开户审核</span></div></div>
        <div class="body">
          <div class="h1">签署协议</div><div class="card dcard sgn"><div class="frow"><span>共赢票据A类协议</span><b><span class="sgok"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg>已签署</span></b></div><div class="frow"><span>共赢票据A类风险披露</span><b><span class="sgok"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg>已签署</span></b></div><div class="frow"><span>Valuable_总收益票据_Risk Disclosure Statement</span><b><span class="sgst">待阅读</span></b></div><div class="frow last"><span>Valuable_总收益票据_Side Letter</span><b><span class="sgst">待阅读</span></b></div></div>
        </div>
        <div class="ftbar"><span class="btn ghost">上一步</span><span class="btn">继续阅读</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U10</div>
      <div class="cap-title">第二步 · 签署协议<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>按所选品类列机构配置「协议文件 · 开户」类别下挂钩该品类的全部文件，多选品类依次签；总收益票据为本次新增的两份</li>
        <li>每份初始「待阅读」，读完变「已签署」；主按钮：一份没读「开始阅读」（U10b）· 读了一部分「继续阅读」（本帧）· 全读完「下一步」/ 加开「提交」（U10c），从第一份未读的开始</li>
      </ul>
    </div>
  </div>

  <!-- ===== U10c 第二步 · 全部已签（加开提交） ===== -->
  <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="steps"><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">选择品类</span></div><div class="step on"><span class="dot">2</span><span class="tx">签署协议</span></div><div class="step "><span class="dot">3</span><span class="tx">加开审核</span></div></div>
        <div class="body">
          <div class="h1">签署协议</div><div class="card dcard sgn"><div class="frow"><span>Valuable_总收益票据_Risk Disclosure Statement</span><b><span class="sgok"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg>已签署</span></b></div><div class="frow last"><span>Valuable_总收益票据_Side Letter</span><b><span class="sgok"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg>已签署</span></b></div></div>
        </div>
        <div class="ftbar"><span class="btn ghost">上一步</span><span class="btn">提交</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U10c</div>
      <div class="cap-title">第二步 · 全部已签（加开提交）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>全部读完：开户主按钮「下一步」进确认账户（U14）；<b>加开没有第三步，主按钮即「提交」</b>，三步条停在第二步</li>
        <li>选了共赢票据B类时，开户、加开的主按钮都是「下一步」，先进风险披露（U13 / U13b），在那一页提交</li>
      </ul>
    </div>
  </div>

  <!-- ===== U11 协议阅读 · 未读到底 ===== -->
  <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="steps"><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">选择品类</span></div><div class="step on"><span class="dot">2</span><span class="tx">签署协议</span></div><div class="step "><span class="dot">3</span><span class="tx">确认账户</span></div><div class="step "><span class="dot">4</span><span class="tx">开户审核</span></div></div>
        <div class="body">
          <div class="h1">签署协议</div><div class="card dcard sgn"><div class="frow"><span>共赢票据A类协议</span><b><span class="sgok"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg>已签署</span></b></div><div class="frow"><span>共赢票据A类风险披露</span><b><span class="sgok"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg>已签署</span></b></div><div class="frow"><span>Valuable_总收益票据_Risk Disclosure Statement</span><b><span class="sgst">待阅读</span></b></div><div class="frow last"><span>Valuable_总收益票据_Side Letter</span><b><span class="sgst">待阅读</span></b></div></div>
        </div>
        <div class="ftbar"><span class="btn ghost">上一步</span><span class="btn">继续阅读</span></div>
        <div class="scrim bottom">
          <div class="dlg sheet reader">
            <div class="rh"><b>Valuable_总收益票据_Risk Disclosure Statement</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            <div class="rmeta">第 3 / 4 份 · 发行方、销售方已签署</div>
            <div class="rbox"><h6>一、产品性质</h6><p>总收益票据为非保本浮动收益票据，票据估值随所挂钩的底层证券组合市值变动，您可能损失部分或全部投资本金。</p>
              <h6>二、杠杆与融资风险</h6><p>票据可附带融资，融资金额按约定融资利率计息。当净持比低于预警比例时，您须按通知追加保证金；低于强平比例时，发行方有权对底层持仓进行调减。</p>
              <h6>三、市场与流动性风险</h6><p>底层证券涵盖 A 股、港股、美股，可能因停牌、涨跌停、交易时段限制或市场流动性不足，无法按预期价格及时完成调仓。</p>
              <h6>四、汇率风险</h6><p>底层证券以交易币种计价，票据以结算币种结算，汇率波动将影响票据估值与卖出金额。</p><span class="rbar" style="top:6px"></span></div>
            <div class="rbtn"><div class="btn off">请滑动到底完整阅读协议</div></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U11</div>
      <div class="cap-title">协议阅读 · 未读到底<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>逐份全屏阅读：协议名 + 第 n / 总数份；正文为已按模板填好投资者信息的完整内容</li>
        <li>必须滑到底才能同意：到底前按钮置灰「请滑动到底完整阅读协议」</li>
      </ul>
    </div>
  </div>

  <!-- ===== U12 协议阅读 · 已到底 ===== -->
  <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="steps"><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">选择品类</span></div><div class="step on"><span class="dot">2</span><span class="tx">签署协议</span></div><div class="step "><span class="dot">3</span><span class="tx">确认账户</span></div><div class="step "><span class="dot">4</span><span class="tx">开户审核</span></div></div>
        <div class="body">
          <div class="h1">签署协议</div><div class="card dcard sgn"><div class="frow"><span>共赢票据A类协议</span><b><span class="sgok"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg>已签署</span></b></div><div class="frow"><span>共赢票据A类风险披露</span><b><span class="sgok"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg>已签署</span></b></div><div class="frow"><span>Valuable_总收益票据_Risk Disclosure Statement</span><b><span class="sgst">待阅读</span></b></div><div class="frow last"><span>Valuable_总收益票据_Side Letter</span><b><span class="sgst">待阅读</span></b></div></div>
        </div>
        <div class="ftbar"><span class="btn ghost">上一步</span><span class="btn">继续阅读</span></div>
        <div class="scrim bottom">
          <div class="dlg sheet reader">
            <div class="rh"><b>Valuable_总收益票据_Risk Disclosure Statement</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            <div class="rmeta">第 3 / 4 份 · 发行方、销售方已签署</div>
            <div class="rbox"><h6>八、费用</h6><p>调仓按所绑定费用项收取佣金、平台费及各市场规费；买入时另收承销费用，具体以买入订单所列为准。</p>
              <h6>九、确认</h6><p>本人确认已完整阅读并理解本声明全部内容，知悉总收益票据的产品特点与风险，并自愿承担相应投资风险。</p>
              <div class="end">— 协议正文结束 · 发行方 ✓ 销售方 ✓ 已签署 —</div><span class="rbar" style="bottom:6px"></span></div>
            <div class="rbtn"><div class="btn">同意协议并继续阅读（3/4）</div></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U12</div>
      <div class="cap-title">协议阅读 · 已到底<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>到底后：非最后一份为「同意协议并继续阅读（n/总数）」，最后一份为「同意协议」（U12b）；同意即在发行方、销售方已签版本上加盖本人电子签名，并自动打开下一份未读</li>
        <li>三方签署完成后生成 PDF，随开户 / 加开申请提交，供销售机构审批查看</li>
      </ul>
    </div>
  </div>

  <!-- ===== U12b 协议阅读 · 最后一份 ===== -->
  <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="steps"><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">选择品类</span></div><div class="step on"><span class="dot">2</span><span class="tx">签署协议</span></div><div class="step "><span class="dot">3</span><span class="tx">确认账户</span></div><div class="step "><span class="dot">4</span><span class="tx">开户审核</span></div></div>
        <div class="body">
          <div class="h1">签署协议</div><div class="card dcard sgn"><div class="frow"><span>共赢票据A类协议</span><b><span class="sgok"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg>已签署</span></b></div><div class="frow"><span>共赢票据A类风险披露</span><b><span class="sgok"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg>已签署</span></b></div><div class="frow"><span>Valuable_总收益票据_Risk Disclosure Statement</span><b><span class="sgok"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg>已签署</span></b></div><div class="frow last"><span>Valuable_总收益票据_Side Letter</span><b><span class="sgst">待阅读</span></b></div></div>
        </div>
        <div class="ftbar"><span class="btn ghost">上一步</span><span class="btn">继续阅读</span></div>
        <div class="scrim bottom">
          <div class="dlg sheet reader">
            <div class="rh"><b>Valuable_总收益票据_Side Letter</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            <div class="rmeta">第 4 / 4 份 · 发行方、销售方已签署</div>
            <div class="rbox"><h6>八、费用</h6><p>调仓按所绑定费用项收取佣金、平台费及各市场规费；买入时另收承销费用，具体以买入订单所列为准。</p>
              <h6>九、确认</h6><p>本人确认已完整阅读并理解本声明全部内容，知悉总收益票据的产品特点与风险，并自愿承担相应投资风险。</p>
              <div class="end">— 协议正文结束 · 发行方 ✓ 销售方 ✓ 已签署 —</div><span class="rbar" style="bottom:6px"></span></div>
            <div class="rbtn"><div class="btn">同意协议</div></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U12b</div>
      <div class="cap-title">协议阅读 · 最后一份<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>最后一份读到底：按钮只写「同意协议」（没有计数），同意后收起阅读面板回到协议列表，全部为「已签署」</li>
      </ul>
    </div>
  </div>

  <!-- ===== U13 风险披露 · 仅共赢票据B类 ===== -->
  <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="steps"><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">选择品类</span></div><div class="step on"><span class="dot">2</span><span class="tx">签署协议</span></div><div class="step "><span class="dot">3</span><span class="tx">确认账户</span></div><div class="step "><span class="dot">4</span><span class="tx">开户审核</span></div></div>
        <div class="body">
          <div class="h1">风险披露</div>
          <div class="vcard"><span class="th"><svg class="icn" viewBox="0 0 24 24"><use href="#i-video"/></svg></span><div class="in">持牌代表：曲鹣薇<br>牌照编号：BFR574</div><span class="sp">1.0X</span><span class="pl"><svg class="icn" viewBox="0 0 24 24"><use href="#i-play"/></svg></span></div>
          <div class="rbox2">共赢票据B类为杠杆型结构性产品，收益与挂钩标的的价格表现反向放大相关……阅读本披露前，请先完整观看持牌代表的风险披露视频。如有疑问，请于签署前向客户经理咨询，切勿在未理解产品风险的情况下投资。</div>
          <div class="agr"><span class="rd"></span><span>本人已了解并同意上述风险披露条款与细则。</span></div>
        </div>
        <div class="ftbar"><span class="btn ghost">上一步</span><span class="btn off">下一步</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U13</div>
      <div class="cap-title">风险披露 · 仅共赢票据B类<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag off">B 类本期未上线</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>只有选了共赢票据B类才出：读完全部协议后进入，观看持牌代表披露视频并勾选「本人已了解并同意…」，按钮才亮（开户「下一步」/ 加开「提交」，已勾选见 U13b）</li>
        <li>总收益票据、共赢票据A类不需要这一步</li>
      </ul>
    </div>
  </div>

  <!-- ===== U13b 风险披露 · 已勾选（加开提交） ===== -->
  <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="steps"><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">选择品类</span></div><div class="step on"><span class="dot">2</span><span class="tx">签署协议</span></div><div class="step "><span class="dot">3</span><span class="tx">加开审核</span></div></div>
        <div class="body">
          <div class="h1">风险披露</div>
          <div class="vcard"><span class="th"><svg class="icn" viewBox="0 0 24 24"><use href="#i-video"/></svg></span><div class="in">持牌代表：曲鹣薇<br>牌照编号：BFR574</div><span class="sp">1.0X</span><span class="pl"><svg class="icn" viewBox="0 0 24 24"><use href="#i-play"/></svg></span></div>
          <div class="rbox2">共赢票据B类为杠杆型结构性产品，收益与挂钩标的的价格表现反向放大相关……阅读本披露前，请先完整观看持牌代表的风险披露视频。如有疑问，请于签署前向客户经理咨询，切勿在未理解产品风险的情况下投资。</div>
          <div class="agr"><span class="rd on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span>本人已了解并同意上述风险披露条款与细则。</span></div>
        </div>
        <div class="ftbar"><span class="btn ghost">上一步</span><span class="btn">提交</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U13b</div>
      <div class="cap-title">风险披露 · 已勾选（加开提交）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag off">B 类本期未上线</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>勾选「本人已了解并同意…」后按钮点亮；加开在本页直接「提交」（三步条），开户为「下一步」进确认账户</li>
        <li>原型没有限制「视频未看完不能勾选」，播放只是 Toast 占位；是否强制看完待产品确认</li>
      </ul>
    </div>
  </div>

  <!-- ===== U14 第三步 · 确认账户（设置密码） ===== -->
  <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="steps"><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">选择品类</span></div><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">签署协议</span></div><div class="step on"><span class="dot">3</span><span class="tx">确认账户</span></div><div class="step "><span class="dot">4</span><span class="tx">开户审核</span></div></div>
        <div class="body">
          <div class="h1">已为您创建票据账户，请设置密码</div>
          <div class="pwacct"><span>票据账户</span><b>OTCSN37494023</b></div>
          <div class="pwf">
            <span class="lbl">设置密码</span><div class="field"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lock"/></svg><span class="ph">请输入密码</span><span class="tr"><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></span></div>
            <span class="lbl">确认密码</span><div class="field"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lock"/></svg><span class="ph">请再次输入密码</span><span class="tr"><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></span></div>
            <div class="pwtip">密码规则：6~20 个字符，至少包含字母、数字、符号中的 2 种组合</div>
          </div>
        </div>
        <div class="ftbar"><span class="btn ghost">上一步</span><span class="btn off">提交</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U14</div>
      <div class="cap-title">第三步 · 确认账户（设置密码）<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>仅开户有此步，沿用现有逻辑：回显已创建的票据账户，设置并确认密码（6~20 个字符，字母 / 数字 / 符号至少两种）；未填完「提交」置灰，已填见 U14b、报错见 U14c</li>
        <li>提交后不再重复前置检查，生成一条开户待审核任务（销售机构「投资者管理 · 开户审核」，开通交易品类列含总收益票据）</li>
      </ul>
    </div>
  </div>

  <!-- ===== U14b 第三步 · 密码已填 ===== -->
  <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="steps"><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">选择品类</span></div><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">签署协议</span></div><div class="step on"><span class="dot">3</span><span class="tx">确认账户</span></div><div class="step "><span class="dot">4</span><span class="tx">开户审核</span></div></div>
        <div class="body">
          <div class="h1">已为您创建票据账户，请设置密码</div>
          <div class="pwacct"><span>票据账户</span><b>OTCSN37494023</b></div>
          <div class="pwf">
            <span class="lbl">设置密码</span><div class="field"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lock"/></svg><span style="letter-spacing:.3em">••••••••••</span><span class="tr"><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></span></div>
            <span class="lbl">确认密码</span><div class="field"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lock"/></svg><span style="letter-spacing:.3em">••••••••••</span><span class="tr"><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></span></div>
            <div class="pwtip">密码规则：6~20 个字符，至少包含字母、数字、符号中的 2 种组合</div>
          </div>
        </div>
        <div class="ftbar"><span class="btn ghost">上一步</span><span class="btn">提交</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U14b</div>
      <div class="cap-title">第三步 · 密码已填<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>两格都填且符合规则后「提交」点亮；眼睛切换明文，默认密文</li>
        <li>提交即生成开户待审核任务并落 U15</li>
      </ul>
    </div>
  </div>

  <!-- ===== U14c 第三步 · 两次密码不一致 ===== -->
  <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="steps"><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">选择品类</span></div><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">签署协议</span></div><div class="step on"><span class="dot">3</span><span class="tx">确认账户</span></div><div class="step "><span class="dot">4</span><span class="tx">开户审核</span></div></div>
        <div class="body">
          <div class="h1">已为您创建票据账户，请设置密码</div>
          <div class="pwacct"><span>票据账户</span><b>OTCSN37494023</b></div>
          <div class="pwf">
            <span class="lbl">设置密码</span><div class="field"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lock"/></svg><span style="letter-spacing:.3em">••••••••••</span><span class="tr"><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></span></div>
            <span class="lbl">确认密码</span><div class="field err"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lock"/></svg><span style="letter-spacing:.3em">•••••••••</span><span class="tr"><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></span></div><div class="errtip"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-alert"/></svg>两次输入密码不一致</div>
            <div class="pwtip">密码规则：6~20 个字符，至少包含字母、数字、符号中的 2 种组合</div>
          </div>
        </div>
        <div class="ftbar"><span class="btn ghost">上一步</span><span class="btn off">提交</span></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U14c</div>
      <div class="cap-title">第三步 · 两次密码不一致<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>确认密码与设置密码不一致：确认框转危险描边，框下红字，「提交」保持置灰</li>
        <li>不符合规则（长度 / 字符种类）同样在对应框下红字提示</li>
        <li>原型此页没有做校验，需求写「沿用现有逻辑」；报错文案暂沿用 <code>06</code> M5 修改密码，待产品确认</li>
      </ul>
    </div>
  </div>

  <!-- ===== U15 提交反馈 · 开户资料已提交 ===== -->
  <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="res"><div class="bic ok"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></div><h3>恭喜您已完成开户资料提交</h3><p>通常情况下，我们会在 1~2 个工作日内完成审核。</p><div class="steps"><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">选择品类</span></div><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">签署协议</span></div><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">确认账户</span></div><div class="step on"><span class="dot">4</span><span class="tx">开户审核</span></div></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">U15</div>
      <div class="cap-title">提交反馈 · 开户资料已提交<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>提交即落本页：成功图标 +「恭喜您已完成开户资料提交」+ 审核时效，下挂四步条（前三步完成）</li>
        <li>原型按钮写「返回账户信息」，开户时还没有账户——建议改「返回登录」，待产品确认</li>
      </ul>
    </div>
  </div>

  <!-- ===== U16 提交反馈 · 加开资料已提交 ===== -->
  <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="res"><div class="bic ok"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></div><h3>恭喜您已完成加开资料提交</h3><p>通常情况下，我们会在 1~2 个工作日内完成审核。</p><div class="steps"><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">选择品类</span></div><div class="step done"><span class="dot"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span class="tx">签署协议</span></div><div class="step on"><span class="dot">3</span><span class="tx">加开审核</span></div></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">U16</div>
      <div class="cap-title">提交反馈 · 加开资料已提交<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>加开提交后按审核结果：<b>待审核</b>落本页（三步条，前两步完成）· 已通过 / 已驳回直接回账户信息并 Toast（U18 / U18b）</li>
      </ul>
    </div>
  </div>

  <!-- ===== U17 开户成功 ===== -->
  <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="res"><div class="bic ok"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></div><h3>恭喜您开户成功</h3></div>
        </div>
        <div class="bbar1"><div class="btn">进入票据首页 &gt;&gt;</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U17</div>
      <div class="cap-title">开户成功<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>开户审核通过后再次进入时落本页，「进入票据首页 &gt;&gt;」进 APP 票据首页；品类 Tab 按已开通品类透出（<code>10</code> R1 / R10）</li>
      </ul>
    </div>
  </div>

  <!-- ===== U18 加开成功 · 回到账户信息 ===== -->
  <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:-380px">
          <div class="gtitle eye"><span>基础信息</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></div>
          <div class="card dcard"><div class="frow"><span>票据账号</span><b class="m">OTCSN637383866</b></div><div class="frow"><span>中文名</span><b>张*</b></div><div class="frow"><span>英文名</span><b>ZHANG ****</b></div><div class="frow"><span>证件类型</span><b>大陆身份证</b></div><div class="frow"><span>证件号码</span><b class="m">4401**********6754</b></div><div class="frow"><span>手机号码</span><b class="m">+86 188****4567</b></div><div class="frow"><span>邮箱</span><b>zh****@163.com</b></div><div class="frow"><span>联系地址</span><b>中国广东省深圳市南山区</b></div></div>
          <div class="gtitle">其它信息</div>
          <div class="card dcard"><div class="frow"><span>风险等级</span><b>5-非常进取型</b></div><div class="frow"><span>衍生产品问卷</span><b class="ok">通过</b></div><div class="frow"><span>专业投资者认证</span><b>未通过</b></div></div>
          <div class="gtitle act"><span>交易品类</span></div>
          <div class="card dcard catrow">
            <div class="frow"><span>共赢票据A类</span><b><span class="tag t-ok">✔ 已开通</span></b></div>
            <div class="frow"><span>共赢票据B类</span><b><span class="tag t-accent">审核中</span></b></div>
            <div class="frow last"><span>总收益票据</span><b><span class="tag t-ok">✔ 已开通</span></b></div>
          </div>
          <div class="gtitle">开户文件</div>
          <div class="menu"><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">共赢票据A类协议.pdf</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">共赢票据A类风险披露.pdf</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">Valuable_总收益票据_Risk Disclosure Statement.pdf</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">Valuable_总收益票据_Side Letter.pdf</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div style="height:24px"></div>
        </div></div>
        <div class="toast" style="top:70%">加开成功</div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U18</div>
      <div class="cap-title">加开成功 · 回到账户信息<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>加开同步通过：回账户信息并 Toast「加开成功」，该品类即时变 ✔ 已开通，开户文件多出两份总收益票据协议</li>
        <li>没有未开通 / 已驳回的品类后，「加开交易品类」入口隐藏；同步驳回见 U18b</li>
      </ul>
    </div>
  </div>

  <!-- ===== U18b 加开驳回 · 回到账户信息 ===== -->
  <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:-300px">
          <div class="gtitle eye"><span>基础信息</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></div>
          <div class="card dcard"><div class="frow"><span>票据账号</span><b class="m">OTCSN637383866</b></div><div class="frow"><span>中文名</span><b>张*</b></div><div class="frow"><span>英文名</span><b>ZHANG ****</b></div><div class="frow"><span>证件类型</span><b>大陆身份证</b></div><div class="frow"><span>证件号码</span><b class="m">4401**********6754</b></div><div class="frow"><span>手机号码</span><b class="m">+86 188****4567</b></div><div class="frow"><span>邮箱</span><b>zh****@163.com</b></div><div class="frow"><span>联系地址</span><b>中国广东省深圳市南山区</b></div></div>
          <div class="gtitle">其它信息</div>
          <div class="card dcard"><div class="frow"><span>风险等级</span><b>5-非常进取型</b></div><div class="frow"><span>衍生产品问卷</span><b class="ok">通过</b></div><div class="frow"><span>专业投资者认证</span><b>未通过</b></div></div>
          <div class="gtitle act"><span>交易品类</span><a>加开交易品类 <svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></a></div>
          <div class="card dcard catrow">
            <div class="frow"><span>共赢票据A类</span><b><span class="tag t-ok">✔ 已开通</span></b></div>
            <div class="frow"><span>共赢票据B类</span><b><span class="tag t-accent">审核中</span></b></div>
            <div class="frow last"><span>总收益票据</span><b><span class="tag t-rej">开通申请已驳回</span><small>驳回原因：风险测评等级不满足要求</small></b></div>
          </div>
          <div class="gtitle">开户文件</div>
          <div class="menu"><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">共赢票据A类协议.pdf</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">共赢票据A类风险披露.pdf</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div style="height:24px"></div>
        </div></div>
        <div class="toast" style="top:41%">加开申请已驳回</div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">U18b</div>
      <div class="cap-title">加开驳回 · 回到账户信息<span class="cap-flags"><span class="cap-flag new">v2.0 新增</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>加开同步驳回：回账户信息并 Toast「加开申请已驳回」，该品类显示「开通申请已驳回」+ 驳回原因</li>
        <li>「加开交易品类」入口仍在，可改正后重新申请；重新加开时该品类会再次出现在第一步</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">按表中顺序检查，命中即停；全部通过进第一步「选择品类」</span></div>
  <table class="spec">
    <tr><th style="width:250px">检查项</th><th style="width:70px">开户</th><th style="width:70px">加开</th><th>命中后</th></tr>
    <tr><td><b>外部账号登录态</b></td><td>✓</td><td>—</td><td>跳外部账号登录页，登录后回到开户流程</td></tr>
    <tr><td><b>票据账号已存在 / 外部账号已绑定票据账号</b></td><td>✓</td><td>—</td><td>弹窗「您已有票据账号{账号}，可直接前往登录。」（U1b，同 <code>01</code> L7）</td></tr>
    <tr><td><b>票据账户停用 / 销户</b></td><td>—</td><td>✓</td><td>弹窗（U3）</td></tr>
    <tr><td><b>未绑定证券账户</b></td><td>—</td><td>✓</td><td>弹窗「您的票据账户暂未绑定证券账户，请联系客户经理绑定后，再行操作！」（U3b）</td></tr>
    <tr><td><b>最新开户审批：待审核 / 已驳回</b></td><td>✓</td><td>—</td><td>开户审核中页（U7b）/ 开户审核不通过页（U7）</td></tr>
    <tr><td><b>未开通证券账户</b></td><td>✓</td><td>✓</td><td>证券账户信息获取失败（U5）</td></tr>
    <tr><td><b>证券账户：未激活 / 激活审核中 / 激活已驳回</b></td><td>✓</td><td>✓</td><td>不符合条件页（U6 / U6b / U6c），三种出口不同</td></tr>
    <tr><td><b>资格条件：风险等级 · 衍生品问卷 · PI / IPI · 电子签名</b></td><td>✓</td><td>✓</td><td>资格校验页（U4 / U4b），全部符合才能继续</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>