yuanxin
/
APP_UI


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

/* 弹窗 */
.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}

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

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

/* ============================================================
   消息中心
   ============================================================ */
/* 未读徽标 */
.nbadge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-size:11px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;flex:none;letter-spacing:0}
.nbadge.dot{min-width:8px;width:8px;height:8px;padding:0;border-radius:50%}

/* 分类聚合行 */
.mcat{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line)}
.mcat:last-child{border-bottom:0}
.mcat .ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:none}
.mcat .ic .icn{width:20px;height:20px;stroke-width:1.8}
.mcat .ic.c-brand{background:var(--brand-weak);color:var(--brand)}
.mcat .ic.c-ok{background:var(--ok-weak);color:var(--ok)}
.mcat .ic.c-accent{background:var(--accent-weak);color:var(--accent)}
.mcat .ic.c-mute{background:var(--surface-3);color:var(--ink-3)}
.mcat .ic.c-danger{background:var(--danger-weak);color:var(--danger)}
.mcat .c{flex:1;min-width:0}
.mcat .c b{display:block;font-size:15px;font-weight:600;letter-spacing:.02em}
.mcat .c span{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcat .r{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:8px;flex:none;align-self:stretch;padding-top:2px}
.mcat .r em{font-style:normal;font-size:11px;color:var(--ink-4);white-space:nowrap;font-variant-numeric:tabular-nums}

/* 分类内消息卡 */
.msg{background:var(--surface);border-radius:12px;box-shadow:var(--shadow-card);padding:13px 15px 14px;margin:0 16px 10px}
[data-theme="dark"] .msg{border:1px solid var(--line)}
.msg .h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.msg .h b{font-size:14.5px;font-weight:600;letter-spacing:.02em}
.msg .h em{font-style:normal;font-size:11px;color:var(--ink-4);white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.msg p{margin-top:7px;font-size:13px;line-height:1.62;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msg.unread .h b{padding-left:13px;position:relative}
.msg.unread .h b::before{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:50%;background:var(--danger)}
.msg.read .h b,.msg.read p{color:var(--ink-3)}

/* 消息详情 */
.msgd{background:var(--surface);border-radius:14px;box-shadow:var(--shadow-card);margin:12px 16px 0;overflow:hidden}
[data-theme="dark"] .msgd{border:1px solid var(--line)}
.msgd .hd{padding:18px 18px 0}
.msgd .hd h3{font-size:17px;font-weight:600;line-height:1.45;letter-spacing:.02em}
.msgd .hd .t{margin-top:9px;font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.msgd .bd{padding:14px 18px 18px;font-size:14px;line-height:1.78;color:var(--ink-2)}
.msgd .bd b{color:var(--ink-1);font-weight:600}
.msgd .ft{border-top:1px solid var(--line);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--brand);font-weight:600}

/* 空态占位（与 05 / 02 同一套组件） */
.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}

/* 数据表（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}


/* ==== v1.3 · 06 专用 BEGIN ==== */
/* 个人中心页头（代码 ProfileScreen 的 HeroSurface） */
.pfhero{margin:8px 16px 0;border-radius:16px;padding:16px 18px;position:relative;overflow:hidden;background:linear-gradient(150deg,#1B4FD8 0%,#123CAE 58%,#0C2C86 100%);color:#fff;display:flex;align-items:center;gap:14px;box-shadow:0 12px 30px rgba(18,60,174,.30)}
[data-theme="dark"] .pfhero{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)}
.pfhero::after{content:"";position:absolute;right:-40px;top:-52px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.07)}
.pfhero .av{width:50px;height:50px;border-radius:16px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:600;flex:none}
.pfhero .nm{font-size:18px;font-weight:600}
.pfhero .ac{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.76);margin-top:5px}
.pfhero .cat{margin-left:auto;padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.16);font-size:11px;position:relative;z-index:1}
/* 菜单行（代码 ListRow）：图标块 30 / 9 圆角，标题 15，行尾回显 13.5 */
.mi{padding:15px}
.mi .rv .icn{width:14px;height:14px;color:var(--ink-4)}
.mi .tx em{margin-top:3px}
.mi .tx .dg{color:var(--danger)}
.pflag{font-size:9.5px;padding:1px 5px;border-radius:4px;margin-left:6px;vertical-align:2px;background:var(--ok-weak);color:var(--ok);font-weight:500;letter-spacing:.02em}
.signout{margin:20px 16px 16px;height:46px;border-radius:12px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:15.5px;font-weight:600;color:var(--danger);background:transparent}
/* 外观（代码 AppearanceScreen）：三张缩略图卡 + 涨跌色单选 + 预览 */
.thm3{display:flex;gap:11px;margin:0 16px}
.thm{flex:1;border-radius:12px;border:1.5px solid var(--line-2);overflow:hidden;background:var(--surface);position:relative}
.thm.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.thm .pv{height:104px;padding:10px 9px;display:flex;flex-direction:column;gap:6px}
.thm .pv.l{background:#F1F4F9}.thm .pv.d{background:#0B1020}
.thm .pv.s{background:linear-gradient(90deg,#F1F4F9 0 50%,#0B1020 50% 100%)}
.thm .pv i{display:block;height:6px;border-radius:3px;background:#1B4FD8}
.thm .pv.d i{background:#5B8CFF}
.thm .pv u{display:block;flex:1;border-radius:6px;background:#fff}
.thm .pv.d u{background:#131B2E}
.thm .pv.s u{background:linear-gradient(90deg,#fff 0 46%,transparent 46% 54%,#131B2E 54% 100%)}
.thm .lb{padding:9px 0 10px;text-align:center;font-size:13px;color:var(--ink-2);border-top:1px solid var(--line)}
.thm.on .lb{color:var(--brand);font-weight:600}
.thm .ck{position:absolute;right:6px;top:6px;width:18px;height:18px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center}
.thm .ck .icn{width:11px;height:11px;stroke-width:2.6}
.prow{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-bottom:1px solid var(--line);font-size:14.5px}
.prow:last-child{border-bottom:0}
.prow span{color:var(--ink-2)}
.prow b{font-weight:500;font-family:var(--font-num)}
.prow b small{font-size:11.5px;margin-left:5px;font-weight:400}
.optl{display:flex;align-items:center;justify-content:space-between;padding:14px 15px;border-bottom:1px solid var(--line)}
.optl:last-child{border-bottom:0}
.optl b{display:block;font-size:15px;font-weight:400}
.optl em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:3px}
.optl.on b{color:var(--brand);font-weight:600}
.optl .icn{color:var(--brand)}
.optl em.mono{font-family:var(--font-mono)}
/* 字体大小（代码 FontSizeSettings） */
.fsprev .frow>span{font-size:17px}
.fsprev .frow>b{font-size:17px}
.fsprev .frow>b.m{font-family:var(--font-mono);font-size:16px}
.fsbox{margin:26px 16px 0;background:var(--surface);border-radius:14px;box-shadow:var(--shadow-card);padding:22px 16px 20px}
[data-theme="dark"] .fsbox{border:1px solid var(--line)}
.fstrack{position:relative;height:26px;margin:0 12px}
.fstrack::before{content:"";position:absolute;left:0;right:0;top:11px;height:4px;border-radius:2px;background:var(--surface-3)}
.fstrack i{position:absolute;top:6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2);box-sizing:border-box}
.fstrack b{position:absolute;top:6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--brand)}
.fslabels{position:relative;height:26px;margin:16px 12px 0}
.fslabels span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;color:var(--ink-3)}
.fslabels span.on{color:var(--brand);font-weight:600}
/* 修改密码（代码 ChangePasswordScreen） */
.pwf{padding:0 16px}
.pwf .lbl{margin-top:14px}
.pwbar{display:flex;gap:6px;margin-top:9px}
.pwbar i{flex:1;height:3px;border-radius:2px;background:var(--surface-3)}
.pwbar i.w{background:var(--danger)}.pwbar i.m{background:var(--ok)}
.pwtip{font-size:11.5px;color:var(--ink-3);margin-top:7px}
.notice.warn b{font-weight:600}
/* 费用信息表（代码 FeesScreen 的 DataTable） */
.feet{margin:0 16px;background:var(--surface);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-card)}
[data-theme="dark"] .feet{border:1px solid var(--line)}
.feet .h{display:flex;align-items:center;height:36px;padding:0 10px;background:var(--surface-2);font-size:10.5px;color:var(--ink-3);letter-spacing:.02em}
.feet .g{display:flex;align-items:center;padding:8px 10px;border-top:1px solid var(--line);font-size:12px}
.feet .c1{width:60px;flex:none;color:var(--ink-2)}
.feet .c2{width:66px;flex:none;text-align:right;color:var(--ink-2)}
.feet .rs{flex:1;display:flex;flex-direction:column}
.feet .rs div{display:flex;height:26px;align-items:center}
.feet .rs span,.feet .h .n{flex:1;text-align:right;font-family:var(--font-num)}
.feet .h .n{font-family:inherit}
/* 帮助中心 */
.hsearch{margin:12px 16px 0;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)}
.hsearch .icn{width:14px;height:14px;color:var(--ink-3)}
.mi.plain{padding:14px 15px}
.qa{margin:0 16px;background:var(--surface);border-radius:14px;box-shadow:var(--shadow-card);padding:16px 15px}
[data-theme="dark"] .qa{border:1px solid var(--line)}
.qa h4{font-size:16.5px;font-weight:600;line-height:1.5}
.qa p{margin-top:10px;font-size:14px;line-height:1.9;color:var(--ink-2)}
/* 账户信息（代码 AccountInfoScreen） */
.gtitle.eye{display:flex;justify-content:space-between;align-items:center}
.gtitle.eye .icn{width:15px;height:15px;color:var(--ink-3)}
.frow b.ok{color:var(--ok)}
.frow b.m{font-family:var(--font-mono);font-size:13px}
.fileic{width:30px;height:30px;border-radius:9px;background:var(--brand-weak);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.fileic .icn{width:15px;height:15px}
/* 升级弹窗（代码 UpdateDialog） */
.updhd{height:96px;padding:0 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:linear-gradient(150deg,#1B4FD8,#0A2467);position:relative}
.updhd b{font-size:21px;font-weight:600}
.updhd span{font-size:11.5px;color:rgba(255,255,255,.76);margin-top:3px}
.updhd .x{position:absolute;right:12px;top:12px;color:rgba(255,255,255,.85)}
.updhd .x .icn{width:20px;height:20px}
.updbd{padding:16px 18px 0;display:flex;flex-direction:column;gap:8px}
.updbd b{font-size:14px;font-weight:600}
.updbd p{font-size:14px;line-height:23px;color:var(--ink-2)}
.updft{display:flex;gap:11px;padding:18px}
.updft .btn{flex:1}
.upddis{text-align:center;padding:12px 0 14px;font-size:13px;color:var(--ink-3)}
/* 开户文件上传（代码 DocumentUploadScreen，仅 H5） */
.dropz{margin:0 16px;border:1.5px dashed var(--line-2);border-radius:14px;padding:26px 16px;display:flex;flex-direction:column;align-items:center}
.dropz .ic{width:46px;height:46px;border-radius:14px;background:var(--brand-weak);color:var(--brand);display:flex;align-items:center;justify-content:center}
.dropz .ic .icn{width:22px;height:22px}
.dropz b{font-size:14.5px;font-weight:500;margin-top:12px}
.dropz em{font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:6px}
.uprow{display:flex;align-items:center;gap:9px;padding:14px 15px}
.uprow .fi{width:32px;height:32px;border-radius:8px;background:var(--surface-2);color:var(--ink-3);display:flex;align-items:center;justify-content:center;flex:none}
.uprow .fi .icn{width:15px;height:15px}
.uprow .nm{flex:1;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uprow .bad{font-size:12.5px;color:var(--danger)}
.ubar{padding:12px 16px 34px;background:var(--surface);border-top:1px solid var(--line);flex:none}
/* 关于（代码 AboutScreen） */
.abmark{margin:28px auto 0;width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#1B4FD8,#0A2467);display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:600}
.abnm{text-align:center;font-size:16.5px;font-weight:600;margin-top:12px}
.abver{text-align:center;font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3);margin-top:4px}
.mi .rv.up{color:var(--brand)}
/* ==== v1.3 · 06 专用 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-lang"><path d="M2.8 6.1h8.4"/><path d="M7 4.2v1.9"/><path d="M9.4 6.1c-.4 4.1-2.6 6.9-6.2 8.4"/><path d="M5.4 9.4c1 2.2 2.7 3.8 5.1 4.7"/><path d="M12.4 20.2 16.4 9.6l4 10.6"/><line x1="13.7" y1="16.9" x2="19.1" y2="16.9"/></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-megaphone"><path d="M4 10.2v3.6a1.8 1.8 0 0 0 1.8 1.8H8l6.6 3.9a1 1 0 0 0 1.5-.86V5.36a1 1 0 0 0-1.5-.86L8 8.4H5.8A1.8 1.8 0 0 0 4 10.2Z"/><path d="M19 9.6a3.6 3.6 0 0 1 0 4.8"/><path d="M8 15.6v2.6a2 2 0 0 0 2 2h.4"/></g>
<g id="i-faceid"><path d="M4 9.2V6.6A2.6 2.6 0 0 1 6.6 4H9.2"/><path d="M14.8 4h2.6A2.6 2.6 0 0 1 20 6.6v2.6"/><path d="M20 14.8v2.6a2.6 2.6 0 0 1-2.6 2.6h-2.6"/><path d="M9.2 20H6.6A2.6 2.6 0 0 1 4 17.4v-2.6"/><line x1="9.1" y1="9.6" x2="9.1" y2="11.2"/><line x1="14.9" y1="9.6" x2="14.9" y2="11.2"/><path d="M12 9.4v3.9a.9.9 0 0 1-.9.9h-.5"/><path d="M9.3 15.9c1.7 1.4 3.7 1.4 5.4 0"/></g>
<g id="i-touchid"><path d="M2.9 9.9A9.7 9.7 0 0 1 12 3.2a9.7 9.7 0 0 1 9.1 6.7"/><path d="M5.9 13.1a6.1 6.1 0 0 1 12.2 0v1.3"/><path d="M9 13.1a3 3 0 0 1 6 0v2.6a7.4 7.4 0 0 1-.5 2.7"/><path d="M12 13v3.9a10 10 0 0 1-.9 4.1"/><path d="M6 17.9A9.6 9.6 0 0 1 5.9 16.4"/><path d="M18 16.5a11.6 11.6 0 0 1-.6 3.2"/></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>
</defs></svg>

<div class="sheet-head">
  <div class="brandmark">
    <div class="glyph"></div>
    <div>
      <div class="sheet-title">我的 · 设置与换肤</div>
      <div class="sheet-sub">票据投资者 APP ／ 个人中心 · 主题外观 · 语言 · 字体大小 · 安全设置 · 费用与帮助</div>
    </div>
  </div>
  <div class="head-right">
    <div class="meta">
      <div>模块<b>我的 PROFILE</b></div>
      <div>规格<b>iOS 390 &times; 844 @3x</b></div>
      <div>主题<b>深空蓝 Light / Dark</b></div>
      <div>版本<b>v1.3 · 2026-10-14</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>
<style>
.themecard{border-radius:14px;overflow:hidden;border:2px solid var(--line-2);position:relative}
.themecard.on{border-color:var(--brand)}
.themecard .prev{height:104px;padding:11px 10px;display:flex;flex-direction:column;gap:7px}
.themecard .bar{height:7px;border-radius:4px}
.themecard .blk{border-radius:7px;padding:7px 8px;display:flex;flex-direction:column;gap:5px;flex:1}
.themecard .lbl2{padding:9px 0;text-align:center;font-size:12.5px;border-top:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.themecard.on .lbl2{color:var(--brand);font-weight:600}
.themecard .tick{position:absolute;right:7px;top:7px;width:18px;height:18px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:flex;align-items:center;justify-content:center}
.fslider{height:4px;border-radius:2px;background:var(--surface-3);position:relative;margin:26px 12px 0}
.fslider i{position:absolute;top:-5px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--line-2)}
.fslider b{position:absolute;top:-11px;width:26px;height:26px;border-radius:50%;background:var(--brand);box-shadow:0 3px 10px rgba(27,79,216,.4)}
.fscale{display:flex;justify-content:space-between;margin:16px 6px 0;font-size:12px;color:var(--ink-3)}
</style>

<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 按代码现状重画；iOS 为主，平台差异见各帧标签</span></div>
  <div class="cards">
    <div class="card-x">
      <h4>菜单结构 STRUCTURE</h4>
      <div class="bullets">
        <li><b>账户</b>：账户信息（三端）· 费用信息</li>
        <li><b>外观与偏好</b>：外观 · 语言 · 字体大小（仅 APP）</li>
        <li><b>安全</b>：登录解锁设置（仅 APP）· 修改密码 · 帮助中心（后台有问题才出）</li>
        <li><b>其他</b>：关于；菜单外「登出」</li>
      </div>
    </div>
    <div class="card-x">
      <h4>换肤机制 SKIN</h4>
      <div class="bullets">
        <li>主题三态：跟随系统（缺省）/ 浅色 / 深色，本地持久化，即时生效</li>
        <li>涨跌色两套：红涨绿跌（缺省）/ 绿涨红跌，全站盈亏色一起对调</li>
        <li>换肤只换 Token 取值，不改布局与字号；原生底栏与系统外观同步</li>
      </div>
    </div>
    <div class="card-x">
      <h4>约束 RULES</h4>
      <div class="kv">
        <div class="r"><span>字号档位</span><b>标准 / 中等 / 大字（1 / 1.12 / 1.24）</b></div>
        <div class="r"><span>解锁时长缺省</span><b>30 分钟</b></div>
        <div class="r"><span>新密码</span><b>6~20 字符，至少两类字符</b></div>
        <div class="r"><span>强制更新出口</span><b>× / 返回键 = 退出 App</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">17 帧（M13–M17 为 v1.3 新增；M9 开户文件上传本期未上线；N1–N5 已撤，由 09 取代）· 点右上角「深色 / 浅色」实时换肤</span></div>
  <div class="frames">

  <!-- ===== M1 个人中心 · 主页 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>我的</h1></div>
        <div class="body">
          <div class="pfhero"><span class="av">张</span><div><div class="nm">张三</div><div class="ac">ceshi01</div></div><span class="cat">A类</span></div>
          <div class="gtitle">账户</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">账户信息</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-fee"/></svg></span><span class="tx">费用信息</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="gtitle">外观与偏好</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-theme"/></svg></span><span class="tx">外观</span><span class="rv">跟随系统 · 红涨绿跌<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lang"/></svg></span><span class="tx">语言</span><span class="rv">简体中文<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-font"/></svg></span><span class="tx">字体大小<span class="pflag">仅 APP</span></span><span class="rv">标准<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="gtitle">安全</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lock"/></svg></span><span class="tx">登录解锁设置<span class="pflag">仅 APP</span></span><span class="rv">30分钟 · 面容 ID<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-key"/></svg></span><span class="tx">修改密码</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-help"/></svg></span><span class="tx">帮助中心</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="gtitle">其他</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><span class="tx">关于</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="signout">登出</div>
        </div>

        <div class="tabbar"><div class="tb"><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 on"><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">M1</div>
      <div class="cap-title">个人中心 · 主页</div>
      <ul>
        <li>顶部「我的」大标题 + 品牌卡片：姓氏头像、姓名 / 账号两行、右侧品类胶囊（取询价配置可见品类）</li>
        <li>四组带组标题：账户（账户信息 · 费用信息）／外观与偏好（外观 · 语言 · 字体大小）／安全（登录解锁设置 · 修改密码 · 帮助中心）／其他（关于）；行尾回显当前值</li>
        <li><b>H5 不出「字体大小」「登录解锁设置」两行</b>；账户信息三端都有；帮助中心在后台没配问题时整行隐藏；消息中心不在这里（底部 Tab）</li>
        <li>「登出」是菜单外的次级按钮、文字危险色；确认见 M10</li>
      </ul>
    </div>
  </div>

  <!-- ===== M2 外观 · 换肤设置 ===== -->
  <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="thm3"><div class="thm"><div class="pv l"><i></i><u></u></div><div class="lb">浅色</div></div><div class="thm"><div class="pv d"><i></i><u></u></div><div class="lb">深色</div></div><div class="thm on"><span class="ck"><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></span><div class="pv s"><i></i><u></u></div><div class="lb">跟随系统</div></div></div>
          <div class="gtitle">涨跌色</div>
          <div class="card" style="margin:0 16px"><div class="optl on"><div><b>红涨绿跌</b><em>A 股 / 内地习惯</em></div><svg class="icn" viewBox="0 0 24 24"><use href="#i-check"/></svg></div><div class="optl"><div><b>绿涨红跌</b><em>港美股 / 海外习惯</em></div></div></div>
          <div class="gtitle">预览</div>
          <div class="card" style="margin:0 16px">
            <div class="prow"><span>贵州茅台 600519.SH</span><b class="up">1,234.56<small>+2.49%</small></b></div>
            <div class="prow"><span>贵州燃气 600903.SH</span><b class="down">8.42<small>-1.17%</small></b></div>
            <div class="prow"><span>参考浮动盈亏</span><b class="down">-178,766.00 HKD</b></div>
          </div>
          <div style="padding:14px 16px 0"><div class="notice info"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-info"/></svg><span>切换即时生效并本地持久化；跟随系统时随手机深浅模式自动变化，无需重启APP。</span></div></div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">M2</div>
      <div class="cap-title">外观 · 换肤设置</div>
      <ul>
        <li>主题模式三张缩略图卡：浅色 / 深色 / 跟随系统（缺省），选中卡品牌描边 + 右上对勾</li>
        <li>涨跌色单选：红涨绿跌（A 股 / 内地习惯）/ 绿涨红跌（港美股 / 海外习惯），全站盈亏色随之对调</li>
        <li>预览三行用真实业务数值；底部信息条说明即时生效、无需重启</li>
      </ul>
    </div>
  </div>

  <!-- ===== M3 字体大小 · 三档 ===== -->
  <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 fsprev" style="margin:0 16px">
            <div class="frow"><span>票据编号</span><b class="m">123456</b></div>
            <div class="frow"><span>票据状态</span><b>存续期</b></div>
            <div class="frow last"><span>票据类型</span><b>Win-Win Notes</b></div>
          </div>
          <div class="fsbox">
            <div class="fstrack"><i style="left:0"></i><i style="left:50%"></i><i style="left:100%"></i><b style="left:0"></b></div>
            <div class="fslabels"><span class="on" style="left:0;font-size:12px">标准</span><span style="left:50%;font-size:15px">中等</span><span style="left:100%;font-size:18px">大字</span></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">M3</div>
      <div class="cap-title">字体大小 · 三档<span class="cap-flags"><span class="cap-flag plat">仅 APP</span></span></div>
      <ul>
        <li>预览组三行（票据编号 / 票据状态 / 票据类型，17 号）随档位缩放；三档：标准 / 中等 / 大字，倍数 1 / 1.12 / 1.24</li>
        <li>轨道三颗刻度圈 + 品牌色把手，刻度文字 12 / 15 / 18 与刻度同心，当前档品牌色加粗；点选即生效、无保存键</li>
        <li><b>原生端不跟随系统字号</b>，字号唯一入口是这里；去掉了 v1.2 的底部说明条</li>
      </ul>
    </div>
  </div>

  <!-- ===== M4 登录解锁设置 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>登录解锁设置</h2></div>
        <div class="body">
          <div style="padding:16px 16px 0"><div class="notice info"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-info"/></svg><span>为了安全保障，在设置的时长内退回后台或锁屏，再重新返回APP，将为您保持解锁状态，否则将须重新登录。</span></div></div>
          <div class="menu" style="margin-top:14px"><div class="mi plain"><span class="tx">15分钟</span></div><div class="mi plain"><span class="tx">30分钟</span><svg class="icn" style="color:var(--brand)" viewBox="0 0 24 24"><use href="#i-check"/></svg></div><div class="mi plain"><span class="tx">60分钟</span></div><div class="mi plain"><span class="tx">120分钟</span></div><div class="mi plain"><span class="tx">180分钟</span></div><div class="mi plain"><span class="tx dg" style="color:var(--danger)">从不（请谨慎选择此项）</span></div></div>
          <div class="gtitle">生物识别</div>
          <div class="menu"><div class="mi"><span class="tx">面容 ID解锁<em>超过上面设定的时长后，验证通过即可继续使用，无需重新登录</em></span><span class="sw2 on"></span></div></div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">M4</div>
      <div class="cap-title">登录解锁设置<span class="cap-flags"><span class="cap-flag plat">仅 APP</span></span></div>
      <ul>
        <li>顶部信息条照需求原句；时长 15 / 30（缺省）/ 60 / 120 / 180 分钟 / 「从不（请谨慎选择此项）」（危险色），当前项打勾</li>
        <li>设备有生物识别硬件时出「生物识别」组：「面容 ID解锁」开关 + 副文案；未录入时开关置灰、副文案「请先在系统设置中录入后再开启」</li>
        <li>个人中心行尾回显「30分钟 · 面容 ID」</li>
      </ul>
    </div>
  </div>

  <!-- ===== M5 修改密码 · 强度与校验 ===== -->
  <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="pwf"><span class="lbl">原密码</span><div class="field"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lock"/></svg><span style="letter-spacing:.3em">•••••••</span><svg class="icn" style="margin-left:auto;color:var(--ink-3)" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></div><span class="lbl">新密码</span><div class="field"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-key"/></svg><span style="letter-spacing:.3em">••••••••</span><svg class="icn" style="margin-left:auto;color:var(--ink-3)" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></div><div class="pwbar"><i class="m"></i><i class="m"></i><i></i></div><div class="pwtip">强度：中　建议同时包含字母、数字与符号</div><span class="lbl">确认新密码</span><div class="field err"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-key"/></svg><span style="letter-spacing:.3em">••••••••</span><svg class="icn" style="margin-left:auto;color:var(--ink-3)" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></div><div class="errtip"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-alert"/></svg>两次输入密码不一致</div></div>
          <div style="padding:16px 16px 0"><div class="notice warn"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-alert"/></svg><span>修改成功后，<b>其余已登录设备将被强制下线</b>，需使用新密码重新登录。</span></div></div>
          <div style="padding:16px"><div class="btn off">确定</div></div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">M5</div>
      <div class="cap-title">修改密码 · 强度与校验</div>
      <ul>
        <li>三格：原密码 / 新密码 / 确认新密码，带眼睛切换明文；规则提示「密码必须包含字母（大写或小写）、数字或符号至少2种」</li>
        <li>新密码下三段强度条（弱红 / 中强绿）+「强度：中　建议同时包含字母、数字与符号」；两次不一致就地红字</li>
        <li>琥珀提示条：修改成功后其余设备被强制下线；成功 Toast「密码修改成功，请重新登录」并登出</li>
      </ul>
    </div>
  </div>

  <!-- ===== M6 费用信息 · 分品类表 ===== -->
  <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">共赢票据A类</div>
          <div class="feet">
            <div class="h"><span class="c1" style="color:inherit">费用类别</span><span class="c2" style="color:inherit">收费节点</span><span class="n">结算币种</span><span class="n">费用</span><span class="n">最低收费</span><span class="n">最高收费</span></div>
            <div class="g"><span class="c1">承销费用</span><span class="c2">买入</span><div class="rs"><div><span>CNY</span><span>0.03%</span><span>--</span><span>--</span></div><div><span>HKD</span><span>0.03%</span><span>--</span><span>--</span></div><div><span>USD</span><span>0.03%</span><span>--</span><span>--</span></div></div></div>
            <div class="g"><span class="c1">展期费用</span><span class="c2">首次展期</span><div class="rs"><div><span>CNY</span><span>0.50%</span><span>--</span><span>--</span></div><div><span>HKD</span><span>0.50%</span><span>--</span><span>--</span></div><div><span>USD</span><span>0.50%</span><span>--</span><span>--</span></div></div></div>
            <div class="g"><span class="c1">展期费用</span><span class="c2">非首次展期</span><div class="rs"><div><span>CNY</span><span>1.00%</span><span>--</span><span>--</span></div><div><span>HKD</span><span>1.00%</span><span>--</span><span>--</span></div><div><span>USD</span><span>1.00%</span><span>--</span><span>--</span></div></div></div>
          </div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">M6</div>
      <div class="cap-title">费用信息 · 分品类表</div>
      <ul>
        <li>按品类分组（「共赢票据A类」）；表头：费用类别 · 收费节点 · 结算币种 · 费用 · 最低收费 · 最高收费</li>
        <li>每个收费节点三行（CNY / HKD / USD），无限制为 <code>--</code>；不再把展期费用整体标红</li>
      </ul>
    </div>
  </div>

  <!-- ===== M7 帮助中心 · 问题分类 ===== -->
  <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="hsearch"><svg class="icn" viewBox="0 0 24 24"><use href="#i-search"/></svg>请输入您的问题</div>
          <div class="gtitle">问题分类</div>
          <div class="menu"><div class="mi"><span class="tx">票据账户</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="tx">资金相关</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="tx">交易能力</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">M7</div>
      <div class="cap-title">帮助中心 · 问题分类</div>
      <ul>
        <li>顶部搜索「请输入您的问题」，下方「问题分类」列表；<b>不再有底部人工入口卡片</b></li>
        <li>后台没配问题时，登录页问号与个人中心入口一起隐藏</li>
      </ul>
    </div>
  </div>

  <!-- ===== M13 帮助中心 · 分类与详情 ===== -->
  <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="menu"><div class="mi"><span class="tx">如何开通共赢票据A类交易权限？</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="tx">票据账号与证券账户是什么关系？</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="tx">忘记登录密码怎么办？</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">M13</div>
      <div class="cap-title">帮助中心 · 分类与详情<span class="cap-flags"><span class="cap-flag new">v1.3 新增</span></span></div>
      <ul>
        <li>分类页以分类名为标题与分组标题，列出该分类下的问题；点进问题详情（M14）</li>
        <li>搜索结果的摘要整段折行，不截成一行</li>
      </ul>
    </div>
  </div>

  <!-- ===== M14 帮助中心 · 问题详情 ===== -->
  <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" style="padding-top:12px">
          <div class="qa"><h4>如何开通共赢票据A类交易权限？</h4><p>请联系您的客户经理，由客户经理在销售机构后台为您加开交易品类；开通后重新进入询价页即可发起询价。</p></div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">M14</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>

  <!-- ===== M8 账户信息 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="navbar"><span class="bk"><svg class="icn" viewBox="0 0 24 24"><use href="#i-back"/></svg></span><h2>账户信息</h2></div>
        <div class="body" id="m8body">
          <div class="gtitle eye"><span>基础信息</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-eyeoff"/></svg></div>
          <div class="card" style="margin:0 16px">
            <div class="frow"><span>票据账号</span><b class="m">ceshi01</b></div>
            <div class="frow"><span>中文名</span><b>张*忌</b></div>
            <div class="frow"><span>英文名</span><b>Jo*****</b></div>
            <div class="frow"><span>证件类型</span><b>大陆身份证</b></div>
            <div class="frow"><span>证件号码</span><b class="m">1************3</b></div>
            <div class="frow"><span>手机号码</span><b class="m">+86 138****5678</b></div>
            <div class="frow"><span>邮箱</span><b>*@163.com</b></div>
            <div class="frow last"><span>联系地址</span><b>CN******</b></div>
          </div>
          <div class="gtitle">其它信息</div>
          <div class="card" style="margin:0 16px">
            <div class="frow"><span>风险等级</span><b>5-非常进取型</b></div>
            <div class="frow"><span>衍生产品问卷</span><b class="ok">通过</b></div>
            <div class="frow last"><span>专业投资者认证</span><b class="ok">通过</b></div>
          </div>
          <div class="gtitle">交易品类</div>
          <div class="card" style="margin:0 16px"><div class="frow last"><span style="color:var(--ink-1);font-weight:600">共赢票据A类</span><span class="tag t-ok">已开通</span></div></div>
          <div class="gtitle">开户文件</div>
          <div class="menu"><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">证监会网络安全合规要求.pdf</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="fileic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-img"/></svg></span><span class="tx">20260714-121224.jpeg</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">M8</div>
      <div class="cap-title">账户信息</div>
      <ul>
        <li><b>三端都提供</b>（需求写仅 H5，产品裁决三端开）：基础信息 · 其它信息 · 交易品类 · 开户文件四组</li>
        <li>敏感字段默认脱敏；「基础信息」右侧眼睛点开先过账号密码验证（M15），通过后整页显示明文</li>
        <li>交易品类「已开通」用安全色标签；开户文件点开进页内文件查看器（PDF / 图片，可下载）</li>
      </ul>
    </div>
  </div>

  <!-- ===== M15 账户信息 · 验密弹窗 ===== -->
  <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" data-clone="#m8body"></div>
        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><h3>账号密码验证</h3><p class="dsc">为保障您的信息安全，请先验证账号密码</p></div>
            <div style="padding:14px 18px 0"><div class="field focus"><span class="ph">请输入登录密码</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">M15</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>

  <!-- ===== M9 开户文件上传 · 超限 ===== -->
  <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" style="padding-top:18px">
          <div class="dropz"><span class="ic"><svg class="icn" viewBox="0 0 24 24"><use href="#i-upload"/></svg></span><b>点击上传或拍照</b><em>支持 JPG / PNG / PDF，单个不超过 10MB</em></div>
          <div class="gtitle">已上传</div>
          <div class="card" style="margin:0 16px"><div class="uprow"><span class="fi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="nm">银行月结单.pdf</span><span class="bad">超出大小限制</span></div></div>
          <div style="padding:16px 16px 0"><div class="notice warn"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-alert"/></svg><span>文件须为三个月内签发，且姓名与地址清晰可见，否则将被退回补件。</span></div></div>
        </div>
        <div class="ubar"><div class="btn off">提交审核</div></div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">M9</div>
      <div class="cap-title">开户文件上传 · 超限<span class="cap-flags"><span class="cap-flag off">本期未上线 · 页面保留</span><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>页面在代码里、<b>没有入口</b>：账户信息的「开户文件」行只开文件查看器；按地址 <code>/account-info/documents</code> 打开，标题「上传开户文件」</li>
        <li>虚线投放区「点击上传或拍照」+ 格式与体积限制；一次只留一个文件，再选即替换</li>
        <li>超过 10MB 的文件就地标红「超出大小限制」、留在行里可替换，「提交审核」置灰；正常文件挂绿勾、可提交，成功后返回</li>
        <li>App 端打开给「请在网页端办理」引导；真实环境没有上传接口，提交提示「开户文件上传暂未开放」</li>
      </ul>
    </div>
  </div>

  <!-- ===== M10 退出登录 · 确认 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>我的</h1></div>
        <div class="body">
          <div class="pfhero"><span class="av">张</span><div><div class="nm">张三</div><div class="ac">ceshi01</div></div><span class="cat">A类</span></div>
          <div class="gtitle">账户</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">账户信息</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-fee"/></svg></span><span class="tx">费用信息</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="gtitle">外观与偏好</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-theme"/></svg></span><span class="tx">外观</span><span class="rv">跟随系统 · 红涨绿跌<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lang"/></svg></span><span class="tx">语言</span><span class="rv">简体中文<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-font"/></svg></span><span class="tx">字体大小<span class="pflag">仅 APP</span></span><span class="rv">标准<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="gtitle">安全</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lock"/></svg></span><span class="tx">登录解锁设置<span class="pflag">仅 APP</span></span><span class="rv">30分钟 · 面容 ID<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-key"/></svg></span><span class="tx">修改密码</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-help"/></svg></span><span class="tx">帮助中心</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="gtitle">其他</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><span class="tx">关于</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="signout">登出</div>
        </div>
        <div class="scrim">
          <div class="dlg">
            <div class="dlg-hd"><h3>确认退出登录？</h3><p class="dsc">退出后将清除本机账户缓存，需重新登录。</p></div>
            
            <div class="dlg-ft"><span>取消</span><span class="dg">退出</span></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></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 on"><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">M10</div>
      <div class="cap-title">退出登录 · 确认</div>
      <ul>
        <li>确认键文字「退出」危险色，底栏仍是标准双按钮；登出在途时盖一层「正在退出登录…」</li>
        <li>历史账号保留在本机，下次登录可直接选</li>
      </ul>
    </div>
  </div>

  <!-- ===== M11 升级检查 · 强制更新 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>我的</h1></div>
        <div class="body">
          <div class="pfhero"><span class="av">张</span><div><div class="nm">张三</div><div class="ac">ceshi01</div></div><span class="cat">A类</span></div>
          <div class="gtitle">账户</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">账户信息</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-fee"/></svg></span><span class="tx">费用信息</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="gtitle">外观与偏好</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-theme"/></svg></span><span class="tx">外观</span><span class="rv">跟随系统 · 红涨绿跌<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lang"/></svg></span><span class="tx">语言</span><span class="rv">简体中文<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-font"/></svg></span><span class="tx">字体大小<span class="pflag">仅 APP</span></span><span class="rv">标准<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="gtitle">安全</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lock"/></svg></span><span class="tx">登录解锁设置<span class="pflag">仅 APP</span></span><span class="rv">30分钟 · 面容 ID<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-key"/></svg></span><span class="tx">修改密码</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-help"/></svg></span><span class="tx">帮助中心</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="gtitle">其他</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><span class="tx">关于</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="signout">登出</div>
        </div>
        <div class="scrim">
          <div class="dlg">
            <div class="updhd"><b>发现新版本 V1.1.0</b><span>当前版本 V1.0.1</span><span class="x"><svg class="icn" viewBox="0 0 24 24"><use href="#i-x"/></svg></span></div>
            <div class="updbd"><b>V1.1.0新版本功能</b><p>新增深浅主题与涨跌色切换</p><p>持仓支持卡片 / 数据双模式</p><p>修复展期费用显示精度问题</p></div>
            <div style="padding:12px 18px 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="updft"><span class="btn">马上更新</span></div>
          </div>
        </div>
        <div class="tabbar"><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></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 on"><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">M11</div>
      <div class="cap-title">升级检查 · 强制更新<span class="cap-flags"><span class="cap-flag plat">仅 APP</span></span></div>
      <ul>
        <li>头部渐变：「发现新版本 V1.1.0」+「当前版本 V1.0.1」；更新说明逐行原样</li>
        <li>强制更新：琥珀提示条 + 单键「马上更新」；右上 × 与 Android 返回键都是<b>退出 App</b></li>
        <li>Android 在 App 内下载 APK（进度条 + 取消下载 → 安装），iOS 打开商店 / TestFlight 链接</li>
      </ul>
    </div>
  </div>

  <!-- ===== M16 升级检查 · 建议更新 ===== -->
  <div class="frame">
    <div class="phone">
      <div class="screen">
        <div class="statusbar"><span class="num">9:41</span><span class="ic"><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><rect x="1" y="14" width="3.4" height="6" rx="1"/><rect x="6.4" y="10" width="3.4" height="10" rx="1"/><rect x="11.8" y="6" width="3.4" height="14" rx="1"/><rect x="17.2" y="3" width="3.4" height="17" rx="1" opacity=".35"/></svg><svg class="icn sm" viewBox="0 0 24 24" style="fill:currentColor;stroke:none"><path d="M12 19.5 2 9a14 14 0 0 1 20 0z" opacity=".95"/></svg><svg class="icn" viewBox="0 0 30 24" style="fill:none;stroke:currentColor;stroke-width:1.5;width:24px"><rect x="1.5" y="7" width="21" height="11" rx="3"/><rect x="3.6" y="9.1" width="14" height="6.8" rx="1.6" fill="currentColor" stroke="none"/><path d="M24.5 11v6a3.2 3.2 0 0 0 0-6z" fill="currentColor" stroke="none"/></svg></span></div>
        <div class="appbar"><h1>我的</h1></div>
        <div class="body">
          <div class="pfhero"><span class="av">张</span><div><div class="nm">张三</div><div class="ac">ceshi01</div></div><span class="cat">A类</span></div>
          <div class="gtitle">账户</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">账户信息</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-fee"/></svg></span><span class="tx">费用信息</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="gtitle">外观与偏好</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-theme"/></svg></span><span class="tx">外观</span><span class="rv">跟随系统 · 红涨绿跌<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lang"/></svg></span><span class="tx">语言</span><span class="rv">简体中文<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-font"/></svg></span><span class="tx">字体大小<span class="pflag">仅 APP</span></span><span class="rv">标准<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="gtitle">安全</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-lock"/></svg></span><span class="tx">登录解锁设置<span class="pflag">仅 APP</span></span><span class="rv">30分钟 · 面容 ID<svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-key"/></svg></span><span class="tx">修改密码</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-help"/></svg></span><span class="tx">帮助中心</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="gtitle">其他</div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-info"/></svg></span><span class="tx">关于</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="signout">登出</div>
        </div>
        <div class="scrim">
          <div class="dlg">
            <div class="updhd"><b>发现新版本 V1.1.0</b><span>当前版本 V1.0.1</span></div>
            <div class="updbd"><b>V1.1.0新版本功能</b><p>新增深浅主题与涨跌色切换</p><p>持仓支持卡片 / 数据双模式</p><p>修复展期费用显示精度问题</p></div>
            
            <div class="updft" style="padding-bottom:0"><span class="btn ghost">稍后再说</span><span class="btn">马上更新</span></div><div class="upddis">当前版本不再提醒</div>
          </div>
        </div>
        <div class="tabbar"><div class="tb"><span class="tbi"><svg class="icn" viewBox="0 0 24 24"><use href="#i-note"/></svg></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 on"><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">M16</div>
      <div class="cap-title">升级检查 · 建议更新<span class="cap-flags"><span class="cap-flag new">v1.3 新增</span><span class="cap-flag plat">仅 APP</span></span></div>
      <ul>
        <li>建议更新：「稍后再说 · 马上更新」+ 底部「当前版本不再提醒」；没有 ×，返回键只吞不关</li>
        <li>关于页「检查更新」行回显「发现新版本 V1.1.0」或「当前是最新版本」</li>
      </ul>
    </div>
  </div>

  <!-- ===== M17 关于 ===== -->
  <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="abmark">泓</div>
          <div class="abnm">泓衍票据</div>
          <div class="abver">V1.0.1</div>
          <div class="menu" style="margin-top:16px"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-refresh"/></svg></span><span class="tx">检查更新</span><span class="rv"><span style="color:var(--brand)">发现新版本 V1.1.0</span><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
          <div class="menu"><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-doc"/></svg></span><span class="tx">用户协议</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div><div class="mi"><span class="ib"><svg class="icn sm" viewBox="0 0 24 24"><use href="#i-shield"/></svg></span><span class="tx">隐私政策</span><span class="rv"><svg class="icn" viewBox="0 0 24 24"><use href="#i-right"/></svg></span></div></div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">M17</div>
      <div class="cap-title">关于<span class="cap-flags"><span class="cap-flag new">v1.3 新增</span></span></div>
      <ul>
        <li>品牌标识字形 + 应用名 + 版本号（H5 显示 H5 自己的版本）；「检查更新」只在原生出现</li>
        <li>用户协议 / 隐私政策两行：协议内容接口未接，本期点了 Toast「未接入内容」</li>
        <li>版本号 5 连点：mock 包开场景面板、原生内测包开环境切换（开发者用）</li>
      </ul>
    </div>
  </div>

  <!-- ===== M12 H5 · 原生专属页引导 ===== -->
  <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" style="display:flex;flex-direction:column">
          <div class="emptyslot" style="padding-bottom:330px"><div class="emptybox"><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">请在APP内设置</div><div class="esub">字体大小只在 iOS / Android 客户端生效，网页端按浏览器设置显示。</div></div></div>
        </div>
        <div class="homebar"></div>
      </div>
    </div>
    <div class="cap">
      <div class="cap-num">M12</div>
      <div class="cap-title">H5 · 原生专属页引导<span class="cap-flags"><span class="cap-flag plat">仅 H5</span></span></div>
      <ul>
        <li>菜单项按平台隐藏；URL 直达原生专属页时给整页引导：字体大小、登录解锁设置（「登录解锁与生物识别只在 iOS / Android 客户端提供。」）</li>
        <li>反过来开户文件上传在 App 内给「请在网页端办理」引导（本期开户未上线）</li>
      </ul>
    </div>
  </div>

  </div>
</div>

<div class="sec" style="margin-bottom:20px">
  <div class="sec-head"><span class="sec-num">03</span><span class="sec-name">菜单路由与平台可见性</span><span class="sec-rule"></span><span class="sec-note">✓ 提供　— 不提供（URL 直达时给整页引导）</span></div>
  <table class="spec">
    <tr><th style="width:150px">菜单项</th><th style="width:170px">路由</th><th style="width:90px">iOS / Android</th><th style="width:80px">H5</th><th>说明</th></tr>
    <tr><td><b>账户信息</b></td><td class="m">/account-info</td><td>✓</td><td>✓</td><td>需求写仅 H5，产品裁决三端开；开户文件上传仅 H5、本期未上线</td></tr>
    <tr><td><b>费用信息</b></td><td class="m">/fees</td><td>✓</td><td>✓</td><td>按品类分组</td></tr>
    <tr><td><b>外观</b></td><td class="m">/appearance</td><td>✓</td><td>✓</td><td>主题 + 涨跌色</td></tr>
    <tr><td><b>语言</b></td><td class="m">/language</td><td>✓</td><td>✓</td><td>见 <code>07</code></td></tr>
    <tr><td><b>字体大小</b></td><td class="m">/font-size</td><td>✓</td><td>—</td><td>H5 按浏览器设置</td></tr>
    <tr><td><b>登录解锁设置</b></td><td class="m">/session-timeout</td><td>✓</td><td>—</td><td>含生物识别开关</td></tr>
    <tr><td><b>修改密码</b></td><td class="m">/change-password</td><td>✓</td><td>✓</td><td>成功后登出</td></tr>
    <tr><td><b>帮助中心</b></td><td class="m">/help</td><td>✓</td><td>✓</td><td>后台没配问题时隐藏</td></tr>
    <tr><td><b>关于</b></td><td class="m">/about</td><td>✓</td><td>✓</td><td>检查更新仅原生</td></tr>
    <tr><td><b>消息中心</b></td><td class="m">/messages</td><td>✓</td><td>✓</td><td>入口是底部「消息」Tab，不在个人中心（见 <code>09</code>）</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>