yuanxin
/
APP_UI


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406
							<!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)}

/* 快捷入口 */
.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)}

/* 搜索联想 · 加载态 / 结果提示行 ------------------------------ */
@keyframes hh-spin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
@keyframes hh-sk{from{background-position:100% 0}to{background-position:0 0}}

/* 转圈：与 05 账户二级页「下拉刷新 / 上拉加载」同一个组件 */
.ring{width:16px;height:16px;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.8}
.ring .bar{fill:none;stroke:var(--brand);stroke-width:2.8;stroke-linecap:round}
.ring.xs{width:14px;height:14px}
.ring.xs .trk,.ring.xs .bar{stroke-width:3.2}
.spin{animation:hh-spin .9s linear infinite}

/* 骨架行：与真实联想行同一坑位，行高由零宽字符撑出，保证换内容不换高 */
.sug{--sk-a:var(--surface-3);--sk-b:#F7FAFF}
[data-theme="dark"] .sug{--sk-b:#2B3A5C}
.sug .sk{align-items:center;gap:0}
.sug .sk::before{content:"\200B";font-size:14px;width:0;flex:none}
.sug .sk i{
  display:block;height:11px;border-radius:3px;
  background:linear-gradient(100deg,var(--sk-a) 0 42%,var(--sk-b) 50%,var(--sk-a) 58% 100%);
  background-size:220% 100%;background-repeat:no-repeat;
  animation:hh-sk 1.4s ease-in-out infinite;
}
.sug .sk i.code{width:82px}              /* A 股代码固定 9 位，等宽 */
.sug .sk i.name{margin-left:auto}        /* 名称 3~4 字，逐行变宽 */
.sug .sk:nth-child(2) i{animation-delay:.09s}
.sug .sk:nth-child(3) i{animation-delay:.18s}

/* 面板内单行提示：无结果 / 加载失败 */
.sug .stip{align-items:flex-start;gap:9px;padding:15px 13px;line-height:1.5}
.sug .stip .icn{width:15px;height:15px;flex:none;margin-top:1px;color:var(--ink-4)}
.sug .stip.err .icn{color:var(--warn)}
.sug .stip .tx{font-family:inherit;font-size:13.5px;color:var(--ink-2)}
.sug .stip .tx em{display:block;margin-top:4px;font-size:11.5px;line-height:1.6;color:var(--ink-4);font-style:normal}
.sug .stip .rt{color:var(--brand);font-weight:560}

/* 降低动态效果偏好：停掉掠光，转圈放慢 */
@media (prefers-reduced-motion:reduce){
  .sug .sk i{animation:none}
  .spin{animation-duration:1.8s}
}

/* 弹窗 */
.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 .ecode{margin-top:9px;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;color:var(--ink-4);letter-spacing:.04em}
.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}

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

/* 筛选栏 */
.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 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}

