liaoxg
/
cfc


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0d1117" />
<title>浠艾福 · 页面重新设计 · 高保真原型</title>
<style>
  /* =========================================================
     浠艾福 Redesign — Design Tokens (v4.0)
     方向：Calm Premium Wellness
     - 以白色/浅中性为底，五维色彩仅作强调色
     - 内联 SVG 图标取代 emoji
     - 克制的动效：ease-out 入场、spring 抽屉、reduced-motion 降级
     ========================================================= */
  :root {
    /* 品牌中性（暖色基底，呼应 flash 页） */
    --bg: #FFF7F1;
    --bg-soft: #FBEDE1;
    --surface: #FFFFFF;
    --surface-2: #FFFDFB;
    --ink: #3D2B1F;
    --ink-2: #7A6650;
    --ink-3: #B49A83;
    --line: #F2E7DA;
    --line-strong: #E8D9C7;

    /* 品牌主色（行动/关键按钮）——暖橙，沿用 flash 页 */
    --brand: #F97316;
    --brand-ink: #7C2D12;
    --brand-soft: #FFF1E6;

    /* 五维强调色（严格沿用 flash 页取值） */
    --dim-body: #FF8C42;     /* 身 · 主动健康 */
    --dim-body-soft: #FFEAD9;
    --dim-mind: #FF6B9D;     /* 心 · 大爱相随 */
    --dim-mind-soft: #FFE0EC;
    --dim-wisdom: #6366F1;   /* 智 · 赋能未来 */
    --dim-wisdom-soft: #E9E9FE;
    --dim-action: #10B981;   /* 行 · 人际和谐 */
    --dim-action-soft: #DEF7EF;
    --dim-wealth: #F59E0B;   /* 富 · 利他创富 */
    --dim-wealth-soft: #FEF0D6;

    /* 语义 */
    --ok: #10B981;
    --warn: #F59E0B;
    --danger: #EF5350;

    /* 圆角 */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* 阴影 —— 轻、暖 */
    --sh-1: 0 1px 2px rgba(124,45,18,0.04), 0 2px 8px rgba(124,45,18,0.05);
    --sh-2: 0 4px 16px rgba(124,45,18,0.07);
    --sh-3: 0 12px 40px rgba(124,45,18,0.12);
    --sh-brand: 0 6px 20px rgba(249,115,22,0.30);

    /* 动效 */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --t-fast: 160ms;
    --t-base: 240ms;
    --t-slow: 360ms;

    /* 字号基线（移动端 ≥14px 正文） */
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 17px;
    --fs-xl: 20px;
    --fs-2xl: 26px;
    --fs-3xl: 32px;

    --tab-h: 64px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    background: #F3E9DD;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 24px 16px;
  }
  button, [role="button"], .tap { touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
  input, textarea, select { font-size: 16px; font-family: inherit; }
  svg { display: block; }

  /* ===== 演示外壳（Preview Shell，非产品布局） ===== */
  .stage {
    width: 100%;
    max-width: 408px;
    background: var(--bg);
    border-radius: 44px;
    box-shadow: 0 30px 80px rgba(20,30,55,0.28);
    overflow: hidden;
    position: relative;
    height: min(880px, 92vh);
    display: flex;
    flex-direction: column;
    border: 10px solid #0E1320;
  }
  .notch {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 132px; height: 26px; background: #0E1320; border-radius: 0 0 16px 16px; z-index: 60;
  }
  .statusbar {
    height: 44px; flex: none; display: flex; align-items: center; justify-content: space-between;
    padding: 0 26px; font-size: 13px; font-weight: 600; color: var(--ink);
    padding-top: 8px;
  }
  .statusbar .sb-right { display: flex; align-items: center; gap: 6px; }

  /* ===== App 视图容器 ===== */
  .app { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; }
  .screen-scroll {
    flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 16px);
  }
  .screen { display: none; animation: screenIn var(--t-base) var(--ease-out) both; }
  .screen.active { display: block; }
  @keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

  /* ===== 顶部栏（每页） ===== */
  .topbar {
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 18px 10px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--surface);
    position: sticky; top: 0; z-index: 20;
    border-bottom: 1px solid var(--line);
  }
  .topbar .tb-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .tb-greet { font-size: var(--fs-sm); color: var(--ink-3); display: flex; align-items: center; gap: 5px; }
  .tb-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0.2px; }
  .tb-right { display: flex; align-items: center; gap: 10px; }
  .icon-btn {
    width: 38px; height: 38px; border-radius: 50%; background: var(--bg-soft);
    display: flex; align-items: center; justify-content: center; color: var(--ink-2);
    position: relative; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
  }
  .icon-btn:active { transform: scale(0.92); background: var(--line); }
  .icon-btn .badge {
    position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--danger); border: 2px solid var(--surface);
  }

  /* 成员切换 chips */
  .member-switch { display: flex; gap: 6px; align-items: center; }
  .mchip {
    display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: var(--r-pill);
    background: var(--bg-soft); border: 1.5px solid transparent; transition: all var(--t-fast) var(--ease-out);
  }
  .mchip.on { background: var(--brand-soft); border-color: var(--brand); }
  .mchip:active { transform: scale(0.95); }
  .mchip .ava { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; }
  .mchip .nm { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }

  /* ===== 通用卡片/区块 ===== */
  .pad { padding: 0 16px; }
  .section { margin-top: 16px; }
  .sec-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; margin-bottom: 10px; }
  .sec-title { font-size: var(--fs-md); font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; }
  .sec-more { font-size: var(--fs-sm); color: var(--brand); font-weight: 600; }
  .card {
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1);
    padding: 16px; margin: 0 16px 14px;
  }
  .card.flush { margin: 0 0 0 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }

  /* ===== 能量英雄模块（首页签名 · 暖桃橙，呼应 flash 页） ===== */
  .energy-hero {
    margin: 14px 16px 0; background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 55%, #FED7AA 100%);
    border-radius: var(--r-xl); padding: 18px; color: #7C2D12; position: relative; overflow: hidden;
    box-shadow: var(--sh-2);
  }
  .energy-hero::after {
    content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(249,115,22,0.30), transparent 70%); border-radius: 50%;
  }
  .eh-top { display: flex; justify-content: space-between; align-items: flex-start; }
  .eh-label { font-size: var(--fs-sm); color: rgba(124,45,18,0.6); }
  .eh-score { font-size: var(--fs-3xl); font-weight: 800; line-height: 1; margin-top: 2px; color: #7C2D12; }
  .eh-score small { font-size: var(--fs-base); font-weight: 600; color: rgba(124,45,18,0.55); margin-left: 4px; }
  .eh-sub { font-size: var(--fs-xs); color: rgba(124,45,18,0.5); margin-top: 6px; }
  .eh-link { font-size: var(--fs-sm); color: #7C2D12; background: rgba(124,45,18,0.10); padding: 6px 12px; border-radius: var(--r-pill); font-weight: 600; transition: transform var(--t-fast) var(--ease-out); }
  .eh-link:active { transform: scale(0.95); }
  .ring-wrap { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
  .ring { width: 132px; height: 132px; flex: none; position: relative; }
  .ring .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .ring .rc-val { font-size: var(--fs-2xl); font-weight: 800; color: #7C2D12; }
  .ring .rc-lab { font-size: var(--fs-xs); color: rgba(124,45,18,0.6); }
  .dim-bars { flex: 1; display: flex; flex-direction: column; gap: 9px; }
  .dbar { display: flex; align-items: center; gap: 8px; }
  .dbar .dl { font-size: var(--fs-xs); width: 30px; color: rgba(124,45,18,0.8); flex: none; }
  .dbar .dt { flex: 1; height: 7px; background: rgba(124,45,18,0.12); border-radius: var(--r-pill); overflow: hidden; }
  .dbar .df { height: 100%; border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease-out); }
  .dbar .dv { font-size: var(--fs-xs); width: 22px; text-align: right; color: #7C2D12; font-weight: 600; }

  /* ===== Next Best Action ===== */
  .nba {
    margin: 14px 16px 0; border-radius: var(--r-lg); padding: 14px 16px; display: flex; align-items: center; gap: 13px;
    background: var(--surface); box-shadow: var(--sh-1); position: relative; overflow: hidden;
    border-left: 4px solid var(--brand);
  }
  .nba:active { transform: scale(0.99); }
  .nba .nba-ic { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
  .nba .nba-info { flex: 1; min-width: 0; }
  .nba .nba-t { font-size: var(--fs-md); font-weight: 700; }
  .nba .nba-s { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 2px; }
  .nba .nba-go { font-size: var(--fs-sm); font-weight: 700; color: var(--brand); flex: none; }

  /* ===== 任务行 / 挑战 ===== */
  .row {
    display: flex; align-items: center; gap: 12px; padding: 13px 0;
  }
  .row + .row { border-top: 1px solid var(--line); }
  .row .rk { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
  .row .ri { flex: 1; min-width: 0; }
  .row .rt { font-size: var(--fs-base); font-weight: 600; }
  .row .rm { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px; }
  .pill-btn {
    flex: none; padding: 7px 14px; border-radius: var(--r-pill); background: var(--brand); color: #fff;
    font-size: var(--fs-sm); font-weight: 700; border: none; transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast);
  }
  .pill-btn:active { transform: scale(0.94); }
  .pill-btn.done { background: var(--dim-action-soft); color: var(--ok); }

  /* 家庭动态 */
  .feed-item { display: flex; gap: 11px; padding: 11px 0; align-items: flex-start; }
  .feed-item + .feed-item { border-top: 1px solid var(--line); }
  .feed-dot { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); }
  .feed-item .fi-t { font-size: var(--fs-base); color: var(--ink); line-height: 1.4; }
  .feed-item .fi-t b { font-weight: 700; }
  .feed-item .fi-time { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 3px; }

  /* 推荐横滑 */
  .hscroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 16px 4px; overscroll-behavior: contain; scrollbar-width: none; }
  .hscroll::-webkit-scrollbar { display: none; }
  .rec-card { flex: none; width: 168px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; }
  .rec-card:active { transform: scale(0.98); }
  .rec-cover { height: 96px; }
  .rec-body { padding: 10px; }
  .rec-cat { font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); display: inline-block; }
  .rec-tt { font-size: var(--fs-base); font-weight: 600; margin-top: 7px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rec-meta { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 6px; }

  /* ===== TabBar（自定义） ===== */
  .tabbar {
    position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,0.92); backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--line); display: flex; align-items: stretch; z-index: 40;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--ink-3); transition: color var(--t-fast); position: relative;
  }
  .tab .t-ic { transition: transform var(--t-fast) var(--ease-out); }
  .tab.on { color: var(--brand); }
  .tab.on .t-ic { transform: translateY(-1px); }
  .tab .t-tx { font-size: 10.5px; font-weight: 600; }
  .tab-center {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative;
  }
  .tab-center .c-btn {
    width: 52px; height: 52px; border-radius: 50%; margin-top: -22px; background: linear-gradient(135deg, #FF8C42, #FF6B9D);
    display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--sh-brand);
    transition: transform var(--t-fast) var(--ease-out);
  }
  .tab-center:active .c-btn { transform: scale(0.9) rotate(-8deg); }
  .tab-center .c-tx { font-size: 10px; font-weight: 700; color: var(--brand); }

  /* ===== 五维 底部抽屉 ===== */
  .sheet-mask { position: absolute; inset: 0; background: rgba(16,22,38,0.42); opacity: 0; visibility: hidden; transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base); z-index: 50; }
  .sheet-mask.show { opacity: 1; visibility: visible; }
  .sheet {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--surface);
    border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); transition: transform var(--t-slow) var(--ease-drawer);
    box-shadow: var(--sh-3); max-height: 82%; overflow-y: auto; overscroll-behavior: contain;
  }
  .sheet.show { transform: translateY(0); }
  .sheet-grip { width: 38px; height: 4px; background: var(--line-strong); border-radius: 4px; margin: 4px auto 14px; }
  .sheet-title { font-size: var(--fs-xl); font-weight: 800; text-align: center; }
  .sheet-sub { text-align: center; font-size: var(--fs-sm); color: var(--ink-3); margin-top: 4px; margin-bottom: 16px; }
  .dim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .dim-tile {
    border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px;
    border: 1.5px solid transparent; transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast);
  }
  .dim-tile:active { transform: scale(0.97); border-color: var(--line-strong); }
  .dim-tile .dt-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; }
  .dim-tile .dt-nm { font-size: var(--fs-md); font-weight: 700; }
  .dim-tile .dt-ds { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.4; }
  .dim-tile .dt-sc { font-size: var(--fs-sm); font-weight: 700; margin-top: 2px; }
  .dim-tile .dt-track { height: 6px; background: var(--bg-soft); border-radius: var(--r-pill); overflow: hidden; }
  .dim-tile .dt-fill { height: 100%; border-radius: var(--r-pill); }

  /* ===== 健康页 ===== */
  .seg { display: flex; gap: 6px; padding: 4px; background: var(--bg-soft); border-radius: var(--r-pill); margin: 14px 16px 0; }
  .seg .sg { flex: 1; text-align: center; padding: 9px 0; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); transition: all var(--t-fast) var(--ease-out); }
  .seg .sg.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
  .radar-card { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; text-align: center; }
  .radar-card svg { margin: 0 auto; }
  .data-row { display: flex; gap: 12px; margin: 14px 16px 0; }
  .data-col { flex: 1; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 14px; }
  .data-col .dc-t { font-size: var(--fs-base); font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }

  /* ===== 成长页 ===== */
  .ms-card { margin: 14px 16px 0; background: linear-gradient(135deg, #FFFFFF, #FFF6EE); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
  .ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
  .ms-it { background: var(--surface); border-radius: var(--r-md); padding: 14px 8px; text-align: center; box-shadow: var(--sh-1); }
  .ms-it .mv { font-size: var(--fs-xl); font-weight: 800; }
  .ms-it .ml { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 3px; }
  .today-prog { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .tp-item { background: var(--surface); border-radius: var(--r-md); padding: 13px; box-shadow: var(--sh-1); display: flex; align-items: center; gap: 10px; transition: transform var(--t-fast) var(--ease-out); }
  .tp-item:active { transform: scale(0.97); }
  .tp-item .tp-ic { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
  .tp-item .tp-l { font-size: var(--fs-sm); font-weight: 600; }
  .tp-item .tp-st { font-size: var(--fs-xs); margin-top: 2px; font-weight: 600; }
  .tp-st.pend { color: var(--brand); }
  .tp-st.done { color: var(--ok); }

  /* ===== 我的页 ===== */
  .id-card { margin: 14px 16px 0; background: linear-gradient(135deg, #FF8C42, #FF6B9D); border-radius: var(--r-xl); padding: 18px; color: #fff; display: flex; align-items: center; gap: 14px; box-shadow: var(--sh-2); }
  .id-ava { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; flex: none; border: 2px solid rgba(255,255,255,0.35); }
  .id-meta { flex: 1; min-width: 0; }
  .id-nm { font-size: var(--fs-xl); font-weight: 800; display: flex; align-items: center; gap: 8px; }
  .id-lv { font-size: var(--fs-xs); font-weight: 700; background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: var(--r-pill); }
  .id-sub { font-size: var(--fs-sm); color: rgba(255,255,255,0.75); margin-top: 5px; }
  .id-pts { text-align: right; flex: none; }
  .id-pts .pv { font-size: var(--fs-xl); font-weight: 800; }
  .id-pts .pl { font-size: var(--fs-xs); color: rgba(255,255,255,0.7); }
  .ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .ach { background: var(--surface); border-radius: var(--r-md); padding: 14px 6px; text-align: center; box-shadow: var(--sh-1); transition: transform var(--t-fast) var(--ease-out); }
  .ach:active { transform: scale(0.96); }
  .ach .ai { width: 38px; height: 38px; border-radius: 12px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; }
  .ach .av { font-size: var(--fs-md); font-weight: 800; }
  .ach .al { font-size: 10px; color: var(--ink-3); margin-top: 2px; }
  .menu-list { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
  .menu-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; transition: background var(--t-fast); }
  .menu-row:active { background: var(--bg-soft); }
  .menu-row + .menu-row { border-top: 1px solid var(--line); }
  .menu-row .mr-ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
  .menu-row .mr-tx { flex: 1; font-size: var(--fs-base); font-weight: 600; }
  .menu-row .mr-ar { color: var(--ink-3); }

  /* 家庭成员条 */
  .fam-strip { display: flex; gap: 14px; overflow-x: auto; padding: 2px 16px 6px; overscroll-behavior: contain; scrollbar-width: none; }
  .fam-strip::-webkit-scrollbar { display: none; }
  .fam-it { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
  .fam-av { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 700; position: relative; }
  .fam-av.add { background: var(--bg-soft); color: var(--ink-3); border: 1.5px dashed var(--line-strong); }
  .fam-tag { position: absolute; bottom: -2px; right: -2px; font-size: 8px; font-weight: 700; color: #fff; border-radius: var(--r-pill); padding: 1px 5px; }
  .fam-nm { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; }

  /* ===== 登录页 ===== */
  .login { flex: 1; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top,0px) + 50px) 28px 28px; }
  .login .lg-logo { width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(135deg, #FF8C42, #FF6B9D); display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 22px; box-shadow: var(--sh-brand); }
  .login .lg-h { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: 1px; }
  .login .lg-s { font-size: var(--fs-md); color: var(--ink-2); margin-top: 8px; line-height: 1.5; }
  .login .lg-fields { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
  .field { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; display: flex; align-items: center; gap: 10px; transition: border-color var(--t-fast); }
  .field:focus-within { border-color: var(--brand); }
  .field input { flex: 1; border: none; outline: none; background: transparent; color: var(--ink); font-size: var(--fs-base); }
  .field .fc-ic { color: var(--ink-3); flex: none; }
  .lg-btn { margin-top: 22px; background: var(--brand); color: #fff; border: none; border-radius: var(--r-md); padding: 16px; font-size: var(--fs-lg); font-weight: 700; box-shadow: var(--sh-brand); transition: transform var(--t-fast) var(--ease-out); }
  .lg-btn:active { transform: scale(0.98); }
  .lg-alt { margin-top: 16px; text-align: center; font-size: var(--fs-sm); color: var(--ink-3); }
  .lg-alt b { color: var(--brand); font-weight: 700; }
  .lg-terms { margin-top: auto; text-align: center; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; padding-bottom: 10px; }

  /* ===== 状态：骨架 / 空 / 错误 ===== */
  .skeleton { background: linear-gradient(90deg, #F6E7D7 25%, #FCEFDF 50%, #F6E7D7 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  .empty-state { text-align: center; padding: 48px 24px; }
  .empty-state .es-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--ink-3); }
  .empty-state .es-t { font-size: var(--fs-md); font-weight: 700; }
  .empty-state .es-s { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 6px; line-height: 1.5; }
  .empty-state .es-btn { margin-top: 18px; display: inline-block; background: var(--brand); color: #fff; padding: 11px 22px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700; }

  /* Toast */
  .toast { position: absolute; left: 50%; bottom: calc(var(--tab-h) + 24px); transform: translate(-50%, 20px); background: #1A2133; color: #fff; font-size: var(--fs-sm); font-weight: 600; padding: 11px 18px; border-radius: var(--r-pill); opacity: 0; pointer-events: none; transition: transform var(--t-base) var(--ease-out), opacity var(--t-base); z-index: 70; box-shadow: var(--sh-3); max-width: 80%; text-align: center; }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }

  /* 演示切换条 */
  .demo-bar { position: fixed; top: 16px; right: 16px; z-index: 200; background: #1A2133; border-radius: var(--r-pill); padding: 6px; display: flex; gap: 4px; box-shadow: var(--sh-3); }
  .demo-bar button { border: none; background: transparent; color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: 8px 14px; border-radius: var(--r-pill); opacity: 0.6; }
  .demo-bar button.on { background: var(--brand); opacity: 1; }

  /* 入场 stagger */
  .stagger > * { opacity: 0; transform: translateY(8px); animation: itemIn var(--t-base) var(--ease-out) forwards; }
  .stagger > *:nth-child(1) { animation-delay: 20ms; }
  .stagger > *:nth-child(2) { animation-delay: 60ms; }
  .stagger > *:nth-child(3) { animation-delay: 100ms; }
  .stagger > *:nth-child(4) { animation-delay: 140ms; }
  .stagger > *:nth-child(5) { animation-delay: 180ms; }
  .stagger > *:nth-child(6) { animation-delay: 220ms; }
  @keyframes itemIn { to { opacity: 1; transform: translateY(0); } }

  /* ===== 闪屏（还原原 flash 页暖色基因） ===== */
  #splash {
    position: absolute; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #FFF7ED 0%, #FFEDD5 50%, #FED7AA 100%);
    overflow: hidden;
    transition: opacity .5s var(--ease-out), visibility .5s var(--ease-out);
  }
  #splash.hide { opacity: 0; visibility: hidden; }
  .sp-bg { position: absolute; inset: 0; pointer-events: none; }
  .sp-c { position: absolute; border-radius: 50%; opacity: .12; }
  .sp-c1 { width: 200px; height: 200px; background: #FF8C42; top: -50px; right: -40px; animation: sp-float1 4s ease-in-out infinite; }
  .sp-c2 { width: 140px; height: 140px; background: #FF6B9D; bottom: 40px; left: -30px; animation: sp-float2 5s ease-in-out infinite; }
  .sp-c3 { width: 90px; height: 90px; background: #6366F1; top: 50%; right: -20px; animation: sp-float3 6s ease-in-out infinite; }
  @keyframes sp-float1 { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-15px) scale(1.05)} }
  @keyframes sp-float2 { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(10px) scale(1.08)} }
  @keyframes sp-float3 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-10px) rotate(10deg)} }
  .sp-body { display: flex; flex-direction: column; align-items: center; animation: sp-body-in .8s cubic-bezier(.16,1,.3,1) both; padding: 0 24px; }
  @keyframes sp-body-in { from { opacity:0; transform: translateY(20px) scale(.96);} to {opacity:1; transform: none;} }
  .sp-logo { width: 80px; height: 80px; border-radius: 20px; background: rgba(255,255,255,.95); display:flex; align-items:center; justify-content:center; color:#F97316; margin-bottom: 14px; box-shadow: 0 8px 32px rgba(249,115,22,.25); animation: sp-pulse 2.5s ease-in-out infinite; }
  @keyframes sp-pulse { 0%,100%{box-shadow:0 8px 32px rgba(249,115,22,.25)} 50%{box-shadow:0 8px 48px rgba(249,115,22,.45)} }
  .sp-name { font-size: 32px; font-weight: 800; color: #7C2D12; letter-spacing: 5px; }
  .sp-en { font-size: 11px; color: rgba(124,45,18,.5); letter-spacing: 3px; margin-top: 2px; }
  .sp-id { font-size: 14px; font-weight: 600; color: rgba(124,45,18,.85); letter-spacing: 1px; margin-top: 16px; text-align: center; line-height: 1.5; }
  .sp-dims { display: flex; flex-direction: row; gap: 14px; margin-top: 18px; }
  .sp-dim { display:flex; flex-direction:column; align-items:center; gap:6px; animation: sp-dim-in .5s ease both; }
  .sp-dc { width: 40px; height: 40px; border-radius: 50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:700; box-shadow: 0 4px 12px rgba(124,45,18,.12); }
  .sp-dim:nth-child(1){animation-delay:.1s} .sp-dim:nth-child(2){animation-delay:.2s} .sp-dim:nth-child(3){animation-delay:.3s} .sp-dim:nth-child(4){animation-delay:.4s} .sp-dim:nth-child(5){animation-delay:.5s}
  @keyframes sp-dim-in { from{opacity:0; transform:translateY(8px) scale(.8)} to{opacity:1; transform:none} }
  .sp-tag { font-size: 13px; color: rgba(124,45,18,.7); letter-spacing: 2px; margin-top: 16px; text-align:center; }
  .sp-dots { position:absolute; bottom: 70px; left:0; right:0; display:flex; justify-content:center; gap:6px; }
  .sp-dots span { width: 7px; height: 7px; border-radius:50%; background: rgba(249,115,22,.6); animation: sp-dot 1.4s ease-in-out infinite both; }
  .sp-dots span:nth-child(1){animation-delay:-.32s} .sp-dots span:nth-child(2){animation-delay:-.16s} .sp-dots span:nth-child(3){animation-delay:0s}
  @keyframes sp-dot { 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:1} }
  .sp-enter { position:absolute; bottom: 34px; left:0; right:0; text-align:center; font-size:12px; color: rgba(124,45,18,.5); letter-spacing:2px; }

  /* ===== 通用：Task 页返回栏（隐藏 TabBar 的二级页） ===== */
  .nav-bar {
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 12px 10px;
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); position: sticky; top: 0; z-index: 20;
    border-bottom: 1px solid var(--line);
  }
  .nav-bar .nb-back { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); background: var(--bg-soft); flex: none; transition: transform var(--t-fast) var(--ease-out); }
  .nav-bar .nb-back:active { transform: scale(0.9); }
  .nav-bar .nb-t { font-size: var(--fs-lg); font-weight: 800; flex: 1; min-width: 0; }
  .nav-bar .nb-a { font-size: var(--fs-sm); color: var(--brand); font-weight: 600; flex: none; }

  /* ===== 五维能量总览（深读 · 全屏） ===== */
  .ov-hero {
    margin: 14px 16px 0; padding: 18px; border-radius: var(--r-xl); position: relative; overflow: hidden;
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 55%, #FED7AA 100%);
    box-shadow: var(--sh-2);
  }
  .ov-hero::after {
    content: ""; position: absolute; left: -30px; bottom: -50px; width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,107,157,0.28), transparent 70%);
  }
  .ov-score { display: flex; align-items: flex-end; gap: 10px; position: relative; }
  .ov-score .os-n { font-size: 44px; font-weight: 800; line-height: 1; color: #7C2D12; }
  .ov-score .os-u { font-size: var(--fs-sm); color: rgba(124,45,18,0.6); padding-bottom: 5px; }
  .ov-delta { margin-left: auto; font-size: var(--fs-sm); font-weight: 700; color: var(--ok); background: rgba(16,185,129,0.14); padding: 4px 10px; border-radius: var(--r-pill); }
  .ov-delta.down { color: var(--danger); background: rgba(239,83,80,0.12); }
  .ov-cap { font-size: var(--fs-sm); color: rgba(124,45,18,0.65); margin-top: 6px; position: relative; }
  .ov-radar { display: flex; justify-content: center; padding: 18px 0 6px; position: relative; }
  .ov-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; margin-top: 10px; position: relative; }
  .ov-lg { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: rgba(124,45,18,0.75); font-weight: 600; }
  .ov-lg i { width: 8px; height: 8px; border-radius: 2px; display: block; }

  /* 趋势折线 */
  .trend-card { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
  .trend-tabs { display: flex; gap: 6px; background: var(--bg-soft); padding: 3px; border-radius: var(--r-pill); margin-bottom: 14px; }
  .trend-tabs .tt { flex: 1; text-align: center; padding: 7px 0; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); transition: all var(--t-fast) var(--ease-out); }
  .trend-tabs .tt.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
  .trend-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
  .trend-legend .tl { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; }
  .trend-legend .tl i { width: 14px; height: 3px; border-radius: 2px; display: block; }

  /* 家人对比 */
  .cmp-list { display: flex; flex-direction: column; }
  .cmp-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; }
  .cmp-row + .cmp-row { border-top: 1px solid var(--line); }
  .cmp-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--fs-sm); font-weight: 700; flex: none; }
  .cmp-info { flex: 1; min-width: 0; }
  .cmp-nm { display: flex; align-items: baseline; gap: 6px; }
  .cmp-nm .cn { font-size: var(--fs-base); font-weight: 600; }
  .cmp-nm .cr { font-size: var(--fs-xs); color: var(--ink-3); }
  .cmp-bar { height: 7px; background: var(--bg-soft); border-radius: var(--r-pill); margin-top: 6px; overflow: hidden; }
  .cmp-bar .cf { height: 100%; border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease-out); }
  .cmp-sc { font-size: var(--fs-md); font-weight: 800; flex: none; width: 34px; text-align: right; }

  /* 建议卡 */
  .adv-card { display: flex; gap: 11px; padding: 13px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); transition: transform var(--t-fast) var(--ease-out); }
  .adv-card:active { transform: scale(0.98); }
  .adv-card + .adv-card { margin-top: 10px; }
  .adv-ic { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
  .adv-tx { flex: 1; min-width: 0; }
  .adv-t { font-size: var(--fs-base); font-weight: 600; }
  .adv-s { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
  .adv-pri { font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); flex: none; align-self: flex-start; }

  /* ===== 维度详情（Task 页） ===== */
  .dim-hero { margin: 14px 16px 0; border-radius: var(--r-xl); padding: 18px; position: relative; overflow: hidden; box-shadow: var(--sh-2); }
  .dim-hero .dh-top { display: flex; align-items: center; gap: 12px; position: relative; }
  .dim-hero .dh-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
  .dim-hero .dh-nm { font-size: var(--fs-xl); font-weight: 800; }
  .dim-hero .dh-ds { font-size: var(--fs-sm); opacity: 0.8; margin-top: 2px; }
  .dim-hero .dh-sc { margin-left: auto; text-align: right; }
  .dim-hero .dh-sc .n { font-size: var(--fs-2xl); font-weight: 800; line-height: 1; }
  .dim-hero .dh-sc .l { font-size: var(--fs-xs); opacity: 0.75; margin-top: 2px; }
  .sub-score { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; position: relative; }
  .sub-score .ss { background: rgba(255,255,255,0.55); border-radius: var(--r-md); padding: 11px 12px; }
  .sub-score .ss .sl { font-size: var(--fs-xs); opacity: 0.78; font-weight: 600; }
  .sub-score .ss .sv { font-size: var(--fs-lg); font-weight: 800; margin-top: 3px; }
  .sub-score .ss .sv small { font-size: var(--fs-xs); font-weight: 600; opacity: 0.7; margin-left: 2px; }

  .metric-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
  .metric-row + .metric-row { border-top: 1px solid var(--line); }
  .metric-row .mi { flex: 1; min-width: 0; }
  .metric-row .mn { font-size: var(--fs-base); font-weight: 600; display: flex; align-items: center; gap: 6px; }
  .metric-row .mv { font-size: var(--fs-md); font-weight: 800; flex: none; }
  .metric-row .mr { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
  .tag-ref { font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); flex: none; }
  .tag-ref.hi { background: rgba(239,83,80,0.12); color: var(--danger); }
  .tag-ref.mid { background: rgba(245,158,11,0.14); color: #B45309; }
  .tag-ref.ok { background: var(--dim-action-soft); color: var(--ok); }

  /* ===== 报告上传流程 ===== */
  .up-steps { display: flex; align-items: center; gap: 6px; padding: 16px 18px 6px; }
  .up-step { display: flex; align-items: center; gap: 6px; flex: none; }
  .up-step .us-n { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: var(--bg-soft); color: var(--ink-3); flex: none; }
  .up-step .us-t { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
  .up-step.on .us-n { background: var(--brand); color: #fff; }
  .up-step.on .us-t { color: var(--brand-ink); }
  .up-step.done .us-n { background: var(--dim-action); color: #fff; }
  .up-step.done .us-t { color: var(--ink-2); }
  .up-step-line { flex: 1; height: 2px; background: var(--line); border-radius: 2px; min-width: 12px; }
  .up-step-line.done { background: var(--dim-action); }

  .up-zone { margin: 14px 16px 0; border: 2px dashed var(--line-strong); border-radius: var(--r-lg); padding: 30px 20px; text-align: center; transition: border-color var(--t-fast), background var(--t-fast); }
  .up-zone:active { border-color: var(--brand); background: var(--brand-soft); }
  .up-zone .uz-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
  .up-zone .uz-t { font-size: var(--fs-md); font-weight: 700; }
  .up-zone .uz-s { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 6px; line-height: 1.5; }
  .up-btns { display: flex; gap: 10px; margin-top: 18px; }
  .up-btns .ub { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 13px; font-size: var(--fs-base); font-weight: 600; transition: transform var(--t-fast) var(--ease-out); }
  .up-btns .ub:active { transform: scale(0.97); }
  .up-btns .ub.pri { background: var(--brand); color: #fff; border-color: var(--brand); }

  .up-preview { margin: 14px 16px 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); background: var(--surface); }
  .up-thumb { height: 168px; background: linear-gradient(135deg, #FFF3E6, #FFE2C7); position: relative; display: flex; align-items: center; justify-content: center; }
  .up-thumb .paper { width: 118px; height: 148px; background: #fff; border-radius: 6px; box-shadow: 0 6px 18px rgba(124,45,18,0.16); padding: 12px 10px; }
  .up-thumb .paper .pl { height: 6px; border-radius: 3px; background: #F2E7DA; margin-bottom: 7px; }
  .up-thumb .paper .pl.t { width: 56%; background: #E8D9C7; height: 8px; }
  .up-thumb .badge-ok { position: absolute; right: 12px; top: 12px; background: var(--dim-action); color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 4px; }
  .up-meta { padding: 14px; }
  .up-fname { font-size: var(--fs-base); font-weight: 600; display: flex; align-items: center; gap: 7px; }
  .up-fmeta { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 4px; }

  .ocr-box { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
  .ocr-bar { height: 6px; background: var(--bg-soft); border-radius: var(--r-pill); overflow: hidden; margin-top: 12px; }
  .ocr-bar .of { height: 100%; background: linear-gradient(90deg, var(--brand), #FF6B9D); border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease-out); }
  .ocr-step { display: flex; align-items: center; gap: 9px; padding: 9px 0; font-size: var(--fs-sm); }
  .ocr-step .os-ic { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--bg-soft); color: var(--ink-3); }
  .ocr-step.done .os-ic { background: var(--dim-action); color: #fff; }
  .ocr-step.run .os-ic { background: var(--brand-soft); color: var(--brand); }
  .ocr-step .os-t { color: var(--ink-2); }
  .ocr-step.done .os-t, .ocr-step.run .os-t { color: var(--ink); font-weight: 600; }
  .spin { animation: spin 1s linear infinite; transform-origin: center; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .fix-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
  .fix-row + .fix-row { border-top: 1px solid var(--line); }
  .fix-row .fi { flex: 1; min-width: 0; }
  .fix-row .fn { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 6px; }
  .fix-row .fv { font-size: var(--fs-md); font-weight: 800; }
  .fix-row .fw { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
  .low-conf { background: rgba(245,158,11,0.14); color: #B45309; font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); }

  .up-actions { padding: 6px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .btn-primary { width: 100%; background: var(--brand); color: #fff; border: none; border-radius: var(--r-md); padding: 16px; font-size: var(--fs-lg); font-weight: 700; box-shadow: var(--sh-brand); transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast); }
  .btn-primary:active { transform: scale(0.98); }
  .btn-primary:disabled { background: var(--line-strong); box-shadow: none; color: var(--ink-3); }
  .btn-ghost { width: 100%; background: transparent; color: var(--ink-2); border: none; padding: 14px; font-size: var(--fs-base); font-weight: 600; margin-top: 4px; }

  /* ===== 成长报告卡 / 分享卡 ===== */
  .rpt-tabs { display: flex; gap: 8px; margin: 14px 16px 0; }
  .rpt-tabs .rtt { flex: 1; text-align: center; padding: 11px 0; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); font-size: var(--fs-base); font-weight: 700; color: var(--ink-2); transition: all var(--t-fast) var(--ease-out); }
  .rpt-tabs .rtt.on { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }

  .share-card {
    margin: 14px 16px 0; border-radius: var(--r-xl); padding: 20px; position: relative; overflow: hidden;
    background: linear-gradient(150deg, #FFF7ED 0%, #FFEDD5 52%, #FED7AA 100%);
    box-shadow: var(--sh-2);
  }
  .share-card::before { content: ""; position: absolute; right: -46px; top: -46px; width: 168px; height: 168px; border-radius: 50%; background: radial-gradient(circle, rgba(255,107,157,0.30), transparent 70%); }
  .share-card::after { content: ""; position: absolute; left: -40px; bottom: -60px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(99,102,241,0.18), transparent 70%); }
  .sc-brand { display: flex; align-items: center; gap: 8px; position: relative; }
  .sc-brand .scb-ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.9); color: var(--brand); display: flex; align-items: center; justify-content: center; }
  .sc-brand .scb-tx { font-size: var(--fs-sm); font-weight: 800; color: #7C2D12; letter-spacing: 0.5px; }
  .sc-title { font-size: var(--fs-xl); font-weight: 800; color: #7C2D12; margin-top: 14px; position: relative; line-height: 1.3; }
  .sc-sub { font-size: var(--fs-sm); color: rgba(124,45,18,0.7); margin-top: 5px; position: relative; }
  .sc-dims { display: flex; gap: 8px; margin-top: 18px; position: relative; }
  .sc-dim { flex: 1; background: rgba(255,255,255,0.62); border-radius: var(--r-md); padding: 10px 6px; text-align: center; }
  .sc-dim .sd-n { font-size: var(--fs-md); font-weight: 800; }
  .sc-dim .sd-l { font-size: var(--fs-xs); color: rgba(124,45,18,0.6); margin-top: 2px; font-weight: 600; }
  .sc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(124,45,18,0.14); position: relative; }
  .sc-foot .sf-l { font-size: var(--fs-xs); color: rgba(124,45,18,0.6); }
  .sc-foot .sf-r { font-size: var(--fs-xs); font-weight: 700; color: #7C2D12; }

  .badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .bg-item { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px 10px; text-align: center; transition: transform var(--t-fast) var(--ease-out); position: relative; overflow: hidden; }
  .bg-item:active { transform: scale(0.96); }
  .bg-item.locked { opacity: 0.55; }
  .bg-ring { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; color: #fff; position: relative; }
  .bg-ring::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px dashed var(--line-strong); }
  .bg-item.locked .bg-ring::after { border-color: var(--ink-3); }
  .bg-nm { font-size: var(--fs-sm); font-weight: 700; }
  .bg-dt { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
  .bg-lock { position: absolute; right: 8px; top: 8px; color: var(--ink-3); }

  .share-actions { display: flex; gap: 10px; margin: 16px 16px 0; }
  .share-actions .sa { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 14px; border-radius: var(--r-md); font-size: var(--fs-base); font-weight: 700; transition: transform var(--t-fast) var(--ease-out); }
  .share-actions .sa:active { transform: scale(0.97); }
  .share-actions .sa.pri { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
  .share-actions .sa.sec { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

  /* ===== 成果 / 成就（突出成果 + 驱动继续完成） ===== */
  .ach-hero {
    margin: 14px 16px 0; border-radius: var(--r-xl); padding: 18px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 55%, #FED7AA 100%);
    box-shadow: var(--sh-2); color: #7C2D12;
  }
  .ach-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255,140,66,0.32), transparent 70%); }
  .ach-hero .ah-t { font-size: var(--fs-md); font-weight: 800; position: relative; }
  .ach-hero .ah-s { font-size: var(--fs-sm); color: rgba(124,45,18,0.65); margin-top: 4px; position: relative; line-height: 1.5; }
  .ah-ring-wrap { display: flex; align-items: center; gap: 18px; margin-top: 16px; position: relative; }
  .ah-ring { width: 116px; height: 116px; flex: none; position: relative; }
  .ah-ring .ah-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .ah-ring .ah-c .n { font-size: var(--fs-2xl); font-weight: 800; line-height: 1; }
  .ah-ring .ah-c .l { font-size: var(--fs-xs); color: rgba(124,45,18,0.6); margin-top: 2px; }
  .ah-stats { flex: 1; display: flex; flex-direction: column; gap: 10px; }
  .ah-stat { display: flex; align-items: center; gap: 8px; }
  .ah-stat .as-v { font-size: var(--fs-lg); font-weight: 800; min-width: 52px; }
  .ah-stat .as-l { font-size: var(--fs-xs); color: rgba(124,45,18,0.6); }
  .ah-stat .as-bar { flex: 1; height: 6px; background: rgba(124,45,18,0.12); border-radius: var(--r-pill); overflow: hidden; }
  .ah-stat .as-bar i { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease-out); }

  /* 连续打卡火苗条 */
  .streak { display: flex; gap: 6px; margin-top: 14px; position: relative; }
  .streak .sd { flex: 1; text-align: center; }
  .streak .sd .dot { width: 100%; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: center; color: rgba(124,45,18,0.35); }
  .streak .sd.done .dot { background: var(--brand); color: #fff; box-shadow: 0 3px 8px rgba(249,115,22,0.35); }
  .streak .sd.today .dot { outline: 2px solid var(--brand); outline-offset: 2px; }
  .streak .sd .dl { font-size: 9.5px; color: rgba(124,45,18,0.55); margin-top: 4px; font-weight: 600; }

  /* 任务：完成态 + 继续驱动 */
  .task-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; position: relative; }
  .task-item + .task-item { border-top: 1px solid var(--line); }
  .task-item .tk-ck {
    width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none;
    display: flex; align-items: center; justify-content: center; background: transparent;
    transition: all var(--t-base) var(--ease-out);
  }
  .task-item .tk-ck:active { transform: scale(0.88); }
  .task-item.done .tk-ck { background: var(--ok); border-color: var(--ok); }
  .task-item .tk-bd { flex: 1; min-width: 0; }
  .task-item .tk-t { font-size: var(--fs-base); font-weight: 600; transition: color var(--t-base); }
  .task-item.done .tk-t { color: var(--ink-3); text-decoration: line-through; }
  .task-item .tk-m { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
  .task-item .tk-pts { font-size: var(--fs-xs); font-weight: 800; color: var(--brand); background: var(--brand-soft); padding: 2px 8px; border-radius: var(--r-pill); flex: none; }
  .task-item.done .tk-pts { color: var(--ok); background: var(--dim-action-soft); }
  /* 完成后高亮 */
  @keyframes taskPop { 0% { background: rgba(16,185,129,0.16); } 100% { background: transparent; } }
  .task-item.just-done { animation: taskPop 1.1s var(--ease-out); }

  /* 成果解锁横幅（完成任务后浮现） */
  .unlock-toast {
    position: absolute; left: 16px; right: 16px; top: 60px; z-index: 65;
    display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: var(--r-lg);
    background: linear-gradient(135deg, #FFF7ED, #FFEDD5); color: #7C2D12;
    box-shadow: var(--sh-3); border: 1.5px solid rgba(249,115,22,0.4);
    transform: translateY(-16px); opacity: 0; pointer-events: none;
    transition: transform var(--t-slow) var(--ease-drawer), opacity var(--t-base);
  }
  .unlock-toast.show { transform: translateY(0); opacity: 1; }
  .unlock-toast .ut-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
  .unlock-toast .ut-t { font-size: var(--fs-base); font-weight: 800; }
  .unlock-toast .ut-s { font-size: var(--fs-sm); color: rgba(124,45,18,0.7); margin-top: 2px; }

  /* 分享卡：可截图样式加强 */
  .share-card.hero-share { padding: 24px 20px; }
  .sc-streak { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.7); color: #7C2D12; font-size: var(--fs-xs); font-weight: 800; padding: 4px 11px; border-radius: var(--r-pill); margin-top: 12px; position: relative; }
  .sc-ach { display: flex; gap: 8px; margin-top: 14px; position: relative; }
  .sc-ach-item { flex: 1; text-align: center; background: rgba(255,255,255,0.55); border-radius: var(--r-md); padding: 9px 4px; }
  .sc-ach-item .n { font-size: var(--fs-sm); font-weight: 800; color: #7C2D12; }
  .sc-ach-item .l { font-size: 10px; color: rgba(124,45,18,0.55); margin-top: 2px; }

  /* 成就徽章（放大 + 解锁动画） */
  .bg-item .bg-ring svg { transition: transform var(--t-base) var(--ease-out); }
  .bg-item:active .bg-ring svg { transform: scale(1.12) rotate(-6deg); }
  @keyframes badgeUnlock { 0% { transform: scale(0.6) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.12) rotate(6deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
  .bg-item.just-unlocked .bg-ring { animation: badgeUnlock .7s var(--ease-out); }

  /* ===== 肠道问卷 / 9.9 陪跑 / D7 报告 ===== */
  .qz-wrap { padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .qz-prog { display: flex; align-items: center; gap: 8px; padding: 18px 20px 10px; }
  .qz-prog .qp-bar { flex: 1; height: 5px; background: var(--bg-soft); border-radius: var(--r-pill); overflow: hidden; }
  .qz-prog .qp-bar i { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); transition: width var(--t-base) var(--ease-out); }
  .qz-prog .qp-tx { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; flex: none; }
  .qz-q { padding: 14px 0; }
  .qz-q .qq-dim { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); letter-spacing: 0.5px; }
  .qz-q .qq-t { font-size: var(--fs-lg); font-weight: 700; margin-top: 6px; line-height: 1.45; }
  .qz-opts { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
  .qz-opt {
    display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-radius: var(--r-md);
    background: var(--surface); border: 1.5px solid var(--line); cursor: pointer;
    transition: all var(--t-fast) var(--ease-out);
  }
  .qz-opt:active { transform: scale(0.98); }
  .qz-opt.on { border-color: var(--brand); background: var(--brand-soft); }
  .qz-opt .qo-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; display: flex; align-items: center; justify-content: center; }
  .qz-opt.on .qo-dot { border-color: var(--brand); }
  .qz-opt .qo-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: transparent; }
  .qz-opt.on .qo-dot::after { background: var(--brand); }
  .qz-opt .qo-t { flex: 1; font-size: var(--fs-base); font-weight: 600; }
  .qz-opt .qo-s { font-size: var(--fs-sm); color: var(--ink-3); flex: none; }

  /* 风险结果页 */
  .risk-hero { margin: 14px 16px 0; border-radius: var(--r-xl); padding: 20px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--sh-2); }
  .risk-hero.low { background: linear-gradient(135deg, #EAF3DE, #C0DD97); }
  .risk-hero.mid { background: linear-gradient(135deg, #FFF7ED, #FED7AA); }
  .risk-hero.high { background: linear-gradient(135deg, #FCEBEB, #F7C1C1); }
  .risk-hero .rh-score { font-size: 46px; font-weight: 800; line-height: 1; }
  .risk-hero .rh-unit { font-size: var(--fs-base); font-weight: 600; opacity: 0.7; margin-top: 4px; }
  .risk-hero .rh-lv { display: inline-block; margin-top: 12px; background: rgba(255,255,255,0.8); font-size: var(--fs-md); font-weight: 800; padding: 5px 16px; border-radius: var(--r-pill); }
  .risk-hero .rh-tip { font-size: var(--fs-sm); margin-top: 10px; opacity: 0.8; }
  .risk-factors { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
  .rf-title { font-size: var(--fs-md); font-weight: 700; margin-bottom: 12px; }
  .rf-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
  .rf-row + .rf-row { border-top: 1px solid var(--line); }
  .rf-row .rf-d { font-size: var(--fs-sm); color: var(--ink-2); flex: 1; }
  .rf-row .rf-b { width: 56px; height: 6px; background: var(--bg-soft); border-radius: var(--r-pill); overflow: hidden; flex: none; }
  .rf-row .rf-b i { display: block; height: 100%; border-radius: var(--r-pill); }
  .rf-row .rf-s { font-size: var(--fs-sm); font-weight: 700; width: 26px; text-align: right; flex: none; }

  /* 9.9 陪跑 7 天 */
  .prep-card { margin: 14px 16px 0; border-radius: var(--r-xl); padding: 18px; background: linear-gradient(135deg, #FFF7ED, #FFEDD5); box-shadow: var(--sh-2); color: #7C2D12; position: relative; overflow: hidden; }
  .prep-card .pc-t { font-size: var(--fs-lg); font-weight: 800; }
  .prep-card .pc-s { font-size: var(--fs-sm); color: rgba(124,45,18,0.7); margin-top: 6px; line-height: 1.5; }
  .prep-price { margin-top: 14px; display: flex; align-items: flex-end; gap: 10px; }
  .prep-price .pp-n { font-size: 38px; font-weight: 800; line-height: 1; }
  .prep-price .pp-u { font-size: var(--fs-sm); color: rgba(124,45,18,0.7); padding-bottom: 5px; }
  .prep-list { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 6px 16px; }
  .prep-item { display: flex; align-items: center; gap: 11px; padding: 12px 0; }
  .prep-item + .prep-item { border-top: 1px solid var(--line); }
  .prep-item .pi-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }

  /* 7 天打卡格 */
  .d7-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; margin-top: 14px; }
  .d7-cell { aspect-ratio: 1; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; background: rgba(255,255,255,0.55); color: rgba(124,45,18,0.4); }
  .d7-cell.done { background: var(--brand); color: #fff; }
  .d7-cell.today { outline: 2px solid var(--brand); outline-offset: 2px; color: #7C2D12; }
  .d7-ach { display: flex; gap: 9px; margin-top: 16px; }
  .d7-ach .da { flex: 1; background: rgba(255,255,255,0.62); border-radius: var(--r-md); padding: 11px 6px; text-align: center; }
  .d7-ach .da .v { font-size: var(--fs-lg); font-weight: 800; }
  .d7-ach .da .l { font-size: var(--fs-xs); color: rgba(124,45,18,0.65); margin-top: 2px; font-weight: 600; }

  /* 变化曲线（报告内） */
  .trend-box { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px; }
  .tb-row { padding: 12px 0; }
  .tb-row + .tb-row { border-top: 1px solid var(--line); }
  .tb-head { display: flex; align-items: baseline; justify-content: space-between; }
  .tb-name { font-size: var(--fs-base); font-weight: 700; }
  .tb-val { font-size: var(--fs-sm); font-weight: 800; }
  .tb-spark { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-top: 9px; }
  .tb-spark i { flex: 1; background: var(--brand-soft); border-radius: 3px 3px 0 0; min-height: 4px; }
  .tb-spark i.last { background: var(--brand); }
  .tb-note { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 9px; line-height: 1.5; }

  /* 发现卡（报告） */
  .find-card { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 15px; }
  .find-card .fc-h { display: flex; gap: 9px; align-items: flex-start; }
  .find-card .fc-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
  .find-card .fc-t { font-size: var(--fs-base); font-weight: 700; line-height: 1.4; }
  .find-card .fc-obs { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 9px; line-height: 1.6; }
  .find-card .fc-tip { margin-top: 10px; background: var(--brand-soft); border-radius: var(--r-sm); padding: 10px 12px; font-size: var(--fs-sm); color: var(--brand-ink); line-height: 1.55; font-weight: 600; }

  /* 准备度 */
  .chk-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; }
  .chk-row + .chk-row { border-top: 1px solid var(--line); }
  .chk-row .ck-ic { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
  .chk-row.done .ck-ic { background: var(--ok); color: #fff; }
  .chk-row.todo .ck-ic { background: var(--bg-soft); color: var(--ink-3); }
  .chk-row .ck-t { flex: 1; font-size: var(--fs-base); font-weight: 600; }
  .chk-row .ck-n { font-size: var(--fs-xs); color: var(--ink-3); }

  /* 缺口对照 */
  .gap-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .gap-col { border-radius: var(--r-md); padding: 13px; }
  .gap-col .gc-h { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.5px; margin-bottom: 9px; }
  .gap-col.know { background: var(--dim-action-soft); }
  .gap-col.know .gc-h { color: var(--ok); }
  .gap-col.unk { background: var(--bg-soft); }
  .gap-col.unk .gc-h { color: var(--ink-3); }
  .gap-col li { font-size: var(--fs-sm); line-height: 1.7; list-style: none; }

  /* 检测行动卡 */
  .buy-card { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
  .buy-hd { padding: 16px; background: linear-gradient(135deg, #FFF7ED, #FFEDD5); color: #7C2D12; }
  .buy-hd .bh-t { font-size: var(--fs-lg); font-weight: 800; }
  .buy-hd .bh-p { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
  .buy-hd .bh-n { font-size: 30px; font-weight: 800; }
  .buy-hd .bh-u { font-size: var(--fs-sm); color: rgba(124,45,18,0.7); }
  .buy-hd .bh-o { font-size: var(--fs-sm); text-decoration: line-through; opacity: 0.6; margin-left: 4px; }
  .buy-bd { padding: 6px 16px 16px; }
  .buy-line { display: flex; align-items: center; gap: 9px; padding: 11px 0; font-size: var(--fs-sm); }
  .buy-line + .buy-line { border-top: 1px solid var(--line); }
  .buy-line .bl-t { flex: 1; color: var(--ink-2); }
  .buy-line .bl-v { font-weight: 800; }
  .installment { margin: 10px 16px 0; background: var(--brand-soft); border-radius: var(--r-md); padding: 13px 15px; display: flex; align-items: center; gap: 11px; }
  .installment .in-n { font-size: var(--fs-md); font-weight: 800; color: var(--brand-ink); }
  .installment .in-t { font-size: var(--fs-sm); color: var(--brand-ink); opacity: 0.85; margin-top: 2px; }
  .why-now { margin: 14px 16px 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 15px; }
  .why-now .wn-i { display: flex; gap: 10px; padding: 9px 0; align-items: flex-start; }
  .why-now .wn-n { width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
  .why-now .wn-t { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
  .why-now .wn-t b { color: var(--ink); }

  .report-hd { padding: 22px 20px 6px; text-align: center; }
  .report-hd .rph-big { font-size: 52px; font-weight: 800; line-height: 1; color: #7C2D12; }
  .report-hd .rph-sub { font-size: var(--fs-base); color: rgba(124,45,18,0.75); margin-top: 8px; }
  .report-hero { margin: 14px 16px 0; border-radius: var(--r-xl); padding: 20px; background: linear-gradient(135deg, #FFF7ED, #FED7AA); box-shadow: var(--sh-2); position: relative; overflow: hidden; }
  .report-hero .rp-t { font-size: var(--fs-xl); font-weight: 800; color: #7C2D12; }
  .report-hero .rp-s { font-size: var(--fs-sm); color: rgba(124,45,18,0.72); margin-top: 8px; line-height: 1.6; }
  .legal { padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px)); font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; text-align: center; }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    .screen, .stagger > * { animation: none !important; opacity: 1 !important; transform: none !important; }
    .sp-c, .sp-logo, .sp-body, .sp-dim, .sp-dots span { animation: none !important; }
  }
  @media (max-width: 360px) {
    .ring { width: 116px; height: 116px; }
    .ring-wrap { gap: 12px; }
  }
</style>
</head>
<body>

<!-- 演示态切换 -->
<div class="demo-bar">
  <button id="db-in" class="on">已登录</button>
  <button id="db-out">未登录</button>
</div>

<div class="stage">
  <div class="notch"></div>
  <div class="statusbar">
    <span id="clock">9:41</span>
    <span class="sb-right">
      <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"><rect x="0" y="7" width="3" height="5" rx="1"/><rect x="4.5" y="4.5" width="3" height="7.5" rx="1"/><rect x="9" y="2" width="3" height="10" rx="1"/><rect x="13.5" y="0" width="3" height="12" rx="1"/></svg>
      <svg width="16" height="12" viewBox="0 0 16 12" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M8 2.4c2.2-1.8 5.3-1.4 6.6 1 .9 1.7.3 4-1.3 5.2C11.2 10.4 9.5 11 8 11 6.5 11 4.8 10.4 2.7 8.6 1.1 7.4.5 5.2 1.4 3.5 2.7 1.1 5.8.6 8 2.4Z"/></svg>
      <svg width="24" height="12" viewBox="0 0 24 12" fill="currentColor"><rect x="1" y="1.5" width="19" height="9" rx="2.5"/><rect x="2.5" y="3" width="14" height="6" rx="1" fill="#fff"/><rect x="21" y="4" width="2" height="4" rx="1"/></svg>
    </span>
  </div>

  <div class="app">
    <!-- ============ 首页 / Root ============ -->
    <div class="screen active" id="screen-home">
      <div class="screen-scroll">
        <div class="topbar">
          <div class="tb-left">
            <span class="tb-greet"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4.2"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg> 晚上好，林晓</span>
            <span class="tb-title">家庭主页</span>
          </div>
          <div class="tb-right">
            <div class="member-switch">
              <div class="mchip on" data-member="me" onclick="switchMember('me')"><span class="ava" style="background:#F97316">林</span><span class="nm">我</span></div>
              <div class="mchip" data-member="yu" onclick="switchMember('yu')"><span class="ava" style="background:#FF7A45">宇</span><span class="nm">小宇</span></div>
            </div>
            <div class="icon-btn" onclick="toast('暂无新消息')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg><span class="badge"></span></div>
          </div>
        </div>

        <!-- 能量英雄 -->
        <div class="energy-hero" onclick="openDim()">
          <div class="eh-top">
            <div>
              <div class="eh-label">全家五维能量</div>
              <div class="eh-score" id="eh-score">78<small>分</small></div>
              <div class="eh-sub" id="eh-sub">较上周 +4 · 身维度领先</div>
            </div>
            <div class="eh-link" onclick="event.stopPropagation();openOverview()">查看详情 ›</div>
          </div>
          <div class="ring-wrap">
            <div class="ring" id="hero-ring"></div>
            <div class="dim-bars" id="hero-bars"></div>
          </div>
        </div>

        <!-- Next Best Action -->
        <div class="nba" id="nba" onclick="openQuiz()">
          <div class="nba-ic" style="background:var(--dim-body-soft);color:var(--dim-body)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></svg></div>
          <div class="nba-info">
            <div class="nba-t" id="nba-t">先做五维健康筛查</div>
            <div class="nba-s" id="nba-s">肥胖 · 三高 · 痛风 · 便秘 · 腹泻 · 睡眠 · 过敏 · 免费</div>
          </div>
          <div class="nba-go">去评估 ›</div>
        </div>

        <div class="nba" onclick="openReport7()">
          <div class="nba-ic" style="background:var(--brand-soft);color:var(--brand)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2z"/><path d="M8 7h8M8 11h8M8 15h5"/></svg></div>
          <div class="nba-info">
            <div class="nba-t">查看 7 天准备报告</div>
            <div class="nba-s">示例：饮食结构 4→7 · 准备度 80%</div>
          </div>
          <div class="nba-go">看报告 ›</div>
        </div>

        <!-- 今日任务 -->
        <div class="section">
          <div class="sec-head"><span class="sec-title">今日任务</span><span class="sec-more" onclick="toast('进入任务中心')">全部 ›</span></div>
          <div class="card" id="task-card"></div>
        </div>

        <!-- 家庭挑战 -->
        <div class="section">
          <div class="sec-head"><span class="sec-title">家庭挑战</span><span class="sec-more" onclick="toast('管理挑战')">管理 ›</span></div>
          <div class="card" id="challenge-card"></div>
        </div>

        <!-- 家庭动态 -->
        <div class="section">
          <div class="sec-head"><span class="sec-title">家庭动态</span></div>
          <div class="card" id="feed-card"></div>
        </div>

        <!-- 推荐阅读 -->
        <div class="section">
          <div class="sec-head"><span class="sec-title">推荐阅读</span><span class="sec-more" onclick="toast('更多文章')">更多 ›</span></div>
        </div>
        <div class="hscroll" id="rec-scroll"></div>
      </div>
    </div>

    <!-- ============ 健康 / Root ============ -->
    <div class="screen" id="screen-health">
      <div class="screen-scroll">
        <div class="topbar">
          <div class="tb-left"><span class="tb-greet">科学管理全家健康</span><span class="tb-title">健康</span></div>
          <div class="tb-right"><div class="icon-btn" onclick="toast('健康洞察')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 16v-5M12 8h.01"/><circle cx="12" cy="12" r="9"/></svg></div></div>
        </div>
        <div class="seg">
          <div class="sg on" onclick="setHealthSeg('body',this)">身体</div>
          <div class="sg" onclick="setHealthSeg('cognitive',this)">认知</div>
          <div class="sg" onclick="setHealthSeg('mental',this)">心理</div>
          <div class="sg" onclick="setHealthSeg('wealth',this)">财富</div>
        </div>
        <div class="radar-card" id="radar-card"></div>
        <div class="data-row">
          <div class="data-col">
            <div class="dc-t" style="cursor:pointer" onclick="openUpload('body')"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--dim-body)" stroke-width="2"><path d="M12 3v18M3 12h18"/><circle cx="12" cy="12" r="9"/></svg> 上传报告</div>
            <div id="report-list"></div>
          </div>
          <div class="data-col">
            <div class="dc-t"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--dim-wisdom)" stroke-width="2"><path d="M9 11l3 3 8-8"/><path d="M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9"/></svg> 在线测评</div>
            <div id="quiz-list"></div>
          </div>
        </div>
        <div class="section"><div class="sec-head"><span class="sec-title">最近记录</span><span class="sec-more" onclick="toast('全部报告')">查看全部 ›</span></div></div>
        <div class="hscroll" id="health-rec"></div>
      </div>
    </div>

    <!-- ============ 成长 / Root ============ -->
    <div class="screen" id="screen-growth">
      <div class="screen-scroll">
        <div class="topbar">
          <div class="tb-left"><span class="tb-greet">看见改变正在发生</span><span class="tb-title">成长</span></div>
          <div class="tb-right"><div class="icon-btn" onclick="toast('成长档案')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19V5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2z"/><path d="M8 7h8M8 11h8M8 15h5"/></svg></div></div>
        </div>
        <div class="section">
          <div class="ach-hero">
            <div class="ah-t" id="ach-title">本周成果</div>
            <div class="ah-s" id="ach-sub">完成 12 项任务 · 连续打卡 12 天</div>
            <div class="ah-ring-wrap">
              <div class="ah-ring" id="ach-ring"></div>
              <div class="ah-stats">
                <div class="ah-stat"><span class="as-v" id="ach-task-v">12</span><span class="as-l">项任务</span><span class="as-bar"><i id="ach-task-b" style="width:60%"></i></span></div>
                <div class="ah-stat"><span class="as-v" style="color:var(--dim-wealth)">1,240</span><span class="as-l">成长分</span><span class="as-bar"><i id="ach-pt-b" style="width:72%;background:var(--dim-wealth)"></i></span></div>
                <div class="ah-stat"><span class="as-v" style="color:var(--dim-wisdom)">4</span><span class="as-l">枚徽章</span><span class="as-bar"><i id="ach-bg-b" style="width:40%;background:var(--dim-wisdom)"></i></span></div>
              </div>
            </div>
            <div class="streak" id="ach-streak"></div>
          </div>
        </div>
        <div class="section">
          <div class="nba" style="border-left-color:var(--dim-wealth);background:linear-gradient(135deg,#FFF7ED,#FFEDD5)" onclick="openReport()">
            <div class="nba-ic" style="background:rgba(255,255,255,0.7);color:var(--dim-wealth)">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M8 4v16"/></svg>
            </div>
            <div class="nba-info">
              <div class="nba-t" style="color:#7C2D12">本周成长报告已生成</div>
              <div class="nba-s" style="color:rgba(124,45,18,0.7)">五维里程碑 · 可保存分享给家人朋友</div>
            </div>
            <div class="nba-go" style="color:#7C2D12">查看 ›</div>
          </div>
        </div>
        <div class="section">
          <div class="sec-head"><span class="sec-title">今日成长</span><span class="sec-more" id="growth-date">10-06</span></div>
          <div class="card">
            <div class="today-prog" id="today-prog"></div>
            <div style="display:flex;justify-content:space-between;margin-top:14px;font-size:var(--fs-sm);color:var(--ink-2)">
              <span id="growth-done">已完成 3/5</span><span style="color:var(--dim-mind);font-weight:600">🔥 连续 12 天</span>
            </div>
          </div>
        </div>
        <div class="section">
          <div class="sec-head"><span class="sec-title">今日任务</span><span class="sec-more" onclick="toast('任务中心')">更多 ›</span></div>
          <div class="card" style="padding-top:4px;padding-bottom:4px">
            <div id="growth-tasks"></div>
            <div id="growth-next" style="display:none;margin-top:6px;padding:13px 0 4px;border-top:1px dashed var(--line-strong)">
              <div style="display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-2);font-weight:600">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg>
                再完成 <b id="next-n" style="color:var(--brand)">1</b> 项解锁「本周全勤」
              </div>
            </div>
          </div>
        </div>
        <div class="section"><div class="sec-head"><span class="sec-title">家庭挑战</span></div></div>
        <div class="hscroll" id="growth-rec"></div>
      </div>
    </div>

    <!-- ============ 我的 / Root ============ -->
    <div class="screen" id="screen-profile">
      <div class="screen-scroll">
        <div class="topbar" style="background:transparent;border:none;position:relative">
          <div class="tb-left"><span class="tb-greet">照顾家庭，从照顾好自己开始</span><span class="tb-title">我的</span></div>
          <div class="tb-right"><div class="icon-btn" onclick="toast('设置')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 7 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 2.6 14H2.5a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 7a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 9 2.6V2.5a2 2 0 1 1 4 0v.1A1.6 1.6 0 0 0 17 4.6a1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1A1.6 1.6 0 0 0 21.4 12H21.5a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></svg></div></div>
        </div>
        <div class="id-card">
          <div class="id-ava">林</div>
          <div class="id-meta">
            <div class="id-nm">林晓 <span class="id-lv">黄金会员</span></div>
            <div class="id-sub">家长 · 家庭创建者</div>
          </div>
          <div class="id-pts"><div class="pv">2,480</div><div class="pl">积分</div></div>
        </div>

        <div class="fam-strip" style="margin-top:16px">
          <div class="fam-it"><div class="fam-av" style="background:#F97316">林<span class="fam-tag" style="background:#F97316">我</span></div><div class="fam-nm">林晓</div></div>
          <div class="fam-it"><div class="fam-av" style="background:#FF7A45">宇<span class="fam-tag" style="background:#FF7A45">子</span></div><div class="fam-nm">小宇</div></div>
          <div class="fam-it"><div class="fam-av" style="background:#F2588E">柚<span class="fam-tag" style="background:#F2588E">女</span></div><div class="fam-nm">小柚</div></div>
          <div class="fam-it"><div class="fam-av" style="background:#12B981">爷<span class="fam-tag" style="background:#12B981">父</span></div><div class="fam-nm">爷爷</div></div>
          <div class="fam-it" onclick="toast('添加成员')"><div class="fam-av add">＋</div><div class="fam-nm">添加</div></div>
        </div>

        <div class="section">
          <div class="sec-head"><span class="sec-title">我的成就</span></div>
          <div class="card"><div class="ach-grid" id="ach-grid"></div></div>
        </div>

        <div class="section">
          <div class="sec-head"><span class="sec-title">我的订单</span><span class="sec-more" onclick="toast('全部订单')">全部 ›</span></div>
          <div class="card">
            <div style="display:flex;justify-content:space-around;text-align:center">
              <div class="tap" style="flex:1" onclick="toast('待付款')"><div style="font-size:var(--fs-lg);font-weight:800">1</div><div style="font-size:var(--fs-xs);color:var(--ink-3)">待付款</div></div>
              <div class="tap" style="flex:1" onclick="toast('待发货')"><div style="font-size:var(--fs-lg);font-weight:800">0</div><div style="font-size:var(--fs-xs);color:var(--ink-3)">待发货</div></div>
              <div class="tap" style="flex:1" onclick="toast('待收货')"><div style="font-size:var(--fs-lg);font-weight:800">2</div><div style="font-size:var(--fs-xs);color:var(--ink-3)">待收货</div></div>
              <div class="tap" style="flex:1" onclick="toast('售后')"><div style="font-size:var(--fs-lg);font-weight:800">0</div><div style="font-size:var(--fs-xs);color:var(--ink-3)">售后</div></div>
            </div>
          </div>
        </div>

        <div class="section">
          <div class="menu-list">
            <div class="menu-row" onclick="toast('服务中心')"><div class="mr-ic" style="background:var(--dim-wisdom-soft);color:var(--dim-wisdom)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V8l7-4 7 4v13"/><path d="M9 21v-6h6v6"/></svg></div><div class="mr-tx">服务中心</div><div class="mr-ar">›</div></div>
            <div class="menu-row" onclick="toast('我的报告')"><div class="mr-ic" style="background:var(--dim-body-soft);color:var(--dim-body)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg></div><div class="mr-tx">我的报告</div><div class="mr-ar">›</div></div>
            <div class="menu-row" onclick="toast('财富中心')"><div class="mr-ic" style="background:var(--dim-wealth-soft);color:var(--dim-wealth)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M9.5 9.5h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4"/></svg></div><div class="mr-tx">财富中心</div><div class="mr-ar">›</div></div>
            <div class="menu-row" onclick="toast('设置')"><div class="mr-ic" style="background:var(--bg-soft);color:var(--ink-2)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 7 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 2.6 14H2.5a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 7a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 9 2.6V2.5a2 2 0 1 1 4 0v.1A1.6 1.6 0 0 0 17 4.6a1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1A1.6 1.6 0 0 0 21.4 12H21.5a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></svg></div><div class="mr-tx">设置</div><div class="mr-ar">›</div></div>
          </div>
        </div>
      </div>
    </div>

    <!-- ============ 登录（未登录根） ============ -->
    <div class="screen" id="screen-login" style="display:none">
      <div class="login">
        <div class="lg-logo"><svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg></div>
        <div class="lg-h">浠艾福</div>
        <div class="lg-s">您的专属家庭五维健康管家<br/>先看见，先了解，不等问题发生</div>
        <div class="lg-fields">
          <div class="field"><span class="fc-ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v16H4z"/><path d="M4 7l8 6 8-6"/></svg></span><input placeholder="手机号 / 邮箱" inputmode="email" autocomplete="username" /></div>
          <div class="field"><span class="fc-ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span><input placeholder="密码" type="password" autocomplete="current-password" /></div>
        </div>
        <button class="lg-btn" onclick="demoLogin()">登录 / 注册</button>
        <div class="lg-alt">还没有账号？<b onclick="demoLogin()">免费体验 ›</b></div>
        <div class="lg-terms">登录即代表同意《用户协议》与《隐私政策》<br/>亿图腾科技出品</div>
      </div>
    </div>

    <!-- ============ 五维能量总览（深读 · 全屏，隐藏 TabBar） ============ -->
    <div class="screen" id="screen-overview">
      <div class="screen-scroll" style="padding-bottom:24px">
        <div class="nav-bar">
          <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
          <div class="nb-t">五维能量总览</div>
          <div class="nb-a" onclick="toast('切换到：本周')">本周</div>
        </div>
        <div class="ov-hero">
          <div class="ov-score">
            <div class="os-n" id="ov-n">76</div>
            <div class="os-u">综合能量</div>
            <div class="ov-delta" id="ov-delta">↑ 4 较上周</div>
          </div>
          <div class="ov-cap">全家 4 位成员 · 较上周整体向好，<b>行</b> 维度提升最明显</div>
          <div class="ov-radar" id="ov-radar"></div>
          <div class="ov-legend" id="ov-legend"></div>
        </div>

        <div class="trend-card">
          <div class="trend-tabs" id="ov-trend-tabs">
            <div class="tt on" data-range="week" onclick="setOvRange('week', this)">近 7 天</div>
            <div class="tt" data-range="month" onclick="setOvRange('month', this)">近 30 天</div>
          </div>
          <div id="ov-trend"></div>
          <div class="trend-legend" id="ov-trend-legend"></div>
        </div>

        <div class="sec-head section">
          <div class="sec-title">家人对比</div>
          <div class="sec-more" onclick="toast('查看全部成员')">全部 ›</div>
        </div>
        <div class="card cmp-list" id="ov-cmp"></div>

        <div class="sec-head section">
          <div class="sec-title">本月行动建议</div>
          <div class="sec-more" onclick="toast('已生成专属计划')">生成计划 ›</div>
        </div>
        <div class="pad" id="ov-adv"></div>
      </div>
    </div>

    <!-- ============ 维度详情（Task 页，隐藏 TabBar） ============ -->
    <div class="screen" id="screen-dim">
      <div class="screen-scroll" style="padding-bottom:24px">
        <div class="nav-bar">
          <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
          <div class="nb-t" id="dim-nav-title">维度详情</div>
          <div class="nb-a" onclick="toast('切换成员')">小宇</div>
        </div>
        <div id="dim-hero-slot"></div>

        <div class="sec-head section">
          <div class="sec-title">关键指标</div>
          <div class="sec-more" onclick="openUpload('body')">上传报告 ›</div>
        </div>
        <div class="card" id="dim-metrics"></div>

        <div class="sec-head section">
          <div class="sec-title">本周趋势</div>
          <div class="sec-more" onclick="toast('查看历史')">历史 ›</div>
        </div>
        <div class="trend-card" style="margin-top:0" id="dim-trend"></div>

        <div class="sec-head section">
          <div class="sec-title">今日建议动作</div>
        </div>
        <div class="pad" id="dim-actions"></div>

        <div class="sec-head section">
          <div class="sec-title">最近记录</div>
          <div class="sec-more" onclick="openUpload('')">补充数据 ›</div>
        </div>
        <div class="card" id="dim-records"></div>
      </div>
    </div>

    <!-- ============ 报告上传流程（Task 页） ============ -->
    <div class="screen" id="screen-upload">
      <div class="screen-scroll" style="padding-bottom:0">
        <div class="nav-bar">
          <div class="nb-back" onclick="closeUpload()"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
          <div class="nb-t">上传健康报告</div>
        </div>
        <div class="up-steps" id="up-steps"></div>

        <!-- 步骤1 选择 -->
        <div id="up-step-pick">
          <div class="up-zone" onclick="pickFile()">
            <div class="uz-ic"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4M7 9l5-5 5 5"/><path d="M4 20h16"/></svg></div>
            <div class="uz-t">拍照或选择报告图片</div>
            <div class="uz-s">支持体检报告、化验单、影像报告<br/>自动识别关键指标，识别后可修改</div>
          </div>
          <div class="up-btns" style="padding:0 16px">
            <div class="ub pri" onclick="pickFile()"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8h3l2-3h6l2 3h3v11H4z"/><circle cx="12" cy="13" r="3.4"/></svg>拍照</div>
            <div class="ub" onclick="pickFile()"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 15l5-4 4 3 3-2 6 4"/></svg>相册</div>
          </div>
          <div class="sec-head section"><div class="sec-title">已上传待确认</div></div>
          <div class="card" id="up-pending"></div>
        </div>

        <!-- 步骤2 识别中 -->
        <div id="up-step-ocr" style="display:none">
          <div class="up-preview">
            <div class="up-thumb">
              <div class="paper">
                <div class="pl t"></div><div class="pl"></div><div class="pl"></div><div class="pl" style="width:70%"></div><div class="pl"></div><div class="pl" style="width:60%"></div>
              </div>
              <div class="badge-ok"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>已选</div>
            </div>
            <div class="up-meta">
              <div class="up-fname"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--ink-3)" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>体检报告_20260928.jpg</div>
              <div class="up-fmeta">2.4 MB · 等待识别解析</div>
            </div>
          </div>
          <div class="ocr-box">
            <div style="display:flex;align-items:center;gap:8px">
              <div style="font-size:var(--fs-md);font-weight:700">正在智能识别</div>
              <div style="margin-left:auto;font-size:var(--fs-sm);font-weight:800;color:var(--brand)" id="ocr-pct">0%</div>
            </div>
            <div class="ocr-bar"><div class="of" id="ocr-fill" style="width:0%"></div></div>
            <div style="margin-top:10px" id="ocr-steps"></div>
          </div>
        </div>

        <!-- 步骤3 确认 -->
        <div id="up-step-fix" style="display:none">
          <div class="ocr-box" style="margin-top:14px">
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
              <div style="font-size:var(--fs-md);font-weight:700">识别结果确认</div>
              <div style="margin-left:auto"><span class="low-conf">2 项需确认</span></div>
            </div>
            <div style="font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5">已自动填入 6 项指标，标黄项置信度低，请核对</div>
          </div>
          <div class="card" id="up-fix-list"></div>
          <div class="card" style="background:var(--brand-soft);box-shadow:none">
            <div style="display:flex;gap:10px;align-items:flex-start">
              <div style="color:var(--brand);flex:none;margin-top:1px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></div>
              <div>
                <div style="font-size:var(--fs-base);font-weight:700;color:var(--brand-ink)">数据仅用于家庭健康参考</div>
                <div style="font-size:var(--fs-sm);color:var(--brand-ink);opacity:.8;margin-top:4px;line-height:1.5">报告解读不构成医疗诊断，如有异常请及时就医</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 步骤4 完成 -->
        <div id="up-step-done" style="display:none">
          <div style="text-align:center;padding:40px 24px 20px">
            <div style="width:88px;height:88px;border-radius:50%;background:var(--dim-action-soft);color:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 auto 18px">
              <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>
            </div>
            <div style="font-size:var(--fs-xl);font-weight:800">报告已归档</div>
            <div style="font-size:var(--fs-sm);color:var(--ink-2);margin-top:8px;line-height:1.6">已识别 6 项指标并计入「身」维度<br/>综合能量 <b style="color:var(--ok)">+3 分</b></div>
          </div>
          <div class="card" id="up-done-list"></div>
        </div>
      </div>
      <div class="up-actions" id="up-actions"></div>
    </div>

    <!-- ============ 成长报告与分享（Task 页） ============ -->
    <div class="screen" id="screen-report">
      <div class="screen-scroll" style="padding-bottom:24px">
        <div class="nav-bar">
          <div class="nb-back" onclick="backTo('growth')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
          <div class="nb-t">成长报告</div>
          <div class="nb-a" onclick="toast('已保存为图片')">保存图片</div>
        </div>
        <div class="rpt-tabs" id="rpt-tabs">
          <div class="rtt on" data-rp="week" onclick="setRptRange('week', this)">本周报告</div>
          <div class="rtt" data-rp="month" onclick="setRptRange('month', this)">本月报告</div>
        </div>
        <div id="rpt-card-slot"></div>
        <div class="share-actions" id="rpt-share"></div>

        <div class="sec-head section">
          <div class="sec-title">五维里程碑</div>
          <div class="sec-more" onclick="toast('查看全部徽章')">全部 ›</div>
        </div>
        <div class="badge-grid" id="rpt-badges"></div>

        <div class="sec-head section">
          <div class="sec-title">本周亮点</div>
        </div>
        <div class="card" id="rpt-highlights"></div>
      </div>
    </div>

    <!-- ============ 肠道问卷（0元入口） ============ -->
    <div class="screen" id="screen-quiz">
      <div class="screen-scroll" style="padding-bottom:0">
        <div class="nav-bar">
          <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
          <div class="nb-t">肠道健康自评</div>
          <div class="nb-a" onclick="toast('免费 · 不需要付费')">免费</div>
        </div>
        <div class="qz-prog">
          <div class="qp-bar"><i id="qz-bar" style="width:0%"></i></div>
          <div class="qp-tx" id="qz-idx">1 / 10</div>
        </div>
        <div class="qz-wrap">
          <div class="qz-q">
            <div class="qq-dim" id="qz-dim"></div>
            <div class="qq-t" id="qz-title"></div>
            <div class="qz-opts" id="qz-opts"></div>
          </div>
        </div>
        <div class="up-actions" id="qz-actions"></div>
        <div class="legal" id="legal-note" style="display:none;padding-top:14px">
          以下问题用于判断是否需要优先就医。本问卷为健康管理筛查参考，<b>不构成医疗诊断</b>。<br/>身体不适请到正规医疗机构就诊。
        </div>
      </div>
    </div>

    <!-- ============ 风险结果 + 9.9 陪跑转化 ============ -->
    <div class="screen" id="screen-risk">
      <div class="screen-scroll" style="padding-bottom:24px">
        <div class="nav-bar">
          <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
          <div class="nb-t">你的肠道风险评估</div>
        </div>
        <div id="risk-slot"></div>
        <div id="prep-slot"></div>
        <div id="risk-actions"></div>
      </div>
    </div>

    <!-- ============ 9.9 陪跑 7 天 ============ -->
    <div class="screen" id="screen-prep">
      <div class="screen-scroll" style="padding-bottom:24px">
        <div class="nav-bar">
          <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
          <div class="nb-t">检测前 7 天准备</div>
          <div class="nb-a" onclick="toast('9.9 未完成 3 天可退')">可退</div>
        </div>
        <div class="prep-card">
          <div class="pc-t">检测前的肠道准备期</div>
          <div class="pc-s">菌群检测有个前提：检测前 3–7 天不能有抗生素、不能大量摄入益生菌、饮食要稳定，否则数据会失真。<b>这 7 天需要有人带你调。</b></div>
          <div class="prep-price"><span class="pp-n">9.9</span><span class="pp-u">元 · 7 天陪跑</span></div>
          <div class="d7-grid" id="prep-d7"></div>
          <div class="d7-ach">
            <div class="da"><div class="v">6/7</div><div class="l">已完成</div></div>
            <div class="da"><div class="v">4→7</div><div class="l">饮食结构</div></div>
            <div class="da"><div class="v">80%</div><div class="l">准备度</div></div>
          </div>
        </div>
        <div class="sec-head section"><div class="sec-title">这 7 天会做什么</div></div>
        <div class="prep-list" id="prep-list"></div>
        <div class="sec-head section">
          <div class="sec-title">第 7 天你将拿到</div>
        </div>
        <div class="prep-list" id="prep-output"></div>
        <div class="card" style="background:var(--brand-soft);box-shadow:none">
          <div style="display:flex;gap:10px;align-items:flex-start">
            <div style="color:var(--brand);flex:none;margin-top:1px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></div>
            <div>
              <div style="font-size:var(--fs-base);font-weight:700;color:var(--brand-ink)">9.9 不打折，这是专业流程必需的一段</div>
              <div style="font-size:var(--fs-sm);color:var(--brand-ink);opacity:.82;margin-top:4px;line-height:1.55">检测本身由你自费（¥1980，可分期），我们赠送的是检测前的准备、检测后的专家解读与 90 天干预方案</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ============ D7 报告（转化关键） ============ -->
    <div class="screen" id="screen-report7">
      <div class="screen-scroll" style="padding-bottom:0">
        <div class="nav-bar">
          <div class="nb-back" onclick="backTo('home')"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg></div>
          <div class="nb-t">你的第 7 天报告</div>
          <div class="nb-a" onclick="toast('已保存为长图')">保存</div>
        </div>

        <!-- 屏1 成就 -->
        <div class="report-hd">
          <div class="rph-big">6/7</div>
          <div class="rph-sub">你完成了 6 天的准备 · 超过 78% 的用户</div>
        </div>
        <div class="report-hero">
          <div class="rp-t">检测这件事，七成功夫在检测之前</div>
          <div class="rp-s">你这 7 天做的，正是那七成。<br/>把基础打好了，接下来才能看清肠道里的答案。</div>
          <div class="d7-grid" style="margin-top:16px">
            <div class="d7-cell done">一</div><div class="d7-cell done">二</div><div class="d7-cell done">三</div>
            <div class="d7-cell done">四</div><div class="d7-cell done">五</div><div class="d7-cell done">六</div>
            <div class="d7-cell" style="opacity:.35">日</div>
          </div>
        </div>

        <!-- 屏2 数据 -->
        <div class="sec-head section"><div class="sec-title">这 7 天的变化</div></div>
        <div class="trend-box" id="d7-trend"></div>

        <!-- 屏3 发现 -->
        <div class="sec-head section"><div class="sec-title">3 个值得注意的模式</div></div>
        <div id="d7-finds"></div>

        <!-- 屏4 准备度 -->
        <div class="sec-head section">
          <div class="sec-title">检测准备度</div>
          <div class="sec-more">4 / 5 项完成</div>
        </div>
        <div class="trend-box">
          <div id="d7-checks"></div>
          <div style="text-align:center;padding-top:14px;border-top:1px solid var(--line);margin-top:6px">
            <div style="font-size:40px;font-weight:800;color:var(--brand)">80%</div>
            <div style="font-size:var(--fs-sm);color:var(--ink-3);margin-top:2px;font-weight:600">准备度良好，可以检测了</div>
          </div>
          <div class="find-card" style="margin:12px 0 0;box-shadow:none;background:var(--bg-soft)">
            <div class="fc-obs" style="margin-top:0">还差最后一步：<b>检测前 24 小时请保持饮食清淡</b>，不要聚餐、不要大量摄入高纤维食品。完成这步，你的检测数据会更可靠。</div>
          </div>
        </div>

        <!-- 屏5 缺口 -->
        <div class="sec-head section"><div class="sec-title">这 7 天解决了基础，但回答不了根本</div></div>
        <div class="gap-2col" style="margin:0 16px">
          <div class="gap-col know"><div class="gc-h">你已知道</div>
            <li>饮食结构在改善</li><li>腹胀在减轻</li><li>作息开始规律</li></div>
          <div class="gap-col unk"><div class="gc-h">你还不知道</div>
            <li>菌群多样性水平</li><li>哪些菌在减少</li><li>肠道问题根源</li></div>
        </div>
        <div class="find-card">
          <div class="fc-obs">说到底，这 7 天你做的是<b>改善环境</b>。但环境变好了，<b>里面住着的东西变没变？</b></div>
          <div class="fc-tip">单靠调整饮食，你是在盲调。检测，是把盲调变成精准调整的第一步。</div>
        </div>

        <!-- 屏6 行动 -->
        <div class="sec-head section"><div class="sec-title">为什么现在做最合适</div></div>
        <div class="why-now">
          <div class="wn-i"><div class="wn-n">1</div><div class="wn-t">这 7 天的改善<b>能被检测看见</b>——如果拖到下个月再看，这 7 天的效果就看不出来了</div></div>
          <div class="wn-i"><div class="wn-n">2</div><div class="wn-t">准备度已达 <b>80%</b>——再晚，检测前干扰因素会降低数据准确性</div></div>
        </div>
        <div class="buy-card">
          <div class="buy-hd">
            <div class="bh-t">肠道菌群检测</div>
            <div class="bh-p"><span class="bh-n">¥1980</span><span class="bh-u">检测机构收取</span><span class="bh-o">已抵扣 9.9</span></div>
          </div>
          <div class="buy-bd">
            <div class="buy-line"><span class="bl-t">采样盒</span><span class="bl-v" style="color:var(--ok)">免邮寄送</span></div>
            <div class="buy-line"><span class="bl-t">专业机构检测 + 报告</span><span class="bl-v">含</span></div>
            <div class="buy-line"><span class="bl-t">专家逐项解读（30 分钟）</span><span class="bl-v" style="color:var(--ok)">我们赠送</span></div>
            <div class="buy-line"><span class="bl-t">90 天干预方案</span><span class="bl-v" style="color:var(--ok)">我们赠送</span></div>
          </div>
        </div>
        <div class="installment">
          <div style="color:var(--brand);flex:none"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg></div>
          <div><div class="in-n">可分期 · ¥660 × 3 期</div><div class="in-t">月付约 20 元 / 天，不收利息</div></div>
        </div>
        <div class="card">
          <div style="display:flex;align-items:center;gap:9px;padding:6px 0;font-size:var(--fs-sm)">
            <span style="color:var(--ok)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg></span>
            <span style="color:var(--ink-2)">检测前随时可退 · 检测后 48 小时内可退</span>
          </div>
          <div style="display:flex;align-items:center;gap:9px;padding:6px 0;font-size:var(--fs-sm)">
            <span style="color:var(--ok)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg></span>
            <span style="color:var(--ink-2)">不需要自己去医院，采样盒寄回家</span>
          </div>
        </div>
        <div class="up-actions">
          <button class="btn-primary" onclick="toast('进入检测预约')">立即预约检测</button>
          <button class="btn-ghost" onclick="backTo('home')">再想想</button>
        </div>
        <div class="legal">本报告基于健康管理目的生成，不构成医疗诊断或治疗建议<br/>肠道菌群检测为健康管理参考，不用于疾病诊断</div>
      </div>
    </div>

    <!-- 五维抽屉 -->
    <div class="sheet-mask" id="dim-mask" onclick="closeDim()"></div>
    <div class="sheet" id="dim-sheet">
      <div class="sheet-grip"></div>
      <div class="sheet-title">五维能量</div>
      <div class="sheet-sub">身·心·智·行·富，看见全家看得见的健康闭环</div>
      <div class="dim-grid" id="dim-grid"></div>
      <div id="dim-more" style="display:none;margin-top:14px">
        <button class="btn-primary" style="display:flex;align-items:center;justify-content:center;gap:7px" onclick="openOverviewFromSheet()">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l5-5 4 4 8-8"/><path d="M16 8h4v4"/></svg>
          展开五维总览
        </button>
        <div style="text-align:center;font-size:var(--fs-xs);color:var(--ink-3);margin-top:10px">雷达 · 趋势 · 家人对比 · 行动建议</div>
      </div>
    </div>

    <!-- 自定义 TabBar -->
    <div class="tabbar" id="tabbar">
      <div class="tab on" data-tab="home" onclick="setTab('home')">
        <span class="t-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5"/><path d="M9.5 21v-6h5v6"/></svg></span>
        <span class="t-tx">首页</span>
      </div>
      <div class="tab" data-tab="health" onclick="setTab('health')">
        <span class="t-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20s-7-4.4-7-9.5A4 4 0 0 1 12 7a4 4 0 0 1 7 3.5C19 15.6 12 20 12 20z"/><path d="M5 12h3l2-3 2.5 4 1.5-2H20" stroke-width="1.6"/></svg></span>
        <span class="t-tx">健康</span>
      </div>
      <div class="tab-center" onclick="openDim()">
        <div class="c-btn"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg></div>
        <div class="c-tx">五维</div>
      </div>
      <div class="tab" data-tab="growth" onclick="setTab('growth')">
        <span class="t-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 17l5-5 4 4 8-8"/><path d="M16 8h4v4"/></svg></span>
        <span class="t-tx">成长</span>
      </div>
      <div class="tab" data-tab="profile" onclick="setTab('profile')">
        <span class="t-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6"/></svg></span>
        <span class="t-tx">我的</span>
      </div>
    </div>

    <div class="toast" id="toast"></div>

    <!-- 成果解锁横幅（完成任务/达成成就时浮现） -->
    <div class="unlock-toast" id="unlock-toast">
      <div class="ut-ic" id="unlock-ic"></div>
      <div style="flex:1;min-width:0">
        <div class="ut-t" id="unlock-t">成就解锁</div>
        <div class="ut-s" id="unlock-s"></div>
      </div>
      <div onclick="openReport()" style="flex:none;font-size:var(--fs-sm);font-weight:800;color:#7C2D12">分享 ›</div>
    </div>

    <!-- 闪屏（还原原 flash 页暖色基因，作为进入 App 的第一屏） -->
    <div id="splash" onclick="hideSplash()">
      <div class="sp-bg">
        <span class="sp-c sp-c1"></span>
        <span class="sp-c sp-c2"></span>
        <span class="sp-c sp-c3"></span>
      </div>
      <div class="sp-body">
        <div class="sp-logo"><svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg></div>
        <div class="sp-name">浠艾福</div>
        <div class="sp-en">Care Family</div>
        <div class="sp-id">看见全家 · 了解健康 · 主动管理</div>
        <div class="sp-dims">
          <div class="sp-dim"><span class="sp-dc" style="background:#FF8C42">身</span></div>
          <div class="sp-dim"><span class="sp-dc" style="background:#FF6B9D">心</span></div>
          <div class="sp-dim"><span class="sp-dc" style="background:#6366F1">智</span></div>
          <div class="sp-dim"><span class="sp-dc" style="background:#10B981">行</span></div>
          <div class="sp-dim"><span class="sp-dc" style="background:#F59E0B">富</span></div>
        </div>
        <div class="sp-tag">家里每个人的状态，你真的看见了？</div>
      </div>
      <div class="sp-dots"><span></span><span></span><span></span></div>
      <div class="sp-enter">轻触进入</div>
    </div>
  </div>
</div>

<script>
  /* ============ 数据（演示，已去个人化） ============ */
  var DIMS = [
    { code:'body',   name:'身', desc:'主动健康', color:'var(--dim-body)',   soft:'var(--dim-body-soft)',   score:84 },
    { code:'mind',   name:'心', desc:'大爱相随', color:'var(--dim-mind)',   soft:'var(--dim-mind-soft)',   score:72 },
    { code:'wisdom', name:'智', desc:'赋能未来', color:'var(--dim-wisdom)', soft:'var(--dim-wisdom-soft)', score:79 },
    { code:'action', name:'行', desc:'人际和谐', color:'var(--dim-action)', soft:'var(--dim-action-soft)', score:68 },
    { code:'wealth', name:'富', desc:'利他创富', color:'var(--dim-wealth)', soft:'var(--dim-wealth-soft)', score:75 }
  ];
  var TASKS = [
    { title:'陪小宇完成 20 分钟跳绳', pts:10, dim:'body' },
    { title:'小柚英语绘本阅读', pts:8, dim:'wisdom' },
    { title:'家庭晚餐不玩手机', pts:5, dim:'action' }
  ];
  var CHALLENGES = [
    { title:'21 天亲子共读', prog:14, total:21, dim:'wisdom' },
    { title:'全家每周运动 3 次', prog:2, total:3, dim:'body' }
  ];
  var FEED = [
    { icon:'check', color:'var(--dim-body)', text:'<b>小宇</b> 完成「跳绳打卡」 +10 分', time:'12 分钟前' },
    { icon:'star', color:'var(--dim-wisdom)', text:'<b>小柚</b> 认知测评得分 85', time:'1 小时前' },
    { icon:'heart', color:'var(--dim-mind)', text:'<b>爷爷</b> 完成今日情绪打卡', time:'今天 08:30' }
  ];
  var RECS = [
    { cat:'主动健康', c:1, t:'孩子挑食怎么办？3 个温和的引导法', meta:'1.2万 阅读', bg:'var(--dim-body)' },
    { cat:'赋能未来', c:2, t:'0-12 岁专注力培养路线图', meta:'8621 阅读', bg:'var(--dim-wisdom)' },
    { cat:'人际和谐', c:3, t:'把“你怎么又…”换成这样说话', meta:'1.5万 阅读', bg:'var(--dim-action)' },
    { cat:'大爱相随', c:4, t:'父母的情绪，是家的天气', meta:'2.3万 阅读', bg:'var(--dim-mind)' }
  ];
  var ACH = [
    { ic:'coin', c:'var(--dim-wealth)', v:'2480', l:'积分' },
    { ic:'flame', c:'var(--dim-mind)', v:'12', l:'连续打卡' },
    { ic:'check', c:'var(--brand)', v:'48', l:'完成任务' },
    { ic:'gift', c:'var(--dim-wealth)', v:'9', l:'获得奖励' },
    { ic:'medal', c:'var(--dim-mind)', v:'6', l:'勋章' },
    { ic:'book', c:'var(--dim-action)', v:'23', l:'成长记录' },
    { ic:'target', c:'var(--brand)', v:'3', l:'挑战' },
    { ic:'upload', c:'var(--dim-body)', v:'11', l:'报告' }
  ];
  var PROG = [
    { ic:'diet', c:'var(--dim-body)', l:'饮食记录', done:true },
    { ic:'run', c:'var(--dim-body)', l:'运动打卡', done:true },
    { ic:'moon', c:'var(--dim-mind)', l:'睡眠记录', done:true },
    { ic:'smile', c:'var(--dim-mind)', l:'情绪打卡', done:false },
    { ic:'bulb', c:'var(--dim-wisdom)', l:'专注练习', done:false },
    { ic:'people', c:'var(--dim-action)', l:'互动记录', done:false }
  ];

  /* ===== 新增：五维总览 / 维度详情 / 上传 / 报告 数据 ===== */
  var TREND = {
    week: {
      labels: ['周一','周二','周三','周四','周五','周六','周日'],
      lines: [
        { name:'综合', color:'var(--brand)', data:[72,73,75,74,76,75,76] },
        { name:'身', color:'var(--dim-body)', data:[80,81,82,81,84,83,84] },
        { name:'心', color:'var(--dim-mind)', data:[68,70,69,71,72,71,72] }
      ]
    },
    month: {
      labels: ['1日','5日','10日','15日','20日','25日','30日'],
      lines: [
        { name:'综合', color:'var(--brand)', data:[70,71,73,72,74,75,76] },
        { name:'身', color:'var(--dim-body)', data:[78,79,81,80,82,83,84] },
        { name:'心', color:'var(--dim-mind)', data:[66,68,67,70,71,71,72] }
      ]
    }
  };
  var FAMILY = [
    { name:'小宇', role:'儿子 · 10 岁', score:84, color:'var(--dim-body)', dim:'body' },
    { name:'小柚', role:'女儿 · 7 岁', score:79, color:'var(--dim-wisdom)', dim:'wisdom' },
    { name:'爷爷', role:'父亲 · 68 岁', score:68, color:'var(--dim-action)', dim:'action' },
    { name:'妈妈', role:'本人', score:72, color:'var(--dim-mind)', dim:'mind' }
  ];
  var ADVICE = [
    { dim:'action', icon:'people', pri:'高', priColor:'var(--danger)', priSoft:'rgba(239,83,80,0.12)', t:'本周家庭互动偏少', s:'「行」维度 4 天未记录互动，建议每天 15 分钟无手机陪伴对话' },
    { dim:'mind', icon:'moon', pri:'中', priColor:'#B45309', priSoft:'rgba(245,158,11,0.14)', t:'爷爷睡眠时长不足', s:'近 7 天平均 6.2 小时，建议固定就寝时间并晚间减少摄入' },
    { dim:'body', icon:'run', pri:'中', priColor:'#B45309', priSoft:'rgba(245,245,158,0.6)', t:'小宇运动量达标', s:'本周运动 4 次达标，保持每周 3 次以上的节奏' }
  ];
  var DIM_METRICS = {
    body: [
      { n:'BMI', v:'18.6', r:'正常范围 18.5-23.9', ref:'ok', unit:'' },
      { n:'血压', v:'112/68', r:'低于 120/80 理想值', ref:'ok', unit:'mmHg' },
      { n:'静息心率', v:'72', r:'略高于同龄均值 68', ref:'mid', unit:'bpm' },
      { n:'维生素 D', v:'22.4', r:'低于建议下限 30', ref:'hi', unit:'ng/mL' }
    ],
    mind: [
      { n:'情绪稳定性', v:'72', r:'较上周 +5', ref:'ok', unit:'分' },
      { n:'平均睡眠', v:'6.8', r:'低于建议 7-9 小时', ref:'mid', unit:'小时' },
      { n:'压力感知', v:'偏高', r:'近 3 次自评持续偏高', ref:'hi', unit:'' }
    ]
  };
  var DIM_ACTIONS = {
    body: [
      { t:'每日 6000 步', s:'今日已 4200 步，还差 1800 步', ic:'run', c:'var(--dim-body)' },
      { t:'早餐补充优质蛋白', s:'鸡蛋 1 个 + 豆浆 250ml', ic:'diet', c:'var(--dim-body)' },
      { t:'晒太阳 15 分钟', s:'维生素 D 偏低，建议上午户外', ic:'bulb', c:'var(--dim-action)' }
    ],
    mind: [
      { t:'记录今日情绪', s:'30 秒快速打卡', ic:'smile', c:'var(--dim-mind)' },
      { t:'4-7-8 呼吸练习', s:'睡前 3 轮，改善入睡', ic:'moon', c:'var(--dim-mind)' },
      { t:'亲子对话 15 分钟', s:'放下手机，专心倾听', ic:'people', c:'var(--dim-action)' }
    ]
  };
  var DIM_RECORDS = {
    body: [
      { t:'跳绳打卡', m:'今天 17:20 · 200 个', ic:'run', c:'var(--dim-body)' },
      { t:'饮食记录', m:'今天 12:10 · 3 餐已记录', ic:'diet', c:'var(--dim-body)' },
      { t:'体检报告解析', m:'9-28 · 6 项指标已归档', ic:'upload', c:'var(--dim-body)' }
    ],
    mind: [
      { t:'情绪打卡', m:'今天 08:30 · 心情平稳', ic:'smile', c:'var(--dim-mind)' },
      { t:'睡眠记录', m:'今天 07:10 · 7 小时 20 分', ic:'moon', c:'var(--dim-mind)' },
      { t:'冥想练习', m:'昨天 21:40 · 8 分钟', ic:'flame', c:'var(--dim-mind)' }
    ]
  };
  var BADGES = [
    { n:'连续打卡 7 天', d:'已完成', ic:'flame', c:'var(--dim-mind)', locked:false },
    { n:'五维首次全测', d:'已完成', ic:'check', c:'var(--dim-body)', locked:false },
    { n:'亲子共读 21 天', d:'14/21 天', ic:'book', c:'var(--dim-wisdom)', locked:false },
    { n:'运动达人', d:'本周 4 次达标', ic:'run', c:'var(--dim-action)', locked:false },
    { n:'健康档案师', d:'上传 10 份报告', ic:'upload', c:'var(--dim-body)', locked:true },
    { n:'财富启蒙', d:'完成 5 课', ic:'coin', c:'var(--dim-wealth)', locked:true }
  ];
  var OCR_STEPS = [
    { t:'图像预处理与矫正', ms:400 },
    { t:'定位表格与字段区域', ms:600 },
    { t:'识别文字与数值', ms:900 },
    { t:'匹配健康指标库', ms:500 }
  ];
  var FIX_FIELDS = [
    { n:'身高', v:'142', u:'cm', low:true },
    { n:'体重', v:'37.6', u:'kg', low:true },
    { n:'收缩压', v:'112', u:'mmHg', low:false },
    { n:'舒张压', v:'68', u:'mmHg', low:false },
    { n:'静息心率', v:'72', u:'bpm', low:false },
    { n:'血红蛋白', v:'132', u:'g/L', low:false }
  ];

  function svgUse(icon, size) {
    return '<svg width="'+size+'" height="'+size+'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-'+icon+'"/></svg>';
  }

  /* ===== 五维能量环（5 段同心弧） ===== */
  function buildRing(el, scores, size) {
    var ns='http://www.w3.org/2000/svg';
    var cx=size/2, cy=size/2;
    var html='<svg width="'+size+'" height="'+size+'" viewBox="0 0 '+size+' '+size+'">';
    var gap=7, maxR=size/2-6;
    scores.forEach(function(d,i){
      var r=maxR-i*(gap+8);
      var c=2*Math.PI*r;
      var frac=Math.max(0.04, d.score/100);
      html+='<circle cx="'+cx+'" cy="'+cy+'" r="'+r+'" fill="none" stroke="rgba(255,255,255,0.12)" stroke-width="7"/>';
      html+='<circle cx="'+cx+'" cy="'+cy+'" r="'+r+'" fill="none" stroke="'+d.color+'" stroke-width="7" stroke-linecap="round" '+
            'stroke-dasharray="'+(c*frac)+' '+(c-c*frac)+'" transform="rotate(-90 '+cx+' '+cy+')" style="transition:stroke-dasharray .6s cubic-bezier(.23,1,.32,1)"/>';
    });
    html+='</svg>';
    html+='<div class="ring-center"><div class="rc-val">'+ (Math.round(scores.reduce(function(s,d){return s+d.score},0)/scores.length)) +'</div><div class="rc-lab">综合能量</div></div>';
    el.innerHTML=html;
  }

  /* ===== 渲染各模块 ===== */
  function renderHome() {
    buildRing(document.getElementById('hero-ring'), DIMS, 132);
    var bars='';
    DIMS.forEach(function(d){
      bars+='<div class="dbar"><span class="dl">'+d.name+'</span><div class="dt"><div class="df" style="width:'+d.score+'%;background:'+d.color+'"></div></div><span class="dv">'+d.score+'</span></div>';
    });
    document.getElementById('hero-bars').innerHTML=bars;

    var tc=document.getElementById('task-card');
    if (!TASKS.length) {
      tc.innerHTML='<div class="empty-state"><div class="es-ic">'+svgUse('check',28)+'</div><div class="es-t">今日任务已清空</div><div class="es-s">去任务中心看看，保持成长节奏</div></div>';
    } else {
      tc.className='card stagger';
      tc.innerHTML=TASKS.map(function(t){
        return '<div class="row"><div class="rk" style="background:'+dimSoft(t.dim)+';color:'+dimColor(t.dim)+'">'+svgUse('target',18)+'</div>'+
          '<div class="ri"><div class="rt">'+t.title+'</div><div class="rm">+'+t.pts+' 成长分</div></div>'+
          '<button class="pill-btn" onclick="completeTask(this)">完成</button></div>';
      }).join('');
    }

    var cc=document.getElementById('challenge-card');
    cc.className='card stagger';
    cc.innerHTML=CHALLENGES.map(function(ch){
      var pct=Math.round(ch.prog/ch.total*100);
      return '<div class="row"><div class="rk" style="background:'+dimSoft(ch.dim)+';color:'+dimColor(ch.dim)+'">'+svgUse('target',18)+'</div>'+
        '<div class="ri"><div class="rt">'+ch.title+'</div><div class="rm">'+ch.prog+' / '+ch.total+' · '+pct+'%</div>'+
        '<div style="flex:1;height:6px;background:var(--bg-soft);border-radius:99px;margin-left:8px;max-width:80px"><div style="height:100%;width:'+pct+'%;background:'+dimColor(ch.dim)+';border-radius:99px"></div></div></div>';
    }).join('');

    document.getElementById('feed-card').innerHTML=FEED.map(function(f){
      return '<div class="feed-item"><div class="feed-dot" style="color:'+f.color+'">'+svgUse(f.icon,16)+'</div>'+
        '<div style="flex:1"><div class="fi-t">'+f.text+'</div><div class="fi-time">'+f.time+'</div></div></div>';
    }).join('');

    document.getElementById('rec-scroll').innerHTML=RECS.map(function(r){
      return '<div class="rec-card" onclick="toast(\'打开文章\')"><div class="rec-cover" style="background:linear-gradient(135deg,'+r.bg+','+r.bg+'99)"></div>'+
        '<div class="rec-body"><span class="rec-cat" style="background:'+r.bg+'22;color:'+r.bg+'">'+r.cat+'</span>'+
        '<div class="rec-tt">'+r.t+'</div><div class="rec-meta">'+r.meta+'</div></div></div>';
    }).join('');
  }

  function renderHealth() {
    // 简易雷达（六边形示意）
    var size=240, cx=size/2, cy=size/2, R=size/2-30;
    var labels=['生长','睡眠','视力','免疫','营养','运动'];
    var vals=[84,72,78,80,70,82];
    var n=labels.length, pts=[], pts2=[];
    for (var i=0;i<n;i++){
      var a=-Math.PI/2 + i*2*Math.PI/n;
      pts.push((cx+Math.cos(a)*R).toFixed(1)+','+(cy+Math.sin(a)*R).toFixed(1));
      pts2.push((cx+Math.cos(a)*R*vals[i]/100).toFixed(1)+','+(cy+Math.sin(a)*R*vals[i]/100).toFixed(1));
    }
    var grid='';
    [0.25,0.5,0.75,1].forEach(function(f){
      var p=[]; for(var i=0;i<n;i++){var a=-Math.PI/2+i*2*Math.PI/n; p.push((cx+Math.cos(a)*R*f).toFixed(1)+','+(cy+Math.sin(a)*R*f).toFixed(1));}
      grid+='<polygon points="'+p.join(' ')+'" fill="none" stroke="#EAEDF4"/>';
    });
    var lbls='';
    for(var i=0;i<n;i++){var a=-Math.PI/2+i*2*Math.PI/n; lbls+='<text x="'+(cx+Math.cos(a)*(R+16)).toFixed(1)+'" y="'+(cy+Math.sin(a)*(R+16)+4).toFixed(1)+'" font-size="10" fill="#B49A83" text-anchor="middle">'+labels[i]+'</text>';}
    document.getElementById('radar-card').innerHTML=
      '<svg width="'+size+'" height="'+size+'" viewBox="0 0 '+size+' '+size+'">'+grid+
      '<polygon points="'+pts2.join(' ')+'" fill="rgba(255,140,66,0.18)" stroke="var(--dim-body)" stroke-width="2"/>'+
      '<polygon points="'+pts.join(' ')+'" fill="none" stroke="#EAEDF4" stroke-width="1.5"/>'+lbls+'</svg>'+
      '<div style="font-size:var(--fs-sm);color:var(--ink-2);margin-top:6px">身体维度 · 综合 78 分</div>';

    document.getElementById('report-list').innerHTML=
      '<div class="row" style="padding:10px 0"><div class="rk" style="background:var(--dim-body-soft);color:var(--dim-body)">'+svgUse('upload',16)+'</div><div class="ri"><div class="rt" style="font-size:var(--fs-sm)">体检报告</div><div class="rm">9-28 已解析</div></div></div>'+
      '<div class="row" style="padding:10px 0"><div class="rk" style="background:var(--dim-wisdom-soft);color:var(--dim-wisdom)">'+svgUse('bulb',16)+'</div><div class="ri"><div class="rt" style="font-size:var(--fs-sm)">菌群检测</div><div class="rm">待确认</div></div></div>';

    document.getElementById('quiz-list').innerHTML=
      '<div class="row" style="padding:10px 0"><div class="ri"><div class="rt" style="font-size:var(--fs-sm)">认知能力测评</div></div><button class="pill-btn" onclick="toast(\'开始测评\')">开始</button></div>'+
      '<div class="row" style="padding:10px 0"><div class="ri"><div class="rt" style="font-size:var(--fs-sm)">心理健康测评</div></div><button class="pill-btn" onclick="toast(\'开始测评\')">开始</button></div>';

    document.getElementById('health-rec').innerHTML=RECS.slice(0,3).map(function(r){
      return '<div class="rec-card" onclick="toast(\'查看报告\')"><div class="rec-cover" style="background:linear-gradient(135deg,'+r.bg+','+r.bg+'99)"></div><div class="rec-body"><span class="rec-cat" style="background:'+r.bg+'22;color:'+r.bg+'">'+r.cat+'</span><div class="rec-tt">'+r.t+'</div><div class="rec-meta">'+r.meta+'</div></div></div>';
    }).join('');
  }

  /* ===== 成果状态（可累积，驱动继续完成） ===== */
  var growthState={ doneTasks:{}, baseTasks:12, streak:12, pts:1240, unlocked:false };
  var WEEK_DAYS=['一','二','三','四','五','六','日'];

  function renderGrowth() {
    document.getElementById('today-prog').innerHTML=PROG.map(function(p,i){
      return '<div class="tp-item" onclick="toast(\''+(p.done?'已记录':'去记录')+'\')"><div class="tp-ic" style="background:'+p.c+'1a;color:'+p.c+'">'+svgUse(p.ic,18)+'</div>'+
        '<div style="flex:1"><div class="tp-l">'+p.l+'</div><div class="tp-st '+(p.done?'done':'pend')+'">'+(p.done?'已完成':'去记录')+'</div></div></div>';
    }).join('');

    renderGrowthTasks();
    renderGrowthRec();
    renderAchievementHero();
  }

  function renderGrowthTasks(){
    var html=TASKS.map(function(t,i){
      var done=!!growthState.doneTasks[i];
      return '<div class="task-item'+(done?' done just-done':'')+'" data-i="'+i+'">'+
        '<button class="tk-ck" onclick="doCompleteTask('+i+', this)">'+(done?checkSvg():'')+'</button>'+
        '<div class="tk-bd"><div class="tk-t">'+t.title+'</div>'+
        '<div class="tk-m"><span>'+(done?'已完成 · 家人可看到':'小宇 · 待完成')+'</span></div></div>'+
        '<div class="tk-pts">+'+t.pts+'</div></div>';
    }).join('');
    document.getElementById('growth-tasks').innerHTML=html;
    // 已完成数量与"再完成N项"驱动
    var doneN=Object.keys(growthState.doneTasks).length;
    var total=TASKS.length;
    var next=document.getElementById('growth-next');
    if (doneN>0 && doneN<total){
      next.style.display='block';
      document.getElementById('next-n').textContent=(total-doneN);
    } else if (doneN>=total){
      next.style.display='block';
      document.getElementById('next-n').textContent='0';
      next.querySelector('div').lastChild.textContent=' 全部完成，成果已解锁 🎉';
    } else {
      next.style.display='none';
    }
    // 清理 just-done 动画类
    setTimeout(function(){
      document.querySelectorAll('#growth-tasks .just-done').forEach(function(el){ el.classList.remove('just-done'); });
    }, 1200);
  }
  function checkSvg(){
    return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>';
  }

  function doCompleteTask(i, btn){
    if (growthState.doneTasks[i]) return;
    growthState.doneTasks[i]=true;
    var t=TASKS[i];
    growthState.pts += t.pts;
    renderGrowthTasks();
    renderAchievementHero();
    var doneN=Object.keys(growthState.doneTasks).length;

    if (!growthState.unlocked && doneN>=2){
      growthState.unlocked=true;
      setTimeout(function(){ showUnlock('star','成就解锁 · 本周全勤','已连续完成 2 项任务，坚持就是复利'); }, 420);
    } else {
      toast('完成「'+t.title+'」 · 成长分 +'+t.pts);
    }
  }

  function renderGrowthRec(){
    document.getElementById('growth-rec').innerHTML=CHALLENGES.map(function(ch){
      var pct=Math.round(ch.prog/ch.total*100);
      return '<div class="rec-card" style="width:200px" onclick="toast(\'挑战详情\')"><div class="rec-cover" style="background:linear-gradient(135deg,'+dimColor(ch.dim)+','+dimColor(ch.dim)+'99);height:70px"></div>'+
        '<div class="rec-body"><div class="rec-tt">'+ch.title+'</div><div class="rec-meta">'+ch.prog+'/'+ch.total+' · '+pct+'%</div></div></div>';
    }).join('');
  }

  /* 成果环 + 连击 + 进度条 */
  function renderAchievementHero(){
    var total=growthState.baseTasks + Object.keys(growthState.doneTasks).length;
    var pct=Math.min(1, growthState.baseTasks/total);
    var size=116, sw=10, r=(size-sw)/2, c=2*Math.PI*r;
    var ring='<svg width="'+size+'" height="'+size+'" viewBox="0 0 '+size+' '+size+'">'+
      '<circle cx="'+size/2+'" cy="'+size/2+'" r="'+r+'" fill="none" stroke="rgba(124,45,18,0.12)" stroke-width="'+sw+'"/>'+
      '<circle cx="'+size/2+'" cy="'+size/2+'" r="'+r+'" fill="none" stroke="var(--brand)" stroke-width="'+sw+'" stroke-linecap="round" stroke-dasharray="'+(c*pct).toFixed(1)+' '+(c-c*pct).toFixed(1)+'" transform="rotate(-90 '+size/2+' '+size/2+')" style="transition:stroke-dasharray .7s cubic-bezier(.23,1,.32,1)"/></svg>'+
      '<div class="ah-c"><div class="n">'+growthState.baseTasks+'</div><div class="l">本周任务</div></div>';
    var el=document.getElementById('ach-ring');
    if (el) el.innerHTML=ring;

    var taskPct=Math.min(100, growthState.baseTasks/16*100);
    document.getElementById('ach-task-v').textContent=growthState.baseTasks;
    document.getElementById('ach-task-b').style.width=taskPct+'%';
    document.getElementById('ach-pt-b').style.width=Math.min(100, growthState.pts/1800*100)+'%';
    document.getElementById('ach-bg-b').style.width=(growthState.unlocked? '53%':'40%')+'%';
    document.getElementById('ach-sub').textContent='完成 '+growthState.baseTasks+' 项任务 · 连续打卡 '+growthState.streak+' 天';
    document.getElementById('ach-title').textContent=growthState.unlocked?'本周成果 · 已解锁全勤':'本周成果';

    // 连击 7 天
    var sh='';
    for (var i=0;i<7;i++){
      var done=i<6 || (i===6 && true); // 今天待点亮
      var cls=i===6? 'today' : (done?'done':'');
      sh+='<div class="sd '+cls+'"><div class="dot">'+(i===6?svgUse('flame',15):(done?svgUse('check',15):''))+'</div><div class="dl">'+WEEK_DAYS[i]+'</div></div>';
    }
    document.getElementById('ach-streak').innerHTML=sh;
  }

  /* 解锁横幅 */
  var unlockTimer;
  function showUnlock(icon, title, sub){
    document.getElementById('unlock-ic').innerHTML=svgUse(icon,20);
    document.getElementById('unlock-t').textContent=title;
    document.getElementById('unlock-s').textContent=sub;
    var el=document.getElementById('unlock-toast');
    el.classList.add('show');
    clearTimeout(unlockTimer);
    unlockTimer=setTimeout(function(){ el.classList.remove('show'); }, 2600);
  }

  function renderProfile() {
    document.getElementById('ach-grid').innerHTML=ACH.map(function(a){
      return '<div class="ach"><div class="ai" style="background:'+a.c+'1a;color:'+a.c+'">'+svgUse(a.ic,18)+'</div><div class="av">'+a.v+'</div><div class="al">'+a.l+'</div></div>';
    }).join('');
  }

  function renderDimSheet() {
    document.getElementById('dim-grid').innerHTML=DIMS.map(function(d){
      return '<div class="dim-tile" style="background:'+d.soft+'" onclick="openDimFromSheet(\''+d.code+'\')">'+
        '<div class="dt-ic" style="background:'+d.color+'">'+svgUse('star',20)+'</div>'+
        '<div class="dt-nm">'+d.name+' · '+d.desc+'</div>'+
        '<div class="dt-sc" style="color:'+d.color+'">'+d.score+' 分</div>'+
        '<div class="dt-track"><div class="dt-fill" style="width:'+d.score+'%;background:'+d.color+'"></div></div></div>';
    }).join('');
    var more=document.getElementById('dim-more');
    if (more) more.style.display='block';
  }
  function openDimFromSheet(code){
    closeDim();
    setTimeout(function(){ openDimDetail(code); }, 180);
  }
  function openOverviewFromSheet(){
    closeDim();
    setTimeout(function(){ openOverview(); }, 180);
  }

  function dimColor(code){ var d=DIMS.find(function(x){return x.code===code}); return d?d.color:'var(--brand)'; }
  function dimSoft(code){ var d=DIMS.find(function(x){return x.code===code}); return d?d.soft:'var(--brand-soft)'; }
  function dimByCode(code){ return DIMS.find(function(x){return x.code===code}) || DIMS[0]; }

  /* ===== 肠道问卷 / 风险分级 / 9.9 陪跑 / D7 报告 ===== */
  /* 红旗筛查（必答前置，命中即转就医） */
  var REDFLAG=[
    { t:'最近是否有便血、黑便，或大便带黏液、脓血？', opts:[{t:'没有',s:0},{t:'有',s:1}] },
    { t:'近半年是否有非刻意的体重下降（超过 4 公斤）？', opts:[{t:'没有',s:0},{t:'有',s:1}] },
    { t:'是否有过持续发热（体温超过 37.3℃）伴随排便异常？', opts:[{t:'没有',s:0},{t:'有',s:1}] },
    { t:'是否存在夜间腹泻，或腹痛把你痛醒？', opts:[{t:'没有',s:0},{t:'有',s:1}] },
    { t:'近一年是否出现过缺铁性贫血，或长期乏力头晕？', opts:[{t:'没有',s:0},{t:'有',s:1}] },
    { t:'一级亲属是否有结直肠癌、炎症性肠病或肠易激综合征？', opts:[{t:'没有',s:0},{t:'有',s:1}] },
    { t:'是否有胸痛、胸闷、心悸，或活动后气促？', opts:[{t:'没有',s:0},{t:'有',s:1}] },
    { t:'是否出现过一侧肢体麻木无力、言语不清或口角歪斜？', opts:[{t:'没有',s:0},{t:'有',s:1}] },
    { t:'是否已有心脑血管疾病、糖尿病或肾病的诊断？', opts:[{t:'没有',s:0},{t:'有',s:1}] }
  ];
  /* 基础信息 */
  var BASIC={ gender:'', h:'', w:'', waist:'' };
  /* 五大模块（条件跳转） */
  var MODULES={
    weight:{ name:'肥胖 / 体重', color:'var(--dim-body)', max:7, qs:[
      { t:'近一年你的体重变化', opts:[{t:'基本稳定',s:0},{t:'上升 1–3 公斤',s:1},{t:'上升超过 4 公斤',s:2},{t:'减重后反弹',s:2}] },
      { t:'是否尝试过减重', opts:[{t:'没有尝试',s:0},{t:'试过但没坚持',s:1},{t:'反复减反复反弹',s:2}] },
      { t:'日常主要困扰', opts:[{t:'没有明显困扰',s:0},{t:'爬楼气喘',s:1},{t:'睡眠打鼾',s:2},{t:'关节不适',s:1},{t:'容易乏力',s:1}] }
    ]},
    consti:{ name:'便秘', color:'var(--dim-wealth)', max:8, qs:[
      { t:'近 3 个月你的排便次数', opts:[{t:'每周不超过 2 次',s:2},{t:'每周 3–6 次',s:1},{t:'每天 1–2 次',s:0},{t:'每天超过 2 次',s:0}] },
      { t:'粪便性状（参考布里斯托分型）', opts:[{t:'干球状或硬便',s:2},{t:'正常成形',s:0},{t:'稀软不成形',s:0}] },
      { t:'排便时是否费力、有不尽感或梗阻感', opts:[{t:'从不',s:0},{t:'偶尔',s:1},{t:'经常',s:2}] },
      { t:'是否需要手法辅助才能排出', opts:[{t:'不需要',s:0},{t:'偶尔',s:1},{t:'经常',s:2}] }
    ]},
    diarrhea:{ name:'腹泻', color:'var(--dim-mind)', max:10, qs:[
      { t:'近 4 周你的每日排便次数', opts:[{t:'每天不超过 2 次',s:0},{t:'3 次',s:1},{t:'4 次以上',s:2},{t:'6 次以上',s:3}] },
      { t:'粪便性状', opts:[{t:'正常成形',s:0},{t:'糊状',s:1},{t:'水样',s:2},{t:'油亮有油花',s:2}] },
      { t:'是否伴有腹痛、里急后重或黏液', opts:[{t:'都没有',s:0},{t:'轻微腹痛',s:1},{t:'明显腹痛或里急后重',s:2},{t:'带黏液',s:1}] }
    ]},
    sleep:{ name:'睡眠', color:'var(--dim-wisdom)', max:8, qs:[
      { t:'你的平均睡眠时长', opts:[{t:'7–9 小时',s:0},{t:'6–7 小时',s:1},{t:'不足 6 小时',s:2},{t:'超过 9 小时',s:1}] },
      { t:'入睡是否困难（超过 30 分钟）', opts:[{t:'不困难',s:0},{t:'偶尔',s:1},{t:'几乎每晚',s:2}] },
      { t:'夜间醒来次数', opts:[{t:'没有',s:0},{t:'1 次',s:1},{t:'2 次以上',s:2}] },
      { t:'是否打鼾，或被告知呼吸暂停', opts:[{t:'都不',s:0},{t:'打鼾但无暂停',s:1},{t:'有呼吸暂停',s:2}] }
    ]},
    allergy:{ name:'过敏', color:'var(--dim-action)', max:8, qs:[
      { t:'是否有湿疹、皮肤瘙痒或反复皮疹', opts:[{t:'没有',s:0},{t:'偶尔',s:1},{t:'反复',s:2}] },
      { t:'是否有阵发喷嚏、鼻塞、清水鼻涕', opts:[{t:'没有',s:0},{t:'季节性',s:1},{t:'常年',s:2}] },
      { t:'是否有过喘息或呼吸困难（非运动诱发）', opts:[{t:'没有',s:0},{t:'有过',s:2}] },
      { t:'是否存在食物不耐受或食物过敏', opts:[{t:'没有',s:0},{t:'1 类食物',s:1},{t:'2 类以上',s:2}] }
    ]},
    bp:{ name:'血压', color:'var(--danger)', max:9, chronic:true, qs:[
      { t:'是否被医生告知过血压偏高或高血压', opts:[{t:'没有',s:0},{t:'看过但未确诊',s:2},{t:'已确诊高血压',s:2}] },
      { t:'近一年是否规律测量血压', opts:[{t:'每月固定测量',s:0},{t:'偶尔测',s:1},{t:'从不测',s:2}] },
      { t:'最近一次血压大概是多少', opts:[{t:'正常或没测过',s:0},{t:'120–139 或 80–89',s:1},{t:'140–159 或 90–99',s:2},{t:'≥160 或 ≥100',s:3}] },
      { t:'是否正在服用降压药', opts:[{t:'未被告知需服药',s:0},{t:'正在服药',s:2}] }
    ]},
    glu:{ name:'血糖', color:'var(--dim-wealth)', max:9, chronic:true, qs:[
      { t:'是否被医生告知过血糖偏高或糖尿病', opts:[{t:'没有',s:0},{t:'看过但未确诊',s:2},{t:'已确诊',s:2}] },
      { t:'近一年是否做过空腹血糖或糖化血红蛋白检查', opts:[{t:'每年都做',s:0},{t:'做过但不定期',s:1},{t:'从未做过',s:2}] },
      { t:'已知空腹血糖是多少（mmol/L）', opts:[{t:'不知道或未测',s:0},{t:'低于 6.1',s:0},{t:'6.1–6.9',s:2},{t:'≥ 7.0',s:3}] },
      { t:'是否正在服用降糖药或使用胰岛素', opts:[{t:'没有',s:0},{t:'有',s:2}] }
    ]},
    lip:{ name:'血脂', color:'var(--dim-action)', max:6, chronic:true, qs:[
      { t:'近一年是否做过血脂四项检查', opts:[{t:'每年都做',s:0},{t:'做过但不定期',s:1},{t:'从未做过',s:2}] },
      { t:'是否被告知血脂异常或胆固醇高', opts:[{t:'没有',s:0},{t:'看过但未确诊',s:1},{t:'已确诊',s:2}] },
      { t:'已知结果', opts:[{t:'都正常',s:0},{t:'低密度脂蛋白偏高',s:2},{t:'甘油三酯偏高',s:2},{t:'总胆固醇偏高',s:1}] }
    ]},
    ua:{ name:'尿酸 / 痛风', color:'var(--dim-mind)', max:11, chronic:true, qs:[
      { t:'是否被医生告知过尿酸偏高或痛风', opts:[{t:'没有',s:0},{t:'看过但未确诊',s:2},{t:'已确诊痛风',s:3}] },
      { t:'已知血尿酸是多少（μmol/L）', opts:[{t:'不知道或未测',s:0},{t:'低于 420',s:0},{t:'420–479',s:2},{t:'≥ 480',s:3}] },
      { t:'是否有过单侧关节红肿热痛发作（尤其足大拇指关节）', opts:[{t:'没有',s:0},{t:'有过 1 次',s:2},{t:'反复发作',s:3}] },
      { t:'是否正在服用降尿酸药物', opts:[{t:'没有',s:0},{t:'有',s:2}] }
    ]}
  };
  var qzState={ phase:'flag', i:0, flagPicks:[], modPicks:{}, active:[], done:false, result:null };

  function qzPhaseList(){
    if (qzState.phase==='flag') return REDFLAG;
    if (qzState.phase==='basic') return [];
    var m=MODULES[qzState.active[qzState.i]];
    return m ? m.qs : [];
  }
  function curDimName(){
    if (qzState.phase==='flag') return '安全筛查';
    if (qzState.phase==='basic') return '基础信息';
    var m=MODULES[qzState.active[qzState.i]];
    return m ? m.name : '';
  }

  function renderQuiz(){
    var wrap=document.getElementById('qz-wrap');
    if (qzState.phase==='basic'){ renderBasic(); return; }
    var list=qzPhaseList(), q=list[qzState.i];
    var total=qzState.phase==='flag'?REDFLAG.length:MODULES[qzState.active[qzState.i]].qs.length;
    var globalDone = qzState.phase==='flag'? qzState.i : qzState.i;
    document.getElementById('qz-bar').style.width=(globalDone/total*100)+'%';
    document.getElementById('qz-idx').textContent=(globalDone+1)+' / '+total;
    var dimEl=document.getElementById('qz-dim');
    dimEl.textContent = qzState.phase==='flag' ? '第一步 · 安全筛查（必答）' : ('维度 · '+curDimName());
    dimEl.style.color = qzState.phase==='flag' ? 'var(--danger)' : 'var(--brand)';
    document.getElementById('qz-title').textContent=q.t;
    var picked = qzState.phase==='flag'? qzState.flagPicks[qzState.i] : (qzState.modPicks[qzState.active[qzState.i]]||[])[qzState.i];
    document.getElementById('qz-opts').innerHTML=q.opts.map(function(o,oi){
      return '<div class="qz-opt'+(picked===oi?' on':'')+'" data-oi="'+oi+'" onclick="pickQ('+oi+')">'+
        '<span class="qo-dot"></span><span class="qo-t">'+o.t+'</span>'+(o.s>0?'<span class="qo-s">+'+o.s+'</span>':'')+'</div>';
    }).join('');
    var isLast = (qzState.i===total-1);
    var acts=document.getElementById('qz-actions');
    acts.innerHTML = isLast
      ? '<button class="btn-primary" onclick="nextQ()">完成本组</button>'
      : '<button class="btn-primary" disabled style="opacity:.45">请选择一项</button>';
    if (picked!==undefined){ enableNext(acts, isLast); }
    document.getElementById('legal-note').style.display = qzState.phase==='flag' ? 'block' : 'none';
  }
  function enableNext(acts, isLast){
    var btn=acts.querySelector('.btn-primary');
    btn.disabled=false; btn.style.opacity='1';
    btn.textContent = isLast ? '完成本组' : '下一题';
    btn.onclick=nextQ;
  }
  function renderBasic(){
    document.getElementById('qz-bar').style.width='100%';
    document.getElementById('qz-idx').textContent='基础信息';
    var dimEl=document.getElementById('qz-dim');
    dimEl.textContent='第二步 · 基础信息';
    dimEl.style.color='var(--brand)';
    document.getElementById('qz-title').innerHTML='为了让评估更准确，请填写基础信息';
    var g=BASIC.gender;
    document.getElementById('qz-opts').innerHTML=
      '<div style="display:flex;gap:10px;margin-bottom:14px">'+
      ['男','女'].map(function(x){ return '<div class="qz-opt'+(g===x?' on':'')+'" style="flex:1" onclick="pickGender(\''+x+'\')">'+
        '<span class="qo-dot"></span><span class="qo-t">'+x+'</span></div>'; }).join('')+'</div>'+
      '<div style="display:flex;gap:10px">'+
      '<div class="field" style="flex:1"><span class="fc-ic">身高</span><input inputmode="decimal" placeholder="cm" value="'+BASIC.h+'" oninput="setBasic(\'h\',this.value)"/></div>'+
      '<div class="field" style="flex:1"><span class="fc-ic">体重</span><input inputmode="decimal" placeholder="kg" value="'+BASIC.w+'" oninput="setBasic(\'w\',this.value)"/></div>'+
      '<div class="field" style="flex:1"><span class="fc-ic">腰围</span><input inputmode="decimal" placeholder="cm" value="'+BASIC.waist+'" oninput="setBasic(\'waist\',this.value)"/></div>'+
      '</div>'+
      '<div style="font-size:var(--fs-xs);color:var(--ink-3);margin-top:10px;line-height:1.5">腰围请在肚脐水平量一圈。用于判断中心型肥胖（男 ≥90cm，女 ≥85cm）。</div>';
    var acts=document.getElementById('qz-actions');
    acts.innerHTML='<button class="btn-primary" onclick="decideModules()">继续</button>';
    document.getElementById('legal-note').style.display='block';
  }
  function pickGender(x){ BASIC.gender=x; renderBasic(); }
  function setBasic(k,v){ BASIC[k]=v; }

  function pickQ(oi){
    if (qzState.phase==='flag'){ qzState.flagPicks[qzState.i]=oi; }
    else {
      var k=qzState.active[qzState.i];
      if(!qzState.modPicks[k]) qzState.modPicks[k]=[];
      qzState.modPicks[k][qzState.i]=oi;
    }
    document.querySelectorAll('#qz-opts .qz-opt').forEach(function(el){ el.classList.toggle('on', +el.dataset.oi===oi); });
    enableNext(document.getElementById('qz-actions'), false);
  }
  function nextQ(){
    var list=qzPhaseList();
    if (qzState.i<list.length-1){ qzState.i++; renderQuiz(); return; }
    // 本组完成
    if (qzState.phase==='flag'){
      var hit=qzState.flagPicks.some(function(p){ return p===1; });
      if (hit){ qzState.done=true; renderRedFlagHit(); return; }
      qzState.phase='basic'; qzState.i=0; renderBasic(); return;
    }
    qzState.i++;
    if (qzState.i<qzState.active.length){ renderQuiz(); }
    else {
      showRisk();
      TASK_SCREENS.forEach(function(s){
        var el=document.getElementById('screen-'+s);
        if (el) el.classList.remove('active');
      });
      document.getElementById('screen-risk').classList.add('active');
    }
  }
  function decideModules(){
    var h=parseFloat(BASIC.h), w=parseFloat(BASIC.w), waist=parseFloat(BASIC.waist);
    var bmi = (h>0 && w>0)? (w/((h/100)*(h/100))) : 0;
    var waistBad = waist>0 && ((BASIC.gender==='男'&&waist>=90)||(BASIC.gender==='女'&&waist>=85));
    var order=['weight','consti','diarrhea','sleep','allergy','bp','glu','lip','ua'];
    qzState.active=order;
    qzState.phase='module'; qzState.i=0; renderQuiz();
  }

  function modScore(key){
    var m=MODULES[key], picks=qzState.modPicks[key]||[], n=0;
    m.qs.forEach(function(q,i){ if(picks[i]!==undefined) n+=q.opts[picks[i]].s; });
    return n;
  }
  function moduleLevel(key){
    var m=MODULES[key], v=modScore(key), r=v/m.max;
    if (r>=0.55) return {n:'需关注', c:'var(--danger)'};
    if (r>=0.3) return {n:'中度', c:'var(--warn)'};
    if (v>0) return {n:'轻度', c:'var(--dim-wealth)'};
    return {n:'良好', c:'var(--ok)'};
  }

  function renderRedFlagHit(){
    var hits=[];
    REDFLAG.forEach(function(q,i){ if(qzState.flagPicks[i]===1) hits.push(q.t); });
    var cardio = qzState.flagPicks[6]===1 || qzState.flagPicks[7]===1 || qzState.flagPicks[8]===1;
    var dept = cardio ? '心内科 / 全科医学科' : '消化内科';
    document.getElementById('qz-bar').style.width='100%';
    document.getElementById('qz-idx').textContent='安全筛查';
    document.getElementById('qz-dim').textContent='筛查结果';
    document.getElementById('qz-dim').style.color='var(--danger)';
    document.getElementById('qz-title').innerHTML='建议优先到正规医院就诊';
    var h='<div class="card" style="border-left:4px solid var(--danger)">'+
      '<div style="display:flex;gap:10px;align-items:flex-start;margin-bottom:12px">'+
      '<span style="color:var(--danger);flex:none;margin-top:1px">'+svgUse('alert',18)+'</span>'+
      '<div><div style="font-size:var(--fs-md);font-weight:800;color:var(--danger)">你描述的情况需要优先明确原因</div>'+
      '<div style="font-size:var(--fs-sm);color:var(--ink-2);margin-top:6px;line-height:1.6">以下情况属于医学上建议优先就诊的信号，我们的服务不能替代医学诊断：</div></div></div>';
    hits.forEach(function(t){
      h+='<div style="display:flex;gap:8px;padding:8px 0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5">'+
        '<span style="color:var(--danger);flex:none">·</span><span>'+t+'</span></div>';
    });
    h+='<div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6">'+
      '建议挂<b>'+dept+'</b>。如症状明显或持续加重，请尽快就医。<br/>'+
      '<span style="color:var(--ink-3);font-size:var(--fs-xs)">明确原因后，如果需要长期健康管理，我们再陪你做下一步。</span></div></div>';
    document.getElementById('qz-opts').innerHTML=h;
    document.getElementById('qz-actions').innerHTML='<button class="btn-primary" onclick="backTo(\'home\')">我知道了</button>';
    document.getElementById('legal-note').style.display='block';
  }

  function showRisk(){
    var keys=qzState.active.slice();
    var chronicKeys=['bp','glu','lip','ua'];
    var funcKeys=['weight','consti','diarrhea','sleep','allergy'];
    function pick(list){ return list.map(function(k){ return {k:k, v:modScore(k), m:MODULES[k]}; }); }

    // 功能性五维（决定商业转化）
    var funcScored=pick(funcKeys).filter(function(x){ return x.v>0; })
                    .sort(function(a,b){ return b.v/b.m.max - a.v/a.m.max; });
    // 慢病四维（管理状态，不参与商业决策）
    var chronicScored=pick(chronicKeys).filter(function(x){ return x.v>0; })
                    .sort(function(a,b){ return b.v/b.m.max - a.v/a.m.max; });
    var chronicHigh=chronicScored.filter(function(x){
      var p=x.v/x.m.max; return p>=0.55 || x.v>=4;
    });

    var h=parseFloat(BASIC.h), w=parseFloat(BASIC.w);
    var bmi=(h>0&&w>0)? (w/((h/100)*(h/100))) : 0;
    var bmiTag = bmi>=28 ? {t:'肥胖症范畴', c:'var(--danger)'} : (bmi>=24? {t:'超重', c:'var(--warn)'} : null);

    var hiN=0, midN=0;
    funcScored.forEach(function(x){
      var lv=moduleLevel(x.k);
      if(lv.n==='需关注') hiN++;
      else if(lv.n==='中度') midN++;
    });
    var overall = (hiN>=1||midN>=2)? 'high' : (midN>=1? 'mid' : 'low');

    var conf = { low:{n:'低风险', s:'暂时不需要检测', t:'你的情况目前以作息和饮食调整为主。先做三件事，3 个月后我们提醒你复评。'},
                 mid:{n:'中风险', s:'建议做一次检测', t:'有几个维度需要注意。一次检测能帮你明确方向，少走弯路。'},
                 high:{n:'高风险', s:'建议尽快检测', t:'你的部分维度需要重点关注，建议尽早做一次检测看看具体方向。'} };
    var c=conf[overall];

    var top=funcScored.length? funcScored[0].m.name : '无明显异常';
    var hero='<div class="risk-hero '+overall+'">'+
      '<div class="rh-score" style="font-size:34px">'+c.n+'</div>'+
      '<div class="rh-unit">'+c.s+'</div>'+
      '<div class="rh-lv">优先关注：'+top+'</div>'+
      '<div class="rh-tip">'+c.t+'</div></div>';

    // 慢病优先提示（若有）
    var chWarn='';
    if (chronicHigh.length){
      var names=chronicHigh.map(function(x){ return x.m.name; }).join('、');
      chWarn='<div class="card" style="border-left:4px solid var(--danger)">'+
        '<div style="display:flex;gap:10px;align-items:flex-start">'+
        '<span style="color:var(--danger);flex:none;margin-top:1px">'+svgUse('alert',18)+'</span>'+
        '<div><div style="font-size:var(--fs-md);font-weight:800;color:var(--danger)">你的 '+names+' 需要优先关注</div>'+
        '<div style="font-size:var(--fs-sm);color:var(--ink-2);margin-top:6px;line-height:1.6">这几个维度的规范管理是「医生方案 + 生活方式」。<b>请遵医嘱定期随诊</b>，我们只能提供生活方式配合建议，不能替代治疗方案，也不建议自行调整用药。</div></div></div>'+
        '<div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--line)">'+
        chronicHigh.map(function(x){
          var q=x.m.qs, picks=qzState.modPicks[x.k]||[];
          var tips=[];
          q.forEach(function(qq,i){ if(picks[i]>0) tips.push(qq.opts[picks[i]].t); });
          return '<div style="padding:6px 0;font-size:var(--fs-sm);color:var(--ink-2)"><b style="color:var(--ink)">'+x.m.name+'：</b>'+tips.slice(0,2).join('；')+'</div>';
        }).join('')+
        '</div></div>';
    }

    // 九维得分（分两组）
    function dimRows(list){
      var out='';
      list.forEach(function(k){
        var m=MODULES[k], v=modScore(k), lv=moduleLevel(k);
        var pct=Math.round(v/m.max*100);
        out+='<div class="rf-row" onclick="toast(\''+m.name+'：'+v+' 分 · '+lv.n+'\')">'+
          '<span class="rf-d">'+m.name+(bmiTag&&k==='weight'&&bmiTag?'（'+bmiTag.t+'）':'')+'</span>'+
          '<span class="rf-b"><i style="width:'+pct+'%;background:'+lv.c+'"></i></span>'+
          '<span class="rf-s" style="color:'+lv.c+'">'+v+'</span></div>';
      });
      return out;
    }
    var fh='<div class="risk-factors"><div class="rf-title">消化 · 代谢 · 睡眠 · 过敏</div>'+dimRows(funcKeys)+'</div>'+
      '<div class="risk-factors"><div class="rf-title">三高 · 尿酸（管理状态）</div>'+dimRows(chronicKeys)+
      '<div style="font-size:var(--fs-xs);color:var(--ink-3);margin-top:12px;padding-top:10px;border-top:1px solid var(--line);line-height:1.55">'+
      '这几项为已知的健康指标状态，<b>不能替代医生的诊断与方案</b>。指尖血糖仪测值不能作为糖尿病诊断依据，需静脉血浆血糖。</div></div>';

    var note='<div class="card"><div style="display:flex;gap:10px;align-items:flex-start">'+
      '<span style="color:var(--ink-3);flex:none;margin-top:1px">'+svgUse('shield',17)+'</span>'+
      '<div><div style="font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)">本评估为健康管理筛查参考</div>'+
      '<div style="font-size:var(--fs-xs);color:var(--ink-3);margin-top:5px;line-height:1.6">不构成医疗诊断，也不替代医生的治疗方案。身体不适请到正规医疗机构就诊。</div></div></div></div>';

    document.getElementById('risk-slot').innerHTML=hero+chWarn+fh+note;
    qzState.result={overall:overall, topKey:funcScored.length?funcScored[0].k:'weight', chronic:chronicHigh.length>0};
    renderPrepBlock(overall);
  }

  function renderPrepBlock(lv){
    var slot=document.getElementById('prep-slot'), act=document.getElementById('risk-actions');
    var chronic = qzState.result && qzState.result.chronic;
    if (lv==='low'){
      slot.innerHTML='<div class="card"><div style="display:flex;gap:10px;align-items:flex-start">'+
        '<div style="color:var(--ok);flex:none;margin-top:1px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg></div>'+
        '<div><div style="font-size:var(--fs-base);font-weight:700">我们不建议你现在花钱做检测</div>'+
        '<div style="font-size:var(--fs-sm);color:var(--ink-2);margin-top:5px;line-height:1.6">先按下面三件事做，3 个月后我们提醒你复评。</div></div></div>'+
        '<div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--line)">'+
        prepRow('check','固定三餐时间，晚餐 7 点前结束')+
        prepRow('leaf','每天一份发酵食品（无糖酸奶 / 泡菜）')+
        prepRow('run','每周 3 次、每次 30 分钟快走')+
        '</div></div>';
      act.innerHTML='<div class="up-actions"><button class="btn-primary" onclick="toast(\'已加入 3 个月后复评提醒\')">3 个月后提醒我复评</button><button class="btn-ghost" onclick="backTo(\'home\')">返回首页</button></div>';
      return;
    }
    var push = lv==='high'
      ? '你的部分症状与肠道环境可能相关，检测能帮你明确主因。'
      : '一次检测能帮你明确方向，少走弯路。';
    // 慢病用户：弱化销售，强调配合
    var head = chronic
      ? '<div class="pc-t">配合医生方案的生活方式准备</div>'
      : '<div class="pc-t">检测前的肠道准备期</div>';
    var desc = chronic
      ? '<div class="pc-s">你的血压 / 血糖 / 血脂 / 尿酸中有需要重点关注的项。<b>请先遵医嘱随诊</b>。这段时间我们能做的，是帮你把饮食与作息配合起来——这是生活方式管理，不是治疗。</div>'
      : '<div class="pc-s">菌群检测有个前提：检测前 3–7 天不能有抗生素、不能大量摄入益生菌、饮食要稳定，否则数据会失真。<b>这 7 天需要有人带你调。</b></div>';
    var priceNote = chronic
      ? '<div style="font-size:var(--fs-xs);color:rgba(124,45,18,0.7);margin-top:8px;line-height:1.5">说明：我们<b>不建议</b>已确诊的用户自行调整用药或用检测替代复诊。检测与解读仅作参考。</div>'
      : '';
    slot.innerHTML='<div class="sec-head section"><div class="sec-title">'+(chronic?'建议：先配合医生，再做生活方式管理':'建议：检测前先做 7 天准备')+'</div></div>'+
      '<div class="prep-card">'+head+desc+
      '<div class="prep-price"><span class="pp-n">9.9</span><span class="pp-u">元 · 7 天陪跑</span></div>'+priceNote+'</div>'+
      '<div class="card" style="margin-top:14px;background:var(--brand-soft);box-shadow:none">'+
      '<div style="font-size:var(--fs-base);font-weight:700;color:var(--brand-ink)">'+(chronic?'遵医嘱是首要的':'检测本身由你自费（¥1980，可分期）')+'</div>'+
      '<div style="font-size:var(--fs-sm);color:var(--brand-ink);opacity:.85;margin-top:6px;line-height:1.55">'+(chronic?'我们提供的是饮食与作息调整建议，配合你的既有治疗方案。':'我们赠送的是<b>检测前准备、检测后专家解读、90 天干预方案</b>。')+'</div></div>';
    act.innerHTML='<div class="up-actions"><button class="btn-primary" onclick="openPrep()">9.9 元 · 开始 7 天准备</button>'+
      '<button class="btn-ghost" onclick="toast(\'直接检测：¥1980，可分期\')">'+(chronic?'先去做正规复查':'跳过准备，直接预约检测')+'</button></div>';
  }
  function prepRow(ic,t){
    return '<div class="prep-item"><span class="pi-ic" style="background:var(--dim-action-soft);color:var(--ok)">'+svgUse(ic,16)+'</span>'+
      '<span style="flex:1;font-size:var(--fs-sm);font-weight:600">'+t+'</span></div>';
  }

  function renderPrepPage(){
    var days=['一','二','三','四','五','六','日'];
    var h='';
    for(var i=0;i<7;i++){
      h+='<div class="d7-cell'+(i<6?' done':'')+'">'+days[i]+'</div>';
    }
    document.getElementById('prep-d7').innerHTML=h;
    var tasks=[
      {ic:'diet',c:'var(--dim-body)',t:'记录三餐全貌 + 建立准备档案',s:'10 分钟'},
      {ic:'target',c:'var(--dim-action)',t:'停用益生菌 / 补剂，改为发酵食品',s:'5 分钟'},
      {ic:'leaf',c:'var(--dim-body)',t:'调整精制碳水，晚餐加一份蔬菜',s:'15 分钟'},
      {ic:'smile',c:'var(--dim-mind)',t:'记录症状（腹胀 / 排便）与情绪',s:'5 分钟'},
      {ic:'bulb',c:'var(--dim-wisdom)',t:'建立固定进餐时间',s:'10 分钟'},
      {ic:'check',c:'var(--dim-action)',t:'复核是否误食抗生素类药物',s:'5 分钟'},
      {ic:'upload',c:'var(--brand)',t:'生成准备度报告 + 支付检测',s:'10 分钟'}
    ];
    document.getElementById('prep-list').innerHTML=tasks.map(function(t){
      return '<div class="prep-item"><span class="pi-ic" style="background:'+t.c+'1a;color:'+t.c+'">'+svgUse(t.ic,16)+'</span>'+
        '<span style="flex:1"><span style="display:block;font-size:var(--fs-base);font-weight:600">'+t.t+'</span>'+
        '<span style="display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px">约 '+t.s+'</span></span></div>';
    }).join('');
    document.getElementById('prep-output').innerHTML=
      '<div class="prep-item"><span class="pi-ic" style="background:var(--brand-soft);color:var(--brand)">'+svgUse('chart',16)+'</span><span style="flex:1;font-size:var(--fs-base);font-weight:600">7 天饮食结构分析 + 变化曲线</span></div>'+
      '<div class="prep-item"><span class="pi-ic" style="background:var(--brand-soft);color:var(--brand)">'+svgUse('smile',16)+'</span><span style="flex:1;font-size:var(--fs-base);font-weight:600">症状与情绪趋势变化</span></div>'+
      '<div class="prep-item"><span class="pi-ic" style="background:var(--brand-soft);color:var(--brand)">'+svgUse('target',16)+'</span><span style="flex:1;font-size:var(--fs-base);font-weight:600">检测前注意事项清单</span></div>'+
      '<div class="prep-item"><span class="pi-ic" style="background:var(--brand-soft);color:var(--brand)">'+svgUse('bulb',16)+'</span><span style="flex:1;font-size:var(--fs-base);font-weight:600">五维能量基线档案</span></div>';
  }

  function renderD7(){
    var trends=[
      { n:'饮食结构评分', v:'4 → 7', col:'var(--brand)', data:[28,38,48,58,68,78,88], note:'精制碳水占比下降、膳食纤维上升，这对肠道环境是有益的调整。' },
      { n:'腹胀发生频次', v:'每周 4 次 → 1 次', col:'var(--dim-mind)', data:[82,70,58,48,38,30,22], note:'腹胀频次明显下降，说明你的消化负担在减轻。' },
      { n:'排便规律度', v:'不规律 → 基本规律', col:'var(--dim-action)', data:[24,32,44,56,68,78,86], note:'规律性改善通常与菌群多样性正相关，值得进一步了解原因。' }
    ];
    document.getElementById('d7-trend').innerHTML=trends.map(function(t){
      return '<div class="tb-row"><div class="tb-head"><span class="tb-name">'+t.n+'</span>'+
        '<span class="tb-val" style="color:'+t.col+'">'+t.v+'</span></div>'+
        '<div class="tb-spark">'+t.data.map(function(d,i){ return '<i class="'+(i===t.data.length-1?'last':'')+'" style="height:'+d+'%;background:'+(i===t.data.length-1?t.col:'')+'"></i>'; }).join('')+'</div>'+
        '<div class="tb-note">'+t.note+'</div></div>';
    }).join('');

    var finds=[
      { ic:'chart', c:'var(--brand)', t:'你的症状与饮食结构高度相关',
        obs:'你这 7 天里，饮食结构得分高的第 2、4、6 天，腹胀都没有出现；得分低的第 1、3 天，腹胀出现 2 次。',
        tip:'这个规律在很多人身上都成立。想知道自己肠道里到底发生了什么，检测能给你答案。' },
      { ic:'upload', c:'var(--dim-body)', t:'你的用药史可能影响菌群',
        obs:'你在问卷中提到近 3 个月使用过抑酸类药物。这类药物会改变消化道环境，也可能影响菌群检测结果的准确性。',
        tip:'这正是我们建议你先调 7 天再测的原因。你已经完成了大部分准备，只差最后一步。' },
      { ic:'smile', c:'var(--dim-mind)', t:'情绪与肠道互相牵连',
        obs:'你这 7 天里，情绪打卡与腹胀记录出现了 3 次同步波动。',
        tip:'肠道与情绪是双向影响的。菌群状况可能是这条链路的关键一环。' }
    ];
    document.getElementById('d7-finds').innerHTML=finds.map(function(f){
      return '<div class="find-card"><div class="fc-h">'+
        '<span class="fc-ic" style="background:'+f.c+'1a;color:'+f.c+'">'+svgUse(f.ic,16)+'</span>'+
        '<span class="fc-t">'+f.t+'</span></div>'+
        '<div class="fc-obs">'+f.obs+'</div>'+
        '<div class="fc-tip">'+f.tip+'</div></div>';
    }).join('');

    var checks=[
      { t:'停用益生菌 / 补剂', n:'第 2 天起完成', done:true },
      { t:'确认近 3 天无抗生素类药物', n:'请自行核对', done:false },
      { t:'饮食结构稳定', n:'精制碳水已降低', done:true },
      { t:'进餐时间规律', n:'连续 6 天固定', done:true },
      { t:'检测前 24 小时饮食清淡', n:'检测当天执行', done:false }
    ];
    document.getElementById('d7-checks').innerHTML=checks.map(function(c){
      return '<div class="chk-row '+(c.done?'done':'todo')+'">'+
        '<span class="ck-ic">'+(c.done?svgUse('check',13):svgUse('clock',13))+'</span>'+
        '<span class="ck-t">'+c.t+'</span><span class="ck-n">'+c.n+'</span></div>';
    }).join('');
  }
  function openQuiz(){
    qzState={ phase:'flag', i:0, flagPicks:[], modPicks:{}, active:[], done:false, result:null };
    BASIC={ gender:'', h:'', w:'', waist:'' };
    renderQuiz();
    pushScreen('quiz');
  }
  function openRisk(){ showRisk(); pushScreen('risk'); }
  function openPrep(){
    renderPrepPage();
    pushScreen('prep');
  }
  function openReport7(){
    renderD7();
    pushScreen('report7');
  }

  /* ===== 折线图（趋势） ===== */
  function buildLineChart(el, cfg, w, h) {
    var pad=8, maxV=100, minV=55;
    var n=cfg.labels.length, all=[];
    cfg.lines.forEach(function(l){ all=all.concat(l.data); });
    var hi=Math.max.apply(null, all), lo=Math.min.apply(null, all);
    hi=Math.min(100, Math.ceil((hi+4)/5)*5); lo=Math.max(0, Math.floor((lo-6)/5)*5);
    var svg='<svg viewBox="0 0 '+w+' '+h+'" width="100%" height="'+h+'" preserveAspectRatio="none" style="overflow:visible">';
    // 网格 + 标签
    for(var g=0; g<=3; g++){
      var gy=pad+g*((h-pad*2)/3);
      svg+='<line x1="0" y1="'+gy.toFixed(1)+'" x2="'+w+'" y2="'+gy.toFixed(1)+'" stroke="var(--line)" stroke-width="1"/>';
      svg+='<text x="0" y="'+(gy-4).toFixed(1)+'" font-size="9" fill="#B49A83">'+Math.round(hi-(hi-lo)*(g/3))+'</text>';
    }
    cfg.labels.forEach(function(l,i){
      var lx=pad+i*((w-pad*2)/(n-1));
      svg+='<text x="'+lx.toFixed(1)+'" y="'+(h-1)+'" font-size="9.5" fill="#B49A83" text-anchor="middle">'+l+'</text>';
    });
    function px(i){ return pad+i*((w-pad*2)/(n-1)); }
    function py(v){ return pad+(hi-v)/(hi-lo)*((h-pad*2)); }
    cfg.lines.forEach(function(l){
      var pts=l.data.map(function(v,i){ return px(i).toFixed(1)+','+py(v).toFixed(1); });
      var area=pts.join(' ')+','+px(n-1).toFixed(1)+','+h+','+px(0).toFixed(1)+','+h;
      svg+='<polygon points="'+area+'" fill="'+l.color+'" opacity="0.08"/>';
      svg+='<polyline points="'+pts.join(' ')+'" fill="none" stroke="'+l.color+'" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>';
      l.data.forEach(function(v,i){
        var last=(i===l.data.length-1);
        svg+='<circle cx="'+px(i).toFixed(1)+'" cy="'+py(v).toFixed(1)+'" r="'+(last?4:2.6)+'" fill="#fff" stroke="'+l.color+'" stroke-width="2"/>';
      });
    });
    svg+='</svg>';
    el.innerHTML=svg;
  }

  /* ===== 五维总览：雷达（含家人两轮对比） ===== */
  function buildRadarCompare(el, size) {
    var cx=size/2, cy=size/2, R=size/2-30, n=DIMS.length;
    function pt(i, ratio){
      var a=-Math.PI/2+i*2*Math.PI/n;
      return [cx+Math.cos(a)*R*ratio, cy+Math.sin(a)*R*ratio];
    }
    var svg='<svg width="'+size+'" height="'+size+'" viewBox="0 0 '+size+' '+size+'">';
    [0.25,0.5,0.75,1].forEach(function(r){
      var p=DIMS.map(function(d,i){ return pt(i,r).map(function(v){return v.toFixed(1)}).join(','); }).join(' ');
      svg+='<polygon points="'+p+'" fill="none" stroke="var(--line)" stroke-width="1"/>';
    });
    for(var i=0;i<n;i++){
      var e=pt(i,1);
      svg+='<line x1="'+cx+'" y1="'+cy+'" x2="'+e[0].toFixed(1)+'" y2="'+e[1].toFixed(1)+'" stroke="var(--line)" stroke-width="1"/>';
    }
    // 自家
    var mine=DIMS.map(function(d,i){ return pt(i, d.score/100).map(function(v){return v.toFixed(1)}).join(','); }).join(' ');
    svg+='<polygon points="'+mine+'" fill="rgba(249,115,22,0.18)" stroke="var(--brand)" stroke-width="2"/>';
    // 上周虚线
    var last=DIMS.map(function(d,i){ return pt(i, Math.max(0.05,(d.score-4)/100)).map(function(v){return v.toFixed(1)}).join(','); }).join(' ');
    svg+='<polygon points="'+last+'" fill="none" stroke="#B49A83" stroke-width="1.6" stroke-dasharray="4 3"/>';
    DIMS.forEach(function(d,i){
      var p=pt(i,d.score/100);
      svg+='<circle cx="'+p[0].toFixed(1)+'" cy="'+p[1].toFixed(1)+'" r="3.4" fill="#fff" stroke="'+d.color+'" stroke-width="2"/>';
    });
    DIMS.forEach(function(d,i){
      var lp=pt(i,1.24);
      svg+='<text x="'+lp[0].toFixed(1)+'" y="'+(lp[1]+4).toFixed(1)+'" font-size="11" font-weight="700" fill="'+d.color+'" text-anchor="middle">'+d.name+'</text>';
    });
    svg+='</svg>';
    el.innerHTML=svg;
  }

  /* ===== 渲染：五维总览 ===== */
  var ovRange='week';
  function renderOverview() {
    buildRadarCompare(document.getElementById('ov-radar'), 240);
    var avg=Math.round(DIMS.reduce(function(s,d){return s+d.score},0)/DIMS.length);
    document.getElementById('ov-n').textContent=avg;
    var lg='';
    DIMS.forEach(function(d){ lg+='<span class="ov-lg"><i style="background:'+d.color+'"></i>'+d.name+' '+d.score+'</span>'; });
    lg+='<span class="ov-lg"><i style="background:#B49A83"></i>上周</span>';
    document.getElementById('ov-legend').innerHTML=lg;
    setOvRange(ovRange, document.querySelector('#ov-trend-tabs .tt.on'));
  }
  function setOvRange(r, el) {
    ovRange=r;
    if (el) {
      document.querySelectorAll('#ov-trend-tabs .tt').forEach(function(t){ t.classList.remove('on'); });
      el.classList.add('on');
    }
    var cfg=TREND[r];
    buildLineChart(document.getElementById('ov-trend'), cfg, 320, 160);
    var lgd='';
    cfg.lines.forEach(function(l){ lgd+='<span class="tl"><i style="background:'+l.color+'"></i>'+l.name+'</span>'; });
    document.getElementById('ov-trend-legend').innerHTML=lgd;

    var cmp='';
    FAMILY.forEach(function(f){
      var w=f.score+'%';
      var lvl=f.score>=80?'优秀':(f.score>=70?'良好':'待提升');
      cmp+='<div class="cmp-row" onclick="openDim(\''+f.dim+'\')">'+
        '<div class="cmp-av" style="background:'+f.color+'">'+f.name.charAt(0)+'</div>'+
        '<div class="cmp-info"><div class="cmp-nm"><span class="cn">'+f.name+'</span><span class="cr">'+f.role+'</span></div>'+
        '<div class="cmp-bar"><div class="cf" style="width:'+w+';background:'+f.color+'"></div></div></div>'+
        '<div class="cmp-sc" style="color:'+f.color+'">'+f.score+'</div></div>';
    });
    document.getElementById('ov-cmp').innerHTML=cmp;

    var adv='';
    ADVICE.forEach(function(a){
      adv+='<div class="adv-card" onclick="toast(\'打开建议详情\')">'+
        '<div class="adv-ic" style="background:'+dimSoft(a.dim)+';color:'+dimColor(a.dim)+'">'+svgUse(a.icon,18)+'</div>'+
        '<div class="adv-tx"><div class="adv-t">'+a.t+'</div><div class="adv-s">'+a.s+'</div></div>'+
        '<div class="adv-pri" style="background:'+a.priSoft+';color:'+a.priColor+'">'+a.pri+'</div></div>';
    });
    document.getElementById('ov-adv').innerHTML=adv;
  }

  /* ===== 渲染：维度详情 ===== */
  function renderDim(code) {
    var d=dimByCode(code);
    var hero='<div class="dim-hero" style="background:linear-gradient(135deg,'+d.color+'22,'+d.soft+');color:'+d.color+'">'+
      '<div class="dh-top"><div class="dh-ic" style="background:'+d.color+';color:#fff">'+svgUse(code==='body'?'run':(code==='mind'?'smile':'bulb'),22)+'</div>'+
      '<div><div class="dh-nm">'+d.name+' · '+d.desc+'</div><div class="dh-ds">小宇 · 10 岁</div></div>'+
      '<div class="dh-sc"><div class="n">'+d.score+'</div><div class="l">当前评分</div></div></div>'+
      '<div class="sub-score">'+
      '<div class="ss"><div class="sl">较上月</div><div class="sv" style="color:'+d.color+'">+4<small>分</small></div></div>'+
      '<div class="ss"><div class="sl">同位段</div><div class="sv" style="color:'+d.color+'">前 30%<small></small></div></div>'+
      '</div></div>';
    document.getElementById('dim-hero-slot').innerHTML=hero;
    document.getElementById('dim-nav-title').textContent=d.name+' · '+d.desc;

    var m=DIM_METRICS[code]||DIM_METRICS.body;
    var mh='';
    m.forEach(function(x){
      mh+='<div class="metric-row"><div class="mi"><div class="mn">'+x.n+'<span class="tag-ref '+x.ref+'">'+(x.ref==='ok'?'正常':(x.ref==='mid'?'关注':'偏高'))+'</span></div><div class="mr">'+x.r+'</div></div>'+
        '<div class="mv" style="color:'+d.color+'">'+x.v+'<span style="font-size:var(--fs-xs);color:var(--ink-3);margin-left:2px">'+x.unit+'</span></div></div>';
    });
    document.getElementById('dim-metrics').innerHTML=mh;

    buildLineChart(document.getElementById('dim-trend'), {
      labels: TREND.week.labels,
      lines: [{ name:d.name, color:d.color, data:[d.score-6,d.score-4,d.score-5,d.score-2,d.score-1,d.score+1,d.score] }]
    }, 320, 140);

    var ah='';
    (DIM_ACTIONS[code]||DIM_ACTIONS.body).forEach(function(a){
      ah+='<div class="adv-card" onclick="completeAdv(this)">'+
        '<div class="adv-ic" style="background:'+dimSoft(code)+';color:'+a.c+'">'+svgUse(a.ic,18)+'</div>'+
        '<div class="adv-tx"><div class="adv-t">'+a.t+'</div><div class="adv-s">'+a.s+'</div></div>'+
        '<div style="align-self:center;width:22px;height:22px;border-radius:50%;border:1.8px solid '+d.color+';flex:none" class="adv-ck"></div></div>';
    });
    document.getElementById('dim-actions').innerHTML=ah;

    var rh='';
    (DIM_RECORDS[code]||DIM_RECORDS.body).forEach(function(r){
      rh+='<div class="row"><div class="rk" style="background:'+dimSoft(code)+';color:'+r.c+'">'+svgUse(r.ic,18)+'</div>'+
        '<div class="ri"><div class="rt">'+r.t+'</div><div class="rm">'+r.m+'</div></div></div>';
    });
    document.getElementById('dim-records').innerHTML=rh;
  }
  function completeAdv(card){
    var ck=card.querySelector('.adv-ck');
    if (!ck || ck.dataset.done) return;
    ck.dataset.done='1';
    ck.style.background='var(--ok)';
    ck.style.borderColor='var(--ok)';
    ck.innerHTML='<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>';
    toast('已完成 · 成长分 +10');
  }

  /* ===== 报告上传流程（状态机） ===== */
  var upState={ step:1, dim:'body', pct:0, timer:null };
  function openUpload(dim){
    upState.dim=dim||'body';
    upState.step=1;
    renderUpload();
    pushScreen('upload');
  }
  function closeUpload(){ pushScreen(null); }
  function renderUpload(){
    var labels=['选择','识别','确认','完成'];
    var h='';
    for (var i=0;i<4;i++){
      var cls= upState.step>i+1 ? 'done' : (upState.step===i+1 ? 'on' : '');
      h+='<div class="up-step '+cls+'"><div class="us-n">'+(upState.step>i+1?'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>':(i+1))+'</div><div class="us-t">'+labels[i]+'</div></div>';
      if(i<3) h+='<div class="up-step-line'+(upState.step>i+1?' done':'')+'"></div>';
    }
    document.getElementById('up-steps').innerHTML=h;

    ['pick','ocr','fix','done'].forEach(function(k,i){
      document.getElementById('up-step-'+k).style.display = (upState.step===i+1)?'block':'none';
    });

    var acts='';
    if (upState.step===1){
      acts='<button class="btn-primary" onclick="startOCR()">开始识别</button>'+
           '<button class="btn-ghost" onclick="closeUpload()">取消</button>';
    } else if (upState.step===2){
      acts='<button class="btn-primary" disabled>识别中…</button>';
    } else if (upState.step===3){
      acts='<button class="btn-primary" onclick="finishUpload()">确认并归档</button>'+
           '<button class="btn-ghost" onclick="backToPick()">重新选择</button>';
    } else {
      acts='<button class="btn-primary" onclick="closeUpload()">完成</button>';
    }
    document.getElementById('up-actions').innerHTML=acts;

    if (upState.step===1) renderPending();
    if (upState.step===2) renderOcrSteps();
    if (upState.step===3) renderFixList();
    if (upState.step===4) renderDoneList();
  }
  function renderPending(){
    document.getElementById('up-pending').innerHTML=
      '<div class="row"><div class="rk" style="background:var(--dim-action-soft);color:var(--ok)">'+svgUse('check',18)+'</div>'+
      '<div class="ri"><div class="rt">血常规_20260920.jpg</div><div class="rm">9-20 已解析 · 4 项指标</div></div>'+
      '<button class="pill-btn done" disabled>已归档</button></div>'+
      '<div class="row"><div class="rk" style="background:var(--brand-soft);color:var(--brand)">'+svgUse('upload',18)+'</div>'+
      '<div class="ri"><div class="rt">体检报告_20260928.jpg</div><div class="rm">刚刚选择 · 待识别</div></div>'+
      '<button class="pill-btn" onclick="startOCR()">识别</button></div>';
  }
  function renderOcrSteps(){
    var p=upState.pct, h='';
    var reached=Math.floor(p/100*OCR_STEPS.length);
    OCR_STEPS.forEach(function(s,i){
      var cls= p>=100 ? 'done' : (i===reached ? 'run' : '');
      var ic= p>=100
        ? '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5 11-11"/></svg>'
        : (i===reached ? '<svg class="spin" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M12 3a9 9 0 0 1 9 9" stroke-linecap="round"/></svg>' : '');
      h+='<div class="ocr-step '+cls+'"><div class="os-ic">'+ic+'</div><div class="os-t">'+s.t+'</div></div>';
    });
    document.getElementById('ocr-steps').innerHTML=h;
  }
  function startOCR(){
    upState.step=2; upState.pct=0; renderUpload();
    clearInterval(upState.timer);
    upState.timer=setInterval(function(){
      upState.pct=Math.min(100, upState.pct+4);
      document.getElementById('ocr-fill').style.width=upState.pct+'%';
      document.getElementById('ocr-pct').textContent=upState.pct+'%';
      renderOcrSteps();
      if (upState.pct>=100){
        clearInterval(upState.timer);
        setTimeout(function(){ upState.step=3; renderUpload(); toast('识别完成 · 请核对'); }, 420);
      }
    }, 90);
  }
  function backToPick(){
    clearInterval(upState.timer);
    upState.step=1; renderUpload();
  }
  function renderFixList(){
    var d=dimByCode(upState.dim), h='';
    FIX_FIELDS.forEach(function(f){
      h+='<div class="fix-row"><div class="fi"><div class="fn">'+f.n+(f.low?' <span class="low-conf">待确认</span>':'')+'</div>'+
        '<div class="fv" style="color:'+d.color+'">'+f.v+' <span style="font-size:var(--fs-sm);color:var(--ink-3)">'+f.u+'</span></div>'+
        (f.low?'<div class="fw">识别置信度较低，请核对</div>':'')+'</div>'+
        '<button class="pill-btn" style="padding:6px 12px" onclick="toast(\'编辑 '+f.n+'\')">修改</button></div>';
    });
    document.getElementById('up-fix-list').innerHTML=h;
  }
  function renderDoneList(){
    var d=dimByCode(upState.dim), h='';
    h+='<div class="row"><div class="rk" style="background:'+d.soft+';color:'+d.color+'">'+svgUse('upload',18)+'</div>'+
      '<div class="ri"><div class="rt">体检报告_20260928.jpg</div><div class="rm">刚刚 · 6 项指标</div></div>'+
      '<span class="tag-ref ok">已归档</span></div>';
    FIX_FIELDS.forEach(function(f){
      h+='<div class="row"><div class="rk" style="background:var(--bg-soft);color:var(--ink-2)">'+svgUse(f.u==='mmHg'||f.u==='bpm'?'heart':'check',16)+'</div>'+
        '<div class="ri"><div class="rt" style="font-size:var(--fs-base);font-weight:500">'+f.n+'</div></div>'+
        '<div style="font-weight:800;color:'+d.color+'">'+f.v+'<span style="font-size:var(--fs-xs);color:var(--ink-3);margin-left:2px">'+f.u+'</span></div></div>';
    });
    document.getElementById('up-done-list').innerHTML=h;
  }
  function finishUpload(){
    clearInterval(upState.timer);
    upState.step=4; renderUpload();
    toast('归档成功 · 身维度 +3 分');
  }

  /* ===== 渲染：成长报告与分享 ===== */
  var rptRange='week';
  function setRptRange(r, el){
    rptRange=r;
    if (el){
      document.querySelectorAll('#rpt-tabs .rtt').forEach(function(t){ t.classList.remove('on'); });
      el.classList.add('on');
    }
    renderReport();
  }
  function renderReport(){
    var isWeek=rptRange==='week';
    var title=isWeek?'本周成长报告':'本月成长报告';
    var sub=isWeek?'9-22 至 9-28 · 全家共同成长':'9 月 · 全家共同成长';
    var dims='';
    DIMS.forEach(function(d){
      var s=isWeek?d.score:Math.max(40,d.score-4);
      dims+='<div class="sc-dim"><div class="sd-n" style="color:'+d.color+'">'+s+'</div><div class="sd-l">'+d.name+'</div></div>';
    });
    var unlockedN=BADGES.filter(function(b){return !b.locked;}).length;
    var card='<div class="share-card hero-share">'+
      '<div class="sc-brand"><div class="scb-ic"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l2.4 6.3L21 9.3l-5 4.4L17.5 21 12 17l-5.5 4L8 13.7l-5-4.4 6.6-1z"/></svg></div>'+
      '<div class="scb-tx">浠艾福 · Care Family</div>'+
      '<div class="sc-streak" style="margin-left:auto">'+svgUse('flame',13)+' 连续 '+growthState.streak+' 天</div></div>'+
      '<div class="sc-title">'+title+'</div>'+
      '<div class="sc-sub">'+sub+'</div>'+
      '<div class="sc-dims">'+dims+'</div>'+
      '<div class="sc-ach">'+
      '<div class="sc-ach-item"><div class="n">'+growthState.baseTasks+'</div><div class="l">完成任务</div></div>'+
      '<div class="sc-ach-item"><div class="n">'+growthState.pts.toLocaleString()+'</div><div class="l">成长分</div></div>'+
      '<div class="sc-ach-item"><div class="n">'+unlockedN+'</div><div class="l">获得徽章</div></div>'+
      '</div>'+
      '<div class="sc-foot"><div class="sf-l">成果分享 · 邀请朋友们一起看</div><div class="sf-r">综合 '+(isWeek?76:72)+' 分 ↑</div></div>'+
      '</div>';
    document.getElementById('rpt-card-slot').innerHTML=card;

    document.getElementById('rpt-share').innerHTML=
      '<div class="sa pri" onclick="toast(\'已保存到相册，可直接分享\')">'+svgUse('upload',18)+'保存图片</div>'+
      '<div class="sa sec" onclick="toast(\'发送给朋友一起看成果\')">'+svgUse('people',18)+'发送给朋友</div>';

    var bh='';
    BADGES.forEach(function(b){
      bh+='<div class="bg-item'+(b.locked?' locked':'')+'" onclick="toast(\''+(b.locked?'尚未解锁：'+b.d:b.n+' 已获得')+'\')">'+
        (b.locked?'<div class="bg-lock">'+svgUse('target',14)+'</div>':'')+
        '<div class="bg-ring" style="background:linear-gradient(135deg,'+b.c+','+b.c+'99)">'+svgUse(b.ic,24)+'</div>'+
        '<div class="bg-nm">'+b.n+'</div><div class="bg-dt">'+b.d+'</div></div>';
    });
    document.getElementById('rpt-badges').innerHTML=bh;
    // 首次进入报告页：若已解锁全勤，播放徽章解锁动画
    if (growthState.unlocked){
      var lastItem=document.querySelector('#rpt-badges .bg-item:not(.locked):last-child');
      if (lastItem){ lastItem.classList.add('just-unlocked'); }
    }

    var hl=[
      { ic:'check', c:'var(--dim-body)', t:'<b>小宇</b> 运动打卡 4 次达标', m:'本周' },
      { ic:'book', c:'var(--dim-wisdom)', t:'<b>小柚</b> 亲子共读累计 14 天', m:'进行中' },
      { ic:'heart', c:'var(--dim-mind)', t:'<b>爷爷</b> 连续 7 天完成情绪打卡', m:'连续 7 天' }
    ];
    var h='';
    hl.forEach(function(x){
      h+='<div class="feed-item"><div class="feed-dot" style="background:'+x.c+'22;color:'+x.c+'">'+svgUse(x.ic,16)+'</div>'+
        '<div style="flex:1;min-width:0"><div class="fi-t">'+x.t+'</div><div class="fi-time">'+x.m+'</div></div></div>';
    });
    document.getElementById('rpt-highlights').innerHTML=h;
  }

  /* ===== 交互 ===== */
  var currentTab='home';
  function setTab(tab){
    currentTab=tab;
    if (tab==='login') return;
    taskStack=[];
    TASK_SCREENS.forEach(function(s){
      var el=document.getElementById('screen-'+s);
      if (el) el.classList.remove('active');
    });
    document.querySelectorAll('.screen').forEach(function(s){
      if (s.id==='screen-'+tab){ s.classList.add('active'); } else { s.classList.remove('active'); }
    });
    document.getElementById('tabbar').style.display = (state.loggedIn) ? 'flex' : 'none';
    document.querySelectorAll('.tabbar .tab').forEach(function(t){ t.classList.toggle('on', t.dataset.tab===tab); });
    if (tab==='home') renderHome();
    if (tab==='health') renderHealth();
    if (tab==='growth') renderGrowth();
    if (tab==='profile') renderProfile();
  }
  function openDim(){ document.getElementById('dim-mask').classList.add('show'); document.getElementById('dim-sheet').classList.add('show'); }
  function closeDim(){ document.getElementById('dim-mask').classList.remove('show'); document.getElementById('dim-sheet').classList.remove('show'); }

  /* ===== 二级页栈（Task 页：五维总览 / 维度详情 / 上传 / 报告） ===== */
  var taskStack=[];
  var TASK_SCREENS=['overview','dim','upload','report','quiz','risk','prep','report7'];
  function pushScreen(name){
    TASK_SCREENS.forEach(function(s){
      var el=document.getElementById('screen-'+s);
      if (el) el.classList.remove('active');
    });
    if (name) taskStack.push(name);
    if (name){
      var el=document.getElementById('screen-'+name);
      if (el) el.classList.add('active');
    }
    // 二级页隐藏 TabBar
    document.getElementById('tabbar').style.display = name ? 'none' : (state.loggedIn?'flex':'none');
    if (!name && state.loggedIn) setTab(currentTab);
  }
  function backTo(tab){
    taskStack=[];
    pushScreen(null);
    if (tab) setTab(tab);
  }
  function openDimDetail(code){
    renderDim(code);
    pushScreen('dim');
  }
  function openOverview(){
    renderOverview();
    pushScreen('overview');
  }
  function openReport(){
    setRptRange(rptRange, document.querySelector('#rpt-tabs .rtt.on'));
    pushScreen('report');
  }

  function switchMember(m){
    document.querySelectorAll('.mchip').forEach(function(c){ c.classList.toggle('on', c.dataset.member===m); });
    toast(m==='me'?'已切换到：我':'已切换到：小宇');
  }
  function completeTask(btn){
    if (btn.dataset.done) return;
    btn.dataset.done='1';
    btn.textContent='已得 ✓'; btn.classList.add('done'); btn.disabled=true;
    // 成果驱动：累加成长分 + 连续打卡
    growthState.pts += 10;
    growthState.streak += 1;
    growthState.baseTasks += 1;
    if (currentTab==='growth') renderAchievementHero();
    toast('获得成长分 +10 · 连续打卡 '+growthState.streak+' 天');
  }
  function setHealthSeg(seg, el){
    document.querySelectorAll('.seg .sg').forEach(function(s){ s.classList.remove('on'); });
    el.classList.add('on');
    renderHealth();
    toast('切换到：'+el.textContent);
  }
  var toastTimer;
  function toast(msg){
    var t=document.getElementById('toast'); t.textContent=msg; t.classList.add('show');
    clearTimeout(toastTimer); toastTimer=setTimeout(function(){ t.classList.remove('show'); }, 1600);
  }

  /* 登录态切换（演示） */
  var state={ loggedIn:true };
  function applyLogin(){
    document.getElementById('db-in').classList.toggle('on', state.loggedIn);
    document.getElementById('db-out').classList.toggle('on', !state.loggedIn);
    document.getElementById('tabbar').style.display = state.loggedIn ? 'flex' : 'none';
    ['home','health','growth','profile'].forEach(function(t){ document.getElementById('screen-'+t).style.display = state.loggedIn? 'block':'none'; });
    document.getElementById('screen-login').style.display = state.loggedIn? 'none':'block';
    document.getElementById('screen-login').classList.toggle('active', !state.loggedIn);
    if (state.loggedIn){ setTab(currentTab); }
  }
  function demoLogin(){ state.loggedIn=true; applyLogin(); toast('欢迎回来，林晓'); }
  document.getElementById('db-in').onclick=function(){ state.loggedIn=true; applyLogin(); };
  document.getElementById('db-out').onclick=function(){ state.loggedIn=false; applyLogin(); };

  /* ===== SVG 图标精灵（内联，替代 emoji） ===== */
  var SPRITE = {
    check:'<polyline points="4 12 9 17 20 6"/>',
    star:'<polygon points="12 3 14.5 9.5 21 10 16 14.5 17.5 21 12 17.5 6.5 21 8 14.5 3 10 9.5 9.5"/>',
    heart:'<path d="M12 20s-7-4.4-7-9.5A4 4 0 0 1 12 7a4 4 0 0 1 7 3.5C19 15.6 12 20 12 20z"/>',
    target:'<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/>',
    bulb:'<path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z"/>',
    coin:'<circle cx="12" cy="12" r="9"/><path d="M12 7v10M9.5 9.5h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4"/>',
    flame:'<path d="M12 3c1 3-2 4-2 7a2 2 0 0 0 4 0c0-1 0-1 .5-2 1.5 2 2.5 3.5 2.5 6a5 5 0 0 1-10 0c0-4 3-6 5-11z"/>',
    gift:'<rect x="3" y="8" width="18" height="13" rx="2"/><path d="M3 12h18M12 8v13"/><path d="M12 8C10 8 8 6 9 4.5 10.5 4 12 6 12 8zM12 8c2 0 4-2 3-3.5C13.5 4 12 6 12 8z"/>',
    medal:'<circle cx="12" cy="9" r="6"/><path d="M9 14l-2 7 5-3 5 3-2-7"/>',
    book:'<path d="M4 5a2 2 0 0 1 2-2h12v16H6a2 2 0 0 0-2 2z"/><path d="M4 19a2 2 0 0 1 2-2h12"/>',
    upload:'<path d="M12 16V4M7 9l5-5 5 5"/><path d="M4 20h16"/>',
    target2:'',
    diet:'<path d="M5 3v8a3 3 0 0 0 6 0V3M8 3v18M16 3c-1.5 0-2 2-2 4s.5 4 2 4 2-2 2-4-.5-4-2-4zM16 11v10"/>',
    run:'<circle cx="15" cy="5" r="2"/><path d="M13 21l2-5-3-2-2 3M15 14l3 2 1 4M13 11l3 1 2-1"/>',
    moon:'<path d="M20 14a8 8 0 1 1-9-11 6 6 0 0 0 9 11z"/>',
    smile:'<circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><path d="M9 9h.01M15 9h.01"/>',
    people:'<circle cx="9" cy="8" r="3"/><path d="M3 20c0-3 2.5-5 6-5s6 2 6 5"/><path d="M16 6a3 3 0 0 1 0 6M21 20c0-2.5-1.5-4-4-4.5"/>',
    share:'<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/>',
    cam:'<path d="M4 8h3l2-3h6l2 3h3v11H4z"/><circle cx="12" cy="13" r="3.4"/>',
    chart:'<path d="M3 17l5-5 4 4 8-8"/><path d="M16 8h4v4"/>',
    leaf:'<path d="M5 19c0-8 6-13 14-14 0 9-5 14-13 14z"/><path d="M5 19c3-4 6-6 10-7"/>',
    clock:'<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
    alert:'<path d="M12 3l9 16H3z"/><path d="M12 10v4M12 17h.01"/>',
    shield:'<path d="M12 3l8 3v6c0 5-3.5 8.5-8 9.5-4.5-1-8-4.5-8-9.5V6z"/><path d="M9 12l2 2 4-4"/>'
  };
  (function injectSprite(){
    var defs='';
    for (var k in SPRITE){ defs+='<symbol id="i-'+k+'" viewBox="0 0 24 24">'+SPRITE[k]+'</symbol>'; }
    var s=document.createElementNS('http://www.w3.org/2000/svg','svg');
    s.setAttribute('style','display:none'); s.innerHTML=defs;
    document.body.appendChild(s);
  })();

  /* 时钟 */
  function tick(){ var d=new Date(); document.getElementById('clock').textContent = d.getHours()+':'+String(d.getMinutes()).padStart(2,'0'); }
  tick(); setInterval(tick, 30000);

  /* 闪屏（还原 flash 页：2s 自动进入，轻触可跳过） */
  function hideSplash(){
    clearTimeout(splashTimer);
    var s=document.getElementById('splash');
    if (s) s.classList.add('hide');
  }
  var splashTimer = setTimeout(hideSplash, 2000);

  /* 初始化 */
  renderHome(); renderHealth(); renderGrowth(); renderProfile(); renderDimSheet();
  renderOverview(); setRptRange('week', document.querySelector('#rpt-tabs .rtt.on'));
  renderUpload(); renderPrepPage(); renderD7();
  applyLogin();
</script>
</body>
</html>