0235561
/
cloth-color11


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123612461256126612761286129613061316132613361346135613661376138613961406141614261436144614561466147614861496150615161526153615461556156615761586159616061616162616361646165616661676168616961706171617261736174617561766177617861796180618161826183618461856186618761886189619061916192619361946195619661976198619962006201620262036204620562066207620862096210621162126213621462156216621762186219622062216222622362246225622662276228622962306231623262336234623562366237623862396240624162426243624462456246624762486249625062516252625362546255625662576258625962606261626262636264626562666267626862696270627162726273627462756276627762786279628062816282628362846285628662876288628962906291629262936294629562966297629862996300630163026303630463056306630763086309631063116312631363146315631663176318631963206321632263236324632563266327632863296330633163326333633463356336633763386339634063416342634363446345634663476348634963506351635263536354635563566357635863596360636163626363636463656366636763686369637063716372637363746375637663776378637963806381638263836384638563866387638863896390639163926393639463956396639763986399640064016402640364046405640664076408640964106411641264136414641564166417641864196420642164226423642464256426642764286429643064316432643364346435643664376438643964406441644264436444644564466447644864496450645164526453645464556456645764586459646064616462646364646465646664676468646964706471647264736474647564766477647864796480648164826483648464856486648764886489649064916492649364946495649664976498649965006501650265036504650565066507650865096510651165126513651465156516651765186519652065216522652365246525652665276528652965306531653265336534653565366537653865396540654165426543654465456546654765486549655065516552655365546555655665576558655965606561656265636564656565666567656865696570657165726573657465756576657765786579658065816582658365846585658665876588658965906591659265936594659565966597659865996600660166026603660466056606660766086609661066116612661366146615661666176618661966206621662266236624662566266627662866296630663166326633663466356636663766386639664066416642664366446645664666476648664966506651665266536654665566566657665866596660666166626663666466656666666766686669667066716672667366746675667666776678667966806681668266836684668566866687668866896690669166926693669466956696669766986699670067016702670367046705670667076708670967106711671267136714671567166717671867196720672167226723672467256726672767286729673067316732673367346735673667376738673967406741674267436744674567466747674867496750675167526753675467556756675767586759676067616762676367646765676667676768676967706771677267736774677567766777677867796780678167826783678467856786678767886789679067916792679367946795679667976798679968006801680268036804680568066807680868096810681168126813681468156816681768186819682068216822682368246825682668276828682968306831683268336834683568366837683868396840684168426843684468456846684768486849685068516852685368546855685668576858685968606861686268636864686568666867686868696870687168726873687468756876687768786879688068816882688368846885688668876888688968906891689268936894689568966897689868996900690169026903690469056906690769086909691069116912691369146915691669176918691969206921692269236924692569266927692869296930693169326933693469356936693769386939694069416942694369446945694669476948694969506951695269536954695569566957695869596960696169626963696469656966696769686969697069716972697369746975697669776978697969806981698269836984698569866987698869896990699169926993699469956996699769986999700070017002700370047005700670077008700970107011701270137014701570167017701870197020702170227023702470257026702770287029703070317032703370347035703670377038703970407041704270437044704570467047704870497050705170527053705470557056705770587059706070617062706370647065706670677068706970707071707270737074707570767077707870797080708170827083708470857086708770887089709070917092709370947095709670977098709971007101710271037104710571067107710871097110711171127113711471157116711771187119712071217122712371247125712671277128712971307131713271337134713571367137713871397140714171427143714471457146714771487149715071517152715371547155715671577158715971607161716271637164716571667167716871697170717171727173717471757176717771787179718071817182718371847185718671877188718971907191719271937194719571967197719871997200720172027203720472057206720772087209721072117212721372147215721672177218721972207221722272237224722572267227722872297230723172327233723472357236723772387239724072417242724372447245724672477248724972507251725272537254725572567257725872597260726172627263726472657266726772687269727072717272727372747275727672777278727972807281728272837284728572867287728872897290729172927293729472957296729772987299730073017302730373047305730673077308730973107311731273137314731573167317731873197320732173227323732473257326732773287329733073317332733373347335733673377338733973407341734273437344734573467347734873497350735173527353735473557356735773587359736073617362736373647365736673677368736973707371737273737374737573767377737873797380738173827383738473857386738773887389739073917392739373947395739673977398739974007401740274037404740574067407740874097410741174127413
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FashionCraft - 服装DIY设计</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        /* 容器样式 */
        .app-container {
            max-width: 414px;
            margin: 0 auto;
            background: #fff;
            min-height: 100vh;
            box-shadow: 0 0 30px rgba(0,0,0,0.3);
            overflow: hidden;
            position: relative;
        }

        /* 头部导航 */
        .header {
            background: linear-gradient(45deg, #ff6b6b, #ffa726);
            padding: 20px 20px 15px;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="white" opacity="0.1"/><circle cx="80" cy="80" r="1" fill="white" opacity="0.1"/><circle cx="40" cy="60" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            animation: float 20s infinite linear;
        }

        @keyframes float {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .header-content {
            position: relative;
            z-index: 2;
        }

        .header h1 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 5px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            opacity: 0.9;
            font-size: 14px;
        }

        /* 主要内容区域 */
        .main-content {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 80px;
        }

        /* 轮播区域 */
        .banner-section {
            position: relative;
            height: 200px;
            overflow: hidden;
            margin: 20px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        .banner-slider {
            display: flex;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            height: 100%;
        }

        .banner-slide {
            min-width: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            font-weight: 600;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        
        .banner-slide:hover {
            transform: scale(0.98);
        }

        .banner-slide::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:rgba(255,255,255,0.1)"/><stop offset="100%" style="stop-color:rgba(255,255,255,0)"/></linearGradient></defs><polygon points="0,0 100,0 0,100" fill="url(%23grad)"/></svg>');
            pointer-events: none;
        }

        .banner-indicators {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
        }

        .indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .indicator.active {
            background: white;
            transform: scale(1.2);
        }

        /* 快速设计入口 */
        .quick-design {
            margin: 20px;
            padding: 25px;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 8px 25px rgba(255, 154, 158, 0.4);
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .quick-design:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(255, 154, 158, 0.6);
        }

        .quick-design::before {
            content: '✨';
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 24px;
            animation: sparkle 2s infinite;
        }

        @keyframes sparkle {
            0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
            50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
        }

        .quick-design h2 {
            font-size: 22px;
            color: #fff;
            margin-bottom: 8px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .quick-design p {
            color: rgba(255,255,255,0.9);
            font-size: 14px;
        }

        /* 热门作品区 */
        .popular-works {
            margin: 20px;
        }

        .section-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 15px;
            color: #333;
            position: relative;
            padding-left: 15px;
        }

        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 20px;
            background: linear-gradient(45deg, #ff6b6b, #ffa726);
            border-radius: 2px;
        }

        .works-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .work-item {
            background: #fff;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }

        .work-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        }

        .work-image {
            height: 120px;
            background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
        }

        .work-info {
            padding: 12px;
        }

        .work-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
            color: #333;
        }

        .work-stats {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
        }

        /* AI推荐引擎样式 */
        .ai-recommend-engine {
            margin: 20px;
        }

        .ai-engine-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px;
            padding: 25px;
            color: white;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        }

        .ai-engine-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .ai-brand {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .ai-logo {
            font-size: 32px;
            animation: pulse 2s infinite;
        }

        .ai-brand-text h3 {
            font-size: 20px;
            margin: 0 0 4px 0;
            font-weight: 700;
        }

        .ai-brand-text p {
            font-size: 14px;
            opacity: 0.9;
            margin: 0;
        }

        .ai-status {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            opacity: 0.9;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background: #4ade80;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        .ai-quick-actions {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }

        .quick-action {
            background: rgba(255,255,255,0.15);
            border-radius: 15px;
            padding: 15px 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            min-height: 50px;
            text-align: left;
        }

        .quick-action:hover {
            background: rgba(255,255,255,0.25);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255,255,255,0.1);
        }

        .action-icon {
            font-size: 20px;
        }

        .action-text {
            font-size: 14px;
            font-weight: 500;
        }


        /* AI悬浮球样式 */
        .ai-floating-ball {
            position: fixed;
            bottom: 90px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 999;
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
            transition: all 0.3s ease;
        }

        .ai-floating-ball:hover {
            transform: scale(1.1);
            box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
        }

        .floating-ball-icon {
            font-size: 24px;
            color: white;
            z-index: 2;
            position: relative;
        }

        .breathing-ring {
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border: 2px solid rgba(102, 126, 234, 0.6);
            border-radius: 50%;
            animation: breathing 2s ease-in-out infinite;
        }

        @keyframes breathing {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.7;
            }
        }

        /* AI全屏对话界面样式 */
        .ai-chat-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.95);
            backdrop-filter: blur(10px);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease;
        }

        .ai-chat-container {
            width: 100%;
            max-width: 414px;
            height: 100%;
            background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .ai-chat-header {
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            border-bottom: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
        }

        .ai-chat-avatar {
            position: relative;
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .avatar-icon {
            font-size: 24px;
            color: white;
        }

        .avatar-status {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 12px;
            height: 12px;
            background: #4ade80;
            border: 2px solid white;
            border-radius: 50%;
        }

        .ai-chat-info {
            flex: 1;
            color: white;
        }

        .ai-chat-info h3 {
            font-size: 18px;
            margin: 0 0 4px 0;
            font-weight: 600;
        }

        .ai-chat-info p {
            font-size: 14px;
            margin: 0;
            opacity: 0.9;
        }

        .ai-chat-close {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.2);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .ai-chat-close:hover {
            background: rgba(255,255,255,0.3);
        }

        .ai-chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .ai-message {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .user-message {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            flex-direction: row-reverse;
        }

        .message-avatar {
            width: 35px;
            height: 35px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }

        .user-message .message-avatar {
            background: rgba(255,255,255,0.9);
        }

        .message-content {
            flex: 1;
            max-width: 80%;
        }

        .message-text {
            background: rgba(255,255,255,0.15);
            padding: 12px 16px;
            border-radius: 18px;
            color: white;
            font-size: 14px;
            line-height: 1.5;
            backdrop-filter: blur(10px);
        }

        .user-message .message-text {
            background: rgba(255,255,255,0.9);
            color: #333;
        }

        .message-time {
            font-size: 11px;
            color: rgba(255,255,255,0.7);
            margin-top: 4px;
            padding-left: 16px;
        }

        .user-message .message-time {
            color: rgba(0,0,0,0.5);
            text-align: right;
            padding-left: 0;
            padding-right: 16px;
        }

        .ai-quick-commands {
            padding: 15px 20px;
            display: flex;
            gap: 10px;
            overflow-x: auto;
            background: rgba(255,255,255,0.05);
        }

        .quick-command {
            min-width: 120px;
            background: rgba(255,255,255,0.1);
            border-radius: 20px;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
            font-size: 13px;
        }

        .quick-command:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-2px);
        }

        .command-icon {
            font-size: 16px;
        }

        .ai-chat-input-area {
            padding: 20px;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
        }

        .input-toolbar {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
        }

        .input-tool {
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2px;
            outline: none;
            background: none;
            border: none;
        }

        .input-tool:hover {
            transform: scale(1.1);
        }

        .input-tool:focus {
            outline: none;
        }

        .tool-icon {
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
        }

        .input-container {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .input-container input {
            flex: 1;
            background: rgba(255,255,255,0.9);
            border: none;
            border-radius: 25px;
            padding: 12px 20px;
            font-size: 14px;
            outline: none;
            color: #333;
        }

        .input-container input::placeholder {
            color: #999;
        }

        .send-button {
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, #ff6b6b, #ffa726);
            border: none;
            border-radius: 50%;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .send-button:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
        }

        .send-icon {
            font-size: 18px;
        }

        /* AI推荐结果页面样式 */
        .ai-recommendation-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.95);
            backdrop-filter: blur(10px);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease;
        }

        .recommendation-container {
            width: 100%;
            max-width: 414px;
            height: 100%;
            background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }

        .recommendation-header {
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .recommendation-header h2 {
            font-size: 20px;
            margin: 0;
            font-weight: 600;
        }

        .close-recommendation {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.2);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .close-recommendation:hover {
            background: rgba(255,255,255,0.3);
        }

        .recommendation-content {
            flex: 1;
            padding: 20px;
        }

        .recommendation-3d-section {
            background: white;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .recommendation-3d-viewer {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 15px;
            height: 250px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .model-3d-container {
            text-align: center;
            color: white;
        }

        .model-3d-display {
            font-size: 80px;
            margin-bottom: 15px;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .model-controls {
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        .model-control {
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.2);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .model-control:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.05);
        }

        .scheme-selector h4 {
            font-size: 16px;
            margin-bottom: 15px;
            color: #333;
        }

        .scheme-tabs {
            display: flex;
            gap: 10px;
        }

        .scheme-tab {
            flex: 1;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: 500;
        }

        .scheme-tab.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .color-theory-section {
            background: white;
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .color-theory-section h4 {
            font-size: 18px;
            margin-bottom: 20px;
            color: #333;
        }

        .theory-content {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .theory-card {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 15px;
        }

        .theory-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .theory-text h5 {
            font-size: 16px;
            margin: 0 0 8px 0;
            color: #333;
            font-weight: 600;
        }

        .theory-text p {
            font-size: 14px;
            color: #666;
            margin: 0;
            line-height: 1.5;
        }

        .recommendation-actions {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }

        .action-btn {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 15px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .action-btn.primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .action-btn.secondary {
            background: #f8f9fa;
            color: #666;
            border: 1px solid #e9ecef;
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .btn-icon {
            font-size: 16px;
        }

        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 414px;
            max-width: 100%;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            z-index: 100;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 8px;
            border-radius: 12px;
            min-width: 60px;
        }

        .nav-item.active {
            background: linear-gradient(135deg, #ff6b6b, #ffa726);
            color: white;
        }

        .nav-item:not(.active):hover {
            background: rgba(0,0,0,0.05);
        }

        .nav-icon {
            font-size: 20px;
        }

        .nav-text {
            font-size: 10px;
            font-weight: 500;
        }

        /* 上传按钮特殊样式 */
        .upload-btn {
            position: relative;
            background: linear-gradient(135deg, #ff6b6b, #ffa726) !important;
            color: white !important;
            border-radius: 50%;
            width: 56px;
            height: 56px;
            margin-top: -20px;
            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
        }

        .upload-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 35px rgba(255, 107, 107, 0.6);
        }

        .upload-icon {
            font-size: 28px;
            font-weight: bold;
        }

        /* 模态框样式 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(10px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal-content {
            background: white;
            border-radius: 25px;
            padding: 30px;
            margin: 20px;
            max-width: 350px;
            width: 100%;
            text-align: center;
            transform: scale(0.9);
            animation: modalPop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        @keyframes modalPop {
            to { transform: scale(1); }
        }

        .modal h3 {
            font-size: 24px;
            margin-bottom: 15px;
            color: #333;
        }

        .modal p {
            color: #666;
            margin-bottom: 25px;
            line-height: 1.5;
        }

        .modal-actions {
            display: flex;
            gap: 12px;
        }

        .btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: linear-gradient(45deg, #ff6b6b, #ffa726);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
        }

        .btn-secondary {
            background: #f8f9fa;
            color: #666;
        }

        .btn-secondary:hover {
            background: #e9ecef;
        }

        /* 设置模态框样式 */
        .settings-modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(5px);
            animation: fadeIn 0.3s ease;
        }

        .settings-modal-content {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 480px;
            max-height: 85vh;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
            to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        }

        .settings-header {
            background: linear-gradient(45deg, #ff6b6b, #ffa726);
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .settings-header h2 {
            font-size: 20px;
            font-weight: 600;
            margin: 0;
        }

        .close-btn {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s ease;
        }

        .close-btn:hover {
            background: rgba(255,255,255,0.2);
        }

        .settings-body {
            padding: 0;
            max-height: 60vh;
            overflow-y: auto;
        }

        .settings-section {
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
        }

        .settings-section:last-child {
            border-bottom: none;
        }

        .settings-section h3 {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin: 0 0 15px 0;
        }

        /* 个人资料样式 */
        .profile-info {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .profile-avatar {
            display: flex;
            justify-content: center;
        }

        .avatar-circle {
            position: relative;
            cursor: pointer;
        }

        .avatar-circle img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 3px solid #ff6b6b;
        }

        .avatar-edit {
            position: absolute;
            bottom: 0;
            right: 0;
            background: #ff6b6b;
            color: white;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            border: 2px solid white;
        }

        .profile-details .form-group {
            margin-bottom: 15px;
        }

        .profile-details label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: #555;
            margin-bottom: 5px;
        }

        .profile-details input,
        .profile-details textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            transition: border-color 0.3s ease;
            box-sizing: border-box;
        }

        .profile-details input:focus,
        .profile-details textarea:focus {
            outline: none;
            border-color: #ff6b6b;
        }

        .profile-details textarea {
            resize: vertical;
            min-height: 60px;
        }

        /* 安全设置样式 */
        .security-items {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .security-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .security-item:hover {
            background: #e9ecef;
        }

        .security-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .security-icon {
            font-size: 20px;
        }

        .security-title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }

        .security-desc {
            font-size: 12px;
            color: #666;
            margin-top: 2px;
        }

        .arrow {
            color: #999;
            font-size: 16px;
        }

        /* 隐私设置样式 */
        .privacy-items {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .privacy-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .privacy-left {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
        }

        .privacy-icon {
            font-size: 18px;
        }

        .privacy-title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }

        .privacy-desc {
            font-size: 12px;
            color: #666;
            margin-top: 2px;
        }

        .privacy-select {
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 12px;
            background: white;
        }

        /* 开关样式 */
        .switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.3s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #ff6b6b;
        }

        input:checked + .slider:before {
            transform: translateX(20px);
        }

        /* 应用设置样式 */
        .app-items {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .app-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .app-item:hover {
            background: #e9ecef;
        }

        .app-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .app-icon {
            font-size: 18px;
        }

        .app-title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }

        .app-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .version,
        .cache-size {
            font-size: 12px;
            color: #666;
        }

        /* 设置底部 */
        .settings-footer {
            padding: 20px;
            background: #f8f9fa;
            display: flex;
            gap: 12px;
        }

        .save-btn {
            flex: 1;
            padding: 12px;
            background: linear-gradient(45deg, #ff6b6b, #ffa726);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .save-btn:hover {
            transform: translateY(-1px);
        }

        .logout-btn {
            flex: 1;
            padding: 12px;
            background: #dc3545;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .logout-btn:hover {
            background: #c82333;
        }

        /* 新版设计中心样式 */
        .design-preview-system {
            margin: 20px;
            margin-bottom: 25px;
        }

        .preview-container {
            background: white;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.1);
            position: relative;
        }

        .preview-3d-enhanced {
            position: relative;
            height: 280px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 15px;
            overflow: hidden;
            margin-bottom: 15px;
        }

        .model-3d-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #main3DModel {
            font-size: 100px;
            color: white;
            z-index: 2;
            position: relative;
            animation: float 6s ease-in-out infinite;
            transition: all 0.5s ease;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(5deg); }
        }

        .model-highlights {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 3;
        }

        .preview-controls {
            position: absolute;
            bottom: 15px;
            right: 15px;
            z-index: 4;
        }

        .control-group {
            display: flex;
            gap: 8px;
        }

        .control-btn {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.9);
            border: none;
            cursor: pointer;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .control-btn:hover {
            background: white;
            transform: scale(1.1);
        }


        /* 3D分区控制面板样式 */
        .zone-control-panel {
            margin: 20px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .panel-header {
            background: linear-gradient(45deg, #ff6b6b, #ffa726);
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .panel-header h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
        }

        .expand-btn {
            background: none;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .expand-btn:hover {
            transform: scale(1.1);
        }

        .panel-content {
            padding: 20px;
        }

        /* 部位选择器（胶囊式Tab）样式 */
        .body-part-selector {
            margin-bottom: 25px;
        }

        .part-tabs {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .part-tab {
            background: #f8f9fa;
            border: 2px solid transparent;
            border-radius: 25px;
            padding: 10px 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 1;
            min-width: 70px;
            justify-content: center;
        }

        .part-tab:hover {
            background: rgba(255, 107, 107, 0.1);
            border-color: rgba(255, 107, 107, 0.3);
        }

        .part-tab.active {
            background: linear-gradient(45deg, #ff6b6b, #ffa726);
            color: white;
            border-color: #ff6b6b;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
        }

        .tab-icon {
            font-size: 14px;
        }

        .tab-text {
            font-size: 12px;
            font-weight: 500;
        }


        /* 色盘管理系统样式 */
        .color-management-system {
            margin: 20px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .color-system-header {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .color-system-header h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
        }

        .color-actions {
            display: flex;
            gap: 8px;
        }

        .action-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .action-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        .zone-color-memory {
            padding: 15px 20px;
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
        }

        .current-part-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .part-label {
            font-size: 12px;
            color: #666;
        }

        .part-name {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }

        .color-indicator {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .master-color-picker {
            padding: 20px;
        }

        .color-picker-section {
            margin-bottom: 25px;
        }

        .color-picker-section:last-child {
            margin-bottom: 0;
        }

        .color-picker-section h4 {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
        }

        .enhanced-palette {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 8px;
        }

        .color-swatch {
            width: 35px;
            height: 35px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
        }

        .color-swatch:hover {
            transform: scale(1.1);
            border-color: #333;
        }

        .color-swatch.active {
            transform: scale(1.15);
            border-color: #333;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }


        .custom-color-controls {
            display: flex;
            gap: 12px;
            align-items: center;
        }

        #customColorPicker {
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }

        .add-custom-btn {
            flex: 1;
            padding: 8px 12px;
            background: linear-gradient(45deg, #ff6b6b, #ffa726);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .add-custom-btn:hover {
            transform: translateY(-1px);
        }

        /* 历史配色库样式 */
        .color-history-section {
            padding: 20px;
            border-top: 1px solid #e9ecef;
        }

        .color-history-section h4 {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
        }

        .history-schemes {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .scheme-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .scheme-item:hover {
            background: rgba(255, 107, 107, 0.1);
        }

        .scheme-preview {
            display: flex;
            gap: 2px;
        }

        .scheme-color {
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

        .scheme-name {
            font-size: 12px;
            color: #666;
        }

        /* 高级定制工具样式 */
        .advanced-tools {
            margin: 20px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .tools-header {
            background: linear-gradient(45deg, #43e97b, #38f9d7);
            color: white;
            padding: 15px 20px;
        }

        .tools-header h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
        }

        .advanced-tool-grid {
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .advanced-tool-card {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .advanced-tool-card:hover {
            background: white;
            border-color: rgba(67, 233, 123, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(67, 233, 123, 0.2);
        }

        .advanced-tool-card .tool-icon {
            font-size: 24px;
        }

        .tool-content {
            flex: 1;
        }

        .advanced-tool-card .tool-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 2px;
        }

        .tool-desc {
            font-size: 11px;
            color: #666;
        }

        /* 设计工具区域 */
        .design-tools {
            margin: 20px;
            display: none;
        }

        .tool-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }

        .tool-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .tool-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        }

        .tool-icon {
            font-size: 40px;
            margin-bottom: 10px;
            display: block;
        }

        .tool-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }

        /* 颜色选择器 */
        .color-picker {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .color-palette {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
            margin-top: 15px;
        }

        @media (max-width: 380px) {
            .color-palette {
                grid-template-columns: repeat(5, 1fr);
                gap: 6px;
            }
        }

        .color-swatch {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .color-swatch:hover,
        .color-swatch.active {
            transform: scale(1.2);
            border-color: #333;
            box-shadow: 0 0 15px rgba(0,0,0,0.3);
        }

        .color-swatch[data-color="白色"]:hover,
        .color-swatch[data-color="白色"].active {
            border-color: #ff6b6b;
            box-shadow: 0 0 15px rgba(255,107,107,0.5);
        }

        .color-swatch[title*="白色"] {
            border: 2px solid #ddd !important;
        }

        .color-swatch[title*="白色"]:hover {
            border-color: #ff6b6b !important;
        }

        /* 3D预览区 */
        .preview-3d {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 15px;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            margin-bottom: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            position: relative;
            overflow: hidden;
        }

        .preview-3d::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
        }

        .model-3d {
            font-size: 80px;
            z-index: 2;
            position: relative;
            animation: rotate3d 10s infinite linear;
        }

        @keyframes rotate3d {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(360deg); }
        }

        /* 服装预览样式 */
        .clothing-preview {
            position: relative;
            width: 280px;
            height: 280px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }

        .clothing-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .part-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: all 0.3s ease;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
        }

        .part-image.highlighted {
            filter: drop-shadow(0 0 20px #ffa726) drop-shadow(0 4px 8px rgba(0,0,0,0.3));
            transform: scale(1.05);
        }

        .part-image.selected {
            filter: drop-shadow(0 0 15px #ff6b6b) drop-shadow(0 4px 8px rgba(0,0,0,0.3));
        }

        /* 社区页面 */
        .community-page {
            display: none;
        }

        .community-header {
            background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            color: white;
            text-align: center;
        }

        .community-header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        /* 发布按钮样式 */
        .publish-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .publish-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        .publish-icon {
            font-size: 16px;
        }

        /* 上传模态框样式 */
        .upload-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            animation: fadeIn 0.3s ease;
        }

        .upload-modal-content {
            background: white;
            border-radius: 25px;
            padding: 0;
            margin: 20px;
            max-width: 380px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            transform: scale(0.9);
            animation: modalPop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        /* 步骤指示器 */
        .upload-steps {
            display: flex;
            justify-content: space-between;
            padding: 20px 30px 0;
            margin-bottom: 20px;
        }

        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
            position: relative;
        }

        .step:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 15px;
            left: 60%;
            width: 40px;
            height: 2px;
            background: #e9ecef;
            z-index: 1;
        }

        .step.active:not(:last-child)::after {
            background: linear-gradient(45deg, #ff6b6b, #ffa726);
        }

        .step-number {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #e9ecef;
            color: #666;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            position: relative;
            z-index: 2;
            transition: all 0.3s ease;
        }

        .step.active .step-number {
            background: linear-gradient(45deg, #ff6b6b, #ffa726);
            color: white;
        }

        .step-label {
            font-size: 12px;
            color: #666;
            text-align: center;
        }

        .step.active .step-label {
            color: #333;
            font-weight: 600;
        }

        /* 上传步骤内容 */
        .upload-step {
            display: none;
            padding: 0 30px 20px;
        }

        .upload-step.active {
            display: block;
        }

        .upload-step h3 {
            font-size: 20px;
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }

        /* 作品类型选择 */
        .work-types {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .work-type {
            border: 2px solid #e9ecef;
            border-radius: 15px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }

        .work-type:hover {
            border-color: #ff6b6b;
            background: rgba(255, 107, 107, 0.05);
        }

        .work-type.selected {
            border-color: #ff6b6b;
            background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 167, 38, 0.1));
        }

        .type-icon {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .type-name {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

        .type-desc {
            font-size: 12px;
            color: #666;
        }

        /* 上传选项 */
        .upload-options {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .upload-section {
            border: 1px solid #e9ecef;
            border-radius: 15px;
            padding: 20px;
        }

        .upload-section h4 {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
        }

        /* 文件上传区域 */
        .file-upload-area {
            border: 2px dashed #ddd;
            border-radius: 12px;
            padding: 30px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #fafafa;
        }

        .file-upload-area:hover {
            border-color: #ff6b6b;
            background: rgba(255, 107, 107, 0.05);
        }

        .upload-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .upload-icon {
            font-size: 32px;
            color: #666;
        }

        .upload-text {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }

        .upload-hint {
            font-size: 12px;
            color: #666;
        }

        /* 上传预览 */
        .upload-preview {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 15px;
        }

        .preview-item {
            position: relative;
            aspect-ratio: 1;
            border-radius: 8px;
            overflow: hidden;
            background: #f8f9fa;
        }

        .preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .preview-remove {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 我的设计网格 */
        .my-designs-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .design-item {
            text-align: center;
            cursor: pointer;
            padding: 10px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .design-item:hover {
            background: rgba(255, 107, 107, 0.05);
        }

        .design-item.selected {
            background: rgba(255, 107, 107, 0.1);
            border: 2px solid #ff6b6b;
        }

        .design-preview {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin: 0 auto 8px;
        }

        .design-name {
            font-size: 12px;
            color: #666;
        }

        /* 描述表单 */
        .description-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .form-group {
            position: relative;
        }

        .form-group label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            resize: none;
        }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: #ff6b6b;
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
        }

        .form-group textarea {
            height: 80px;
        }

        .char-count {
            position: absolute;
            bottom: -20px;
            right: 0;
            font-size: 12px;
            color: #666;
        }

        /* 标签容器 */
        .tags-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .popular-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .tag {
            background: #f8f9fa;
            color: #666;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }

        .tag:hover {
            background: rgba(255, 107, 107, 0.1);
            color: #ff6b6b;
        }

        .tag.selected {
            background: #ff6b6b;
            color: white;
        }

        /* 发布设置 */
        .publish-settings {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .setting-group {
            border: 1px solid #e9ecef;
            border-radius: 12px;
            padding: 20px;
        }

        .setting-group > label {
            display: block;
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
        }

        .radio-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .radio-option,
        .checkbox-option {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            cursor: pointer;
            padding: 12px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .radio-option:hover,
        .checkbox-option:hover {
            background: rgba(255, 107, 107, 0.05);
        }

        .radio-option input,
        .checkbox-option input {
            display: none;
        }

        .radio-custom,
        .checkbox-custom {
            width: 20px;
            height: 20px;
            border: 2px solid #ddd;
            border-radius: 50%;
            position: relative;
            transition: all 0.3s ease;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .checkbox-custom {
            border-radius: 4px;
        }

        .radio-option input:checked + .radio-custom,
        .checkbox-option input:checked + .checkbox-custom {
            border-color: #ff6b6b;
            background: #ff6b6b;
        }

        .radio-option input:checked + .radio-custom::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: white;
        }

        .checkbox-option input:checked + .checkbox-custom::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 12px;
            font-weight: bold;
        }

        .option-content {
            flex: 1;
        }

        .option-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
        }

        .option-desc {
            font-size: 12px;
            color: #666;
            line-height: 1.4;
        }

        /* 模态框底部 */
        .upload-modal-footer {
            padding: 20px 30px;
            border-top: 1px solid #e9ecef;
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        .btn-outline {
            background: transparent;
            border: 2px solid #ff6b6b;
            color: #ff6b6b;
        }

        .btn-outline:hover {
            background: #ff6b6b;
            color: white;
        }

        /* 草稿箱和我的作品样式 */
        .drafts-content,
        .my-works-content {
            max-width: 400px;
            max-height: 80vh;
            overflow-y: auto;
        }

        .drafts-list,
        .works-content {
            max-height: 400px;
            overflow-y: auto;
            margin-bottom: 20px;
        }

        .draft-item,
        .work-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            border: 1px solid #e9ecef;
            border-radius: 12px;
            margin-bottom: 12px;
            transition: all 0.3s ease;
        }

        .draft-item:hover,
        .work-item:hover {
            border-color: #ff6b6b;
            background: rgba(255, 107, 107, 0.05);
        }

        .draft-preview,
        .work-preview {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }

        .draft-info,
        .work-info {
            flex: 1;
        }

        .draft-title,
        .work-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
        }

        .draft-time {
            font-size: 12px;
            color: #666;
        }

        .work-stats {
            display: flex;
            gap: 12px;
            font-size: 12px;
            color: #666;
        }

        .draft-actions,
        .work-actions {
            display: flex;
            gap: 8px;
        }

        .draft-actions button,
        .work-actions button {
            padding: 6px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            background: white;
            color: #666;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .draft-actions button:hover,
        .work-actions button:hover {
            border-color: #ff6b6b;
            color: #ff6b6b;
        }

        /* 作品标签页 */
        .works-tabs {
            display: flex;
            border-bottom: 1px solid #e9ecef;
            margin-bottom: 20px;
        }

        .tab {
            flex: 1;
            padding: 12px;
            text-align: center;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: 500;
        }

        .tab.active {
            color: #ff6b6b;
            border-bottom-color: #ff6b6b;
        }

        .tab:hover {
            background: rgba(255, 107, 107, 0.05);
        }

        /* 数据分析 */
        .analytics-summary {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            text-align: center;
        }

        .analytics-item {
            padding: 20px;
            border: 1px solid #e9ecef;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(255, 107, 107, 0.05), rgba(255, 167, 38, 0.05));
        }

        .analytics-number {
            font-size: 24px;
            font-weight: 700;
            color: #ff6b6b;
            margin-bottom: 5px;
        }

        .analytics-label {
            font-size: 12px;
            color: #666;
        }

        /* 响应式调整 */
        @media (max-width: 380px) {
            .upload-modal-content {
                margin: 10px;
                max-width: calc(100% - 20px);
            }
            
            .upload-steps {
                padding: 15px 20px 0;
            }
            
            .upload-step {
                padding: 0 20px 15px;
            }
            
            .upload-modal-footer {
                padding: 15px 20px;
            }

            /* AI推荐引擎小屏幕优化 */
            .ai-engine-card {
                margin: 15px;
                padding: 20px;
            }

            .ai-quick-actions {
                gap: 10px;
            }

            .quick-action {
                padding: 12px 10px;
                min-height: 45px;
            }

            .action-text {
                font-size: 13px;
            }

            .preview-items {
                gap: 10px;
            }

            .preview-item {
                padding: 12px 10px;
                min-height: 65px;
                gap: 10px;
            }

            .preview-image {
                width: 40px;
                height: 40px;
                font-size: 20px;
            }

            .preview-title {
                font-size: 13px;
            }

            .preview-tags {
                font-size: 10px;
            }

            .ai-preview-results h4 {
                font-size: 15px;
                margin-bottom: 12px;
            }
        }

        @media (max-width: 320px) {
            /* 极小屏幕优化 */
            .ai-quick-actions {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .quick-action {
                justify-content: center;
                text-align: center;
            }

            .preview-items {
                grid-template-columns: 1fr;
                gap: 8px;
            }
        }

        .community-stats {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 24px;
            font-weight: 700;
        }

        .stat-label {
            font-size: 12px;
            opacity: 0.8;
        }

        /* 个人中心 */
        .profile-page {
            display: none;
        }

        .profile-header {
            background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%);
            padding: 30px 20px;
            text-align: center;
            color: white;
        }

        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            margin: 0 auto 15px;
            border: 3px solid rgba(255,255,255,0.5);
        }

        .profile-menu {
            padding: 20px;
        }

        .menu-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px;
            background: white;
            border-radius: 12px;
            margin-bottom: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .menu-item:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }

        .menu-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .menu-icon {
            font-size: 18px;
            color: #667eea;
        }

        /* 响应式设计 */
        @media (max-width: 480px) {
            .app-container {
                max-width: 100%;
            }
            
            .bottom-nav {
                width: 100%;
            }
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 4px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.2);
            border-radius: 2px;
        }

        /* 页面切换动画 */
        .page {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .page.fade-out {
            opacity: 0;
            transform: translateX(-20px);
        }

        .page.fade-in {
            opacity: 1;
            transform: translateX(0);
        }

        /* 3D试衣间样式 */
        .fitting-flow-nav {
            display: flex;
            justify-content: center;
            margin: 20px 0;
            padding: 0 20px;
        }

        .flow-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 15px 20px;
            margin: 0 10px;
            border-radius: 12px;
            background: #f8f9fa;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 80px;
        }

        .flow-step.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: #667eea;
        }

        .step-icon {
            font-size: 20px;
            margin-bottom: 5px;
        }

        .step-text {
            font-size: 12px;
            font-weight: 600;
            text-align: center;
        }

        .fitting-step {
            margin: 0 20px;
        }

        .step-container {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .step-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }

        /* 照片上传样式 */
        .upload-methods {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-bottom: 25px;
        }

        .upload-method {
            padding: 20px;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .upload-method.active {
            border-color: #667eea;
            background: #f8f9ff;
        }

        .method-icon {
            font-size: 24px;
            margin-bottom: 10px;
        }

        .method-title {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .method-desc {
            font-size: 12px;
            color: #666;
        }

        .camera-interface, .gallery-interface {
            margin: 20px 0;
        }

        .camera-preview {
            height: 300px;
            background: #f8f9fa;
            border-radius: 12px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            border: 2px dashed #dee2e6;
        }

        .camera-placeholder {
            text-align: center;
            color: #666;
        }

        .camera-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }

        .camera-text {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .camera-hint {
            font-size: 12px;
            opacity: 0.7;
        }

        .pose-guide {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 10px;
            border-radius: 8px;
            text-align: center;
            font-size: 12px;
        }

        .guide-silhouette {
            font-size: 24px;
            margin-bottom: 5px;
        }

        .camera-controls {
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        .camera-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            background: #667eea;
            color: white;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .camera-btn:hover {
            background: #5a6fd8;
            transform: translateY(-2px);
        }

        .camera-btn.capture {
            background: #ff6b6b;
        }

        .camera-btn.switch {
            background: #4ecdc4;
        }

        .upload-zone {
            height: 200px;
            border: 2px dashed #dee2e6;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .upload-zone:hover {
            border-color: #667eea;
            background: #f8f9ff;
        }

        .upload-icon {
            font-size: 36px;
            margin-bottom: 10px;
        }

        .upload-text {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .upload-hint {
            font-size: 12px;
            color: #666;
        }

        .crop-area {
            margin-top: 20px;
        }

        .crop-container {
            position: relative;
            height: 300px;
            background: #f8f9fa;
            border-radius: 12px;
            overflow: hidden;
        }

        .crop-controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 15px;
        }

        .crop-btn {
            padding: 8px 16px;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .crop-btn.confirm {
            background: #28a745;
            color: white;
            border-color: #28a745;
        }

        /* 姿势校准样式 */
        .pose-calibration {
            margin-top: 25px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 12px;
        }

        .calibration-display {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 20px 0;
        }

        .body-keypoints {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .keypoint {
            padding: 10px;
            background: white;
            border-radius: 8px;
            border-left: 4px solid #28a745;
            font-size: 14px;
        }

        .calibration-status {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .status-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
        }

        .status-icon {
            font-size: 16px;
        }

        .calibration-actions {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        .calib-btn {
            padding: 10px 20px;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .calib-btn.next {
            background: #28a745;
            color: white;
            border-color: #28a745;
        }

        /* 服装选择器样式 */
        .clothing-tabs {
            display: flex;
            margin-bottom: 25px;
            border-bottom: 1px solid #e9ecef;
        }

        .clothing-tab {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 15px 10px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .clothing-tab.active {
            border-bottom-color: #667eea;
            color: #667eea;
        }

        .tab-icon {
            font-size: 16px;
        }

        .tab-text {
            font-weight: 600;
            font-size: 14px;
        }

        .tab-count {
            background: #e9ecef;
            color: #666;
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 11px;
        }

        .clothing-tab.active .tab-count {
            background: #667eea;
            color: white;
        }

        .design-grid, .trending-grid, .brand-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
        }

        .design-item, .trending-item, .brand-item {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .design-item:hover, .trending-item:hover, .brand-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }

        .design-preview, .trending-preview, .brand-preview {
            position: relative;
            height: 120px;
            overflow: hidden;
        }

        .design-image, .trending-image, .brand-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .design-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .design-item:hover .design-overlay {
            opacity: 1;
        }

        .preview-btn {
            padding: 6px 12px;
            background: #667eea;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
        }

        .design-info, .trending-info, .brand-item-info {
            padding: 12px;
        }

        .design-name, .trending-name, .item-name {
            font-weight: 600;
            font-size: 13px;
            margin-bottom: 4px;
        }

        .design-meta, .trending-author {
            font-size: 11px;
            color: #666;
        }

        .trending-stats {
            position: absolute;
            top: 8px;
            right: 8px;
            display: flex;
            gap: 8px;
        }

        .stat {
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 4px 6px;
            border-radius: 4px;
            font-size: 10px;
        }

        .brand-tag {
            position: absolute;
            top: 8px;
            left: 8px;
            background: #ff6b6b;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
        }

        .item-price {
            color: #ff6b6b;
            font-weight: 700;
            font-size: 12px;
        }

        .trending-filter {
            margin-bottom: 20px;
        }

        .filter-select {
            padding: 8px 12px;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            background: white;
            font-size: 14px;
        }

        .brand-collection {
            margin-bottom: 25px;
        }

        .brand-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 12px;
        }

        .brand-logo {
            font-size: 32px;
        }

        .brand-name {
            font-weight: 700;
            font-size: 16px;
            margin-bottom: 4px;
        }

        .brand-desc {
            font-size: 12px;
            color: #666;
        }

        .clothing-actions, .fitting-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
        }

        .clothing-btn, .fitting-btn {
            padding: 12px 24px;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            background: white;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .clothing-btn.next, .fitting-btn.next {
            background: #28a745;
            color: white;
            border-color: #28a745;
        }

        .clothing-btn.back, .fitting-btn.back {
            background: #6c757d;
            color: white;
            border-color: #6c757d;
        }

        /* 试衣展示系统样式 */
        .fitting-display {
            margin-bottom: 30px;
        }

        .fitting-viewport {
            height: 400px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 15px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .user-photo-layer, .clothing-layer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .photo-placeholder, .clothing-placeholder {
            font-size: 16px;
            color: #666;
            background: rgba(255,255,255,0.8);
            padding: 20px;
            border-radius: 12px;
            text-align: center;
        }

        .fitting-indicators {
            position: absolute;
            bottom: 20px;
            left: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .fit-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.9);
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 12px;
        }

        .fit-indicator.active {
            background: rgba(102, 126, 234, 0.9);
            color: white;
        }

        .indicator-icon {
            font-size: 14px;
        }

        /* 交互控制面板样式 */
        .interaction-panel {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 25px;
        }

        .control-sections {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .control-section {
            background: white;
            padding: 15px;
            border-radius: 12px;
        }

        .section-title {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 15px;
            color: #333;
        }

        .rotation-controls, .lighting-controls, .compare-controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .rotation-btn, .lighting-btn, .compare-btn {
            padding: 8px 16px;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .rotation-btn:hover, .lighting-btn:hover, .compare-btn:hover {
            background: #f8f9fa;
            transform: translateY(-2px);
        }

        .lighting-btn.active, .compare-btn.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .gesture-hint {
            text-align: center;
            font-size: 11px;
            color: #666;
            margin-top: 10px;
        }

        .light-icon, .compare-icon {
            font-size: 14px;
        }

        /* 输出功能样式 */
        .output-panel {
            background: white;
            border-radius: 15px;
            padding: 20px;
            border: 2px solid #e9ecef;
            margin-bottom: 25px;
        }

        .output-actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
        }

        .output-btn {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .output-btn:hover {
            border-color: #667eea;
            background: #f8f9ff;
            transform: translateY(-2px);
        }

        .output-btn.save {
            border-color: #28a745;
        }

        .output-btn.share {
            border-color: #17a2b8;
        }

        .output-btn.purchase {
            border-color: #ff6b6b;
        }

        .output-icon {
            font-size: 24px;
            flex-shrink: 0;
        }

        .output-text {
            flex: 1;
        }

        .output-title {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 4px;
        }

        .output-desc {
            font-size: 12px;
            color: #666;
        }

        .fitting-btn.retry {
            background: #ffc107;
            color: #212529;
            border-color: #ffc107;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .fitting-flow-nav {
                padding: 0 10px;
            }

            .flow-step {
                margin: 0 5px;
                padding: 10px 15px;
                min-width: 60px;
            }

            .step-icon {
                font-size: 16px;
            }

            .step-text {
                font-size: 10px;
            }

            .upload-methods {
                grid-template-columns: 1fr;
            }

            .design-grid, .trending-grid, .brand-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .control-sections {
                grid-template-columns: 1fr;
            }

            .rotation-controls, .lighting-controls, .compare-controls {
                justify-content: space-around;
            }

            .clothing-actions, .fitting-actions {
                flex-direction: column;
                gap: 10px;
            }

            .clothing-btn, .fitting-btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 首页 -->
        <div id="home-page" class="page">
            <header class="header">
                <div class="header-content">
                    <h1>FashionCraft</h1>
                    <p>让创意穿在身上</p>
                </div>
            </header>

            <main class="main-content">
                <!-- 轮播区域 -->
                <section class="banner-section">
                    <div class="banner-slider" id="bannerSlider">
                        <div class="banner-slide">
                            <div>
                                <div style="font-size: 24px; margin-bottom: 10px;">🎨</div>
                                <div>春季新品发布</div>
                                <div style="font-size: 14px; opacity: 0.8;">个性化设计，独一无二</div>
                            </div>
                        </div>
                        <div class="banner-slide" style="background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);">
                            <div>
                                <div style="font-size: 24px; margin-bottom: 10px;">✨</div>
                                <div>AI智能搭配</div>
                                <div style="font-size: 14px; opacity: 0.8;">科技赋能时尚创意</div>
                            </div>
                        </div>
                        <div class="banner-slide" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
                            <div>
                                <div style="font-size: 24px; margin-bottom: 10px;">🏆</div>
                                <div>设计大赛进行中</div>
                                <div style="font-size: 14px; opacity: 0.8;">万元奖金等你来拿</div>
                            </div>
                        </div>
                    </div>
                    <div class="banner-indicators">
                        <div class="indicator active" data-slide="0"></div>
                        <div class="indicator" data-slide="1"></div>
                        <div class="indicator" data-slide="2"></div>
                    </div>
                </section>

                <!-- 快速设计入口 -->
                <section class="quick-design" onclick="showDesignModal()">
                    <h2>开始设计</h2>
                    <p>点击开启你的创意之旅</p>
                </section>

                <!-- 热门作品 -->
                <section class="popular-works">
                    <h3 class="section-title">热门作品</h3>
                    <div class="works-grid">
                        <div class="work-item" onclick="showWorkDetail('森系小清新')">
                            <div class="work-image">🌿</div>
                            <div class="work-info">
                                <div class="work-title">森系小清新</div>
                                <div class="work-stats">
                                    <span>❤️ 2.3k</span>
                                    <span>💬 186</span>
                                </div>
                            </div>
                        </div>
                        <div class="work-item" onclick="showWorkDetail('复古摩登')">
                            <div class="work-image" style="background: linear-gradient(45deg, #ffd89b 0%, #19547b 100%);">🎭</div>
                            <div class="work-info">
                                <div class="work-title">复古摩登</div>
                                <div class="work-stats">
                                    <span>❤️ 1.8k</span>
                                    <span>💬 142</span>
                                </div>
                            </div>
                        </div>
                        <div class="work-item" onclick="showWorkDetail('未来科技')">
                            <div class="work-image" style="background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);">🚀</div>
                            <div class="work-info">
                                <div class="work-title">未来科技</div>
                                <div class="work-stats">
                                    <span>❤️ 3.1k</span>
                                    <span>💬 256</span>
                                </div>
                            </div>
                        </div>
                        <div class="work-item" onclick="showWorkDetail('简约现代')">
                            <div class="work-image" style="background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%);">🏛️</div>
                            <div class="work-info">
                                <div class="work-title">简约现代</div>
                                <div class="work-stats">
                                    <span>❤️ 1.5k</span>
                                    <span>💬 98</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- AI推荐引擎入口 -->
                <section class="ai-recommend-engine">
                    <div class="ai-engine-card">
                        <div class="ai-engine-header">
                            <div class="ai-brand">
                                <span class="ai-logo">🤖</span>
                                <div class="ai-brand-text">
                                    <h3>AI时尚顾问</h3>
                                    <p>专业搭配 · 智能推荐</p>
                                </div>
                            </div>
                            <div class="ai-status">
                                <span class="status-dot"></span>
                                <span class="status-text">在线</span>
                            </div>
                        </div>
                        
                        <div class="ai-quick-actions">
                            <div class="quick-action" onclick="openAIChat('occasion')">
                                <span class="action-icon">🎯</span>
                                <span class="action-text">场合搭配</span>
                            </div>
                            <div class="quick-action" onclick="openAIChat('color')">
                                <span class="action-icon">🎨</span>
                                <span class="action-text">配色建议</span>
                            </div>
                            <div class="quick-action" onclick="openAIChat('style')">
                                <span class="action-icon">✨</span>
                                <span class="action-text">风格分析</span>
                            </div>
                            <div class="quick-action" onclick="openAIChat('free')">
                                <span class="action-icon">💬</span>
                                <span class="action-text">自由对话</span>
                            </div>
                        </div>
                        

                    </div>
                </section>
            </main>
        </div>

        <!-- 设计中心页面 -->
        <div id="design-page" class="page design-tools">
            <header class="header">
                <div class="header-content">
                    <h1>3D设计中心</h1>
                    <p>专业级颜色DIY设计器</p>
                </div>
            </header>

            <main class="main-content">
                <!-- 实时3D预览系统 -->
                <div class="design-preview-system">
                    <div class="preview-container">
                        <div class="preview-3d-enhanced">
                            <div class="model-3d-wrapper">
                                <div class="clothing-preview" id="main3DModel">
                                    <div class="clothing-layer" id="layer-s1">
                                        <img src="切片图共7个/切片图共7个/蓝色/S1.png" alt="S1部位" class="part-image" data-part="s1">
                                    </div>
                                    <div class="clothing-layer" id="layer-t1">
                                        <img src="切片图共7个/切片图共7个/蓝色/T1.png" alt="T1部位" class="part-image" data-part="t1">
                                    </div>
                                    <div class="clothing-layer" id="layer-y1">
                                        <img src="切片图共7个/切片图共7个/蓝色/Y1.png" alt="Y1部位" class="part-image" data-part="y1">
                                    </div>
                                    <div class="clothing-layer" id="layer-z1">
                                        <img src="切片图共7个/切片图共7个/蓝色/Z1.png" alt="Z1部位" class="part-image" data-part="z1">
                                    </div>
                                </div>
                                <div class="model-highlights" id="modelHighlights"></div>
                            </div>

                            <!-- 3D控制面板 -->
                            <div class="preview-controls">
                                <div class="control-group">
                                    <button class="control-btn" onclick="rotateModel('left')" title="向左旋转">↻</button>
                                    <button class="control-btn" onclick="rotateModel('right')" title="向右旋转">↺</button>
                                    <button class="control-btn" onclick="resetModelView()" title="重置视角">⌂</button>
                                </div>
                            </div>
                        </div>
                        

                    </div>
                </div>

                <!-- 3D分区控制面板 -->
                <div class="zone-control-panel">
                    <div class="panel-header">
                        <h3>分区控制面板</h3>
                        <button class="expand-btn" onclick="toggleZonePanel()">⌄</button>
                    </div>
                    
                    <div class="panel-content">
                        <!-- 部位选择器（胶囊式Tab） -->
                        <div class="body-part-selector">
                            <div class="part-tabs">
                                <button class="part-tab active" data-part="overall" onclick="selectBodyPart('overall')">
                                    <span class="tab-icon">🎯</span>
                                    <span class="tab-text">整体</span>
                                </button>
                                <button class="part-tab" data-part="s1" onclick="selectBodyPart('s1')">
                                    <span class="tab-icon">👔</span>
                                    <span class="tab-text">S1部位</span>
                                </button>
                                <button class="part-tab" data-part="t1" onclick="selectBodyPart('t1')">
                                    <span class="tab-icon">👕</span>
                                    <span class="tab-text">T1部位</span>
                                </button>
                                <button class="part-tab" data-part="y1" onclick="selectBodyPart('y1')">
                                    <span class="tab-icon">🎽</span>
                                    <span class="tab-text">Y1部位</span>
                                </button>
                                <button class="part-tab" data-part="z1" onclick="selectBodyPart('z1')">
                                    <span class="tab-icon">🧥</span>
                                    <span class="tab-text">Z1部位</span>
                                </button>
                            </div>
                        </div>


                    </div>
                </div>

                <!-- 色盘管理系统 -->
                <div class="color-management-system">
                    <div class="color-system-header">
                        <h3>智能色盘系统</h3>
                        <div class="color-actions">
                            <button class="action-btn" onclick="syncColorToAll()" title="同步当前色到所有部位">🔄</button>
                            <button class="action-btn" onclick="showColorHistory()" title="查看配色历史">📚</button>
                            <button class="action-btn" onclick="saveColorScheme()" title="保存配色方案">💾</button>
                        </div>
                    </div>

                    <!-- 分区色盘记忆 -->
                    <div class="zone-color-memory">
                        <div class="current-part-info">
                            <span class="part-label">当前部位：</span>
                            <span class="part-name" id="currentPartName">整体</span>
                            <span class="color-indicator" id="currentPartColor" style="background: #ff6b6b;"></span>
                        </div>
                    </div>

                    <!-- 主色盘 -->
                    <div class="master-color-picker">
                        <div class="color-picker-section">
                            <h4>基础色盘</h4>
                            <div class="color-palette enhanced-palette">
                                <!-- 原有颜色 -->
                                <div class="color-swatch" style="background: #3498db" onclick="selectClothingColor('蓝色')" data-color="蓝色" title="蓝色"></div>
                                <div class="color-swatch" style="background: #e91e63" onclick="selectClothingColor('粉色')" data-color="粉色" title="粉色"></div>
                                <div class="color-swatch" style="background: #8bc34a" onclick="selectClothingColor('牛油果绿')" data-color="牛油果绿" title="牛油果绿"></div>
                                <div class="color-swatch" style="background: #ffffff; border: 2px solid #ddd" onclick="selectClothingColor('白色')" data-color="白色" title="白色"></div>
                                <div class="color-swatch" style="background: #2c3e50" onclick="selectClothingColor('黑色')" data-color="黑色" title="黑色"></div>
                                <div class="color-swatch" style="background: #ff9800" onclick="selectClothingColor('橘色')" data-color="橘色" title="橘色"></div>
                                <div class="color-swatch" style="background: #9e9e9e" onclick="selectClothingColor('利灰')" data-color="利灰" title="利灰"></div>
                                
                                <!-- 新增颜色 -->
                                <div class="color-swatch" style="background: #1e40af" onclick="selectClothingColor('宝蓝色')" data-color="宝蓝色" title="宝蓝色"></div>
                                <div class="color-swatch" style="background: #d2b48c" onclick="selectClothingColor('浅驼色')" data-color="浅驼色" title="浅驼色"></div>
                                <div class="color-swatch" style="background: #9ca3af" onclick="selectClothingColor('测试色')" data-color="测试色" title="测试色"></div>
                                <div class="color-swatch" style="background: #374151" onclick="selectClothingColor('深灰绿')" data-color="深灰绿" title="深灰绿"></div>
                                <div class="color-swatch" style="background: #581c87" onclick="selectClothingColor('深紫色')" data-color="深紫色" title="深紫色"></div>
                                <div class="color-swatch" style="background: #14532d" onclick="selectClothingColor('深绿色')" data-color="深绿色" title="深绿色"></div>
                                <div class="color-swatch" style="background: #dc2626" onclick="selectClothingColor('真朱')" data-color="真朱" title="真朱"></div>
                                <div class="color-swatch" style="background: #fbbf24" onclick="selectClothingColor('睿智金')" data-color="睿智金" title="睿智金"></div>
                                <div class="color-swatch" style="background: #ef4444" onclick="selectClothingColor('红色')" data-color="红色" title="红色"></div>
                                <div class="color-swatch" style="background: #84cc16" onclick="selectClothingColor('萌萌绿')" data-color="萌萌绿" title="萌萌绿"></div>
                                <div class="color-swatch" style="background: #0891b2" onclick="selectClothingColor('蒂芙尼蓝')" data-color="蒂芙尼蓝" title="蒂芙尼蓝"></div>
                                <div class="color-swatch" style="background: #3b82f6" onclick="selectClothingColor('长春花蓝')" data-color="长春花蓝" title="长春花蓝"></div>
                                <div class="color-swatch" style="background: #6b46c1" onclick="selectClothingColor('青紫')" data-color="青紫" title="青紫"></div>
                                <div class="color-swatch" style="background: #eab308" onclick="selectClothingColor('靓丽黄')" data-color="靓丽黄" title="靓丽黄"></div>
                            </div>
                        </div>


                        <!-- 自定义颜色 -->
                        <div class="color-picker-section">
                            <h4>自定义颜色</h4>
                            <div class="custom-color-controls">
                                <input type="color" id="customColorPicker" value="#ff6b6b" onchange="selectCustomColor(this.value)">
                                <button class="add-custom-btn" onclick="addCustomColor()">添加到色盘</button>
                            </div>
                        </div>
                    </div>

                    <!-- 历史配色库 -->
                    <div class="color-history-section" id="colorHistorySection" style="display: none;">
                        <h4>配色历史</h4>
                        <div class="history-schemes">
                            <div class="scheme-item" onclick="loadColorScheme('scheme1')">
                                <div class="scheme-preview">
                                    <div class="scheme-color" style="background: #ff6b6b;"></div>
                                    <div class="scheme-color" style="background: #4ecdc4;"></div>
                                    <div class="scheme-color" style="background: #ffeaa7;"></div>
                                </div>
                                <span class="scheme-name">夏日活力</span>
                            </div>
                            <div class="scheme-item" onclick="loadColorScheme('scheme2')">
                                <div class="scheme-preview">
                                    <div class="scheme-color" style="background: #667eea;"></div>
                                    <div class="scheme-color" style="background: #764ba2;"></div>
                                    <div class="scheme-color" style="background: #a29bfe;"></div>
                                </div>
                                <span class="scheme-name">深海紫韵</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 高级定制工具 -->
                <div class="advanced-tools">
                    <div class="tools-header">
                        <h3>高级定制</h3>
                    </div>
                    
                    <div class="advanced-tool-grid">
                        <div class="advanced-tool-card" onclick="openAdvancedEmbroidery()">
                            <span class="tool-icon">🧵</span>
                            <div class="tool-content">
                                <div class="tool-title">刺绣编辑器</div>
                                <div class="tool-desc">支持按部位精确定位</div>
                            </div>
                        </div>
                        <div class="advanced-tool-card" onclick="openTextureSystem()">
                        <span class="tool-icon">🎨</span>
                            <div class="tool-content">
                                <div class="tool-title">贴图系统</div>
                                <div class="tool-desc">可指定应用区域</div>
                    </div>
                        </div>
                        <div class="advanced-tool-card" onclick="openPatternLibrary()">
                        <span class="tool-icon">✨</span>
                            <div class="tool-content">
                                <div class="tool-title">图案库</div>
                                <div class="tool-desc">海量设计素材</div>
                    </div>
                    </div>
                        <div class="advanced-tool-card" onclick="openAIDesigner()">
                            <span class="tool-icon">🤖</span>
                            <div class="tool-content">
                                <div class="tool-title">AI设计师</div>
                                <div class="tool-desc">智能配色建议</div>
                    </div>
                </div>
                    </div>
                </div>
            </main>
        </div>

        <!-- 3D试衣间页面 -->
        <div id="ar-page" class="page" style="display: none;">
            <header class="header">
                <div class="header-content">
                    <h1>3D试衣间</h1>
                    <p>智能试穿，完美贴合</p>
                </div>
            </header>

            <main class="main-content">
                <!-- 核心流程导航 -->
                <div class="fitting-flow-nav">
                    <div class="flow-step active" data-step="upload">
                        <div class="step-icon">📷</div>
                        <div class="step-text">照片上传</div>
                    </div>
                    <div class="flow-step" data-step="clothing">
                        <div class="step-icon">👕</div>
                        <div class="step-text">服装选择</div>
                    </div>
                    <div class="flow-step" data-step="fitting">
                        <div class="step-icon">✨</div>
                        <div class="step-text">试衣展示</div>
                    </div>
                </div>

                <!-- 步骤1: 照片上传入口 -->
                <div class="fitting-step" id="upload-step">
                    <div class="step-container">
                        <h3 class="step-title">📷 照片上传入口</h3>
                        
                        <!-- 上传方式选择 -->
                        <div class="upload-methods">
                            <div class="upload-method active" data-method="camera" onclick="selectUploadMethod('camera')">
                                <div class="method-icon">📹</div>
                                <div class="method-title">拍照模式</div>
                                <div class="method-desc">实时摄像头拍摄</div>
                            </div>
                            <div class="upload-method" data-method="gallery" onclick="selectUploadMethod('gallery')">
                                <div class="method-icon">🖼️</div>
                                <div class="method-title">相册选择</div>
                                <div class="method-desc">支持裁剪调整</div>
                            </div>
                        </div>

                        <!-- 拍照模式界面 -->
                        <div class="camera-interface" id="camera-mode">
                            <div class="camera-preview">
                                <div class="camera-placeholder">
                                    <div class="camera-icon">📷</div>
                                    <div class="camera-text">点击启动摄像头</div>
                                    <div class="camera-hint">请确保良好的光线条件</div>
                                </div>
                                <!-- 姿势引导框 -->
                                <div class="pose-guide">
                                    <div class="guide-silhouette">🧑‍🦱</div>
                                    <div class="guide-text">请保持正面站立姿势</div>
                                </div>
                            </div>
                            <div class="camera-controls">
                                <button class="camera-btn" onclick="startCamera()">启动摄像头</button>
                                <button class="camera-btn capture" onclick="capturePhoto()">拍摄照片</button>
                                <button class="camera-btn switch" onclick="switchCamera()">切换摄像头</button>
                            </div>
                        </div>

                        <!-- 相册选择界面 -->
                        <div class="gallery-interface" id="gallery-mode" style="display: none;">
                            <div class="gallery-upload">
                                <input type="file" id="photo-upload" accept="image/*" style="display: none;" onchange="handlePhotoUpload(this)">
                                <div class="upload-zone" onclick="document.getElementById('photo-upload').click()">
                                    <div class="upload-icon">📁</div>
                                    <div class="upload-text">选择照片</div>
                                    <div class="upload-hint">支持JPG、PNG格式</div>
                                </div>
                            </div>
                            <!-- 图片裁剪区域 -->
                            <div class="crop-area" id="crop-area" style="display: none;">
                                <div class="crop-container">
                                    <canvas id="crop-canvas"></canvas>
                                    <div class="crop-overlay"></div>
                                </div>
                                <div class="crop-controls">
                                    <button class="crop-btn" onclick="resetCrop()">重置</button>
                                    <button class="crop-btn confirm" onclick="confirmCrop()">确认裁剪</button>
                                </div>
                            </div>
                        </div>

                        <!-- 姿势校准系统 -->
                        <div class="pose-calibration" id="pose-calibration" style="display: none;">
                            <h4>🎯 姿势校准</h4>
                            <div class="calibration-display">
                                <div class="body-keypoints">
                                    <div class="keypoint head" data-point="head">头部</div>
                                    <div class="keypoint shoulder-left" data-point="shoulder-left">左肩</div>
                                    <div class="keypoint shoulder-right" data-point="shoulder-right">右肩</div>
                                    <div class="keypoint waist" data-point="waist">腰部</div>
                                    <div class="keypoint hip" data-point="hip">臀部</div>
                                </div>
                                <div class="calibration-status">
                                    <div class="status-item">
                                        <span class="status-icon">✅</span>
                                        <span>人体识别成功</span>
                                    </div>
                                    <div class="status-item">
                                        <span class="status-icon">✅</span>
                                        <span>关键点定位完成</span>
                                    </div>
                                    <div class="status-item">
                                        <span class="status-icon">⏳</span>
                                        <span>身形分析中...</span>
                                    </div>
                                </div>
                            </div>
                            <div class="calibration-actions">
                                <button class="calib-btn" onclick="recalibrate()">重新校准</button>
                                <button class="calib-btn next" onclick="nextStep('clothing')">下一步：选择服装</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 步骤2: 服装选择器 -->
                <div class="fitting-step" id="clothing-step" style="display: none;">
                    <div class="step-container">
                        <h3 class="step-title">👕 服装选择器</h3>
                        
                        <!-- 服装分类标签 -->
                        <div class="clothing-tabs">
                            <div class="clothing-tab active" data-tab="my-designs" onclick="switchClothingTab('my-designs')">
                                <span class="tab-icon">🎨</span>
                                <span class="tab-text">我的设计</span>
                                <span class="tab-count">12</span>
                            </div>
                            <div class="clothing-tab" data-tab="community" onclick="switchClothingTab('community')">
                                <span class="tab-icon">🔥</span>
                                <span class="tab-text">社区热门</span>
                                <span class="tab-count">156</span>
                            </div>
                            <div class="clothing-tab" data-tab="brands" onclick="switchClothingTab('brands')">
                                <span class="tab-icon">🏷️</span>
                                <span class="tab-text">品牌合作</span>
                                <span class="tab-count">89</span>
                            </div>
                        </div>

                        <!-- 我的设计列表 -->
                        <div class="clothing-content" id="my-designs-content">
                            <div class="design-grid">
                                <div class="design-item" onclick="selectClothing('my-design-1')">
                                    <div class="design-preview">
                                        <img src="切片图/切片图/宝蓝色/宝蓝色.png" alt="我的设计1" class="design-image">
                                        <div class="design-overlay">
                                            <div class="preview-btn">预览效果</div>
                                        </div>
                                    </div>
                                    <div class="design-info">
                                        <div class="design-name">经典商务款</div>
                                        <div class="design-meta">创建于 2024-01-15</div>
                                    </div>
                                </div>
                                <div class="design-item" onclick="selectClothing('my-design-2')">
                                    <div class="design-preview">
                                        <img src="切片图/切片图/靓丽黄/靓丽黄.png" alt="我的设计2" class="design-image">
                                        <div class="design-overlay">
                                            <div class="preview-btn">预览效果</div>
                                        </div>
                                    </div>
                                    <div class="design-info">
                                        <div class="design-name">活力运动款</div>
                                        <div class="design-meta">创建于 2024-01-12</div>
                                    </div>
                                </div>
                                <div class="design-item" onclick="selectClothing('my-design-3')">
                                    <div class="design-preview">
                                        <img src="切片图/切片图/蒂芙尼蓝/蒂芙尼蓝.png" alt="我的设计3" class="design-image">
                                        <div class="design-overlay">
                                            <div class="preview-btn">预览效果</div>
                                        </div>
                                    </div>
                                    <div class="design-info">
                                        <div class="design-name">优雅晚装</div>
                                        <div class="design-meta">创建于 2024-01-10</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 社区热门列表 -->
                        <div class="clothing-content" id="community-content" style="display: none;">
                            <div class="trending-filter">
                                <select class="filter-select">
                                    <option>今日热门</option>
                                    <option>本周热门</option>
                                    <option>本月热门</option>
                                </select>
                            </div>
                            <div class="trending-grid">
                                <div class="trending-item" onclick="selectClothing('trending-1')">
                                    <div class="trending-preview">
                                        <img src="切片图/切片图/深紫色/深紫色.png" alt="热门设计1" class="trending-image">
                                        <div class="trending-stats">
                                            <span class="stat">❤️ 2.3k</span>
                                            <span class="stat">💬 156</span>
                                        </div>
                                    </div>
                                    <div class="trending-info">
                                        <div class="trending-name">神秘紫韵</div>
                                        <div class="trending-author">by 设计师Anna</div>
                                    </div>
                                </div>
                                <div class="trending-item" onclick="selectClothing('trending-2')">
                                    <div class="trending-preview">
                                        <img src="切片图/切片图/萌萌绿/萌萌绿.png" alt="热门设计2" class="trending-image">
                                        <div class="trending-stats">
                                            <span class="stat">❤️ 1.8k</span>
                                            <span class="stat">💬 89</span>
                                        </div>
                                    </div>
                                    <div class="trending-info">
                                        <div class="trending-name">春日萌动</div>
                                        <div class="trending-author">by 创意大师Leo</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 品牌合作列表 -->
                        <div class="clothing-content" id="brands-content" style="display: none;">
                            <div class="brand-collection">
                                <div class="brand-header">
                                    <div class="brand-logo">🏷️</div>
                                    <div class="brand-info">
                                        <div class="brand-name">时尚前线</div>
                                        <div class="brand-desc">2024春季新品系列</div>
                                    </div>
                                </div>
                                <div class="brand-grid">
                                    <div class="brand-item" onclick="selectClothing('brand-1')">
                                        <div class="brand-preview">
                                            <img src="切片图/切片图/真朱/真朱.png" alt="品牌设计1" class="brand-image">
                                            <div class="brand-tag">限量款</div>
                                        </div>
                                        <div class="brand-item-info">
                                            <div class="item-name">经典红韵</div>
                                            <div class="item-price">¥899</div>
                                        </div>
                                    </div>
                                    <div class="brand-item" onclick="selectClothing('brand-2')">
                                        <div class="brand-preview">
                                            <img src="切片图/切片图/睿智金/睿智金.png" alt="品牌设计2" class="brand-image">
                                            <div class="brand-tag">新品</div>
                                        </div>
                                        <div class="brand-item-info">
                                            <div class="item-name">智慧金辉</div>
                                            <div class="item-price">¥1299</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="clothing-actions">
                            <button class="clothing-btn back" onclick="previousStep('upload')">上一步</button>
                            <button class="clothing-btn next" onclick="nextStep('fitting')">开始试穿</button>
                        </div>
                    </div>
                </div>

                <!-- 步骤3: 试衣展示系统 -->
                <div class="fitting-step" id="fitting-step" style="display: none;">
                    <div class="step-container">
                        <h3 class="step-title">✨ 试衣展示系统</h3>
                        
                        <!-- 试穿预览区域 -->
                        <div class="fitting-display">
                            <div class="fitting-viewport">
                                <div class="user-photo-layer">
                                    <div class="photo-placeholder">用户照片将显示在这里</div>
                                </div>
                                <div class="clothing-layer">
                                    <div class="clothing-placeholder">选中的服装将叠加在这里</div>
                                </div>
                                <!-- 智能贴合引擎指示器 -->
                                <div class="fitting-indicators">
                                    <div class="fit-indicator active" data-status="processing">
                                        <span class="indicator-icon">🔄</span>
                                        <span class="indicator-text">布料物理模拟</span>
                                    </div>
                                    <div class="fit-indicator" data-status="completed">
                                        <span class="indicator-icon">✅</span>
                                        <span class="indicator-text">身形适配完成</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 交互控制面板 -->
                        <div class="interaction-panel">
                            <h4>🎮 交互控制面板</h4>
                            <div class="control-sections">
                                <!-- 旋转查看 -->
                                <div class="control-section">
                                    <div class="section-title">旋转查看</div>
                                    <div class="rotation-controls">
                                        <button class="rotation-btn" onclick="rotateFitting('left')">⬅️ 左转</button>
                                        <button class="rotation-btn" onclick="rotateFitting('reset')">🎯 正面</button>
                                        <button class="rotation-btn" onclick="rotateFitting('right')">右转 ➡️</button>
                                    </div>
                                    <div class="gesture-hint">💡 支持手势滑动控制</div>
                                </div>

                                <!-- 光照调节 -->
                                <div class="control-section">
                                    <div class="section-title">光照调节</div>
                                    <div class="lighting-controls">
                                        <button class="lighting-btn active" onclick="setFittingLight('natural')">
                                            <span class="light-icon">☀️</span>
                                            <span>自然光</span>
                                        </button>
                                        <button class="lighting-btn" onclick="setFittingLight('indoor')">
                                            <span class="light-icon">💡</span>
                                            <span>室内光</span>
                                        </button>
                                        <button class="lighting-btn" onclick="setFittingLight('studio')">
                                            <span class="light-icon">🎬</span>
                                            <span>摄影光</span>
                                        </button>
                                    </div>
                                </div>

                                <!-- 对比模式 -->
                                <div class="control-section">
                                    <div class="section-title">对比模式</div>
                                    <div class="compare-controls">
                                        <button class="compare-btn active" onclick="toggleCompare('split')">
                                            <span class="compare-icon">⚖️</span>
                                            <span>左右对比</span>
                                        </button>
                                        <button class="compare-btn" onclick="toggleCompare('overlay')">
                                            <span class="compare-icon">🔄</span>
                                            <span>叠加对比</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 输出功能 -->
                        <div class="output-panel">
                            <h4>💾 输出功能</h4>
                            <div class="output-actions">
                                <button class="output-btn save" onclick="saveImageCard()">
                                    <span class="output-icon">💳</span>
                                    <div class="output-text">
                                        <div class="output-title">保存形象卡</div>
                                        <div class="output-desc">含服装信息和试穿效果</div>
                                    </div>
                                </button>
                                <button class="output-btn share" onclick="shareToCommunity()">
                                    <span class="output-icon">🌐</span>
                                    <div class="output-text">
                                        <div class="output-title">分享到社区</div>
                                        <div class="output-desc">让好友看到你的搭配</div>
                                    </div>
                                </button>
                                <button class="output-btn purchase" onclick="buyNow()">
                                    <span class="output-icon">🛒</span>
                                    <div class="output-text">
                                        <div class="output-title">一键购买</div>
                                        <div class="output-desc">立即下单同款服装</div>
                                    </div>
                                </button>
                            </div>
                        </div>

                        <div class="fitting-actions">
                            <button class="fitting-btn back" onclick="previousStep('clothing')">重新选择</button>
                            <button class="fitting-btn retry" onclick="retryFitting()">重新试穿</button>
                        </div>
                    </div>
                </div>
            </main>
        </div>

        <!-- 社区页面 -->
        <div id="community-page" class="page community-page">
            <div class="community-header">
                <div class="community-header-top">
                    <h1>设计社区</h1>
                    <!-- 新增：社区页面发布按钮 -->
                    <button class="publish-btn" onclick="openUploadModal()">
                        <span class="publish-icon">📝</span>
                        发布作品
                    </button>
                </div>
                <p>与全球设计师交流创意</p>
                <div class="community-stats">
                    <div class="stat-item">
                        <div class="stat-number">12.8k</div>
                        <div class="stat-label">活跃用户</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">3.2k</div>
                        <div class="stat-label">今日作品</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">156</div>
                        <div class="stat-label">在线设计师</div>
                    </div>
                </div>
            </div>

            <main class="main-content">
                <div style="margin: 20px;">
                    <!-- 热门话题 -->
                    <div style="background: white; border-radius: 15px; padding: 20px; margin-bottom: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
                        <h4 style="margin-bottom: 15px; font-size: 16px;">🔥 热门话题</h4>
                        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
                            <span style="background: #ff6b6b; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer;">#春季时尚</span>
                            <span style="background: #4ecdc4; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer;">#环保设计</span>
                            <span style="background: #45b7d1; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer;">#极简主义</span>
                            <span style="background: #96ceb4; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer;">#复古回潮</span>
                        </div>
                    </div>

                    <!-- 设计师排行榜 -->
                    <div style="background: white; border-radius: 15px; padding: 20px; margin-bottom: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
                        <h4 style="margin-bottom: 15px; font-size: 16px;">🏆 本周设计师排行</h4>
                        <div style="display: flex; flex-direction: column; gap: 12px;">
                            <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #f8f9fa; border-radius: 10px;">
                                <div style="display: flex; align-items: center; gap: 12px;">
                                    <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #ff6b6b, #ffa726); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">1</div>
                                    <div>
                                        <div style="font-weight: 600; font-size: 14px;">设计大师Alex</div>
                                        <div style="font-size: 12px; color: #666;">点赞数: 8.9k</div>
                                    </div>
                                </div>
                                <div style="font-size: 20px;">👑</div>
                            </div>
                            <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #f8f9fa; border-radius: 10px;">
                                <div style="display: flex; align-items: center; gap: 12px;">
                                    <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #4ecdc4, #44a08d); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">2</div>
                                    <div>
                                        <div style="font-weight: 600; font-size: 14px;">时尚达人Lisa</div>
                                        <div style="font-size: 12px; color: #666;">点赞数: 7.2k</div>
                                    </div>
                                </div>
                                <div style="font-size: 20px;">🥈</div>
                            </div>
                            <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #f8f9fa; border-radius: 10px;">
                                <div style="display: flex; align-items: center; gap: 12px;">
                                    <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">3</div>
                                    <div>
                                        <div style="font-weight: 600; font-size: 14px;">创意师Mike</div>
                                        <div style="font-size: 12px; color: #666;">点赞数: 5.8k</div>
                                    </div>
                                </div>
                                <div style="font-size: 20px;">🥉</div>
                            </div>
                        </div>
                    </div>

                    <!-- 最新作品 -->
                    <div style="background: white; border-radius: 15px; padding: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
                        <h4 style="margin-bottom: 15px; font-size: 16px;">✨ 最新作品</h4>
                        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
                            <div style="background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%); border-radius: 12px; height: 120px; display: flex; align-items: center; justify-content: center; font-size: 36px; cursor: pointer; transition: all 0.3s ease;" onclick="likeWork(this)">🌸</div>
                            <div style="background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); border-radius: 12px; height: 120px; display: flex; align-items: center; justify-content: center; font-size: 36px; cursor: pointer; transition: all 0.3s ease;" onclick="likeWork(this)">⚡</div>
                        </div>
                    </div>
                </div>
            </main>
        </div>

        <!-- 个人中心页面 -->
        <div id="profile-page" class="page profile-page">
            <div class="profile-header">
                <div class="avatar">👤</div>
                <h2>时尚设计师</h2>
                <p>让创意成为生活的一部分</p>
            </div>

            <div class="profile-menu">
                <div class="menu-item" onclick="showDrafts()">
                    <div class="menu-left">
                        <span class="menu-icon">🎨</span>
                        <span>我的设计稿</span>
                    </div>
                    <span>></span>
                </div>
                <div class="menu-item" onclick="showMyWorks()">
                    <div class="menu-left">
                        <span class="menu-icon">📋</span>
                        <span>我的作品</span>
                    </div>
                    <span>></span>
                </div>
                <div class="menu-item" onclick="showTryOnHistory()">
                    <div class="menu-left">
                        <span class="menu-icon">👕</span>
                        <span>试穿历史</span>
                    </div>
                    <span>></span>
                </div>
                <div class="menu-item" onclick="showOrders()">
                    <div class="menu-left">
                        <span class="menu-icon">📦</span>
                        <span>订单管理</span>
                    </div>
                    <span>></span>
                </div>
                <div class="menu-item" onclick="showCollections()">
                    <div class="menu-left">
                        <span class="menu-icon">❤️</span>
                        <span>收藏夹</span>
                    </div>
                    <span>></span>
                </div>
                <div class="menu-item" onclick="showFollowers()">
                    <div class="menu-left">
                        <span class="menu-icon">👥</span>
                        <span>粉丝管理</span>
                    </div>
                    <span>></span>
                </div>
                <div class="menu-item" onclick="showSettings()">
                    <div class="menu-left">
                        <span class="menu-icon">⚙️</span>
                        <span>设置</span>
                    </div>
                    <span>></span>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <div class="nav-item active" data-page="home">
                <div class="nav-icon">🏠</div>
                <div class="nav-text">首页</div>
            </div>
            <div class="nav-item" data-page="design">
                <div class="nav-icon">🎨</div>
                <div class="nav-text">设计</div>
            </div>
            <div class="nav-item" data-page="ar">
                <div class="nav-icon">📱</div>
                <div class="nav-text">试衣</div>
            </div>
            <div class="nav-item" data-page="community">
                <div class="nav-icon">👥</div>
                <div class="nav-text">社区</div>
            </div>
            <div class="nav-item" data-page="profile">
                <div class="nav-icon">👤</div>
                <div class="nav-text">我的</div>
            </div>
        </nav>

        <!-- AI对话悬浮球 -->
        <div id="aiFloatingBall" class="ai-floating-ball">
            <div class="floating-ball-icon">🤖</div>
            <div class="breathing-ring"></div>
        </div>

        <!-- AI全屏对话界面 -->
        <div id="aiChatModal" class="ai-chat-modal" style="display: none;">
            <div class="ai-chat-container">
                <!-- 对话头部 -->
                <div class="ai-chat-header">
                    <div class="ai-chat-avatar">
                        <span class="avatar-icon">🤖</span>
                        <div class="avatar-status"></div>
                    </div>
                    <div class="ai-chat-info">
                        <h3>AI时尚顾问</h3>
                        <p id="aiChatSubtitle">智能搭配助手在线中...</p>
                    </div>
                    <button class="ai-chat-close" onclick="closeAIChat()">✕</button>
                </div>

                <!-- 对话消息区 -->
                <div class="ai-chat-messages" id="aiChatMessages">
                    <div class="ai-message">
                        <div class="message-avatar">🤖</div>
                        <div class="message-content">
                            <div class="message-text">
                                你好！我是你的专属AI时尚顾问✨<br>
                                我可以帮你进行服装搭配、配色建议、风格分析等。<br>
                                有什么可以帮助你的吗？
                            </div>
                            <div class="message-time">刚刚</div>
                        </div>
                    </div>
                </div>

                <!-- 快捷指令 -->
                <div class="ai-quick-commands" id="aiQuickCommands">
                    <div class="quick-command" onclick="sendQuickCommand('帮我搭配一套商务装')">
                        <span class="command-icon">👔</span>
                        <span>商务装搭配</span>
                    </div>
                    <div class="quick-command" onclick="sendQuickCommand('推荐春季流行色')">
                        <span class="command-icon">🌸</span>
                        <span>春季流行色</span>
                    </div>
                    <div class="quick-command" onclick="sendQuickCommand('分析我的穿衣风格')">
                        <span class="command-icon">✨</span>
                        <span>风格分析</span>
                    </div>
                    <div class="quick-command" onclick="sendQuickCommand('约会穿什么好看')">
                        <span class="command-icon">💕</span>
                        <span>约会搭配</span>
                    </div>
                </div>

                <!-- 输入工具栏 -->
                <div class="ai-chat-input-area">
                    <div class="input-toolbar">
                        <button class="input-tool" onclick="startVoiceInput()" title="语音输入">
                            <span class="tool-icon">🎤</span>
                        </button>
                        <button class="input-tool" onclick="uploadImage()" title="图片识别">
                            <span class="tool-icon">📷</span>
                        </button>
                        <button class="input-tool" onclick="showEmoji()" title="表情">
                            <span class="tool-icon">😊</span>
                        </button>
                    </div>
                    <div class="input-container">
                        <input 
                            type="text" 
                            id="aiChatInput" 
                            placeholder="说说你的搭配需求..." 
                            onkeypress="handleChatInputKeypress(event)"
                        >
                        <button class="send-button" onclick="sendMessage()">
                            <span class="send-icon">➤</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- AI推荐结果页面 -->
        <div id="aiRecommendationModal" class="ai-recommendation-modal" style="display: none;">
            <div class="recommendation-container">
                <div class="recommendation-header">
                    <h2>🎯 专属推荐方案</h2>
                    <button class="close-recommendation" onclick="closeRecommendation()">✕</button>
                </div>

                <div class="recommendation-content">
                    <!-- 3D穿搭展示 -->
                    <div class="recommendation-3d-section">
                        <div class="recommendation-3d-viewer">
                            <div class="model-3d-container">
                                <div class="model-3d-display">👤</div>
                                <div class="model-controls">
                                    <button class="model-control" onclick="rotateModel('left')">↶</button>
                                    <button class="model-control" onclick="rotateModel('right')">↷</button>
                                    <button class="model-control" onclick="resetModel()">⌂</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 方案选择器 -->
                        <div class="scheme-selector">
                            <h4>推荐方案</h4>
                            <div class="scheme-tabs">
                                <div class="scheme-tab active" onclick="selectScheme('scheme1')">方案1</div>
                                <div class="scheme-tab" onclick="selectScheme('scheme2')">方案2</div>
                                <div class="scheme-tab" onclick="selectScheme('scheme3')">方案3</div>
                            </div>
                        </div>
                    </div>

                    <!-- 配色原理说明 -->
                    <div class="color-theory-section">
                        <h4>🎨 配色原理解析</h4>
                        <div class="theory-content" id="colorTheoryContent">
                            <div class="theory-card">
                                <div class="theory-icon">🎯</div>
                                <div class="theory-text">
                                    <h5>主色调选择</h5>
                                    <p>基于您的肤色和喜好，选择了温暖的蓝色作为主色调，既显稳重又不失活力。</p>
                                </div>
                            </div>
                            <div class="theory-card">
                                <div class="theory-icon">🌈</div>
                                <div class="theory-text">
                                    <h5>色彩搭配</h5>
                                    <p>采用邻近色搭配法，蓝色与紫色的组合营造出和谐优雅的视觉效果。</p>
                                </div>
                            </div>
                            <div class="theory-card">
                                <div class="theory-icon">✨</div>
                                <div class="theory-text">
                                    <h5>层次感营造</h5>
                                    <p>通过深浅不同的蓝色系形成层次，增加整体造型的丰富度和立体感。</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="recommendation-actions">
                        <button class="action-btn secondary" onclick="shareRecommendation()">
                            <span class="btn-icon">📤</span>
                            <span>分享方案</span>
                        </button>
                        <button class="action-btn secondary" onclick="saveRecommendation()">
                            <span class="btn-icon">💾</span>
                            <span>收藏方案</span>
                        </button>
                        <button class="action-btn primary" onclick="importToDesignCenter()">
                            <span class="btn-icon">🎨</span>
                            <span>导入设计中心</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模态框 -->
        <div id="modal" class="modal">
            <div class="modal-content">
                <h3 id="modalTitle">开始设计</h3>
                <p id="modalText">选择你想要设计的服装类型</p>
                <div class="modal-actions">
                    <button class="btn btn-secondary" onclick="closeModal()">取消</button>
                    <button class="btn btn-primary" onclick="startDesign()">开始</button>
                </div>
            </div>
        </div>

        <!-- 设置模态框 -->
        <div id="settingsModal" class="settings-modal">
            <div class="settings-modal-content">
                <div class="settings-header">
                    <h2>设置</h2>
                    <button class="close-btn" onclick="closeSettingsModal()">×</button>
                </div>
                
                <div class="settings-body">
                    <!-- 个人资料部分 -->
                    <div class="settings-section">
                        <h3>个人资料</h3>
                        <div class="profile-info">
                            <div class="profile-avatar">
                                <div class="avatar-circle" onclick="changeAvatar()">
                                    <img id="userAvatar" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='30' fill='%23ff6b6b'/><circle cx='30' cy='22' r='8' fill='white'/><ellipse cx='30' cy='45' rx='15' ry='10' fill='white'/></svg>" alt="头像">
                                    <div class="avatar-edit">📷</div>
                                </div>
                            </div>
                            <div class="profile-details">
                                <div class="form-group">
                                    <label for="userName">用户名</label>
                                    <input type="text" id="userName" value="时尚设计师" placeholder="输入您的用户名">
                                </div>
                                <div class="form-group">
                                    <label for="userBio">个人简介</label>
                                    <textarea id="userBio" placeholder="介绍一下您自己...">热爱时尚设计，专注于创新与美学的完美结合</textarea>
                                </div>
                                <div class="form-group">
                                    <label for="userLocation">所在地</label>
                                    <input type="text" id="userLocation" value="上海" placeholder="您的所在城市">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 账户安全 -->
                    <div class="settings-section">
                        <h3>账户安全</h3>
                        <div class="security-items">
                            <div class="security-item" onclick="changePassword()">
                                <div class="security-left">
                                    <span class="security-icon">🔒</span>
                                    <div>
                                        <div class="security-title">修改密码</div>
                                        <div class="security-desc">定期更新密码保护账户安全</div>
                                    </div>
                                </div>
                                <span class="arrow">></span>
                            </div>
                            <div class="security-item" onclick="bindPhone()">
                                <div class="security-left">
                                    <span class="security-icon">📱</span>
                                    <div>
                                        <div class="security-title">手机号绑定</div>
                                        <div class="security-desc">已绑定：138****8888</div>
                                    </div>
                                </div>
                                <span class="arrow">></span>
                            </div>
                            <div class="security-item" onclick="bindEmail()">
                                <div class="security-left">
                                    <span class="security-icon">📧</span>
                                    <div>
                                        <div class="security-title">邮箱绑定</div>
                                        <div class="security-desc">user@example.com</div>
                                    </div>
                                </div>
                                <span class="arrow">></span>
                            </div>
                        </div>
                    </div>

                    <!-- 隐私设置 -->
                    <div class="settings-section">
                        <h3>隐私设置</h3>
                        <div class="privacy-items">
                            <div class="privacy-item">
                                <div class="privacy-left">
                                    <span class="privacy-icon">👁️</span>
                                    <div>
                                        <div class="privacy-title">作品可见性</div>
                                        <div class="privacy-desc">设置谁可以查看您的作品</div>
                                    </div>
                                </div>
                                <select class="privacy-select">
                                    <option value="public">公开</option>
                                    <option value="followers">仅粉丝</option>
                                    <option value="private">私人</option>
                                </select>
                            </div>
                            <div class="privacy-item">
                                <div class="privacy-left">
                                    <span class="privacy-icon">🔔</span>
                                    <div>
                                        <div class="privacy-title">消息通知</div>
                                        <div class="privacy-desc">接收点赞、评论等通知</div>
                                    </div>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" checked>
                                    <span class="slider"></span>
                                </label>
                            </div>
                            <div class="privacy-item">
                                <div class="privacy-left">
                                    <span class="privacy-icon">📊</span>
                                    <div>
                                        <div class="privacy-title">数据分析</div>
                                        <div class="privacy-desc">允许匿名数据分析</div>
                                    </div>
                                </div>
                                <label class="switch">
                                    <input type="checkbox" checked>
                                    <span class="slider"></span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- 应用设置 -->
                    <div class="settings-section">
                        <h3>应用设置</h3>
                        <div class="app-items">
                            <div class="app-item" onclick="showAbout()">
                                <div class="app-left">
                                    <span class="app-icon">ℹ️</span>
                                    <span class="app-title">关于应用</span>
                                </div>
                                <div class="app-right">
                                    <span class="version">v1.0.0</span>
                                    <span class="arrow">></span>
                                </div>
                            </div>
                            <div class="app-item" onclick="clearCache()">
                                <div class="app-left">
                                    <span class="app-icon">🗑️</span>
                                    <span class="app-title">清除缓存</span>
                                </div>
                                <div class="app-right">
                                    <span class="cache-size">23.5MB</span>
                                    <span class="arrow">></span>
                                </div>
                            </div>
                            <div class="app-item" onclick="feedback()">
                                <div class="app-left">
                                    <span class="app-icon">💬</span>
                                    <span class="app-title">意见反馈</span>
                                </div>
                                <span class="arrow">></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="settings-footer">
                    <button class="save-btn" onclick="saveSettings()">保存设置</button>
                    <button class="logout-btn" onclick="confirmLogout()">退出登录</button>
                </div>
            </div>
        </div>

        <!-- 上传作品模态框 -->
        <div id="uploadModal" class="upload-modal">
            <div class="upload-modal-content">
                <!-- 步骤指示器 -->
                <div class="upload-steps">
                    <div class="step active">
                        <div class="step-number">1</div>
                        <div class="step-label">选择类型</div>
                    </div>
                    <div class="step">
                        <div class="step-number">2</div>
                        <div class="step-label">上传内容</div>
                    </div>
                    <div class="step">
                        <div class="step-number">3</div>
                        <div class="step-label">作品信息</div>
                    </div>
                    <div class="step">
                        <div class="step-number">4</div>
                        <div class="step-label">发布设置</div>
                    </div>
                </div>

                <!-- 步骤1: 选择作品类型 -->
                <div class="upload-step active">
                    <h3>选择作品类型</h3>
                    <div class="work-types">
                        <div class="work-type" data-type="design" onclick="selectWorkType('design')">
                            <div class="type-icon">🎨</div>
                            <div class="type-name">设计稿</div>
                            <div class="type-desc">分享你的原创设计图稿</div>
                        </div>
                        <div class="work-type" data-type="photo" onclick="selectWorkType('photo')">
                            <div class="type-icon">📸</div>
                            <div class="type-name">实物照片</div>
                            <div class="type-desc">展示制作完成的服装作品</div>
                        </div>
                        <div class="work-type" data-type="video" onclick="selectWorkType('video')">
                            <div class="type-icon">🎬</div>
                            <div class="type-name">视频展示</div>
                            <div class="type-desc">动态展示服装效果</div>
                        </div>
                        <div class="work-type" data-type="3d" onclick="selectWorkType('3d')">
                            <div class="type-icon">🎭</div>
                            <div class="type-name">3D模型</div>
                            <div class="type-desc">上传3D服装模型文件</div>
                        </div>
                    </div>
                </div>

                <!-- 步骤2: 上传内容 -->
                <div class="upload-step">
                    <h3>上传内容</h3>
                    <div class="upload-options">
                        <!-- 文件上传区域 -->
                        <div class="upload-section">
                            <h4>📁 上传文件</h4>
                            <div class="file-upload-area" onclick="triggerFileUpload()">
                                <div class="upload-placeholder">
                                    <div class="upload-icon">📤</div>
                                    <div class="upload-text">点击上传文件</div>
                                    <div class="upload-hint">支持图片、视频格式，最多9个文件</div>
                                </div>
                            </div>
                            <input type="file" id="fileInput" multiple accept="image/*,video/*" style="display: none;" onchange="handleFileUpload(event)">
                            <div id="uploadPreview" class="upload-preview"></div>
                        </div>

                        <!-- 3D文件上传 -->
                        <div class="upload-section" id="3dUploadSection" style="display: none;">
                            <h4>🎭 上传3D模型</h4>
                            <div class="file-upload-area" onclick="trigger3DUpload()">
                                <div class="upload-placeholder">
                                    <div class="upload-icon">🎯</div>
                                    <div class="upload-text">上传3D模型文件</div>
                                    <div class="upload-hint">支持 .obj, .fbx, .gltf 格式</div>
                                </div>
                            </div>
                            <input type="file" id="file3DInput" accept=".obj,.fbx,.gltf" style="display: none;" onchange="handle3DUpload(event)">
                        </div>

                        <!-- 从我的设计选择 -->
                        <div class="upload-section">
                            <h4>🎨 从我的设计选择</h4>
                            <div class="my-designs-grid">
                                <div class="design-item" onclick="selectFromMyDesigns(1)">
                                    <div class="design-preview">👕</div>
                                    <div class="design-name">春季T恤</div>
                                </div>
                                <div class="design-item" onclick="selectFromMyDesigns(2)">
                                    <div class="design-preview">👗</div>
                                    <div class="design-name">夏日连衣裙</div>
                                </div>
                                <div class="design-item" onclick="selectFromMyDesigns(3)">
                                    <div class="design-preview">🧥</div>
                                    <div class="design-name">秋季外套</div>
                                </div>
                                <div class="design-item" onclick="selectFromMyDesigns(4)">
                                    <div class="design-preview">👖</div>
                                    <div class="design-name">休闲裤</div>
                                </div>
                                <div class="design-item" onclick="selectFromMyDesigns(5)">
                                    <div class="design-preview">🧣</div>
                                    <div class="design-name">围巾设计</div>
                                </div>
                                <div class="design-item" onclick="selectFromMyDesigns(6)">
                                    <div class="design-preview">👒</div>
                                    <div class="design-name">帽子系列</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 步骤3: 作品信息 -->
                <div class="upload-step">
                    <h3>作品信息</h3>
                    <div class="description-form">
                        <div class="form-group">
                            <label for="workTitle">作品标题 *</label>
                            <input type="text" id="workTitle" placeholder="给你的作品起个好听的名字" maxlength="50">
                            <div class="char-count"><span id="titleCount">0</span>/50</div>
                        </div>
                        
                        <div class="form-group">
                            <label for="workDescription">作品描述</label>
                            <textarea id="workDescription" placeholder="介绍一下你的设计理念和创作过程..." maxlength="500"></textarea>
                            <div class="char-count"><span id="descCount">0</span>/500</div>
                        </div>
                        
                        <div class="form-group">
                            <label>选择分类</label>
                            <select>
                                <option value="">请选择分类</option>
                                <option value="casual">休闲装</option>
                                <option value="formal">正装</option>
                                <option value="sport">运动装</option>
                                <option value="evening">晚装</option>
                                <option value="accessories">配饰</option>
                            </select>
                        </div>
                        
                        <div class="tags-container">
                            <label>添加标签</label>
                            <div class="popular-tags">
                                <span class="tag" onclick="toggleTag(this)">#时尚</span>
                                <span class="tag" onclick="toggleTag(this)">#原创</span>
                                <span class="tag" onclick="toggleTag(this)">#简约</span>
                                <span class="tag" onclick="toggleTag(this)">#复古</span>
                                <span class="tag" onclick="toggleTag(this)">#街头</span>
                                <span class="tag" onclick="toggleTag(this)">#优雅</span>
                                <span class="tag" onclick="toggleTag(this)">#运动</span>
                                <span class="tag" onclick="toggleTag(this)">#环保</span>
                            </div>
                            <input type="text" id="customTag" placeholder="输入自定义标签后按回车" onkeypress="addCustomTag(event)">
                        </div>
                    </div>
                </div>

                <!-- 步骤4: 发布设置 -->
                <div class="upload-step">
                    <h3>发布设置</h3>
                    <div class="publish-settings">
                        <div class="setting-group">
                            <label>作品可见性</label>
                            <div class="radio-group">
                                <label class="radio-option">
                                    <input type="radio" name="visibility" value="public" checked>
                                    <div class="radio-custom"></div>
                                    <div class="option-content">
                                        <div class="option-title">公开</div>
                                        <div class="option-desc">所有人都可以查看你的作品</div>
                                    </div>
                                </label>
                                <label class="radio-option">
                                    <input type="radio" name="visibility" value="followers">
                                    <div class="radio-custom"></div>
                                    <div class="option-content">
                                        <div class="option-title">仅粉丝可见</div>
                                        <div class="option-desc">只有关注你的用户可以查看</div>
                                    </div>
                                </label>
                                <label class="radio-option">
                                    <input type="radio" name="visibility" value="private">
                                    <div class="radio-custom"></div>
                                    <div class="option-content">
                                        <div class="option-title">私密</div>
                                        <div class="option-desc">只有你自己可以查看</div>
                                    </div>
                                </label>
                            </div>
                        </div>
                        
                        <div class="setting-group">
                            <label>下载权限</label>
                            <div class="radio-group">
                                <label class="radio-option">
                                    <input type="radio" name="download" value="allow" checked>
                                    <div class="radio-custom"></div>
                                    <div class="option-content">
                                        <div class="option-title">允许下载</div>
                                        <div class="option-desc">其他用户可以下载你的作品</div>
                                    </div>
                                </label>
                                <label class="radio-option">
                                    <input type="radio" name="download" value="forbid">
                                    <div class="radio-custom"></div>
                                    <div class="option-content">
                                        <div class="option-title">禁止下载</div>
                                        <div class="option-desc">保护你的原创作品</div>
                                    </div>
                                </label>
                            </div>
                        </div>
                        
                        <div class="setting-group">
                            <label>其他设置</label>
                            <label class="checkbox-option">
                                <input type="checkbox" id="allowComments" checked>
                                <div class="checkbox-custom"></div>
                                <div class="option-content">
                                    <div class="option-title">允许评论</div>
                                    <div class="option-desc">其他用户可以对你的作品进行评论</div>
                                </div>
                            </label>
                            <label class="checkbox-option">
                                <input type="checkbox" id="copyrightAgree">
                                <div class="checkbox-custom"></div>
                                <div class="option-content">
                                    <div class="option-title">版权声明 *</div>
                                    <div class="option-desc">我确认拥有此作品的版权，并同意平台使用条款</div>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- 模态框底部按钮 -->
                <div class="upload-modal-footer">
                    <button class="btn btn-outline" onclick="closeUploadModal()">取消</button>
                    <button class="btn btn-outline" id="prevBtn" onclick="prevStep()" style="display: none;">上一步</button>
                    <button class="btn btn-primary" id="nextBtn" onclick="nextStep()">下一步</button>
                    <button class="btn btn-primary" id="publishBtn" onclick="publishWork()" style="display: none;">发布作品</button>
                </div>
            </div>
        </div>

        <!-- 草稿箱模态框 -->
        <div id="draftsModal" class="upload-modal">
            <div class="upload-modal-content drafts-content">
                <div style="padding: 20px 30px; border-bottom: 1px solid #e9ecef;">
                    <h3>草稿箱</h3>
                    <p style="color: #666; font-size: 14px; margin-top: 5px;">管理你的草稿作品</p>
                </div>
                
                <div class="drafts-list">
                    <div class="draft-item">
                        <div class="draft-preview">👕</div>
                        <div class="draft-info">
                            <div class="draft-title">春季T恤设计</div>
                            <div class="draft-time">保存于 2024-03-15</div>
                        </div>
                        <div class="draft-actions">
                            <button onclick="editDraft(1)">编辑</button>
                            <button onclick="deleteDraft(1)">删除</button>
                        </div>
                    </div>
                    
                    <div class="draft-item">
                        <div class="draft-preview">👗</div>
                        <div class="draft-info">
                            <div class="draft-title">夏日连衣裙</div>
                            <div class="draft-time">保存于 2024-03-14</div>
                        </div>
                        <div class="draft-actions">
                            <button onclick="editDraft(2)">编辑</button>
                            <button onclick="deleteDraft(2)">删除</button>
                        </div>
                    </div>
                    
                    <div class="draft-item">
                        <div class="draft-preview">🧥</div>
                        <div class="draft-info">
                            <div class="draft-title">秋季外套概念</div>
                            <div class="draft-time">保存于 2024-03-12</div>
                        </div>
                        <div class="draft-actions">
                            <button onclick="editDraft(3)">编辑</button>
                            <button onclick="deleteDraft(3)">删除</button>
                        </div>
                    </div>
                </div>
                
                <div class="upload-modal-footer">
                    <button class="btn btn-outline" onclick="closeDraftsModal()">关闭</button>
                    <button class="btn btn-primary" onclick="openUploadModal(); closeDraftsModal();">新建作品</button>
                </div>
            </div>
        </div>

        <!-- 我的作品模态框 -->
        <div id="myWorksModal" class="upload-modal">
            <div class="upload-modal-content">
                <div style="padding: 20px 30px; border-bottom: 1px solid #e9ecef;">
                    <h3>我的作品</h3>
                    <p style="color: #666; font-size: 14px; margin-top: 5px;">管理你发布的作品</p>
                </div>
                
                <!-- 标签页 -->
                <div class="works-tabs">
                    <div class="tab active" onclick="switchWorksTab('published')">已发布</div>
                    <div class="tab" onclick="switchWorksTab('analytics')">数据分析</div>
                </div>
                
                <!-- 已发布作品 -->
                <div id="publishedWorks" class="works-content">
                    <div class="work-item">
                        <div class="work-preview">🌸</div>
                        <div class="work-info">
                            <div class="work-title">春季花朵印花T恤</div>
                            <div class="work-stats">
                                <span>❤️ 1.2k</span>
                                <span>💬 89</span>
                                <span>👁️ 5.6k</span>
                            </div>
                        </div>
                        <div class="work-actions">
                            <button onclick="editWork(1)">编辑</button>
                            <button onclick="deleteWork(1)">删除</button>
                        </div>
                    </div>
                    
                    <div class="work-item">
                        <div class="work-preview">⚡</div>
                        <div class="work-info">
                            <div class="work-title">未来科技风外套</div>
                            <div class="work-stats">
                                <span>❤️ 2.1k</span>
                                <span>💬 156</span>
                                <span>👁️ 8.9k</span>
                            </div>
                        </div>
                        <div class="work-actions">
                            <button onclick="editWork(2)">编辑</button>
                            <button onclick="deleteWork(2)">删除</button>
                        </div>
                    </div>
                    
                    <div class="work-item">
                        <div class="work-preview">🌿</div>
                        <div class="work-info">
                            <div class="work-title">环保材质连衣裙</div>
                            <div class="work-stats">
                                <span>❤️ 856</span>
                                <span>💬 67</span>
                                <span>👁️ 3.2k</span>
                            </div>
                        </div>
                        <div class="work-actions">
                            <button onclick="editWork(3)">编辑</button>
                            <button onclick="deleteWork(3)">删除</button>
                        </div>
                    </div>
                </div>
                
                <!-- 数据分析 -->
                <div id="analyticsWorks" class="works-content" style="display: none;">
                    <div class="analytics-summary">
                        <div class="analytics-item">
                            <div class="analytics-number">12</div>
                            <div class="analytics-label">总作品数</div>
                        </div>
                        <div class="analytics-item">
                            <div class="analytics-number">8.9k</div>
                            <div class="analytics-label">总点赞数</div>
                        </div>
                        <div class="analytics-item">
                            <div class="analytics-number">2.3k</div>
                            <div class="analytics-label">总浏览量</div>
                        </div>
                    </div>
                    
                    <div style="padding: 20px; text-align: center; color: #666;">
                        <div style="font-size: 48px; margin-bottom: 15px;">📊</div>
                        <div>详细数据分析功能</div>
                        <div style="font-size: 14px; margin-top: 8px;">即将上线，敬请期待</div>
                    </div>
                </div>
                
                <div class="upload-modal-footer">
                    <button class="btn btn-outline" onclick="closeMyWorksModal()">关闭</button>
                    <button class="btn btn-outline" onclick="showDrafts(); closeMyWorksModal();">草稿箱</button>
                    <button class="btn btn-primary" onclick="openUploadModal(); closeMyWorksModal();">发布新作品</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let currentSlide = 0;
        let slideInterval;
        let selectedColor = '#ff6b6b';

        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            initBannerSlider();
            initNavigation();
            initInteractions();
        });

        // 轮播图功能
        function initBannerSlider() {
            const slider = document.getElementById('bannerSlider');
            const indicators = document.querySelectorAll('.indicator');
            const slides = document.querySelectorAll('.banner-slide');
            
            // 自动播放
            slideInterval = setInterval(nextSlide, 4000);
            
            // 指示器点击事件
            indicators.forEach((indicator, index) => {
                indicator.addEventListener('click', () => {
                    goToSlide(index);
                });
            });
            
            // 轮播图点击跳转事件
            slides.forEach((slide, index) => {
                slide.addEventListener('click', () => {
                    bannerClick(index);
                });
            });
            
            // 鼠标悬停暂停
            slider.addEventListener('mouseenter', () => {
                clearInterval(slideInterval);
            });
            
            slider.addEventListener('mouseleave', () => {
                slideInterval = setInterval(nextSlide, 4000);
            });
        }

        function nextSlide() {
            currentSlide = (currentSlide + 1) % 3;
            updateSlider();
        }

        function goToSlide(index) {
            currentSlide = index;
            updateSlider();
        }

        function updateSlider() {
            const slider = document.getElementById('bannerSlider');
            const indicators = document.querySelectorAll('.indicator');
            
            slider.style.transform = `translateX(-${currentSlide * 100}%)`;
            
            indicators.forEach((indicator, index) => {
                indicator.classList.toggle('active', index === currentSlide);
            });
        }
        
        // 轮播图点击跳转功能
        function bannerClick(index) {
            // 根据轮播图索引跳转到不同页面
            switch(index) {
                case 0: // 春季新品发布
                    switchPage('design');
                    // 更新导航状态
                    updateNavigation('design');
                    showNotification('春季新品', '欢迎查看春季新品系列！');
                    break;
                case 1: // AI智能搭配
                    showModal('AI智能搭配', '基于您的喜好，我们为您推荐了以下服装', '查看推荐', () => {
                        closeModal(); // 关闭模态框
                        switchPage('ar');
                        updateNavigation('ar');
                    });
                    break;
                case 2: // 设计大赛进行中
                    showModal('设计大赛', '设计大赛正在进行中，立即参与！', '查看详情', () => {
                        closeModal(); // 关闭模态框
                        switchPage('community');
                        updateNavigation('community');
                    });
                    break;
                default:
                    break;
            }
        }
        
        // 更新导航状态的辅助函数
        function updateNavigation(page) {
            const navItems = document.querySelectorAll('.nav-item');
            navItems.forEach(nav => nav.classList.remove('active'));
            document.querySelector(`.nav-item[data-page="${page}"]`).classList.add('active');
        }

        // 导航功能
        function initNavigation() {
            const navItems = document.querySelectorAll('.nav-item');
            
            navItems.forEach(item => {
                item.addEventListener('click', () => {
                    const page = item.dataset.page;
                    switchPage(page);
                    
                    // 更新导航状态
                    navItems.forEach(nav => nav.classList.remove('active'));
                    item.classList.add('active');
                });
            });
        }

        function switchPage(pageId) {
            const pages = document.querySelectorAll('.page');
            
            pages.forEach(page => {
                page.style.display = 'none';
            });
            
            const targetPage = document.getElementById(pageId + '-page');
            if (targetPage) {
                targetPage.style.display = 'block';
                targetPage.classList.add('fade-in');
                
                setTimeout(() => {
                    targetPage.classList.remove('fade-in');
                }, 300);
            }
        }

        // 交互功能
        function initInteractions() {
            // 添加脉搏动画
            const style = document.createElement('style');
            style.textContent = `
                @keyframes pulse {
                    0%, 100% { transform: scale(1); }
                    50% { transform: scale(1.1); }
                }
            `;
            document.head.appendChild(style);
        }

        // 模态框功能
        function showDesignModal() {
            showModal('开始设计', '选择你想要设计的服装类型', '开始', startDesign);
        }
        
        function showModal(title, text, actionText = '开始', actionCallback = startDesign) {
            const modal = document.getElementById('modal');
            const modalTitle = document.getElementById('modalTitle');
            const modalText = document.getElementById('modalText');
            const primaryBtn = document.querySelector('.modal-actions .btn-primary');
            
            modalTitle.textContent = title;
            modalText.textContent = text;
            primaryBtn.textContent = actionText;
            primaryBtn.onclick = actionCallback;
            
            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }

        function closeModal() {
            const modal = document.getElementById('modal');
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        function startDesign() {
            closeModal();
            switchPage('design');
            // 更新导航状态
            const navItems = document.querySelectorAll('.nav-item');
            navItems.forEach(nav => nav.classList.remove('active'));
            document.querySelector('.nav-item[data-page="design"]').classList.add('active');
            
            showNotification('开始设计', '欢迎来到设计中心！');
        }

        // 作品详情
        function showWorkDetail(title) {
            showNotification('作品详情', `正在查看《${title}》的详细信息`);
        }

        // AI推荐引擎相关全局变量
        let aiChatHistory = [];
        let isVoiceRecording = false;
        let currentRecommendationScheme = 'scheme1';

        // AI推荐引擎功能
        function openAIChat(type) {
            const modal = document.getElementById('aiChatModal');
            const subtitle = document.getElementById('aiChatSubtitle');
            const quickCommands = document.getElementById('aiQuickCommands');
            
            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
            
            // 根据类型设置不同的对话主题
            switch(type) {
                case 'occasion':
                    subtitle.textContent = '场合搭配专家为您服务...';
                    showAIMessage('我来帮您根据不同场合设计完美搭配！请告诉我您要参加什么场合？');
                    break;
                case 'color':
                    subtitle.textContent = '配色大师为您分析...';
                    showAIMessage('专业配色分析师为您服务！我可以根据您的喜好和肤色，推荐最适合的颜色组合。');
                    break;
                case 'style':
                    subtitle.textContent = '风格顾问在线中...';
                    showAIMessage('让我来分析您的个人风格！请描述一下您喜欢的穿衣风格，或者上传一张照片。');
                    break;
                case 'free':
                    subtitle.textContent = '自由对话模式中...';
                    showAIMessage('有任何时尚相关的问题都可以问我哦！无论是搭配建议、流行趋势还是设计灵感。');
                    break;
            }
            
            // 隐藏快捷指令（进入对话状态）
            quickCommands.style.display = 'none';
        }

        function closeAIChat() {
            const modal = document.getElementById('aiChatModal');
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
            
            // 重置快捷指令显示
            const quickCommands = document.getElementById('aiQuickCommands');
            quickCommands.style.display = 'flex';
        }

        function showAIMessage(text) {
            const messagesContainer = document.getElementById('aiChatMessages');
            const messageDiv = document.createElement('div');
            messageDiv.className = 'ai-message';
            
            const currentTime = new Date().toLocaleTimeString('zh-CN', {
                hour: '2-digit',
                minute: '2-digit'
            });
            
            messageDiv.innerHTML = `
                <div class="message-avatar">🤖</div>
                <div class="message-content">
                    <div class="message-text">${text}</div>
                    <div class="message-time">${currentTime}</div>
                </div>
            `;
            
            messagesContainer.appendChild(messageDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
            
            // 添加到对话历史
            aiChatHistory.push({
                type: 'ai',
                text: text,
                time: currentTime
            });
        }

        function showUserMessage(text) {
            const messagesContainer = document.getElementById('aiChatMessages');
            const messageDiv = document.createElement('div');
            messageDiv.className = 'user-message';
            
            const currentTime = new Date().toLocaleTimeString('zh-CN', {
                hour: '2-digit',
                minute: '2-digit'
            });
            
            messageDiv.innerHTML = `
                <div class="message-avatar">👤</div>
                <div class="message-content">
                    <div class="message-text">${text}</div>
                    <div class="message-time">${currentTime}</div>
                </div>
            `;
            
            messagesContainer.appendChild(messageDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
            
            // 添加到对话历史
            aiChatHistory.push({
                type: 'user',
                text: text,
                time: currentTime
            });
        }

        function sendMessage() {
            const input = document.getElementById('aiChatInput');
            const message = input.value.trim();
            
            if (!message) return;
            
            // 显示用户消息
            showUserMessage(message);
            input.value = '';
            
            // 模拟AI回复
            setTimeout(() => {
                const aiResponse = generateAIResponse(message);
                showAIMessage(aiResponse);
                
                // 检查是否需要显示推荐结果
                if (shouldShowRecommendation(message)) {
                    setTimeout(() => {
                        showAIMessage('我已经为您准备了专属的搭配方案，点击查看详细推荐！');
                        setTimeout(() => {
                            openRecommendationResult();
                        }, 1000);
                    }, 2000);
                }
            }, 1000 + Math.random() * 2000);
        }

        function sendQuickCommand(command) {
            // 隐藏快捷指令
            const quickCommands = document.getElementById('aiQuickCommands');
            quickCommands.style.display = 'none';
            
            // 发送快捷指令
            showUserMessage(command);
            
            // AI回复
            setTimeout(() => {
                const response = generateAIResponse(command);
                showAIMessage(response);
                
                if (shouldShowRecommendation(command)) {
                    setTimeout(() => {
                        showAIMessage('我为您精心准备了搭配方案，让我们来看看推荐结果！');
                        setTimeout(() => {
                            openRecommendationResult();
                        }, 1000);
                    }, 2000);
                }
            }, 1500);
        }

        function generateAIResponse(userMessage) {
            const responses = {
                '商务': [
                    '商务装搭配需要注重专业感和权威性。推荐选择深色西装，搭配白色或浅蓝色衬衫，以及经典的领带。',
                    '对于商务场合，建议选择海军蓝或深灰色作为主色调，这样既显稳重又不失现代感。'
                ],
                '休闲': [
                    '休闲装的核心是舒适与时尚的平衡。可以尝试牛仔裤搭配舒适的T恤或针织衫。',
                    '休闲风格可以更多地运用色彩层次，比如浅色系的组合会让人看起来更加放松自然。'
                ],
                '春季': [
                    '春季流行色彩偏向清新自然，推荐薄荷绿、樱花粉、天空蓝等颜色。',
                    '春天是万物复苏的季节，服装色彩也应该充满生机，浅色调和柔和的渐变色都是不错的选择。'
                ],
                '约会': [
                    '约会装要在优雅与个性之间找到平衡。推荐选择有设计感但不过分夸张的单品。',
                    '约会时的配色可以选择温暖的色调，比如粉色、桃色或者优雅的紫色系。'
                ]
            };
            
            // 简单的关键词匹配
            for (let keyword in responses) {
                if (userMessage.includes(keyword)) {
                    const keywordResponses = responses[keyword];
                    return keywordResponses[Math.floor(Math.random() * keywordResponses.length)];
                }
            }
            
            // 默认回复
            const defaultResponses = [
                '这是一个很有趣的想法！让我为您分析一下最适合的搭配方案。',
                '根据您的需求，我建议从色彩搭配入手，创造出和谐统一的视觉效果。',
                '很好的问题！时尚搭配的关键在于了解自己的风格定位和场合需求。',
                '我理解您的想法，让我为您推荐一些专业的搭配建议。'
            ];
            
            return defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
        }

        function shouldShowRecommendation(message) {
            const triggerWords = ['搭配', '推荐', '建议', '方案', '帮我', '想要', '设计'];
            return triggerWords.some(word => message.includes(word));
        }

        function handleChatInputKeypress(event) {
            if (event.key === 'Enter') {
                sendMessage();
            }
        }

        // 多模态输入功能
        function startVoiceInput() {
            if (isVoiceRecording) {
                stopVoiceInput();
                return;
            }
            
            isVoiceRecording = true;
            const button = event.target.closest('.input-tool');
            button.style.background = 'rgba(255, 107, 107, 0.3)';
            button.innerHTML = '<span class="tool-icon">⏸️</span>';
            
            showNotification('语音输入', '正在录音中...');
            
            // 模拟语音识别
            setTimeout(() => {
                stopVoiceInput();
                const input = document.getElementById('aiChatInput');
                input.value = '帮我搭配一套适合春天的休闲装';
                showNotification('语音识别', '语音转换完成');
            }, 3000);
        }

        function stopVoiceInput() {
            isVoiceRecording = false;
            const button = document.querySelector('.input-tool');
            button.style.background = 'rgba(255,255,255,0.15)';
            button.innerHTML = '<span class="tool-icon">🎤</span>';
        }

        function uploadImage() {
            // 创建文件输入
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.accept = 'image/*';
            
            fileInput.onchange = function(e) {
                const file = e.target.files[0];
                if (file) {
                    showNotification('图片识别', '正在分析您的穿搭照片...');
                    
                    // 模拟图片识别
                    setTimeout(() => {
                        showUserMessage('📷 [已上传穿搭照片]');
                        setTimeout(() => {
                            showAIMessage('我看到您穿的是一套休闲风格的搭配！主要颜色是蓝色系，整体很清新。我可以为您推荐一些类似风格但更加时尚的搭配方案。');
                        }, 1500);
                    }, 2000);
                }
            };
            
            fileInput.click();
        }

        function showEmoji() {
            const emojis = ['😊', '👍', '❤️', '✨', '🎨', '👔', '👕', '👗', '💫', '🌟'];
            const input = document.getElementById('aiChatInput');
            const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
            input.value += randomEmoji;
            input.focus();
        }

        // 悬浮球点击事件
        document.addEventListener('DOMContentLoaded', function() {
            const floatingBall = document.getElementById('aiFloatingBall');
            if (floatingBall) {
                floatingBall.addEventListener('click', function() {
                    openAIChat('free');
                });
            }
        });

        // 推荐结果页面功能
        function openRecommendationResult() {
            closeAIChat();
            const modal = document.getElementById('aiRecommendationModal');
            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
            
            // 初始化推荐内容
            updateRecommendationContent();
        }

        function closeRecommendation() {
            const modal = document.getElementById('aiRecommendationModal');
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        }

        function updateRecommendationContent() {
            const schemes = {
                'scheme1': {
                    name: '经典商务风',
                    colors: ['#2c3e50', '#34495e', '#95a5a6'],
                    theory: [
                        {
                            icon: '🎯',
                            title: '主色调选择',
                            desc: '基于您的需求，选择了沉稳的深蓝色作为主色调，既显专业又不失现代感。'
                        },
                        {
                            icon: '🌈',
                            title: '色彩搭配',
                            desc: '采用单色调搭配法，深浅不同的蓝色系营造层次感和稳重感。'
                        },
                        {
                            icon: '✨',
                            title: '视觉效果',
                            desc: '整体造型简洁大方，适合商务场合，彰显专业形象。'
                        }
                    ]
                },
                'scheme2': {
                    name: '春日清新风',
                    colors: ['#f39c12', '#e67e22', '#d35400'],
                    theory: [
                        {
                            icon: '🎯',
                            title: '季节特色',
                            desc: '春季专属的温暖色调，充满生机与活力，让人眼前一亮。'
                        },
                        {
                            icon: '🌈',
                            title: '暖色搭配',
                            desc: '橙色系的渐变搭配，营造温暖阳光的感觉，适合春日出行。'
                        },
                        {
                            icon: '✨',
                            title: '心理效应',
                            desc: '暖色调能够提升心情，增加亲和力和活力感。'
                        }
                    ]
                },
                'scheme3': {
                    name: '优雅紫罗兰',
                    colors: ['#9b59b6', '#8e44ad', '#663399'],
                    theory: [
                        {
                            icon: '🎯',
                            title: '色彩心理',
                            desc: '紫色代表优雅与神秘，是富有创造力和艺术感的颜色选择。'
                        },
                        {
                            icon: '🌈',
                            title: '渐变层次',
                            desc: '紫色系的深浅渐变，创造出丰富的视觉层次和高级感。'
                        },
                        {
                            icon: '✨',
                            title: '独特气质',
                            desc: '紫色搭配能够突出个人品味，展现独特的时尚态度。'
                        }
                    ]
                }
            };
            
            const currentScheme = schemes[currentRecommendationScheme];
            const theoryContent = document.getElementById('colorTheoryContent');
            
            theoryContent.innerHTML = currentScheme.theory.map(item => `
                <div class="theory-card">
                    <div class="theory-icon">${item.icon}</div>
                    <div class="theory-text">
                        <h5>${item.title}</h5>
                        <p>${item.desc}</p>
                    </div>
                </div>
            `).join('');
        }

        function selectScheme(schemeId) {
            currentRecommendationScheme = schemeId;
            
            // 更新方案选择状态
            const tabs = document.querySelectorAll('.scheme-tab');
            tabs.forEach(tab => tab.classList.remove('active'));
            event.target.classList.add('active');
            
            // 更新推荐内容
            updateRecommendationContent();
            
            const schemeNames = {
                'scheme1': '经典商务风',
                'scheme2': '春日清新风',
                'scheme3': '优雅紫罗兰'
            };
            
            showNotification('方案切换', `已切换到${schemeNames[schemeId]}`);
        }

        function rotateModel(direction) {
            const model = document.querySelector('.model-3d-display');
            let currentRotation = parseInt(model.dataset.rotation || '0');
            
            if (direction === 'left') {
                currentRotation -= 90;
            } else if (direction === 'right') {
                currentRotation += 90;
            }
            
            model.style.transform = `rotateY(${currentRotation}deg)`;
            model.dataset.rotation = currentRotation;
            
            showNotification('3D旋转', `模型已旋转 ${direction === 'left' ? '向左' : '向右'} 90°`);
        }

        function resetModel() {
            const model = document.querySelector('.model-3d-display');
            model.style.transform = 'rotateY(0deg)';
            model.dataset.rotation = '0';
            showNotification('视角重置', '已重置到正面视角');
        }

        function shareRecommendation() {
            showNotification('分享成功', '推荐方案已复制到剪贴板');
        }

        function saveRecommendation() {
            showNotification('收藏成功', '推荐方案已保存到我的收藏');
        }

        function importToDesignCenter() {
            closeRecommendation();
            switchPage('design');
            updateNavigation('design');
            showNotification('导入成功', 'AI推荐方案已导入到设计中心');
        }

        function viewAIRecommendation(type) {
            const recommendationTypes = {
                'business': '商务精英装',
                'casual': '休闲度假风'
            };
            
            showNotification('查看推荐', `正在查看${recommendationTypes[type]}推荐`);
            setTimeout(() => {
                openRecommendationResult();
            }, 1000);
        }

        // 保持向后兼容
        function showAIRecommend(style) {
            openAIChat('free');
            setTimeout(() => {
                sendQuickCommand(`帮我搭配一套${style}风格的服装`);
            }, 1000);
        }

        // 新版设计中心全局变量
        let currentBodyPart = 'overall';
        let currentMaterial = 'cotton';
        let modelRotation = 0;
        let partColors = {
            'overall': '#ff6b6b',
            'left-sleeve': '#ff6b6b',
            'right-sleeve': '#ff6b6b',
            'hood': '#ff6b6b',
            'body': '#ff6b6b'
        };
        let colorHistory = [];

        // 3D模型控制函数
        function rotateModel(direction) {
            const model = document.getElementById('main3DModel');
            if (direction === 'left') {
                modelRotation -= 90;
            } else if (direction === 'right') {
                modelRotation += 90;
            }
            
            model.style.transform = `rotateY(${modelRotation}deg)`;
            showNotification('3D旋转', `模型已旋转到 ${modelRotation}°`);
        }

        function resetModelView() {
            modelRotation = 0;
            const model = document.getElementById('main3DModel');
            model.style.transform = 'rotateY(0deg)';
            showNotification('视角重置', '已重置为正面视角');
        }


        // 分区控制面板
        function toggleZonePanel() {
            const content = document.querySelector('.zone-control-panel .panel-content');
            const btn = document.querySelector('.expand-btn');
            
            if (content.style.display === 'none') {
                content.style.display = 'block';
                btn.textContent = '⌄';
            } else {
                content.style.display = 'none';
                btn.textContent = '⌃';
            }
        }

        // 部位选择功能
        function selectBodyPart(part) {
            currentBodyPart = part;
            
            // 更新Tab状态
            const partTabs = document.querySelectorAll('.part-tab');
            partTabs.forEach(tab => tab.classList.remove('active'));
            document.querySelector(`[data-part="${part}"]`).classList.add('active');
            
            // 更新当前部位显示
            const partNames = {
                'overall': '整体',
                'left-sleeve': '左袖',
                'right-sleeve': '右袖',
                'hood': '帽子',
                'body': '身体'
            };
            
            document.getElementById('currentPartName').textContent = partNames[part];
            document.getElementById('currentPartColor').style.background = partColors[part];
            
            // 更新3D模型高亮效果
            highlightBodyPart(part);
            
            showNotification('部位选择', `已选择 ${partNames[part]} 部位`);
        }

        function highlightBodyPart(part) {
            // 这里可以添加3D模型部位高亮的逻辑
            const model = document.getElementById('main3DModel');
            
            // 根据选择的部位显示不同的模型或高亮效果
            switch(part) {
                case 'overall':
                    model.textContent = '👕';
                    break;
                case 'left-sleeve':
                    model.textContent = '👈👕';
                    break;
                case 'right-sleeve':
                    model.textContent = '👕👉';
                    break;
                case 'hood':
                    model.textContent = '🎩👕';
                    break;
                case 'body':
                    model.textContent = '👕';
                    break;
            }
        }


        // 颜色选择功能（增强版）
        function selectColor(color) {
            selectedColor = color;
            partColors[currentBodyPart] = color;
            
            // 更新颜色选择状态
            const swatches = document.querySelectorAll('.color-swatch');
            swatches.forEach(swatch => {
                swatch.classList.remove('active');
                if (swatch.getAttribute('data-color') === color) {
                    swatch.classList.add('active');
                }
            });
            
            // 更新当前部位颜色指示器
            document.getElementById('currentPartColor').style.background = color;
            
            // 保存到历史记录
            if (!colorHistory.includes(color)) {
                colorHistory.push(color);
                if (colorHistory.length > 10) {
                    colorHistory.shift();
                }
            }
            
            // 更新3D模型颜色
            const model = document.getElementById('main3DModel');
            model.style.color = color;
            
            showNotification('颜色应用', `${currentBodyPart} 部位已应用颜色 ${color}`);
        }


        // 自定义颜色选择
        function selectCustomColor(color) {
            selectColor(color);
        }

        function addCustomColor() {
            const customColor = document.getElementById('customColorPicker').value;
            selectColor(customColor);
            showNotification('自定义颜色', '已添加自定义颜色到色盘');
        }

        // 色盘管理功能
        function syncColorToAll() {
            const currentColor = partColors[currentBodyPart];
            Object.keys(partColors).forEach(part => {
                partColors[part] = currentColor;
            });
            
            showNotification('颜色同步', '已将当前颜色同步到所有部位');
        }

        function showColorHistory() {
            const historySection = document.getElementById('colorHistorySection');
            if (historySection.style.display === 'none') {
                historySection.style.display = 'block';
            } else {
                historySection.style.display = 'none';
            }
        }

        function saveColorScheme() {
            const schemeName = prompt('请输入配色方案名称：');
            if (schemeName) {
                // 这里可以实现保存配色方案到本地存储
                localStorage.setItem(`colorScheme_${Date.now()}`, JSON.stringify({
                    name: schemeName,
                    colors: partColors,
                    timestamp: Date.now()
                }));
                
                showNotification('方案保存', `配色方案 "${schemeName}" 已保存`);
            }
        }

        function loadColorScheme(schemeId) {
            // 预设的配色方案
            const schemes = {
                'scheme1': {
                    'overall': '#ff6b6b',
                    'left-sleeve': '#4ecdc4', 
                    'right-sleeve': '#4ecdc4',
                    'hood': '#ffeaa7',
                    'body': '#ff6b6b'
                },
                'scheme2': {
                    'overall': '#667eea',
                    'left-sleeve': '#764ba2',
                    'right-sleeve': '#764ba2', 
                    'hood': '#a29bfe',
                    'body': '#667eea'
                }
            };
            
            const scheme = schemes[schemeId];
            if (scheme) {
                partColors = {...scheme};
                selectBodyPart(currentBodyPart); // 刷新显示
                showNotification('方案加载', '配色方案已加载');
            }
        }

        // 高级定制工具函数
        function openAdvancedEmbroidery() {
            showNotification('刺绣编辑器', `正在为 ${currentBodyPart} 部位开启高级刺绣编辑器`);
        }

        function openTextureSystem() {
            showNotification('贴图系统', `正在为 ${currentBodyPart} 部位开启贴图编辑系统`);
        }

        function openPatternLibrary() {
            showNotification('图案库', '正在打开海量设计素材库');
        }

        function openAIDesigner() {
            showNotification('AI设计师', '正在启动智能配色建议系统');
        }

        // 服装切片图颜色切换功能
        let currentSelectedPart = 'overall';
        let availableColors = [
            // 原有颜色
            '蓝色', '粉色', '牛油果绿', '白色', '黑色', '橘色', '利灰',
            // 新增颜色
            '宝蓝色', '浅驼色', '测试色', '深灰绿', '深紫色', '深绿色',
            '真朱', '睿智金', '红色', '萌萌绿', '蒂芙尼蓝', '长春花蓝',
            '青紫', '靓丽黄'
        ];
        
        function selectClothingColor(colorName) {
            console.log('选择颜色:', colorName, '当前部位:', currentSelectedPart);
            
            if (currentSelectedPart === 'overall') {
                // 整体颜色切换 - 所有部位
                updateAllParts(colorName);
            } else {
                // 单独部位颜色切换
                updateSinglePart(currentSelectedPart, colorName);
            }
            
            // 更新颜色选择状态
            updateColorSwatchState(colorName);
            
            showNotification('颜色切换', `已切换到${colorName}`);
        }
        
        function updateAllParts(colorName) {
            const parts = ['s1', 't1', 'y1', 'z1'];
            parts.forEach(part => {
                updatePartImage(part, colorName);
            });
        }
        
        function updateSinglePart(partName, colorName) {
            updatePartImage(partName, colorName);
        }
        
        function updatePartImage(partName, colorName) {
            const imgElement = document.querySelector(`#layer-${partName} img`);
            if (imgElement) {
                const imagePath = getImagePath(partName, colorName);
                imgElement.src = imagePath;
                console.log('更新图片:', partName, '→', imagePath);
            }
        }
        
        function getImagePath(partName, colorName) {
            // 路径映射：优先查找新切片图，再查找原切片图
            function tryPath(basePath, partName, colorName) {
                const partMap = {
                    's1': 'S1.png',
                    't1': 'T1.png', 
                    'y1': 'Y1.png',
                    'z1': 'Z1.png'
                };
                
                const filename = partMap[partName];
                if (!filename) return '';
                
                // 检查是否在新切片图中
                const newPath = `切片图/切片图/${colorName}/${filename}`;
                
                // 特殊处理：浅驼色的文件名是小写的
                if (colorName === '浅驼色') {
                    const lowercaseFilename = filename.toLowerCase();
                    return `切片图/切片图/${colorName}/${lowercaseFilename}`;
                }
                
                // 检查新切片图路径是否存在（这里我们假设新路径优先）
                if (['宝蓝色', '浅驼色', '测试色', '深灰绿', '深紫色', '深绿色',
                     '真朱', '睿智金', '红色', '萌萌绿', '蒂芙尼蓝', '长春花蓝',
                     '青紫', '靓丽黄'].includes(colorName)) {
                    return newPath;
                }
                
                // 特殊处理：橘色和利灰只有T1和Y1
                if ((colorName === '橘色' || colorName === '利灰') && (partName === 's1' || partName === 'z1')) {
                    // 如果橘色或利灰没有该部位，使用蓝色替代
                    return `切片图共7个/切片图共7个/蓝色/${filename}`;
                }
                
                // 返回原切片图路径
                return `切片图共7个/切片图共7个/${colorName}/${filename}`;
            }
            
            return tryPath('', partName, colorName);
        }
        
        function selectBodyPart(partName) {
            console.log('选择部位:', partName);
            currentSelectedPart = partName;
            
            // 更新按钮状态
            document.querySelectorAll('.part-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelector(`[data-part="${partName}"]`).classList.add('active');
            
            // 更新当前部位名称显示
            const partNames = {
                'overall': '整体',
                's1': 'S1部位',
                't1': 'T1部位',
                'y1': 'Y1部位',
                'z1': 'Z1部位'
            };
            
            document.getElementById('currentPartName').textContent = partNames[partName] || partName;
            
            // 高亮显示选中部位
            highlightSelectedPart(partName);
            
            showNotification('部位选择', `已选择${partNames[partName]}`);
        }
        
        function highlightSelectedPart(partName) {
            // 清除所有高亮
            document.querySelectorAll('.part-image').forEach(img => {
                img.classList.remove('highlighted', 'selected');
            });
            
            // 高亮选中部位
            if (partName !== 'overall') {
                const selectedImg = document.querySelector(`#layer-${partName} img`);
                if (selectedImg) {
                    selectedImg.classList.add('selected');
                }
            }
        }
        
        function updateColorSwatchState(colorName) {
            document.querySelectorAll('.color-swatch').forEach(swatch => {
                swatch.classList.remove('active');
                if (swatch.getAttribute('data-color') === colorName) {
                    swatch.classList.add('active');
                }
            });
        }

        // 兼容性函数（保持向后兼容）
        function openColorPicker() {
            showNotification('颜色设计器', '请使用下方的智能色盘系统');
        }

        function openPatternEditor() {
            openPatternLibrary();
        }

        function openEmbroidery() {
            openAdvancedEmbroidery();
        }

        function openAccessories() {
            showNotification('配饰搭配', '配饰功能将在高级定制中提供');
        }

        // AR试穿功能
        function selectScene(scene) {
            const sceneNames = {
                'office': '办公场景',
                'date': '约会场景', 
                'party': '派对场景',
                'casual': '休闲场景'
            };
            
            showNotification('场景切换', `已切换到${sceneNames[scene]}`);
        }

        // 社区功能
        function likeWork(element) {
            element.style.transform = 'scale(0.95)';
            setTimeout(() => {
                element.style.transform = 'scale(1)';
            }, 150);
            
            showNotification('点赞成功', '感谢你的支持！');
        }

        // 个人中心功能
        function showMyDesigns() {
            showNotification('我的设计稿', '查看你的所有设计作品');
        }

        function showTryOnHistory() {
            showNotification('试穿历史', '查看你的试穿记录');
        }

        function showOrders() {
            showNotification('订单管理', '查看你的订单状态');
        }

        function showCollections() {
            showNotification('收藏夹', '查看你收藏的作品');
        }

        function showFollowers() {
            showNotification('粉丝管理', '管理你的粉丝关系');
        }

        function showSettings() {
            document.getElementById('settingsModal').style.display = 'block';
        }

        function closeSettingsModal() {
            document.getElementById('settingsModal').style.display = 'none';
        }

        // 头像更换功能
        function changeAvatar() {
            const avatarOptions = [
                "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='30' fill='%23ff6b6b'/><circle cx='30' cy='22' r='8' fill='white'/><ellipse cx='30' cy='45' rx='15' ry='10' fill='white'/></svg>",
                "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='30' fill='%2364b5f6'/><circle cx='30' cy='22' r='8' fill='white'/><ellipse cx='30' cy='45' rx='15' ry='10' fill='white'/></svg>",
                "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='30' fill='%2381c784'/><circle cx='30' cy='22' r='8' fill='white'/><ellipse cx='30' cy='45' rx='15' ry='10' fill='white'/></svg>",
                "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='30' fill='%23ffb74d'/><circle cx='30' cy='22' r='8' fill='white'/><ellipse cx='30' cy='45' rx='15' ry='10' fill='white'/></svg>"
            ];
            
            const currentAvatar = document.getElementById('userAvatar').src;
            let currentIndex = avatarOptions.indexOf(currentAvatar);
            const nextIndex = (currentIndex + 1) % avatarOptions.length;
            
            document.getElementById('userAvatar').src = avatarOptions[nextIndex];
            showNotification('头像已更新', '您的头像已成功更换！');
        }

        // 修改密码功能
        function changePassword() {
            showNotification('修改密码', '密码修改功能将在后续版本中提供');
        }

        // 绑定手机号功能
        function bindPhone() {
            showNotification('手机号绑定', '手机号绑定功能将在后续版本中提供');
        }

        // 绑定邮箱功能
        function bindEmail() {
            showNotification('邮箱绑定', '邮箱绑定功能将在后续版本中提供');
        }

        // 关于应用功能
        function showAbout() {
            showNotification('关于应用', 'FashionCraft v1.0.0 - 专业的服装DIY设计平台');
        }

        // 清除缓存功能
        function clearCache() {
            if (confirm('确定要清除缓存吗？这将删除临时文件和设计草稿。')) {
                showNotification('缓存已清除', '成功清除 23.5MB 缓存数据');
                // 更新缓存大小显示
                document.querySelector('.cache-size').textContent = '0MB';
                setTimeout(() => {
                    document.querySelector('.cache-size').textContent = '1.2MB';
                }, 2000);
            }
        }

        // 意见反馈功能
        function feedback() {
            showNotification('意见反馈', '感谢您的反馈！我们会认真对待每一条建议');
        }

        // 保存设置功能
        function saveSettings() {
            const userName = document.getElementById('userName').value;
            const userBio = document.getElementById('userBio').value;
            const userLocation = document.getElementById('userLocation').value;
            
            if (!userName.trim()) {
                showNotification('保存失败', '用户名不能为空');
                return;
            }
            
            // 这里可以添加实际的保存逻辑
            console.log('保存设置:', {
                userName: userName,
                userBio: userBio,
                userLocation: userLocation
            });
            
            showNotification('设置已保存', '您的个人设置已成功保存！');
        }

        // 退出登录确认
        function confirmLogout() {
            if (confirm('确定要退出登录吗？未保存的设计将会丢失。')) {
                logout();
            }
        }

        // 退出登录功能
        function logout() {
            // 清除用户数据
            localStorage.removeItem('userSession');
            localStorage.removeItem('userPreferences');
            
            showNotification('退出成功', '您已成功退出登录');
            
            // 关闭设置模态框
            closeSettingsModal();
            
            // 这里可以添加重定向到登录页面的逻辑
            setTimeout(() => {
                showNotification('跳转登录', '正在跳转到登录页面...');
            }, 1500);
        }

        // 上传功能相关变量
        let currentUploadStep = 1;
        let selectedWorkType = '';
        let uploadedFiles = [];
        let selectedTags = [];
        let selectedDesigns = [];

        // 打开上传模态框
        function openUploadModal() {
            document.getElementById('uploadModal').style.display = 'flex';
            resetUploadModal();
        }

        // 关闭上传模态框
        function closeUploadModal() {
            document.getElementById('uploadModal').style.display = 'none';
        }

        // 重置上传模态框
        function resetUploadModal() {
            currentUploadStep = 1;
            selectedWorkType = '';
            uploadedFiles = [];
            selectedTags = [];
            selectedDesigns = [];
            updateUploadStep();
            clearFormData();
        }

        // 更新上传步骤
        function updateUploadStep() {
            // 更新步骤指示器
            document.querySelectorAll('.step').forEach((step, index) => {
                if (index + 1 <= currentUploadStep) {
                    step.classList.add('active');
                } else {
                    step.classList.remove('active');
                }
            });

            // 显示对应步骤内容
            document.querySelectorAll('.upload-step').forEach((step, index) => {
                if (index + 1 === currentUploadStep) {
                    step.classList.add('active');
                } else {
                    step.classList.remove('active');
                }
            });

            // 更新按钮状态
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            const publishBtn = document.getElementById('publishBtn');

            prevBtn.style.display = currentUploadStep > 1 ? 'block' : 'none';
            
            if (currentUploadStep < 4) {
                nextBtn.style.display = 'block';
                publishBtn.style.display = 'none';
            } else {
                nextBtn.style.display = 'none';
                publishBtn.style.display = 'block';
            }
        }

        // 下一步
        function nextStep() {
            if (validateCurrentStep()) {
                currentUploadStep++;
                updateUploadStep();
            }
        }

        // 上一步
        function prevStep() {
            currentUploadStep--;
            updateUploadStep();
        }

        // 验证当前步骤
        function validateCurrentStep() {
            switch (currentUploadStep) {
                case 1:
                    if (!selectedWorkType) {
                        showNotification('请选择作品类型');
                        return false;
                    }
                    break;
                case 2:
                    if (uploadedFiles.length === 0 && selectedDesigns.length === 0) {
                        showNotification('请上传内容或选择设计');
                        return false;
                    }
                    break;
                case 3:
                    const title = document.getElementById('workTitle').value.trim();
                    if (!title) {
                        showNotification('请输入作品标题');
                        return false;
                    }
                    break;
                case 4:
                    const copyrightAgree = document.getElementById('copyrightAgree').checked;
                    if (!copyrightAgree) {
                        showNotification('请同意版权声明');
                        return false;
                    }
                    break;
            }
            return true;
        }

        // 选择作品类型
        function selectWorkType(type) {
            selectedWorkType = type;
            document.querySelectorAll('.work-type').forEach(item => {
                item.classList.remove('selected');
            });
            document.querySelector(`[data-type="${type}"]`).classList.add('selected');
        }

        // 触发文件上传
        function triggerFileUpload() {
            document.getElementById('fileInput').click();
        }

        // 触发3D文件上传
        function trigger3DUpload() {
            document.getElementById('file3DInput').click();
        }

        // 处理文件上传
        function handleFileUpload(event) {
            const files = Array.from(event.target.files);
            files.forEach(file => {
                if (uploadedFiles.length < 9) {
                    uploadedFiles.push(file);
                    addFilePreview(file);
                }
            });
        }

        // 处理3D文件上传
        function handle3DUpload(event) {
            const file = event.target.files[0];
            if (file) {
                showNotification('3D文件上传成功: ' + file.name);
            }
        }

        // 添加文件预览
        function addFilePreview(file) {
            const preview = document.getElementById('uploadPreview');
            const previewItem = document.createElement('div');
            previewItem.className = 'preview-item';
            
            if (file.type.startsWith('image/')) {
                const img = document.createElement('img');
                img.src = URL.createObjectURL(file);
                previewItem.appendChild(img);
            } else {
                previewItem.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; font-size: 24px;">🎬</div>';
            }
            
            const removeBtn = document.createElement('button');
            removeBtn.className = 'preview-remove';
            removeBtn.innerHTML = '×';
            removeBtn.onclick = () => removeFilePreview(file, previewItem);
            previewItem.appendChild(removeBtn);
            
            preview.appendChild(previewItem);
        }

        // 移除文件预览
        function removeFilePreview(file, previewItem) {
            const index = uploadedFiles.indexOf(file);
            if (index > -1) {
                uploadedFiles.splice(index, 1);
            }
            previewItem.remove();
        }

        // 从我的设计选择
        function selectFromMyDesigns(designId) {
            const designItem = document.querySelector(`[onclick="selectFromMyDesigns(${designId})"]`);
            if (selectedDesigns.includes(designId)) {
                selectedDesigns = selectedDesigns.filter(id => id !== designId);
                designItem.classList.remove('selected');
            } else {
                selectedDesigns.push(designId);
                designItem.classList.add('selected');
            }
        }

        // 切换标签
        function toggleTag(tagElement) {
            const tagText = tagElement.textContent;
            if (selectedTags.includes(tagText)) {
                selectedTags = selectedTags.filter(tag => tag !== tagText);
                tagElement.classList.remove('selected');
            } else {
                selectedTags.push(tagText);
                tagElement.classList.add('selected');
            }
        }

        // 添加自定义标签
        function addCustomTag(event) {
            if (event.key === 'Enter') {
                const input = event.target;
                const tagText = '#' + input.value.trim();
                if (tagText.length > 1 && !selectedTags.includes(tagText)) {
                    selectedTags.push(tagText);
                    
                    const tagElement = document.createElement('span');
                    tagElement.className = 'tag selected';
                    tagElement.textContent = tagText;
                    tagElement.onclick = () => toggleTag(tagElement);
                    
                    document.querySelector('.popular-tags').appendChild(tagElement);
                    input.value = '';
                }
            }
        }

        // 发布作品
        function publishWork() {
            if (validateCurrentStep()) {
                // 模拟发布过程
                showNotification('发布成功', '你的作品已成功发布到社区！');
                closeUploadModal();
                
                // 可以在这里添加实际的发布逻辑
                console.log('发布作品:', {
                    type: selectedWorkType,
                    files: uploadedFiles,
                    designs: selectedDesigns,
                    title: document.getElementById('workTitle').value,
                    description: document.getElementById('workDescription').value,
                    tags: selectedTags,
                    visibility: document.querySelector('input[name="visibility"]:checked').value,
                    download: document.querySelector('input[name="download"]:checked').value
                });
            }
        }

        // 清空表单数据
        function clearFormData() {
            document.getElementById('workTitle').value = '';
            document.getElementById('workDescription').value = '';
            document.getElementById('customTag').value = '';
            document.getElementById('uploadPreview').innerHTML = '';
            document.querySelectorAll('.work-type').forEach(item => item.classList.remove('selected'));
            document.querySelectorAll('.design-item').forEach(item => item.classList.remove('selected'));
            document.querySelectorAll('.tag').forEach(item => item.classList.remove('selected'));
        }

        // 字符计数
        document.addEventListener('DOMContentLoaded', function() {
            const titleInput = document.getElementById('workTitle');
            const descInput = document.getElementById('workDescription');
            const titleCount = document.getElementById('titleCount');
            const descCount = document.getElementById('descCount');
            
            if (titleInput && titleCount) {
                titleInput.addEventListener('input', function() {
                    titleCount.textContent = this.value.length;
                });
            }
            
            if (descInput && descCount) {
                descInput.addEventListener('input', function() {
                    descCount.textContent = this.value.length;
                });
            }
        });

        // 草稿箱功能
        function showDrafts() {
            document.getElementById('draftsModal').style.display = 'flex';
        }

        function closeDraftsModal() {
            document.getElementById('draftsModal').style.display = 'none';
        }

        function editDraft(draftId) {
            showNotification('编辑草稿: ' + draftId);
            closeDraftsModal();
            openUploadModal();
        }

        function deleteDraft(draftId) {
            if (confirm('确定要删除这个草稿吗？')) {
                showNotification('草稿已删除');
            }
        }

        // 我的作品功能
        function showMyWorks() {
            document.getElementById('myWorksModal').style.display = 'flex';
        }

        function closeMyWorksModal() {
            document.getElementById('myWorksModal').style.display = 'none';
        }

        function switchWorksTab(tab) {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            event.target.classList.add('active');
            
            if (tab === 'published') {
                document.getElementById('publishedWorks').style.display = 'block';
                document.getElementById('analyticsWorks').style.display = 'none';
            } else {
                document.getElementById('publishedWorks').style.display = 'none';
                document.getElementById('analyticsWorks').style.display = 'block';
            }
        }

        function editWork(workId) {
            showNotification('编辑作品: ' + workId);
            closeMyWorksModal();
        }

        function deleteWork(workId) {
            if (confirm('确定要删除这个作品吗？')) {
                showNotification('作品已删除');
            }
        }

        // 通知系统
        function showNotification(title, message) {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                background: linear-gradient(45deg, #ff6b6b, #ffa726);
                color: white;
                padding: 15px 20px;
                border-radius: 25px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.3);
                z-index: 10000;
                max-width: 300px;
                text-align: center;
                animation: slideDown 0.3s ease;
            `;
            
            notification.innerHTML = `
                <div style="font-weight: 600; margin-bottom: 5px;">${title}</div>
                <div style="font-size: 14px; opacity: 0.9;">${message}</div>
            `;
            
            // 添加滑入动画
            const style = document.createElement('style');
            style.textContent = `
                @keyframes slideDown {
                    from { transform: translateX(-50%) translateY(-100%); opacity: 0; }
                    to { transform: translateX(-50%) translateY(0); opacity: 1; }
                }
            `;
            document.head.appendChild(style);
            
            document.body.appendChild(notification);
            
            // 3秒后自动移除
            setTimeout(() => {
                notification.style.animation = 'slideDown 0.3s ease reverse';
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }

        // 触摸手势支持
        let startX, startY;

        document.addEventListener('touchstart', function(e) {
            startX = e.touches[0].clientX;
            startY = e.touches[0].clientY;
        });

        document.addEventListener('touchend', function(e) {
            if (!startX || !startY) return;
            
            let endX = e.changedTouches[0].clientX;
            let endY = e.changedTouches[0].clientY;
            
            let diffX = startX - endX;
            let diffY = startY - endY;
            
            // 横向滑动切换轮播图
            if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
                if (diffX > 0) {
                    nextSlide();
                } else {
                    currentSlide = currentSlide > 0 ? currentSlide - 1 : 2;
                    updateSlider();
                }
            }
            
            startX = startY = null;
        });

        // 页面可见性API - 当页面不可见时暂停动画
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                clearInterval(slideInterval);
            } else {
                slideInterval = setInterval(nextSlide, 4000);
            }
        });

        // 防止点击穿透
        document.addEventListener('click', function(e) {
            if (e.target.closest('.modal')) {
                e.stopPropagation();
            }
        });

        // 模态框外部点击关闭
        document.getElementById('modal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });

        // 设置模态框外部点击关闭
        document.getElementById('settingsModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeSettingsModal();
            }
        });

        // 初始化服装设计器
        function initializeClothingDesigner() {
            // 设置默认宝蓝色
            selectClothingColor('宝蓝色');
            
            // 设置默认选中整体
            selectBodyPart('overall');
            
            console.log('服装设计器已初始化，已加载', availableColors.length, '种颜色');
        }

        // 页面加载完成后初始化设计器
        window.addEventListener('load', function() {
            setTimeout(initializeClothingDesigner, 500);
        });

        // ============ 3D试衣间功能函数 ============

        // 流程控制
        let currentFittingStep = 'upload';
        let selectedClothing = null;
        let userPhoto = null;

        function nextStep(stepName) {
            // 隐藏当前步骤
            document.getElementById(`${currentFittingStep}-step`).style.display = 'none';
            
            // 显示下一步骤
            document.getElementById(`${stepName}-step`).style.display = 'block';
            
            // 更新流程导航状态
            updateStepNavigation(stepName);
            
            currentFittingStep = stepName;
            
            showNotification('流程进度', `已进入${getStepTitle(stepName)}阶段`);
        }

        function previousStep(stepName) {
            // 隐藏当前步骤
            document.getElementById(`${currentFittingStep}-step`).style.display = 'none';
            
            // 显示上一步骤
            document.getElementById(`${stepName}-step`).style.display = 'block';
            
            // 更新流程导航状态
            updateStepNavigation(stepName);
            
            currentFittingStep = stepName;
        }

        function updateStepNavigation(activeStep) {
            document.querySelectorAll('.flow-step').forEach(step => {
                step.classList.remove('active');
                if (step.getAttribute('data-step') === activeStep) {
                    step.classList.add('active');
                }
            });
        }

        function getStepTitle(stepName) {
            const titles = {
                'upload': '照片上传',
                'clothing': '服装选择', 
                'fitting': '试衣展示'
            };
            return titles[stepName] || stepName;
        }

        // ============ 照片上传功能 ============

        function selectUploadMethod(method) {
            // 更新选择状态
            document.querySelectorAll('.upload-method').forEach(m => m.classList.remove('active'));
            document.querySelector(`[data-method="${method}"]`).classList.add('active');
            
            // 显示对应界面
            if (method === 'camera') {
                document.getElementById('camera-mode').style.display = 'block';
                document.getElementById('gallery-mode').style.display = 'none';
            } else {
                document.getElementById('camera-mode').style.display = 'none';
                document.getElementById('gallery-mode').style.display = 'block';
            }
            
            showNotification('上传方式', `已选择${method === 'camera' ? '拍照模式' : '相册选择'}`);
        }

        function startCamera() {
            showNotification('启动摄像头', '正在访问摄像头权限...');
            
            // 模拟摄像头启动
            setTimeout(() => {
                document.querySelector('.camera-placeholder').innerHTML = `
                    <div class="camera-icon">📹</div>
                    <div class="camera-text">摄像头已启动</div>
                    <div class="camera-hint">请对准镜头保持正面站立</div>
                `;
                showNotification('摄像头就绪', '可以开始拍摄了！');
            }, 1500);
        }

        function capturePhoto() {
            showNotification('拍摄照片', '正在拍摄...');
            
            // 模拟拍照效果
            setTimeout(() => {
                document.getElementById('pose-calibration').style.display = 'block';
                simulatePoseDetection();
                showNotification('拍摄成功', '正在进行姿势校准...');
            }, 1000);
        }

        function switchCamera() {
            showNotification('切换摄像头', '已切换到前置/后置摄像头');
        }

        function handlePhotoUpload(input) {
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    userPhoto = e.target.result;
                    document.getElementById('crop-area').style.display = 'block';
                    showNotification('照片上传', '请调整裁剪区域');
                };
                reader.readAsDataURL(file);
            }
        }

        function resetCrop() {
            showNotification('重置裁剪', '已重置到原始尺寸');
        }

        function confirmCrop() {
            document.getElementById('pose-calibration').style.display = 'block';
            simulatePoseDetection();
            showNotification('裁剪完成', '正在进行姿势校准...');
        }

        function simulatePoseDetection() {
            const statuses = document.querySelectorAll('.status-item');
            let currentIndex = 2; // 从身形分析开始
            
            const updateStatus = () => {
                if (currentIndex < statuses.length) {
                    const item = statuses[currentIndex];
                    const icon = item.querySelector('.status-icon');
                    icon.textContent = '✅';
                    currentIndex++;
                    
                    if (currentIndex < statuses.length) {
                        setTimeout(updateStatus, 1000);
                    } else {
                        showNotification('校准完成', '人体姿势识别成功！');
                    }
                }
            };
            
            setTimeout(updateStatus, 1000);
        }

        function recalibrate() {
            // 重置状态
            const statuses = document.querySelectorAll('.status-item');
            statuses.forEach((item, index) => {
                const icon = item.querySelector('.status-icon');
                if (index >= 2) {
                    icon.textContent = '⏳';
                }
            });
            
            simulatePoseDetection();
            showNotification('重新校准', '正在重新分析姿势...');
        }

        // ============ 服装选择功能 ============

        function switchClothingTab(tabName) {
            // 更新标签状态
            document.querySelectorAll('.clothing-tab').forEach(tab => tab.classList.remove('active'));
            document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
            
            // 显示对应内容
            document.querySelectorAll('.clothing-content').forEach(content => {
                content.style.display = 'none';
            });
            document.getElementById(`${tabName}-content`).style.display = 'block';
            
            const tabNames = {
                'my-designs': '我的设计',
                'community': '社区热门',
                'brands': '品牌合作'
            };
            
            showNotification('切换分类', `已切换到${tabNames[tabName]}`);
        }

        function selectClothing(clothingId) {
            selectedClothing = clothingId;
            
            // 视觉反馈
            document.querySelectorAll('.design-item, .trending-item, .brand-item').forEach(item => {
                item.classList.remove('selected');
            });
            event.currentTarget.classList.add('selected');
            
            showNotification('选择服装', '已选择该款设计，可以进行试穿了！');
        }

        // ============ 试衣展示功能 ============

        let currentRotation = 0;
        let currentLighting = 'natural';
        let compareMode = 'split';

        function rotateFitting(direction) {
            if (direction === 'left') {
                currentRotation -= 30;
            } else if (direction === 'right') {
                currentRotation += 30;
            } else {
                currentRotation = 0;
            }
            
            const viewport = document.querySelector('.fitting-viewport');
            if (viewport) {
                viewport.style.transform = `rotateY(${currentRotation}deg)`;
            }
            
            showNotification('旋转视角', `视角：${currentRotation}°`);
        }

        function setFittingLight(lightType) {
            // 更新按钮状态
            document.querySelectorAll('.lighting-btn').forEach(btn => btn.classList.remove('active'));
            event.currentTarget.classList.add('active');
            
            currentLighting = lightType;
            
            const lightFilters = {
                'natural': 'brightness(1.1) contrast(1.05)',
                'indoor': 'brightness(0.9) sepia(0.1)',
                'studio': 'brightness(1.2) contrast(1.1) saturate(1.1)'
            };
            
            const viewport = document.querySelector('.fitting-viewport');
            if (viewport) {
                viewport.style.filter = lightFilters[lightType];
            }
            
            const lightNames = {
                'natural': '自然光',
                'indoor': '室内光',
                'studio': '摄影光'
            };
            
            showNotification('光照调节', `已切换到${lightNames[lightType]}`);
        }

        function toggleCompare(mode) {
            // 更新按钮状态
            document.querySelectorAll('.compare-btn').forEach(btn => btn.classList.remove('active'));
            event.currentTarget.classList.add('active');
            
            compareMode = mode;
            
            const modeNames = {
                'split': '左右对比',
                'overlay': '叠加对比'
            };
            
            showNotification('对比模式', `已切换到${modeNames[mode]}`);
        }

        function retryFitting() {
            showNotification('重新试穿', '正在重新进行智能贴合...');
            
            // 模拟重新试穿过程
            setTimeout(() => {
                showNotification('试穿完成', '新的试穿效果已生成！');
            }, 2000);
        }

        // ============ 输出功能 ============

        function saveImageCard() {
            showNotification('保存形象卡', '正在生成专属形象卡...');
            
            setTimeout(() => {
                showNotification('保存成功', '形象卡已保存到相册！');
            }, 1500);
        }

        function shareToCommunity() {
            showNotification('分享到社区', '正在上传到设计社区...');
            
            setTimeout(() => {
                showNotification('分享成功', '已分享到社区，快去看看大家的反应吧！');
            }, 2000);
        }

        function buyNow() {
            if (!selectedClothing) {
                showNotification('购买提醒', '请先选择要购买的服装');
                return;
            }
            
            showNotification('跳转购买', '正在跳转到购买页面...');
            
            setTimeout(() => {
                showNotification('购买页面', '已为您打开购买链接！');
            }, 1000);
        }

        // ============ 试衣间初始化 ============

        function initializeFittingRoom() {
            // 设置默认状态
            currentFittingStep = 'upload';
            selectUploadMethod('camera');
            switchClothingTab('my-designs');
            
            console.log('3D试衣间已初始化');
        }

        // 页面加载时初始化试衣间
        document.addEventListener('DOMContentLoaded', function() {
            if (document.getElementById('ar-page')) {
                initializeFittingRoom();
            }
        });
    </script>
</body>
</html>