/* 筛选条：chips 可横滑，视图切换固定在右侧不参与滚动 */
.fbscroll{display:flex;gap:8px;align-items:center;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.fbscroll::-webkit-scrollbar{display:none}
.viewtog.sep{margin-left:4px}
.viewtog.sep::before{content:"";position:absolute;left:-7px;top:2px;bottom:2px;width:1px;background:var(--line-2)}


/* ==== v1.3 · 02 专用 BEGIN ==== */
/* 询价表单面板（代码 InquiryFormPanel）：面色块、底线分隔；检索下拉绝对定位盖在下方表单上 */
.ipanel{padding:13px 16px 14px;background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:5}
.ipanel .search{height:38px}
.ipanel .search.focus{background:var(--surface);box-shadow:0 0 0 1px var(--brand),0 0 0 4px var(--brand-weak)}
.ipanel .search b{font-weight:500;color:var(--ink-1)}
.ipanel .search .clr{margin-left:auto;color:var(--ink-3);width:14px;height:14px}
.frm2{display:flex;gap:10px;margin-top:12px}
.frm2>div{flex:1}
.rofield{height:38px;border-radius:11px;background:var(--surface-2);display:flex;align-items:center;padding:0 13px;font-size:13.5px}
.rofield b{font-family:var(--font-mono);font-weight:600;color:var(--ink-1)}
.rofield span{margin-left:auto;font-size:10.5px;color:var(--ink-4)}
.rofield .icn{margin-left:auto;width:14px;height:14px;color:var(--ink-3)}
.frm-btns{display:flex;gap:10px;margin-top:14px}
.frm-btns .btn{flex:1}
.iconbtn .icn{color:var(--ink-2)}
/* 检索下拉（代码 SearchField）：在搜 = 转圈 +「加载中…」；续查 = 旧行 30% + 转圈浮层；无结果 = 一行提示；失败静默不出 */
.ipanel .sug{position:absolute;left:16px;right:16px;top:51px;margin-top:6px;z-index:10;border-radius:11px}
.ipanel .sug .r{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--line);font-size:14px}
.ipanel .sug .r:last-child{border-bottom:0}
.ipanel .sug .r .cd{flex:1;font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3)}
.ipanel .sug .r em{font-style:normal;color:var(--brand)}
.ipanel .sug .ld,.ipanel .sug .em{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 0;font-size:12.5px;letter-spacing:.04em;color:var(--ink-3)}
.ipanel .sug .em{font-size:13px;letter-spacing:0}
.ipanel .sug div.rows{display:block;padding:0;border:0}
.ipanel .sug div.ov{padding:0;border:0}
.ipanel .sug .r span:last-child{font-family:inherit;font-size:14px;color:var(--ink-1)}
.ipanel .sug .ov span{font-family:inherit}
.ipanel .sug .rows.fade{opacity:.3}
.ipanel .sug .ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ipanel .sug .ov span{display:flex;align-items:center;gap:8px;background:var(--surface);padding:6px 12px;border-radius:11px;font-size:12.5px;letter-spacing:.04em;color:var(--ink-3)}
/* 询价卡片：展开时品牌描边；报价子表（DataTable：表头 36、行 36、列距 8，下单键 46×26） */
.qc.open{box-shadow:var(--shadow-card),0 0 0 1px var(--brand-line)}
.qc-meta em{margin-right:4px}
.qc-open{border-top-style:dashed}
.qtab{margin:0 -14px -13px}
.qtab>div{display:flex;align-items:center;gap:8px;padding:0 10px 0 14px;border-top:1px solid var(--line)}
.qtab>div:first-child{border-top:0}
.qtab .qh{height:36px;font-size:10.5px;letter-spacing:.02em;color:var(--ink-3)}
.qtab .qr{height:40px;font-size:12px;position:relative}
.qtab>div>span{flex:1;text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.qtab>div>span:first-child{text-align:left;font-family:var(--font-mono)}
.qtab .qh>span{font-family:inherit}
.qtab>div>span:last-child{flex:none;width:46px}
.qtab .p{color:var(--brand);font-weight:600}
.qtab .t{color:var(--ink-3);font-size:10.5px}
.qtab .nd{position:absolute;left:4px;top:50%;margin-top:-3px;width:6px;height:6px;border-radius:50%;background:var(--danger)}
.mbtn{display:flex;align-items:center;justify-content:center;width:46px;height:26px;border-radius:8px;background:var(--brand);color:var(--on-brand);font-size:12.5px;font-weight:600;font-family:"PingFang SC",system-ui,sans-serif}
.mbtn.dis{opacity:.45}
.qc .notice{margin-top:2px}
/* 自定义名义本金小键盘：退格键用图标 */
.kbd span.fn .icn{width:22px;height:22px;color:var(--ink-2)}
.kbd span{font-family:var(--font-num)}
.kbd span.ok,.kbd span.fn{font-family:"PingFang SC",system-ui,sans-serif}
/* 下单页：分组 Section、总金额行、购买力回显、协议勾选、底栏 */
.ocard{margin:0 16px}
/* 下单页可改项 = 描边控件（方案稿《下单页可填项突出》方案一，代码 OrderSizeField / 结算币种选择器）：规模框 36 高、最窄 150、数值 15 · 500 靠右 + 单位 13.5；框下提示 12 号、只有数字品牌色；结算币种选择器 32 高 */
.frow.ed{align-items:flex-start;padding-top:11px;padding-bottom:11px}
.frow.ed>span{height:36px}
.edv{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.edv .fh{font-size:12px;color:var(--ink-3)}
.edv .fh b{font-weight:500;font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--brand);margin:0 1px}
.inp{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;height:36px;min-width:150px;padding:0 11px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);font-size:15px}
.inp b{font-weight:500;font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--ink-1)}
.inp em{font-style:normal;font-size:13.5px;color:var(--ink-2);font-family:"PingFang SC",system-ui,sans-serif}
.inp.focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-weak)}
.inp.sel{min-width:0;height:32px;padding:0 8px 0 12px;gap:4px}
.inp.sel b{font-weight:400}
.inp.sel .icn{width:14px;height:14px;color:var(--ink-3)}
.frow .rads{display:flex;gap:12px}
.frow b em{font-style:normal;color:var(--ink-2);margin-left:6px;font-family:"PingFang SC",system-ui,sans-serif}
.frow b .icn{width:14px;height:14px;color:var(--ink-3);vertical-align:-2px;margin-left:5px}
.frow.tot{background:var(--surface-2);padding:13px 15px}
.frow.tot>span{color:var(--ink-1);font-weight:600}
.frow.tot>b{display:flex;flex-direction:column;align-items:flex-end;font-size:17px;font-weight:600}
.frow.tot>b small{font-size:10.5px;font-weight:400;color:var(--ink-3);margin-top:4px}
.ocard.over{box-shadow:none;border:1px solid var(--danger)}
.frow.tot.over{background:var(--danger-weak)}
.frow.tot.over>span,.frow.tot.over>b,.frow.tot.over>b small{color:var(--danger)}
.lp{padding:0 15px 12px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;border-bottom:1px solid var(--line)}
.lp .stepper{width:160px}
.lp .lim{display:flex;gap:14px;font-size:10.5px;color:var(--ink-3)}
.lp .lim b{font-weight:400;font-family:var(--font-num)}
.lp .errtip{margin-top:0}
.agree{padding:14px 16px 0;display:flex;flex-direction:column;gap:11px}
.agree label{display:flex;gap:9px;font-size:12.5px;color:var(--ink-2);line-height:1.5;align-items:flex-start}
.agree label b{color:var(--brand);font-weight:600}
.agree .cb{margin-top:2px}
.bbar{padding:12px 16px 30px;display:flex;gap:11px;border-top:1px solid var(--line);background:var(--surface)}
/* 合适性评估弹窗：四列表 + 结论条 + 申报理由单选 */
.stab{margin:0 0 0;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}
/* 协议文档页 */
.doc{padding:16px 20px 0}
.doc h4{font-size:17px;font-weight:600}
.doc .no{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);margin-top:6px}
.doc .sect{margin-top:18px;font-size:13.5px;line-height:1.9;color:var(--ink-2)}
.doc .sect b{display:block;color:var(--ink-1);margin:14px 0 4px}
.doc .sect b:first-child{margin-top:0}
/* ==== v1.3 · 02 专用 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>
</defs></svg>

<div class="sheet-head">
  <div class="brandmark">
    <div class="glyph"></div>
    <div>
      <div class="sheet-title">票据 · 询价与下单</div>
      <div class="sheet-sub">票据投资者 APP ／ A类询价 · 报价明细 · 下单确认 · 购买力与合适性校验</div>
    </div>
  </div>
  <div class="head-right">
    <div class="meta">
      <div>模块<b>票据 INQUIRY</b></div>
      <div>规格<b>iOS 390 &times; 844 @3x</b></div>
      <div>主题<b>深空蓝 Light / Dark</b></div>
      <div>版本<b>v1.3.1 · 2026-11-03</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">v1.3 按代码现状重画；询价 → 报价 → 下单</span></div>
  <div class="cards">
    <div class="card-x">
      <h4>询价单状态 STATUS</h4>
      <div class="bullets">
        <li><span class="st wait"><i></i>未报 / 待报</span>　尚未进入交易员处理</li>
        <li><span class="st live"><i></i>待处理 / 询价中</span>　报价流转中，可能陆续追加报价</li>
        <li><span class="st done"><i></i>已完成</span>　有报价，报价行可下单</li>
        <li><span class="st rej"><i></i>已拒绝</span>　展开出拒绝原因，为空时「无报价」</li>
        <li><span class="st exp"><i></i>已失效</span>　展开出「暂无报价」</li>
      </div>
    </div>
    <div class="card-x">
      <h4>组件 COMPONENT</h4>
      <div class="bullets">
        <li><b>询价面板</b>：检索 + 方向（CALL 只读）+ 周期（可选）+ 名义本金预设 / 自定义</li>
        <li><b>询价卡片</b>：点卡片原地展开报价子表，<b>每行一个「下单」键</b></li>
        <li><b>金额小键盘</b>：真输入框 + 退格，单位「万」，1~9,999</li>
        <li><b>下单页</b>：两组卡片（可改项描边、回显项裸文字）+ 同意句一句一个勾 + 固定底栏；合适性评估在确认后弹出</li>
      </div>
    </div>
    <div class="card-x">
      <h4>约束 RULES</h4>
      <div class="kv">
        <div class="r"><span>名义本金预设</span><b>后端询价配置下发（mock 100 / 200 / 300 / 500 / 1000 万）</b></div>
        <div class="r"><span>自定义名义本金</span><b>1 ~ 9,999 万；下限按配置折 CNY 等值</b></div>
        <div class="r"><span>方向 / 周期</span><b>CALL 只读 / 后端 periods，默认第一项</b></div>
        <div class="r"><span>可询价时段</span><b>后端交易配置下发</b></div>
        <div class="r"><span>询价列表</span><b>仅当天，倒序</b></div>
        <div class="r"><span>下单前置</span><b>同意句勾选（一句一个勾，两份文件）+ 合适性评估（无电子签名闸门）</b></div>
      </div>
    </div>
    <div class="card-x">
      <h4>检索 SEARCH</h4>
      <div class="kv">
        <div class="r"><span>发起条件</span><b>去首尾空格后 ≥ 1 字符 · 防抖 300ms</b></div>
        <div class="r"><span>在搜指示</span><b>下拉一行「转圈 + 加载中…」</b></div>
        <div class="r"><span>续查</span><b>旧结果 30% 不可点 + 转圈浮层</b></div>
        <div class="r"><span>无结果</span><b>一行「暂无匹配标的」</b></div>
        <div class="r"><span>失败</span><b>静默，不出提示</b></div>
        <div class="r"><span>关键词上限</span><b>32 个字符（按码点截断）</b></div>
      </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">23 帧（Q17–Q24 为 v1.3 新增，Q6 已撤；Q11 下单页 v1.3.1 改描边控件、协议一句一个勾）· 点右上角「深色 / 浅色」实时换肤</span></div>
  <div class="frames">

  <!-- ===== Q1 A 类询价 · 主页 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>共赢票据</h1></div>
        <div class="tabs" style="margin-top:12px"><span class="on">询价</span><span>订单</span></div>
        <div class="body">
          <div class="ipanel">
            <div class="search"><svg class="icn" viewBox="0 0 24 24"><use href="#i-search"/></svg><span class="ph">股票代码/拼音/名称</span></div>
            
            <div class="frm2">
              <div><span class="lbl">方向</span><div class="rofield"><b>CALL</b><span>只读</span></div></div>
              <div><span class="lbl">周期</span><div class="rofield"><b>1M</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
            </div>
            <span class="lbl" style="margin-top:13px">名义本金</span>
            <div class="chips"><span class="chip on">100万</span><span class="chip">200万</span><span class="chip">300万</span><span class="chip">500万</span><span class="chip">1000万</span><span class="chip dash">自定义</span></div>
            <div class="frm-btns"><div class="btn off">询价</div><div class="iconbtn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-history"/></svg></div></div>
          </div>
          <div class="card-hd" style="padding:13px 16px 9px"><h3 style="font-size:13px;color:var(--ink-3);font-weight:500">今日询价 · 倒序</h3><span class="viewtog"><span class="on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-cardview"/></svg></span><span><svg class="icn" viewBox="0 0 24 24"><use href="#i-tableview"/></svg></span></span></div>
          <div class="card qc">
            <span class="corner">NEW</span>
            <div class="qc-top">
              <div><div class="qc-name">贵州茅台 <i class="cmark">C</i></div><div class="qc-sub">600519.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st done"><i></i>已完成</span><div class="qc-time">11:15:15</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>200万</span><span><em>报价</em>3 条</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州燃气 <i class="cmark">C</i></div><div class="qc-sub">600903.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>询价中</span><div class="qc-time">11:42:40</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州三力 <i class="cmark">C</i></div><div class="qc-sub">603439.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>待处理</span><div class="qc-time">10:49:41</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>500万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">平安银行 <i class="cmark">C</i></div><div class="qc-sub">000001.SZ · CALL · 1M</div></div>
              <div class="qc-r"><span class="st rej"><i></i>已拒绝</span><div class="qc-time">09:40:12</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q1</div>
      <div class="cap-title">A 类询价 · 主页</div>
      <ul>
        <li>顶栏只有「共赢票据」：品类小标与铃铛已撤；只开通 A 类时不出 A / B 分段（两类都开通才出，B 类本期未上线）</li>
        <li>询价面板：检索框（暗提示「股票代码/拼音/名称」）、方向「CALL · 只读」、周期可选（Q17）、名义本金预设「100万…1000万」+ 自定义；<b>未选标的时「询价」置灰</b>，右侧图标进历史询价</li>
        <li>列表只展示当天、倒序；收起态两行：<code>代码 · CALL · 周期</code> 与「名义本金 / 报价 N 条」；有新报价的卡左上角挂「NEW」丝带</li>
        <li>状态七态：未报 / 待报（灰实点）、待处理 / 询价中（琥珀空心）、已完成（安全色）、已拒绝（危险色）、已失效（浅灰）</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q2 标的检索 · 在搜 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>共赢票据</h1></div>
        <div class="tabs" style="margin-top:12px"><span class="on">询价</span><span>订单</span></div>
        <div class="body">
          <div class="ipanel">
            <div class="search focus"><svg class="icn" viewBox="0 0 24 24"><use href="#i-search"/></svg><b style="font-weight:400">贵州</b><svg class="icn clr" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            <div class="sug"><div class="ld"><span class="ring"><svg class="spin" viewBox="0 0 24 24"><circle class="trk" cx="12" cy="12" r="10"/><circle class="bar" cx="12" cy="12" r="10" stroke-dasharray="17 62.83"/></svg></span>加载中…</div></div>
            <div class="frm2">
              <div><span class="lbl">方向</span><div class="rofield"><b>CALL</b><span>只读</span></div></div>
              <div><span class="lbl">周期</span><div class="rofield"><b>1M</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
            </div>
            <span class="lbl" style="margin-top:13px">名义本金</span>
            <div class="chips"><span class="chip on">100万</span><span class="chip">200万</span><span class="chip">300万</span><span class="chip">500万</span><span class="chip">1000万</span><span class="chip dash">自定义</span></div>
            <div class="frm-btns"><div class="btn off">询价</div><div class="iconbtn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-history"/></svg></div></div>
          </div>
          <div class="card-hd" style="padding:13px 16px 9px"><h3 style="font-size:13px;color:var(--ink-3);font-weight:500">今日询价 · 倒序</h3><span class="viewtog"><span class="on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-cardview"/></svg></span><span><svg class="icn" viewBox="0 0 24 24"><use href="#i-tableview"/></svg></span></span></div>
          <div class="card qc">
            <span class="corner">NEW</span>
            <div class="qc-top">
              <div><div class="qc-name">贵州茅台 <i class="cmark">C</i></div><div class="qc-sub">600519.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st done"><i></i>已完成</span><div class="qc-time">11:15:15</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>200万</span><span><em>报价</em>3 条</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州燃气 <i class="cmark">C</i></div><div class="qc-sub">600903.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>询价中</span><div class="qc-time">11:42:40</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州三力 <i class="cmark">C</i></div><div class="qc-sub">603439.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>待处理</span><div class="qc-time">10:49:41</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>500万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">平安银行 <i class="cmark">C</i></div><div class="qc-sub">000001.SZ · CALL · 1M</div></div>
              <div class="qc-r"><span class="st rej"><i></i>已拒绝</span><div class="qc-time">09:40:12</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q2</div>
      <div class="cap-title">标的检索 · 在搜</div>
      <ul>
        <li>聚焦后检索框转白底 + 品牌描边；有输入时右侧出 × 清除</li>
        <li>输入停 <code>300ms</code> 才发请求；防抖窗口与请求在途都算「在搜」：下拉只有一行转圈 +「加载中…」，不铺骨架</li>
        <li>下拉绝对定位盖在表单上，不推动下方内容</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q3 标的检索 · 联想结果 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>共赢票据</h1></div>
        <div class="tabs" style="margin-top:12px"><span class="on">询价</span><span>订单</span></div>
        <div class="body">
          <div class="ipanel">
            <div class="search focus"><svg class="icn" viewBox="0 0 24 24"><use href="#i-search"/></svg><b style="font-weight:400">贵州</b><svg class="icn clr" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            <div class="sug"><div class="rows"><div class="r"><span class="cd">600519.SH</span><span><em>贵州</em>茅台</span></div><div class="r"><span class="cd">600903.SH</span><span><em>贵州</em>燃气</span></div><div class="r"><span class="cd">603439.SH</span><span><em>贵州</em>三力</span></div></div></div>
            <div class="frm2">
              <div><span class="lbl">方向</span><div class="rofield"><b>CALL</b><span>只读</span></div></div>
              <div><span class="lbl">周期</span><div class="rofield"><b>1M</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
            </div>
            <span class="lbl" style="margin-top:13px">名义本金</span>
            <div class="chips"><span class="chip on">100万</span><span class="chip">200万</span><span class="chip">300万</span><span class="chip">500万</span><span class="chip">1000万</span><span class="chip dash">自定义</span></div>
            <div class="frm-btns"><div class="btn off">询价</div><div class="iconbtn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-history"/></svg></div></div>
          </div>
          <div class="card-hd" style="padding:13px 16px 9px"><h3 style="font-size:13px;color:var(--ink-3);font-weight:500">今日询价 · 倒序</h3><span class="viewtog"><span class="on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-cardview"/></svg></span><span><svg class="icn" viewBox="0 0 24 24"><use href="#i-tableview"/></svg></span></span></div>
          <div class="card qc">
            <span class="corner">NEW</span>
            <div class="qc-top">
              <div><div class="qc-name">贵州茅台 <i class="cmark">C</i></div><div class="qc-sub">600519.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st done"><i></i>已完成</span><div class="qc-time">11:15:15</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>200万</span><span><em>报价</em>3 条</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州燃气 <i class="cmark">C</i></div><div class="qc-sub">600903.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>询价中</span><div class="qc-time">11:42:40</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州三力 <i class="cmark">C</i></div><div class="qc-sub">603439.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>待处理</span><div class="qc-time">10:49:41</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>500万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">平安银行 <i class="cmark">C</i></div><div class="qc-sub">000001.SZ · CALL · 1M</div></div>
              <div class="qc-r"><span class="st rej"><i></i>已拒绝</span><div class="qc-time">09:40:12</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q3</div>
      <div class="cap-title">标的检索 · 联想结果</div>
      <ul>
        <li>代码 / 拼音前缀与名称包含由后端匹配，<b>只回可交易标的</b>；行内代码在左（等宽）、名称在右，命中片段品牌色</li>
        <li>点选后收起下拉、回填「代码 名称」；换标的要先点 × 清掉再输入</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q4 标的检索 · 续查 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>共赢票据</h1></div>
        <div class="tabs" style="margin-top:12px"><span class="on">询价</span><span>订单</span></div>
        <div class="body">
          <div class="ipanel">
            <div class="search focus"><svg class="icn" viewBox="0 0 24 24"><use href="#i-search"/></svg><b style="font-weight:400">贵州茅</b><svg class="icn clr" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            <div class="sug"><div class="rows fade"><div class="r"><span class="cd">600519.SH</span><span><em>贵州</em>茅台</span></div><div class="r"><span class="cd">600903.SH</span><span><em>贵州</em>燃气</span></div><div class="r"><span class="cd">603439.SH</span><span><em>贵州</em>三力</span></div></div><div class="ov"><span><span class="ring"><svg class="spin" viewBox="0 0 24 24"><circle class="trk" cx="12" cy="12" r="10"/><circle class="bar" cx="12" cy="12" r="10" stroke-dasharray="17 62.83"/></svg></span>加载中…</span></div></div>
            <div class="frm2">
              <div><span class="lbl">方向</span><div class="rofield"><b>CALL</b><span>只读</span></div></div>
              <div><span class="lbl">周期</span><div class="rofield"><b>1M</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
            </div>
            <span class="lbl" style="margin-top:13px">名义本金</span>
            <div class="chips"><span class="chip on">100万</span><span class="chip">200万</span><span class="chip">300万</span><span class="chip">500万</span><span class="chip">1000万</span><span class="chip dash">自定义</span></div>
            <div class="frm-btns"><div class="btn off">询价</div><div class="iconbtn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-history"/></svg></div></div>
          </div>
          <div class="card-hd" style="padding:13px 16px 9px"><h3 style="font-size:13px;color:var(--ink-3);font-weight:500">今日询价 · 倒序</h3><span class="viewtog"><span class="on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-cardview"/></svg></span><span><svg class="icn" viewBox="0 0 24 24"><use href="#i-tableview"/></svg></span></span></div>
          <div class="card qc">
            <span class="corner">NEW</span>
            <div class="qc-top">
              <div><div class="qc-name">贵州茅台 <i class="cmark">C</i></div><div class="qc-sub">600519.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st done"><i></i>已完成</span><div class="qc-time">11:15:15</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>200万</span><span><em>报价</em>3 条</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州燃气 <i class="cmark">C</i></div><div class="qc-sub">600903.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>询价中</span><div class="qc-time">11:42:40</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州三力 <i class="cmark">C</i></div><div class="qc-sub">603439.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>待处理</span><div class="qc-time">10:49:41</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>500万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">平安银行 <i class="cmark">C</i></div><div class="qc-sub">000001.SZ · CALL · 1M</div></div>
              <div class="qc-r"><span class="st rej"><i></i>已拒绝</span><div class="qc-time">09:40:12</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q4</div>
      <div class="cap-title">标的检索 · 续查</div>
      <ul>
        <li>已有结果时继续输入：旧结果压到 <code>30%</code> 且不可点，中间浮一枚「转圈 + 加载中…」，不清空不铺骨架</li>
        <li>新关键词的结果到达后原地替换；先发后到的旧响应按关键词丢弃（每个关键词一把缓存）</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q5 标的检索 · 无结果 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>共赢票据</h1></div>
        <div class="tabs" style="margin-top:12px"><span class="on">询价</span><span>订单</span></div>
        <div class="body">
          <div class="ipanel">
            <div class="search focus"><svg class="icn" viewBox="0 0 24 24"><use href="#i-search"/></svg><b style="font-weight:400">腾讯</b><svg class="icn clr" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            <div class="sug"><div class="em">暂无匹配标的</div></div>
            <div class="frm2">
              <div><span class="lbl">方向</span><div class="rofield"><b>CALL</b><span>只读</span></div></div>
              <div><span class="lbl">周期</span><div class="rofield"><b>1M</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
            </div>
            <span class="lbl" style="margin-top:13px">名义本金</span>
            <div class="chips"><span class="chip on">100万</span><span class="chip">200万</span><span class="chip">300万</span><span class="chip">500万</span><span class="chip">1000万</span><span class="chip dash">自定义</span></div>
            <div class="frm-btns"><div class="btn off">询价</div><div class="iconbtn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-history"/></svg></div></div>
          </div>
          <div class="card-hd" style="padding:13px 16px 9px"><h3 style="font-size:13px;color:var(--ink-3);font-weight:500">今日询价 · 倒序</h3><span class="viewtog"><span class="on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-cardview"/></svg></span><span><svg class="icn" viewBox="0 0 24 24"><use href="#i-tableview"/></svg></span></span></div>
          <div class="card qc">
            <span class="corner">NEW</span>
            <div class="qc-top">
              <div><div class="qc-name">贵州茅台 <i class="cmark">C</i></div><div class="qc-sub">600519.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st done"><i></i>已完成</span><div class="qc-time">11:15:15</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>200万</span><span><em>报价</em>3 条</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州燃气 <i class="cmark">C</i></div><div class="qc-sub">600903.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>询价中</span><div class="qc-time">11:42:40</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州三力 <i class="cmark">C</i></div><div class="qc-sub">603439.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>待处理</span><div class="qc-time">10:49:41</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>500万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">平安银行 <i class="cmark">C</i></div><div class="qc-sub">000001.SZ · CALL · 1M</div></div>
              <div class="qc-r"><span class="st rej"><i></i>已拒绝</span><div class="qc-time">09:40:12</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q5</div>
      <div class="cap-title">标的检索 · 无结果</div>
      <ul>
        <li>检索完成且为空：下拉不收起，只出一行「暂无匹配标的」</li>
        <li>检索请求失败时<b>静默</b>：不出提示行、不弹 Toast（v1.2 的 Q6「请求失败 · 点击重试」代码未做，已撤）</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q7 自定义名义本金 · 小键盘 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>共赢票据</h1></div>
        <div class="tabs" style="margin-top:12px"><span class="on">询价</span><span>订单</span></div>
        <div class="body">
          <div class="ipanel">
            <div class="search"><svg class="icn" viewBox="0 0 24 24"><use href="#i-search"/></svg><b>600519.SH 贵州茅台</b><svg class="icn clr" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            
            <div class="frm2">
              <div><span class="lbl">方向</span><div class="rofield"><b>CALL</b><span>只读</span></div></div>
              <div><span class="lbl">周期</span><div class="rofield"><b>1M</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
            </div>
            <span class="lbl" style="margin-top:13px">名义本金</span>
            <div class="chips"><span class="chip on">100万</span><span class="chip">200万</span><span class="chip">300万</span><span class="chip">500万</span><span class="chip">1000万</span><span class="chip dash">自定义</span></div>
            <div class="frm-btns"><div class="btn">询价</div><div class="iconbtn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-history"/></svg></div></div>
          </div>
          <div class="card-hd" style="padding:13px 16px 9px"><h3 style="font-size:13px;color:var(--ink-3);font-weight:500">今日询价 · 倒序</h3><span class="viewtog"><span class="on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-cardview"/></svg></span><span><svg class="icn" viewBox="0 0 24 24"><use href="#i-tableview"/></svg></span></span></div>
          <div class="card qc">
            <span class="corner">NEW</span>
            <div class="qc-top">
              <div><div class="qc-name">贵州茅台 <i class="cmark">C</i></div><div class="qc-sub">600519.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st done"><i></i>已完成</span><div class="qc-time">11:15:15</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>200万</span><span><em>报价</em>3 条</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州燃气 <i class="cmark">C</i></div><div class="qc-sub">600903.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>询价中</span><div class="qc-time">11:42:40</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州三力 <i class="cmark">C</i></div><div class="qc-sub">603439.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>待处理</span><div class="qc-time">10:49:41</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>500万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">平安银行 <i class="cmark">C</i></div><div class="qc-sub">000001.SZ · CALL · 1M</div></div>
              <div class="qc-r"><span class="st rej"><i></i>已拒绝</span><div class="qc-time">09:40:12</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
<div class="scrim bottom">
          <div class="dlg sheet" style="padding-bottom:0">
            <div class="shd-c"><b>自定义名义本金</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            <div style="padding:16px 18px 0">
              <div class="field focus" style="height:56px"><b class="num" style="font-size:28px;font-weight:600">9,999</b><span class="unit" style="font-size:15px">万</span></div>
              <div style="font-size:11.5px;color:var(--ink-3);margin-top:8px">请输入1~9,999的正整数，单位为万</div>
            </div>
            <div class="kbd" style="margin-top:16px">
              <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span>
              <span class="fn"><svg class="icn" viewBox="0 0 24 24"><path d="M9 6h10.5A1.5 1.5 0 0 1 21 7.5v9a1.5 1.5 0 0 1-1.5 1.5H9l-6-6z"/><line x1="12" y1="9.5" x2="17" y2="14.5"/><line x1="17" y1="9.5" x2="12" y2="14.5"/></svg></span><span>0</span><span class="ok">确认</span>
            </div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q7</div>
      <div class="cap-title">自定义名义本金 · 小键盘</div>
      <ul>
        <li>底部面板居中标题 + 右上 ×（× 即取消）；真输入框带光标，只借光标与选区、压掉系统键盘</li>
        <li>键盘 1–9、退格、0、确认；限 1~9,999 正整数，满 4 位再按 Toast「请注意单位是万」；空着确认 Toast「请输入金额」</li>
        <li>确认时低于询价单下限 Toast「询价名义本金最低等值500,000.00 CNY」；通过后「自定义」键直接显示该值</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q8 品类权限 · 询价拦截 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>共赢票据</h1></div>
        <div class="tabs" style="margin-top:12px"><span class="on">询价</span><span>订单</span></div>
        <div class="body">
          <div class="ipanel">
            <div class="search"><svg class="icn" viewBox="0 0 24 24"><use href="#i-search"/></svg><b>600519.SH 贵州茅台</b><svg class="icn clr" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            
            <div class="frm2">
              <div><span class="lbl">方向</span><div class="rofield"><b>CALL</b><span>只读</span></div></div>
              <div><span class="lbl">周期</span><div class="rofield"><b>1M</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
            </div>
            <span class="lbl" style="margin-top:13px">名义本金</span>
            <div class="chips"><span class="chip on">100万</span><span class="chip">200万</span><span class="chip">300万</span><span class="chip">500万</span><span class="chip">1000万</span><span class="chip dash">自定义</span></div>
            <div class="frm-btns"><div class="btn">询价</div><div class="iconbtn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-history"/></svg></div></div>
          </div>
          <div class="card-hd" style="padding:13px 16px 9px"><h3 style="font-size:13px;color:var(--ink-3);font-weight:500">今日询价 · 倒序</h3><span class="viewtog"><span class="on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-cardview"/></svg></span><span><svg class="icn" viewBox="0 0 24 24"><use href="#i-tableview"/></svg></span></span></div>
          <div class="card qc">
            <span class="corner">NEW</span>
            <div class="qc-top">
              <div><div class="qc-name">贵州茅台 <i class="cmark">C</i></div><div class="qc-sub">600519.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st done"><i></i>已完成</span><div class="qc-time">11:15:15</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>200万</span><span><em>报价</em>3 条</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州燃气 <i class="cmark">C</i></div><div class="qc-sub">600903.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>询价中</span><div class="qc-time">11:42:40</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州三力 <i class="cmark">C</i></div><div class="qc-sub">603439.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>待处理</span><div class="qc-time">10:49:41</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>500万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">平安银行 <i class="cmark">C</i></div><div class="qc-sub">000001.SZ · CALL · 1M</div></div>
              <div class="qc-r"><span class="st rej"><i></i>已拒绝</span><div class="qc-time">09:40:12</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd" style="padding-top:22px"><div class="dicon warn"><svg class="icn lg" viewBox="0 0 24 24"><use href="#i-alert"/></svg></div><h3>暂无交易权限</h3><p class="dsc">您的账户暂未开通“共赢票据A类”的交易权限，请联系客户经理开通后，再进行询价！</p></div>
            
            <div class="dlg-ft single"><span>我知道了</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q8</div>
      <div class="cap-title">品类权限 · 询价拦截</div>
      <ul>
        <li>点「询价」先校验品类权限，优先于时段拦截；单按钮弹窗「我知道了」，不提供跳转</li>
        <li>标题与图标是设计系统三段式（原型只有正文），正文逐字照原型（含弯引号）</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q9 卡片展开 · 报价明细 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>共赢票据</h1></div>
        <div class="tabs" style="margin-top:12px"><span class="on">询价</span><span>订单</span></div>
        <div class="body">
          <div class="ipanel">
            <div class="search"><svg class="icn" viewBox="0 0 24 24"><use href="#i-search"/></svg><b>600519.SH 贵州茅台</b><svg class="icn clr" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            
            <div class="frm2">
              <div><span class="lbl">方向</span><div class="rofield"><b>CALL</b><span>只读</span></div></div>
              <div><span class="lbl">周期</span><div class="rofield"><b>1M</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
            </div>
            <span class="lbl" style="margin-top:13px">名义本金</span>
            <div class="chips"><span class="chip on">100万</span><span class="chip">200万</span><span class="chip">300万</span><span class="chip">500万</span><span class="chip">1000万</span><span class="chip dash">自定义</span></div>
            <div class="frm-btns"><div class="btn">询价</div><div class="iconbtn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-history"/></svg></div></div>
          </div>
          <div class="card-hd" style="padding:13px 16px 9px"><h3 style="font-size:13px;color:var(--ink-3);font-weight:500">今日询价 · 倒序</h3><span class="viewtog"><span class="on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-cardview"/></svg></span><span><svg class="icn" viewBox="0 0 24 24"><use href="#i-tableview"/></svg></span></span></div>
          <div class="card qc open">
            <span class="corner">NEW</span>
            <div class="qc-top">
              <div><div class="qc-name">贵州茅台 <i class="cmark">C</i></div><div class="qc-sub">600519.SH · CALL · 1M · 200万</div></div>
              <div class="qc-r"><span class="st done"><i></i>已完成</span><div class="qc-time">11:15:15</div></div>
            </div>
            <div class="qc-open"><div class="qtab">
              <div class="qh"><span>报价名义本金</span><span>收益比例</span><span>报价</span><span>时间</span><span></span></div>
              <div class="qr"><i class="nd"></i><span>100万 CNY</span><span>70.00%</span><span class="p">11.23%</span><span class="t">13:30:45</span><span><b class="mbtn">下单</b></span></div>
              <div class="qr"><span>200万 CNY</span><span>68.50%</span><span class="p">11.05%</span><span class="t">13:29:15</span><span><b class="mbtn">下单</b></span></div>
              <div class="qr"><span>50万 CNY</span><span>66.00%</span><span class="p">10.84%</span><span class="t">13:28:02</span><span><b class="mbtn dis">下单</b></span></div>
            </div></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州燃气 <i class="cmark">C</i></div><div class="qc-sub">600903.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>询价中</span><div class="qc-time">11:42:40</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州三力 <i class="cmark">C</i></div><div class="qc-sub">603439.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>待处理</span><div class="qc-time">10:49:41</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>500万</span><span><em>报价</em>--</span></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q9</div>
      <div class="cap-title">卡片展开 · 报价明细</div>
      <ul>
        <li>点卡片原地展开（手风琴，同时只开一张），展开时品牌描边；第二行追加名义本金，摘要行收起</li>
        <li>报价子表：报价名义本金 · 收益比例 · 报价（品牌色、带 %）· 时间，<b>每行一个「下单」键</b>（不再整行可点）；该报价当前不可下单时下单键半透明不可点</li>
        <li>「新」两级分工：卡片「NEW」丝带表明这单有新报价，行首红点指出是哪一条，看过即消</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q21 卡片展开 · 已拒绝与无报价 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>共赢票据</h1></div>
        <div class="tabs" style="margin-top:12px"><span class="on">询价</span><span>订单</span></div>
        <div class="body">
          <div class="ipanel">
            <div class="search"><svg class="icn" viewBox="0 0 24 24"><use href="#i-search"/></svg><b>600519.SH 贵州茅台</b><svg class="icn clr" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            
            <div class="frm2">
              <div><span class="lbl">方向</span><div class="rofield"><b>CALL</b><span>只读</span></div></div>
              <div><span class="lbl">周期</span><div class="rofield"><b>1M</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
            </div>
            <span class="lbl" style="margin-top:13px">名义本金</span>
            <div class="chips"><span class="chip on">100万</span><span class="chip">200万</span><span class="chip">300万</span><span class="chip">500万</span><span class="chip">1000万</span><span class="chip dash">自定义</span></div>
            <div class="frm-btns"><div class="btn">询价</div><div class="iconbtn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-history"/></svg></div></div>
          </div>
          <div class="card-hd" style="padding:13px 16px 9px"><h3 style="font-size:13px;color:var(--ink-3);font-weight:500">今日询价 · 倒序</h3><span class="viewtog"><span class="on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-cardview"/></svg></span><span><svg class="icn" viewBox="0 0 24 24"><use href="#i-tableview"/></svg></span></span></div>
          <div class="card qc open">
            
            <div class="qc-top">
              <div><div class="qc-name">平安银行 <i class="cmark">C</i></div><div class="qc-sub">000001.SZ · CALL · 1M · 100万</div></div>
              <div class="qc-r"><span class="st rej"><i></i>已拒绝</span><div class="qc-time">09:40:12</div></div>
            </div>
            <div class="qc-open"><div class="notice danger"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-alert"/></svg><span>拒绝原因：风控限制。</span></div></div>
          </div>
          <div class="card qc open">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州三力 <i class="cmark">C</i></div><div class="qc-sub">603439.SH · CALL · 1M · 500万</div></div>
              <div class="qc-r"><span class="st live"><i></i>待处理</span><div class="qc-time">10:49:41</div></div>
            </div>
            <div class="qc-open"><div class="emptybox row"><svg class="illu" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="il1b" x1="10" y1="14" x2="104" y2="90" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-a)"/><stop offset="1" stop-color="var(--il-b)"/></linearGradient><linearGradient id="il1f" x1="18" y1="42" x2="98" y2="94" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-c)"/><stop offset="1" stop-color="var(--il-a)"/></linearGradient></defs><path d="M12 86V22q0-8 8-8h24q4.2 0 6.8 3.3L56 23.4q2.4 3 6.2 3H100q8 0 8 8V86q0 8-8 8H20q-8 0-8-8Z" fill="url(#il1b)"/><path d="M8.6 42h102.8q4.8 0 3.9 4.7l-7.6 41q-.9 5-6 5H18.3q-5.1 0-6-5l-7.6-41Q3.8 42 8.6 42Z" fill="url(#il1f)"/></svg><div class="etxt">暂无报价</div></div></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q21</div>
      <div class="cap-title">卡片展开 · 已拒绝与无报价<span class="cap-flags"><span class="cap-flag new">v1.3 新增</span></span></div>
      <ul>
        <li>并排示意两种明细（实际同时只展开一张）：已拒绝出危险色提示条「拒绝原因：…」，原因为空时显示「拒绝原因：无报价」</li>
        <li>没有报价（询价中 / 待处理 / 已失效）出行内空态「暂无报价」，卡片不做灰度</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q10 时段 · 询价拦截 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>共赢票据</h1></div>
        <div class="tabs" style="margin-top:12px"><span class="on">询价</span><span>订单</span></div>
        <div class="body">
          <div class="ipanel">
            <div class="search"><svg class="icn" viewBox="0 0 24 24"><use href="#i-search"/></svg><b>600519.SH 贵州茅台</b><svg class="icn clr" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            
            <div class="frm2">
              <div><span class="lbl">方向</span><div class="rofield"><b>CALL</b><span>只读</span></div></div>
              <div><span class="lbl">周期</span><div class="rofield"><b>1M</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
            </div>
            <span class="lbl" style="margin-top:13px">名义本金</span>
            <div class="chips"><span class="chip on">100万</span><span class="chip">200万</span><span class="chip">300万</span><span class="chip">500万</span><span class="chip">1000万</span><span class="chip dash">自定义</span></div>
            <div class="frm-btns"><div class="btn">询价</div><div class="iconbtn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-history"/></svg></div></div>
          </div>
          <div class="card-hd" style="padding:13px 16px 9px"><h3 style="font-size:13px;color:var(--ink-3);font-weight:500">今日询价 · 倒序</h3><span class="viewtog"><span class="on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-cardview"/></svg></span><span><svg class="icn" viewBox="0 0 24 24"><use href="#i-tableview"/></svg></span></span></div>
          <div class="card qc">
            <span class="corner">NEW</span>
            <div class="qc-top">
              <div><div class="qc-name">贵州茅台 <i class="cmark">C</i></div><div class="qc-sub">600519.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st done"><i></i>已完成</span><div class="qc-time">11:15:15</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>200万</span><span><em>报价</em>3 条</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州燃气 <i class="cmark">C</i></div><div class="qc-sub">600903.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>询价中</span><div class="qc-time">11:42:40</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州三力 <i class="cmark">C</i></div><div class="qc-sub">603439.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>待处理</span><div class="qc-time">10:49:41</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>500万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">平安银行 <i class="cmark">C</i></div><div class="qc-sub">000001.SZ · CALL · 1M</div></div>
              <div class="qc-r"><span class="st rej"><i></i>已拒绝</span><div class="qc-time">09:40:12</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><h3>当前时间段不允许询价，可询价时间：</h3></div>
            <div style="padding:12px 18px 0"><div class="twin"><span>交易日</span><b>09:00:00 ~ 14:50:00</b></div></div>
            <div class="dlg-ft single"><span>我知道了</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q10</div>
      <div class="cap-title">时段 · 询价拦截</div>
      <ul>
        <li>有可询时段但不在时段内 → 单按钮弹窗列时间片（相邻合并）</li>
        <li>当天无可询时段 → 只 Toast「当前不允许询价！」；清算中 → Toast「系统清算中，请稍后再试！」</li>
        <li>下单页点「确认」时同一套判断，标题换成「当前时间段不允许交易，可交易时间：」</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q17 周期 · 单选面板 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>共赢票据</h1></div>
        <div class="tabs" style="margin-top:12px"><span class="on">询价</span><span>订单</span></div>
        <div class="body">
          <div class="ipanel">
            <div class="search"><svg class="icn" viewBox="0 0 24 24"><use href="#i-search"/></svg><b>600519.SH 贵州茅台</b><svg class="icn clr" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            
            <div class="frm2">
              <div><span class="lbl">方向</span><div class="rofield"><b>CALL</b><span>只读</span></div></div>
              <div><span class="lbl">周期</span><div class="rofield"><b>1M</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
            </div>
            <span class="lbl" style="margin-top:13px">名义本金</span>
            <div class="chips"><span class="chip on">100万</span><span class="chip">200万</span><span class="chip">300万</span><span class="chip">500万</span><span class="chip">1000万</span><span class="chip dash">自定义</span></div>
            <div class="frm-btns"><div class="btn">询价</div><div class="iconbtn"><svg class="icn" viewBox="0 0 24 24"><use href="#i-history"/></svg></div></div>
          </div>
          <div class="card-hd" style="padding:13px 16px 9px"><h3 style="font-size:13px;color:var(--ink-3);font-weight:500">今日询价 · 倒序</h3><span class="viewtog"><span class="on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-cardview"/></svg></span><span><svg class="icn" viewBox="0 0 24 24"><use href="#i-tableview"/></svg></span></span></div>
          <div class="card qc">
            <span class="corner">NEW</span>
            <div class="qc-top">
              <div><div class="qc-name">贵州茅台 <i class="cmark">C</i></div><div class="qc-sub">600519.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st done"><i></i>已完成</span><div class="qc-time">11:15:15</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>200万</span><span><em>报价</em>3 条</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州燃气 <i class="cmark">C</i></div><div class="qc-sub">600903.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>询价中</span><div class="qc-time">11:42:40</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">贵州三力 <i class="cmark">C</i></div><div class="qc-sub">603439.SH · CALL · 1M</div></div>
              <div class="qc-r"><span class="st live"><i></i>待处理</span><div class="qc-time">10:49:41</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>500万</span><span><em>报价</em>--</span></div>
          </div>
          <div class="card qc">
            
            <div class="qc-top">
              <div><div class="qc-name">平安银行 <i class="cmark">C</i></div><div class="qc-sub">000001.SZ · CALL · 1M</div></div>
              <div class="qc-r"><span class="st rej"><i></i>已拒绝</span><div class="qc-time">09:40:12</div></div>
            </div>
            <div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>报价</em>--</span></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="scrim bottom">
          <div class="dlg sheet">
            <div class="shd"><b>选择周期</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            <div class="opt-row"><span>1M</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></div><div class="opt-row"><span>3M</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q17</div>
      <div class="cap-title">周期 · 单选面板<span class="cap-flags"><span class="cap-flag new">v1.3 新增</span></span></div>
      <ul>
        <li>候选来自询价配置的 <code>periods[]</code>，默认第一项；换标的后回到第一项</li>
        <li>与结算币种同一套单选面板（左标题 + 右 ×），选中即关闭</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q11 下单 · 正常态 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>下单</h2></div>
        <div class="body">
          <div class="gtitle">交易信息</div>
          <div class="card ocard">
            <div class="frow"><span>交易币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>CNY</b></div>
            <div class="frow ed"><span>本次下单规模</span><div class="edv"><div class="inp"><b>100</b><em>万</em></div><div class="fh">剩余名义本金规模 <b>100</b>万 CNY</div></div></div>
            <div class="frow"><span>价格要求</span><span class="rads"><span class="rad on"><i></i>市价</span><span class="rad"><i></i>限价</span></span></div>
            
            <div class="frow last"><span>结算币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><div class="inp sel"><b>HKD</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
          </div>
          <div class="gtitle">金额明细</div>
          <div class="card ocard">
            <div class="frow"><span>票据面值 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,230,000.00 HKD</b></div>
            <div class="frow"><span>票据发行价 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,234,000.00 HKD</b></div>
            <div class="frow"><span>承销费用 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>3,000.00 HKD</b></div>
            <div class="frow tot last"><span>总金额</span><b>11,237,000.00 HKD<small>购买力 23,200,000.00 HKD</small></b></div>
          </div>
          <div class="agree">
            <label><span class="cb on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span>我已阅读并同意<b>《销售说明》</b><b>《风险披露》</b>的全部内容</span></label>
          </div>
        </div>
        <div class="bbar"><div class="btn ghost" style="flex:1">取消</div><div class="btn" style="flex:1.4">确认</div></div>

        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q11</div>
      <div class="cap-title">下单 · 正常态<span class="cap-flags"><span class="cap-flag new">v1.3.1 改</span></span></div>
      <ul>
        <li>两组卡片：交易信息（交易币种ⓘ · 本次下单规模 · 价格要求 · 结算币种ⓘ）与金额明细（票据面值ⓘ · 票据发行价ⓘ · 承销费用ⓘ · 总金额）；<b>可改的项画成描边控件，回显项是裸文字</b>（方案稿《下单页可填项突出》方案一「描边即可改 · 原布局不动」）</li>
        <li>本次下单规模是 36 高的描边输入框（最窄 150，数值 15 · 500 靠右 + 单位「万」；聚焦品牌色描边 + 3px 弱底外发光），默认填剩余名义本金的整数万；删空时暗提示「剩余名义本金100万」；挨着字段名放不下时整块换到字段名下一行、靠右</li>
        <li>剩余名义本金规模不再单占一行，挂在框下做一行 12 号提示「剩余名义本金规模 100万 CNY」，只有数字品牌色；<b>数字可点</b>：规模回到默认填入并收起键盘</li>
        <li>结算币种是 32 高的描边选择器（值 + ˅，热区撑到 44），点开底部单选面板（Q20）</li>
        <li>改规模 / 价格 / 币种后重新试算，在途时金额位换骨块、试算失败在「金额明细」标题右侧出「重试」</li>
        <li>总金额下回显「购买力 X」（灰）；<b>两份协议合成一句一个勾</b>「我已阅读并同意《销售说明》《风险披露》的全部内容」（产品已确认，原型是两行两勾）：勾上即两份都同意，两个文件名各自点开全文，点句子其余部分切换勾选；勾上「确认」才可点；底栏「取消 · 确认」固定</li>
        <li>报价已作废或不可下单时整页只剩一行「该报价已失效」</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q22 下单 · 限价与越界 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>下单</h2></div>
        <div class="body">
          <div class="gtitle">交易信息</div>
          <div class="card ocard">
            <div class="frow"><span>交易币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>CNY</b></div>
            <div class="frow ed"><span>本次下单规模</span><div class="edv"><div class="inp"><b>100</b><em>万</em></div><div class="fh">剩余名义本金规模 <b>100</b>万 CNY</div></div></div>
            <div class="frow last"><span>价格要求</span><span class="rads"><span class="rad"><i></i>市价</span><span class="rad on"><i></i>限价</span></span></div>
            <div class="lp"><div class="stepper err"><b>−</b><i>13.60</i><b>+</b></div><div class="errtip r"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-alert"/></svg>价格超出合理范围（10.24~12.52）</div></div>
            <div class="frow last"><span>结算币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><div class="inp sel"><b>HKD</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
          </div>
          <div class="gtitle">金额明细</div>
          <div class="card ocard">
            <div class="frow"><span>票据面值 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,230,000.00 HKD</b></div>
            <div class="frow"><span>票据发行价 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,234,000.00 HKD</b></div>
            <div class="frow"><span>承销费用 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>3,000.00 HKD</b></div>
            <div class="frow tot last"><span>总金额</span><b>11,237,000.00 HKD<small>购买力 23,200,000.00 HKD</small></b></div>
          </div>
          <div class="agree">
            <label><span class="cb"></span><span>我已阅读并同意<b>《销售说明》</b><b>《风险披露》</b>的全部内容</span></label>
          </div>
        </div>
        <div class="bbar"><div class="btn ghost" style="flex:1">取消</div><div class="btn off" style="flex:1.4">确认</div></div>

        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q22</div>
      <div class="cap-title">下单 · 限价与越界<span class="cap-flags"><span class="cap-flag new">v1.3 新增</span></span></div>
      <ul>
        <li>选限价：步进器贴右另起一行，默认带入最新价；有效时下方列「跌停 / 涨停」，越界时步进器转危险色、红字「价格超出合理范围（10.24~12.52）」顶替那一行</li>
        <li>市价不显示跌停 / 涨停；限价越界时确认置灰</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q12 下单 · 购买力不足 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>下单</h2></div>
        <div class="body">
          <div class="gtitle">交易信息</div>
          <div class="card ocard">
            <div class="frow"><span>交易币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>CNY</b></div>
            <div class="frow ed"><span>本次下单规模</span><div class="edv"><div class="inp"><b>100</b><em>万</em></div><div class="fh">剩余名义本金规模 <b>100</b>万 CNY</div></div></div>
            <div class="frow"><span>价格要求</span><span class="rads"><span class="rad on"><i></i>市价</span><span class="rad"><i></i>限价</span></span></div>
            
            <div class="frow last"><span>结算币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><div class="inp sel"><b>HKD</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
          </div>
          <div class="gtitle">金额明细</div>
          <div class="card ocard over">
            <div class="frow"><span>票据面值 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,230,000.00 HKD</b></div>
            <div class="frow"><span>票据发行价 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,234,000.00 HKD</b></div>
            <div class="frow"><span>承销费用 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>3,000.00 HKD</b></div>
            <div class="frow tot last over"><span>总金额</span><b>11,237,000.00 HKD<small>购买力 11,200,000.00 HKD</small></b></div>
          </div>
          <div class="agree">
            <label><span class="cb on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span>我已阅读并同意<b>《销售说明》</b><b>《风险披露》</b>的全部内容</span></label>
          </div>
        </div>
        <div class="bbar"><div class="btn ghost" style="flex:1">取消</div><div class="btn" style="flex:1.4">确认</div></div>
        <div class="toast" style="top:76%">购买力不足</div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q12</div>
      <div class="cap-title">下单 · 购买力不足</div>
      <ul>
        <li>总金额 &gt; 购买力：金额明细整块红框、总金额行转危险色、购买力回显变红</li>
        <li>确认键<b>不置灰</b>，点确认时 Toast「购买力不足」（原型口径），不列差额</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q18 交易币种 · 说明弹窗 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>下单</h2></div>
        <div class="body">
          <div class="gtitle">交易信息</div>
          <div class="card ocard">
            <div class="frow"><span>交易币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>CNY</b></div>
            <div class="frow ed"><span>本次下单规模</span><div class="edv"><div class="inp"><b>100</b><em>万</em></div><div class="fh">剩余名义本金规模 <b>100</b>万 CNY</div></div></div>
            <div class="frow"><span>价格要求</span><span class="rads"><span class="rad on"><i></i>市价</span><span class="rad"><i></i>限价</span></span></div>
            
            <div class="frow last"><span>结算币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><div class="inp sel"><b>HKD</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
          </div>
          <div class="gtitle">金额明细</div>
          <div class="card ocard">
            <div class="frow"><span>票据面值 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,230,000.00 HKD</b></div>
            <div class="frow"><span>票据发行价 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,234,000.00 HKD</b></div>
            <div class="frow"><span>承销费用 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>3,000.00 HKD</b></div>
            <div class="frow tot last"><span>总金额</span><b>11,237,000.00 HKD<small>购买力 23,200,000.00 HKD</small></b></div>
          </div>
          <div class="agree">
            <label><span class="cb on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span>我已阅读并同意<b>《销售说明》</b><b>《风险披露》</b>的全部内容</span></label>
          </div>
        </div>
        <div class="bbar"><div class="btn ghost" style="flex:1">取消</div><div class="btn" style="flex:1.4">确认</div></div>

        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><p class="dsc" style="margin-top:4px;color:var(--ink-1)">交易币种：即票据的底层资产计价币种，若底层资产定价是人民币，则交易币种为CNY；若底层资产定价是港币，则交易币种为HKD。</p></div>
            <div class="dlg-ft single"><span>我知道了</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q18</div>
      <div class="cap-title">交易币种 · 说明弹窗<span class="cap-flags"><span class="cap-flag new">v1.3 新增</span></span></div>
      <ul>
        <li>交易币种 / 结算币种的 ⓘ：无标题弹窗，正文居中、以「交易币种：」「结算币种：」开头，单键「我知道了」</li>
        <li>读屏标题念字段名</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q19 金额字段 · 公式说明 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>下单</h2></div>
        <div class="body">
          <div class="gtitle">交易信息</div>
          <div class="card ocard">
            <div class="frow"><span>交易币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>CNY</b></div>
            <div class="frow ed"><span>本次下单规模</span><div class="edv"><div class="inp"><b>100</b><em>万</em></div><div class="fh">剩余名义本金规模 <b>100</b>万 CNY</div></div></div>
            <div class="frow"><span>价格要求</span><span class="rads"><span class="rad on"><i></i>市价</span><span class="rad"><i></i>限价</span></span></div>
            
            <div class="frow last"><span>结算币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><div class="inp sel"><b>HKD</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
          </div>
          <div class="gtitle">金额明细</div>
          <div class="card ocard">
            <div class="frow"><span>票据面值 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,230,000.00 HKD</b></div>
            <div class="frow"><span>票据发行价 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,234,000.00 HKD</b></div>
            <div class="frow"><span>承销费用 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>3,000.00 HKD</b></div>
            <div class="frow tot last"><span>总金额</span><b>11,237,000.00 HKD<small>购买力 23,200,000.00 HKD</small></b></div>
          </div>
          <div class="agree">
            <label><span class="cb on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span>我已阅读并同意<b>《销售说明》</b><b>《风险披露》</b>的全部内容</span></label>
          </div>
        </div>
        <div class="bbar"><div class="btn ghost" style="flex:1">取消</div><div class="btn" style="flex:1.4">确认</div></div>

        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><h3>票据面值</h3><p class="dsc">=本次下单规模（结算币种）* A类报价，四舍五入保留两位小数</p></div>
            
            <div class="dlg-ft single"><span>我知道了</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q19</div>
      <div class="cap-title">金额字段 · 公式说明<span class="cap-flags"><span class="cap-flag new">v1.3 新增</span></span></div>
      <ul>
        <li>票据面值 / 票据发行价 / 承销费用的 ⓘ：字段名作标题，公式照原型字段说明表逐字，公式不塞进正文</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q20 结算币种 · 单选面板 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>下单</h2></div>
        <div class="body">
          <div class="gtitle">交易信息</div>
          <div class="card ocard">
            <div class="frow"><span>交易币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>CNY</b></div>
            <div class="frow ed"><span>本次下单规模</span><div class="edv"><div class="inp"><b>100</b><em>万</em></div><div class="fh">剩余名义本金规模 <b>100</b>万 CNY</div></div></div>
            <div class="frow"><span>价格要求</span><span class="rads"><span class="rad on"><i></i>市价</span><span class="rad"><i></i>限价</span></span></div>
            
            <div class="frow last"><span>结算币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><div class="inp sel"><b>HKD</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
          </div>
          <div class="gtitle">金额明细</div>
          <div class="card ocard">
            <div class="frow"><span>票据面值 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,230,000.00 HKD</b></div>
            <div class="frow"><span>票据发行价 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,234,000.00 HKD</b></div>
            <div class="frow"><span>承销费用 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>3,000.00 HKD</b></div>
            <div class="frow tot last"><span>总金额</span><b>11,237,000.00 HKD<small>购买力 23,200,000.00 HKD</small></b></div>
          </div>
          <div class="agree">
            <label><span class="cb on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span>我已阅读并同意<b>《销售说明》</b><b>《风险披露》</b>的全部内容</span></label>
          </div>
        </div>
        <div class="bbar"><div class="btn ghost" style="flex:1">取消</div><div class="btn" style="flex:1.4">确认</div></div>

        <div class="scrim bottom">
          <div class="dlg sheet">
            <div class="shd"><b>选择结算币种</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-x"/></svg></div>
            <div class="opt-row"><span>HKD</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></div><div class="opt-row"><span>CNY</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q20</div>
      <div class="cap-title">结算币种 · 单选面板<span class="cap-flags"><span class="cap-flag new">v1.3 新增</span></span></div>
      <ul>
        <li>结算币种可选 HKD / CNY，选中即重新试算</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q13 合适性评估 · 通过 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>下单</h2></div>
        <div class="body">
          <div class="gtitle">交易信息</div>
          <div class="card ocard">
            <div class="frow"><span>交易币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>CNY</b></div>
            <div class="frow ed"><span>本次下单规模</span><div class="edv"><div class="inp"><b>100</b><em>万</em></div><div class="fh">剩余名义本金规模 <b>100</b>万 CNY</div></div></div>
            <div class="frow"><span>价格要求</span><span class="rads"><span class="rad on"><i></i>市价</span><span class="rad"><i></i>限价</span></span></div>
            
            <div class="frow last"><span>结算币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><div class="inp sel"><b>HKD</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
          </div>
          <div class="gtitle">金额明细</div>
          <div class="card ocard">
            <div class="frow"><span>票据面值 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,230,000.00 HKD</b></div>
            <div class="frow"><span>票据发行价 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,234,000.00 HKD</b></div>
            <div class="frow"><span>承销费用 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>3,000.00 HKD</b></div>
            <div class="frow tot last"><span>总金额</span><b>11,237,000.00 HKD<small>购买力 23,200,000.00 HKD</small></b></div>
          </div>
          <div class="agree">
            <label><span class="cb on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span>我已阅读并同意<b>《销售说明》</b><b>《风险披露》</b>的全部内容</span></label>
          </div>
        </div>
        <div class="bbar"><div class="btn ghost" style="flex:1">取消</div><div class="btn" style="flex:1.4">确认</div></div>

        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><h3>合适性评估</h3></div>
            <div style="padding:12px 14px 0"><div class="stab"><div class="sh"><span>检验项目</span><span>产品要求</span><span>我</span><span>匹配结果</span></div><div><span>风险等级</span><span>R5-高风险</span><span>5-非常进取型</span><span class="y">通过</span></div><div><span>投资目标</span><span>4-增长主导</span><span>5-积极增长</span><span class="y">通过</span></div><div><span>投资年限</span><span>产品周期1M（1个月）</span><span>小于1年</span><span class="y">通过</span></div><div><span>投资年龄</span><span>到期年龄不超过80岁</span><span>35-50岁（按35岁计算）</span><span class="y">通过</span></div><div><span>投资经验</span><span>有衍生品/结构性产品投资经验</span><span>有</span><span class="y">通过</span></div><div><span>账户总资产集中度</span><span>不超过60.00%</span><span>58.00%</span><span class="y">通过</span></div></div></div>
            <div style="padding:12px 14px 0"><div class="notice info"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-info"/></svg><span>合适性评估：通过，请确认下单。</span></div></div>
            <div class="dlg-ft"><span>取消</span><span>确认</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q13</div>
      <div class="cap-title">合适性评估 · 通过</div>
      <ul>
        <li>检验项目、产品要求、我的情况与底部结论句都由后端随评估结果下发、原样显示；表头四列「检验项目 / 产品要求 / 我 / 匹配结果」</li>
        <li>通过：信息条「合适性评估：通过，请确认下单。」，点「确认」才真正下单</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q23 合适性评估 · 需申报 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>下单</h2></div>
        <div class="body">
          <div class="gtitle">交易信息</div>
          <div class="card ocard">
            <div class="frow"><span>交易币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>CNY</b></div>
            <div class="frow ed"><span>本次下单规模</span><div class="edv"><div class="inp"><b>100</b><em>万</em></div><div class="fh">剩余名义本金规模 <b>100</b>万 CNY</div></div></div>
            <div class="frow"><span>价格要求</span><span class="rads"><span class="rad on"><i></i>市价</span><span class="rad"><i></i>限价</span></span></div>
            
            <div class="frow last"><span>结算币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><div class="inp sel"><b>HKD</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
          </div>
          <div class="gtitle">金额明细</div>
          <div class="card ocard">
            <div class="frow"><span>票据面值 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,230,000.00 HKD</b></div>
            <div class="frow"><span>票据发行价 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,234,000.00 HKD</b></div>
            <div class="frow"><span>承销费用 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>3,000.00 HKD</b></div>
            <div class="frow tot last"><span>总金额</span><b>11,237,000.00 HKD<small>购买力 23,200,000.00 HKD</small></b></div>
          </div>
          <div class="agree">
            <label><span class="cb on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span>我已阅读并同意<b>《销售说明》</b><b>《风险披露》</b>的全部内容</span></label>
          </div>
        </div>
        <div class="bbar"><div class="btn ghost" style="flex:1">取消</div><div class="btn" style="flex:1.4">确认</div></div>

        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><h3>合适性评估</h3></div>
            <div style="padding:12px 14px 0"><div class="stab"><div class="sh"><span>检验项目</span><span>产品要求</span><span>我</span><span>匹配结果</span></div><div><span>风险等级</span><span>R5-高风险</span><span>5-非常进取型</span><span class="y">通过</span></div><div><span>投资目标</span><span>4-增长主导</span><span>2-收入主导</span><span class="n">不通过</span></div><div><span>投资年限</span><span>产品周期1M（1个月）</span><span>小于1年</span><span class="y">通过</span></div><div><span>投资年龄</span><span>到期年龄不超过80岁</span><span>35-50岁（按35岁计算）</span><span class="y">通过</span></div><div><span>投资经验</span><span>有衍生品/结构性产品投资经验</span><span>有</span><span class="y">通过</span></div><div><span>账户总资产集中度</span><span>不超过60.00%</span><span>80.00%</span><span class="n">不通过</span></div><div><span>个人总资产集中度</span><span>不超过60.00%</span><span>50.00%</span><span class="y">通过</span></div></div></div>
            <div style="padding:12px 14px 0"><div class="notice warn"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-alert"/></svg><span>如需继续买入，请确认风险并选择你的理由。</span></div></div>
            <div class="reasons"><span class="rad"><i></i>产品目标符合本人投资目标</span><span class="rad"><i></i>为达至平衡资产配置的目的</span><span class="rad"><i></i>考虑本人在账户外的资产，本人确定此风险属可接受范围</span><span class="rad"><i></i>已寻求独立投资或财务顾问专业意见后做出此投资决定</span><div class="oth"><span class="rad"><i></i>其他</span><div class="field"><span class="ph">请录入少于20字其他原因</span></div></div></div>
            <div class="dlg-ft"><span>取消</span><span class="off">确认</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q23</div>
      <div class="cap-title">合适性评估 · 需申报<span class="cap-flags"><span class="cap-flag new">v1.3 新增</span></span></div>
      <ul>
        <li>本次下单 ≥ 200 万（mock 口径）：琥珀条「如需继续买入，请确认风险并选择你的理由。」+ 五条理由<b>单选</b></li>
        <li>选「其他」须填写少于 20 字的原因；未选理由时「确认」置灰，提交只带一条理由</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q24 合适性评估 · 不通过 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>下单</h2></div>
        <div class="body">
          <div class="gtitle">交易信息</div>
          <div class="card ocard">
            <div class="frow"><span>交易币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>CNY</b></div>
            <div class="frow ed"><span>本次下单规模</span><div class="edv"><div class="inp"><b>100</b><em>万</em></div><div class="fh">剩余名义本金规模 <b>100</b>万 CNY</div></div></div>
            <div class="frow"><span>价格要求</span><span class="rads"><span class="rad on"><i></i>市价</span><span class="rad"><i></i>限价</span></span></div>
            
            <div class="frow last"><span>结算币种 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><div class="inp sel"><b>HKD</b><svg class="icn" viewBox="0 0 24 24"><use href="#i-down"/></svg></div></div>
          </div>
          <div class="gtitle">金额明细</div>
          <div class="card ocard">
            <div class="frow"><span>票据面值 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,230,000.00 HKD</b></div>
            <div class="frow"><span>票据发行价 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>11,234,000.00 HKD</b></div>
            <div class="frow"><span>承销费用 <svg class="icn xi" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><b>3,000.00 HKD</b></div>
            <div class="frow tot last"><span>总金额</span><b>11,237,000.00 HKD<small>购买力 23,200,000.00 HKD</small></b></div>
          </div>
          <div class="agree">
            <label><span class="cb on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><span>我已阅读并同意<b>《销售说明》</b><b>《风险披露》</b>的全部内容</span></label>
          </div>
        </div>
        <div class="bbar"><div class="btn ghost" style="flex:1">取消</div><div class="btn" style="flex:1.4">确认</div></div>

        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><h3>合适性评估</h3></div>
            <div style="padding:12px 14px 0"><div class="stab"><div class="sh"><span>检验项目</span><span>产品要求</span><span>我</span><span>匹配结果</span></div><div><span>风险等级</span><span>R5-高风险</span><span>4-进取型</span><span class="n">不通过</span></div><div><span>投资目标</span><span>4-增长主导</span><span>5-积极增长</span><span class="y">通过</span></div><div><span>投资年限</span><span>产品周期1M（1个月）</span><span>小于1年</span><span class="y">通过</span></div><div><span>投资年龄</span><span>到期年龄不超过80岁</span><span>35-50岁（按35岁计算）</span><span class="y">通过</span></div><div><span>投资经验</span><span>有衍生品/结构性产品投资经验</span><span>有</span><span class="y">通过</span></div><div><span>账户总资产集中度</span><span>不超过60.00%</span><span>80.00%</span><span class="n">不通过</span></div><div><span>个人总资产集中度</span><span>不超过60.00%</span><span>50.00%</span><span class="y">通过</span></div></div></div>
            <div style="padding:12px 14px 0"><div class="notice danger"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-alert"/></svg><span>合适性评估：不通过，不允许下单。</span></div></div>
            <div class="dlg-ft"><span>取消</span><span class="off">确认</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q24</div>
      <div class="cap-title">合适性评估 · 不通过<span class="cap-flags"><span class="cap-flag new">v1.3 新增</span></span></div>
      <ul>
        <li>危险条「合适性评估：不通过，不允许下单。」；「确认」置灰，只能取消</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q14 销售说明 / 风险披露 ===== -->
  <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="doc">
            <h4>共赢票据 A 类 · 600519.SH</h4>
            <div class="no">DOC-SALE-20260815-A01</div>
            <div class="sect">
              <b>产品及发行安排</b>此产品由本公司发行，证券及期货事务监察委员会（证监会）并未审阅任何与本产品有关的文件。投资者请谨慎考虑是否投资此产品。
              <b>身份</b>本公司为证券有限公司以代理人之身份执行此买卖盘，并不作为交易对手方。
              <b>独立性</b>本公司并非阁下的独立中介人。
              <b>风险披露</b>此产品并非保本产品，具有较高风险，价格可能剧烈波动，投资者可能损失全部本金。
            </div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q14</div>
      <div class="cap-title">销售说明 / 风险披露</div>
      <ul>
        <li>原型两帧 H5 页：标题分别为「销售说明」「共赢票据A类风险披露」；长文正文行高 1.9</li>
        <li><b>没有底部按钮</b>：返回即回到下单页、保留填写内容，勾选只在下单页由用户自己勾</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q15 协议文档 · 加载失败 ===== -->
  <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>共赢票据A类风险披露</h2></div>
        <div class="body" style="display:flex;flex-direction:column">
          <div class="emptyslot"><div class="emptybox"><svg class="illu" viewBox="0 0 120 104" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="il2b" x1="10" y1="14" x2="104" y2="90" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-a)"/><stop offset="1" stop-color="var(--il-b)"/></linearGradient><linearGradient id="il2f" x1="18" y1="42" x2="98" y2="94" gradientUnits="userSpaceOnUse"><stop stop-color="var(--il-c)"/><stop offset="1" stop-color="var(--il-a)"/></linearGradient></defs><path d="M12 86V22q0-8 8-8h24q4.2 0 6.8 3.3L56 23.4q2.4 3 6.2 3H100q8 0 8 8V86q0 8-8 8H20q-8 0-8-8Z" fill="url(#il2b)"/><path d="M8.6 42h102.8q4.8 0 3.9 4.7l-7.6 41q-.9 5-6 5H18.3q-5.1 0-6-5l-7.6-41Q3.8 42 8.6 42Z" fill="url(#il2f)"/></svg><div class="etxt">加载异常，请稍后再试</div></div></div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q15</div>
      <div class="cap-title">协议文档 · 加载失败</div>
      <ul>
        <li>只给插画 + 一句「加载异常，请稍后再试」：不出错误码、不给「重新加载」，返回再进就是重试</li>
        <li>与「暂无数据」共用同一张单色插画；关于页的协议文档同口径</li>
      </ul>
    </div>
  </div>

  <!-- ===== Q16 下单成功 · 落到订单页 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>共赢票据</h1></div>
        <div class="tabs" style="margin-top:12px"><span>询价</span><span class="on">订单</span></div>
        <div class="body">
          <div class="filterbar"><div class="fbscroll"><span class="fb on">全部(50)</span><span class="fb">可撤(20)</span><span class="fb">已完成(19)</span></div><span class="fb" style="flex:none;padding:0 6px;background:none"><svg class="icn" viewBox="0 0 24 24"><use href="#i-history"/></svg></span><span class="viewtog sep"><span class="on"><svg class="icn" viewBox="0 0 24 24"><use href="#i-cardview"/></svg></span><span><svg class="icn" viewBox="0 0 24 24"><use href="#i-tableview"/></svg></span></span></div>
          <div class="card qc"><div class="qc-top"><div><div class="qc-name">贵州茅台 <i class="cmark">C</i> <span class="tag t-brand">买入</span></div><div class="qc-sub">600519.SH</div></div><div class="qc-r"><span class="st live"><i></i>待处理</span><div class="qc-time">13:31:02</div></div></div><div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>价格要求</em>限价 11.23</span></div></div>
          <div class="card qc"><div class="qc-top"><div><div class="qc-name">贵州燃气 <i class="cmark">C</i> <span class="tag t-brand">买入</span></div><div class="qc-sub">600903.SH</div></div><div class="qc-r"><span class="st live"><i></i>执行中</span><div class="qc-time">12:20:11</div></div></div><div class="qc-meta"><span><em>名义本金</em>200万</span><span><em>价格要求</em>市价</span></div></div>
          <div class="card qc"><div class="qc-top"><div><div class="qc-name">贵州茅台 <i class="cmark">C</i> <span class="tag t-brand">买入</span></div><div class="qc-sub">600519.SH</div></div><div class="qc-r"><span class="st live"><i></i>待撤</span><div class="qc-time">11:50:00</div></div></div><div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>价格要求</em>限价 11.23</span></div></div>
          <div class="card qc"><div class="qc-top"><div><div class="qc-name">贵州茅台 <i class="cmark">C</i> <span class="tag t-brand">买入</span></div><div class="qc-sub">600519.SH</div></div><div class="qc-r"><span class="st live"><i></i>撤单中</span><div class="qc-time">11:30:00</div></div></div><div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>价格要求</em>限价 11.23</span></div></div>
          <div class="card qc"><div class="qc-top"><div><div class="qc-name">贵州茅台 <i class="cmark">C</i> <span class="tag t-brand">买入</span></div><div class="qc-sub">600519.SH</div></div><div class="qc-r"><span class="st done"><i></i>已完成</span><div class="qc-time">10:12:44</div></div></div><div class="qc-meta"><span><em>名义本金</em>100万</span><span><em>价格要求</em>限价 11.23</span></div></div>
        </div>
        <div class="toast" style="top:76%">提交成功</div>
        <div class="tabbar"><div class="tb on"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></span>票据</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-wallet"/></svg></span>账户</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-bell"/></svg><i class="rdot"></i></span>消息</div><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-user"/></svg></span>我的</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">Q16</div>
      <div class="cap-title">下单成功 · 落到订单页</div>
      <ul>
        <li>成功 Toast「提交成功」并切到「票据 → 订单」；后台补发中 Toast「下单已提交，系统正在处理中」</li>
        <li>订单列表见 <code>03 订单与历史</code>：筛选胶囊带条数、历史入口与卡片 / 表格切换固定在右</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">询价页与四个历史列表的搜索行共用同一个后端检索；历史列表名称在前、不标亮</span></div>
  <table class="spec">
    <tr><th style="width:120px">状态</th><th style="width:240px">进入条件</th><th style="width:150px">输入框右侧</th><th>下拉</th></tr>
    <tr><td><b>空闲</b></td><td>输入为空 / 已选中标的</td><td>无（选中后为 ×）</td><td>不展开</td></tr>
    <tr><td><b>在搜 · 首查</b></td><td>有输入，防抖 300ms 内或请求在途，且无旧结果</td><td>×</td><td>一行「转圈 + 加载中…」</td></tr>
    <tr><td><b>在搜 · 续查</b></td><td>同上，但已有上一个关键词的结果</td><td>×</td><td>旧结果 30%、不可点，中间浮「转圈 + 加载中…」</td></tr>
    <tr><td><b>有结果</b></td><td>返回且命中 &gt; 0</td><td>×</td><td>代码（等宽）+ 名称，命中片段品牌色</td></tr>
    <tr><td><b>无结果</b></td><td>返回且命中 = 0</td><td>×</td><td>一行「暂无匹配标的」</td></tr>
    <tr><td><b>失败</b></td><td>请求报错</td><td>×</td><td>不展开（静默）</td></tr>
  </table>
</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:140px">字段</th><th style="width:460px">口径（ⓘ 弹窗原文）</th><th style="text-align:right">示例</th></tr>
    <tr><td><b>票据面值</b></td><td class="m">=本次下单规模（结算币种）* A类报价，四舍五入保留两位小数</td><td class="m" style="text-align:right">11,230,000.00 HKD</td></tr>
    <tr><td><b>票据发行价</b></td><td class="m">=票据面值+发行费用</td><td class="m" style="text-align:right">11,234,000.00 HKD</td></tr>
    <tr><td><b>承销费用</b></td><td class="m">按投资者费用串收取百分比，或固定费用（低于最低取最低、高于最高取最高）</td><td class="m" style="text-align:right">3,000.00 HKD</td></tr>
    <tr><td><b>总金额</b></td><td class="m">票据发行价 + 承销费用</td><td class="m" style="text-align:right;color:var(--brand);font-weight:600">11,237,000.00 HKD</td></tr>
    <tr><td><b>购买力</b></td><td class="m">结算币种购买力，总金额下方回显</td><td class="m" style="text-align:right">23,200,000.00 HKD</td></tr>
    <tr><td><b>拦截判定</b></td><td class="m">总金额 &gt; 购买力 → 金额区红框、回显转红；点确认 Toast「购买力不足」</td><td class="m" style="text-align:right;color:var(--danger)">按钮不置灰</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>