anne
/
exam_main_2026


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实验室安全教育与考试 — 管理后台</title>
<style>
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --blue:#1857d4;--blue-deep:#0f3ea8;--blue-mid:#2e6fe0;--blue-light:#eef3fd;--blue-xlight:#f5f8ff;
  --green:#10a37f;--green-dark:#0d8f6f;--green-light:#edfaf6;
  --orange:#e67e22;--orange-light:#fef6ec;
  --red:#e53e3e;--red-light:#fff5f5;
  --gray:#8896a7;--gray-light:#f4f6fa;--gray-border:#dde3ed;
  --text-primary:#1a2233;--text-secondary:#4a5568;--text-hint:#8896a7;
  --bg:#f0f4fb;--white:#ffffff;
  --radius:8px;--shadow:0 2px 12px rgba(24,87,212,.08);--shadow-md:0 4px 20px rgba(24,87,212,.12);
  --sidebar-w:260px;--header-h:64px;
}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text-primary);font-size:15px;display:flex;flex-direction:column;height:100vh;overflow:hidden;}

/* ===== HEADER ===== */
.admin-header{height:var(--header-h);background:linear-gradient(135deg,#1857d4 0%,#2e6fe0 100%);display:flex;align-items:center;padding:0 28px;gap:20px;flex-shrink:0;z-index:200;box-shadow:0 2px 8px rgba(24,87,212,.2);}
.header-logo{display:flex;align-items:center;gap:12px;color:#fff;font-size:17px;font-weight:700;letter-spacing:.3px;min-width:240px;}
.header-logo-icon{width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;}
.header-tabs{display:flex;gap:4px;flex:1;}
.header-tab{color:rgba(255,255,255,.75);font-size:14px;padding:7px 18px;border-radius:6px;cursor:pointer;transition:all .18s;font-weight:500;white-space:nowrap;}
.header-tab:hover{color:#fff;background:rgba(255,255,255,.12);}
.header-tab.active{color:#fff;background:rgba(255,255,255,.2);font-weight:600;}
.header-right{display:flex;align-items:center;gap:14px;margin-left:auto;}
.header-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;}
.header-username{color:rgba(255,255,255,.9);font-size:14px;}

/* ===== LAYOUT ===== */
.admin-body{display:flex;flex:1;overflow:hidden;}
.sidebar{width:var(--sidebar-w);background:var(--white);border-right:1px solid var(--gray-border);overflow-y:auto;flex-shrink:0;padding:16px 0;}
.sidebar::-webkit-scrollbar{width:4px;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(24,87,212,.15);border-radius:2px;}
.main-content{flex:1;overflow-y:auto;padding:32px 40px;}
.main-content::-webkit-scrollbar{width:7px;}
.main-content::-webkit-scrollbar-thumb{background:rgba(24,87,212,.15);border-radius:4px;}

/* ===== SIDEBAR ===== */
.nav-group{margin-bottom:6px;}
.nav-group-label{font-size:11px;color:var(--text-hint);font-weight:600;letter-spacing:.8px;padding:10px 20px 4px;text-transform:uppercase;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 20px;cursor:pointer;color:var(--text-secondary);font-size:14px;font-weight:500;transition:all .15s;border-left:3px solid transparent;margin:1px 0;}
.nav-item:hover{background:var(--blue-xlight);color:var(--blue);}
.nav-item.active{background:var(--blue-light);color:var(--blue);border-left-color:var(--blue);font-weight:600;}
.nav-item .nav-icon{font-size:16px;width:20px;text-align:center;}
.nav-sub{padding-left:20px;}
.nav-sub .nav-item{font-size:13px;padding:8px 16px;}

/* ===== PAGE SYSTEM ===== */
.page{display:none;}.page.active{display:block;}

/* ===== BREADCRUMB ===== */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text-hint);margin-bottom:24px;}
.breadcrumb a{color:var(--blue);cursor:pointer;text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb-sep{color:var(--gray-border);}

/* ===== PAGE HEADER ===== */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.page-title{font-size:22px;font-weight:700;color:var(--text-primary);}
.page-subtitle{font-size:14px;color:var(--text-hint);margin-top:4px;}

/* ===== CARDS ===== */
.card{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);}
.card-title{font-size:16px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:8px;margin-bottom:18px;}
.card-title::before{content:'';width:3px;height:16px;background:linear-gradient(180deg,var(--blue-mid),var(--blue-deep));border-radius:2px;display:inline-block;}

/* ===== STAT BOXES ===== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px;}
.stat-box{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);}
.stat-box-icon{font-size:32px;margin-bottom:10px;}
.stat-box-val{font-size:32px;font-weight:700;color:var(--text-primary);line-height:1;}
.stat-box-label{font-size:13px;color:var(--text-hint);margin-top:8px;}
.stat-box.blue{border-top:3px solid var(--blue);}
.stat-box.green{border-top:3px solid var(--green);}
.stat-box.orange{border-top:3px solid var(--orange);}
.stat-box.red{border-top:3px solid var(--red);}

/* ===== TAGS ===== */
.tag{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:500;}
.tag-blue{background:var(--blue-light);color:var(--blue);}
.tag-green{background:var(--green-light);color:var(--green-dark);}
.tag-orange{background:var(--orange-light);color:var(--orange);}
.tag-red{background:var(--red-light);color:var(--red);}
.tag-gray{background:var(--gray-light);color:var(--gray);}

/* ===== BTNS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;border:none;outline:none;transition:all .18s;padding:0 16px;height:36px;}
.btn:active{opacity:.85;}
.btn-primary{background:linear-gradient(135deg,var(--blue-mid) 0%,var(--blue-deep) 100%);color:#fff;box-shadow:0 2px 8px rgba(24,87,212,.25);}
.btn-green{background:linear-gradient(135deg,#12b48a 0%,var(--green-dark) 100%);color:#fff;}
.btn-outline{background:var(--white);color:var(--blue);border:1px solid rgba(24,87,212,.3);}
.btn-outline-gray{background:var(--white);color:var(--text-secondary);border:1px solid var(--gray-border);}
.btn-sm{height:30px;font-size:12px;padding:0 12px;border-radius:5px;}
.btn-danger{background:var(--white);color:var(--red);border:1px solid rgba(229,62,62,.3);}
.btn-icon{width:30px;height:30px;padding:0;border-radius:5px;}

/* ===== TABLE ===== */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--gray-border);}
table{width:100%;border-collapse:collapse;font-size:14px;}
thead tr{background:var(--gray-light);}
th{text-align:left;padding:12px 16px;color:var(--text-hint);font-weight:600;font-size:13px;border-bottom:1px solid var(--gray-border);white-space:nowrap;}
td{padding:14px 16px;border-bottom:1px solid var(--gray-border);color:var(--text-primary);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--blue-xlight);}

/* ===== FORM ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-grid.cols-1{grid-template-columns:1fr;}
.form-grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
.form-item{display:flex;flex-direction:column;gap:7px;}
.form-item.col-2{grid-column:span 2;}
.form-label{font-size:14px;color:var(--text-secondary);font-weight:500;}
.form-label.required::after{content:'*';color:var(--red);margin-left:3px;}
.form-input{width:100%;border:1px solid var(--gray-border);border-radius:6px;padding:9px 14px;font-size:14px;color:var(--text-primary);background:var(--white);outline:none;transition:border-color .2s;}
.form-input:focus{border-color:var(--blue);}
textarea.form-input{min-height:110px;resize:vertical;line-height:1.6;}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238c8c8c' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
.form-hint{font-size:12px;color:var(--text-hint);}

/* ===== TOGGLE ===== */
.toggle{position:relative;width:44px;height:24px;cursor:pointer;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:#ccc;border-radius:24px;transition:.3s;}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:white;border-radius:50%;transition:.3s;}
.toggle input:checked+.toggle-slider{background:var(--blue);}
.toggle input:checked+.toggle-slider::before{transform:translateX(20px);}

/* ===== SEARCH BAR ===== */
.search-bar{display:flex;gap:10px;align-items:center;margin-bottom:20px;flex-wrap:wrap;}
.search-input-wrap{position:relative;flex:1;min-width:240px;}
.search-input-wrap .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-hint);font-size:14px;}
.search-input{width:100%;border:1px solid var(--gray-border);border-radius:6px;padding:8px 14px 8px 36px;font-size:14px;outline:none;background:var(--white);}
.search-input:focus{border-color:var(--blue);}

/* ===== PAGINATION ===== */
.pagination{display:flex;align-items:center;gap:4px;margin-top:20px;justify-content:flex-end;}
.page-btn{min-width:34px;height:34px;border-radius:5px;border:1px solid var(--gray-border);background:var(--white);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);}
.page-btn:hover{border-color:var(--blue);color:var(--blue);}
.page-btn.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.page-info{font-size:13px;color:var(--text-hint);margin-left:10px;}

/* ===== TABS ===== */
.view-tabs{display:flex;gap:0;border-bottom:1px solid var(--gray-border);margin-bottom:24px;}
.view-tab{padding:10px 20px;cursor:pointer;font-size:14px;color:var(--text-hint);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;font-weight:500;}
.view-tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600;}

/* ===== DETAIL PANEL ===== */
.detail-section{margin-bottom:28px;}
.detail-section-title{font-size:13px;font-weight:600;color:var(--text-hint);text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--gray-border);}
.info-row{display:flex;padding:10px 0;border-bottom:1px solid var(--gray-border);}
.info-row:last-child{border-bottom:none;}
.info-key{width:130px;color:var(--text-hint);font-size:14px;flex-shrink:0;}
.info-val{flex:1;font-size:14px;color:var(--text-primary);font-weight:500;}

/* ===== UPLOAD AREA ===== */
.upload-area{border:2px dashed var(--gray-border);border-radius:8px;padding:28px;text-align:center;cursor:pointer;transition:all .2s;background:var(--gray-light);}
.upload-area:hover{border-color:var(--blue);background:var(--blue-xlight);}
.upload-icon{font-size:36px;margin-bottom:10px;}
.upload-text{font-size:14px;color:var(--text-hint);}

/* ===== RICH TEXT PLACEHOLDER ===== */
.rich-editor{border:1px solid var(--gray-border);border-radius:6px;overflow:hidden;}
.rich-toolbar{background:var(--gray-light);padding:8px 14px;display:flex;gap:6px;border-bottom:1px solid var(--gray-border);flex-wrap:wrap;}
.rich-tool-btn{background:var(--white);border:1px solid var(--gray-border);border-radius:4px;padding:3px 9px;font-size:13px;cursor:pointer;color:var(--text-secondary);}
.rich-tool-btn:hover{background:var(--blue-light);color:var(--blue);border-color:rgba(24,87,212,.3);}
.rich-body{min-height:130px;padding:14px;font-size:14px;color:var(--text-primary);outline:none;line-height:1.7;}

/* ===== QR CODE ===== */
.qr-box{width:80px;height:80px;background:var(--white);border:2px solid var(--gray-border);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:24px;cursor:pointer;transition:all .2s;}
.qr-box:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(24,87,212,.15);}

/* ===== ATTENDANCE ===== */
.attend-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--gray-border);}
.attend-row:last-child{border-bottom:none;}
.attend-avatar{width:38px;height:38px;border-radius:50%;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.attend-info{flex:1;}
.attend-status-yes{color:var(--green);font-size:12px;font-weight:600;}
.attend-status-no{color:var(--red);font-size:12px;font-weight:600;}
.attend-status-late{color:var(--orange);font-size:12px;font-weight:600;}

/* ===== TRAINING EVENT CARD (PC version) ===== */
.training-event-card{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .2s;box-shadow:var(--shadow);}
.training-event-card:hover{box-shadow:var(--shadow-md);border-color:rgba(24,87,212,.2);transform:translateY(-2px);}
.training-event-cover{width:100%;height:160px;background:linear-gradient(135deg,#1857d4,#2e6fe0);display:flex;align-items:center;justify-content:center;font-size:42px;position:relative;overflow:hidden;}
.training-event-body{padding:16px;}
.training-event-title{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:10px;line-height:1.4;}
.training-event-meta{font-size:13px;color:var(--text-hint);display:flex;flex-direction:column;gap:5px;}
.training-events-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}

/* ===== MODAL ===== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.active{display:flex;}
.modal-box{background:var(--white);border-radius:12px;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;animation:modalIn .22s ease;box-shadow:0 8px 40px rgba(24,87,212,.18);}
.modal-box.modal-lg{max-width:900px;}
.modal-header{padding:22px 28px 18px;border-bottom:1px solid var(--gray-border);display:flex;align-items:center;justify-content:space-between;}
.modal-title{font-size:17px;font-weight:700;color:var(--text-primary);}
.modal-close{cursor:pointer;font-size:20px;color:var(--text-hint);background:none;border:none;line-height:1;padding:4px;}
.modal-close:hover{color:var(--text-primary);}
.modal-body{padding:24px 28px;}
.modal-footer{padding:18px 28px;border-top:1px solid var(--gray-border);display:flex;align-items:center;justify-content:flex-end;gap:10px;}
@keyframes modalIn{from{transform:scale(.93) translateY(10px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}

/* ===== MISC ===== */
.mt8{margin-top:8px;}.mt12{margin-top:12px;}.mt16{margin-top:16px;}.mt20{margin-top:20px;}
.mb8{margin-bottom:8px;}.mb12{margin-bottom:12px;}.mb16{margin-bottom:16px;}
.flex{display:flex;}.flex-col{flex-direction:column;}.items-center{align-items:center;}
.justify-between{justify-content:space-between;}.gap8{gap:8px;}.gap12{gap:12px;}.gap16{gap:16px;}
.text-sm{font-size:13px;}.text-xs{font-size:12px;}.text-bold{font-weight:600;}.text-gray{color:var(--gray);}
.text-blue{color:var(--blue);}.text-green{color:var(--green);}.text-orange{color:var(--orange);}.text-red{color:var(--red);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.divider{height:1px;background:var(--gray-border);margin:20px 0;}
.empty-state{text-align:center;padding:60px 20px;color:var(--text-hint);}
.empty-icon{font-size:52px;margin-bottom:14px;}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.dot-green{background:var(--green);}.dot-orange{background:var(--orange);}.dot-red{background:var(--red);}.dot-gray{background:#b0bec5;}
.progress-wrap{background:#e8edf6;border-radius:4px;height:6px;overflow:hidden;margin-top:4px;}
.progress-bar{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--blue-mid),var(--blue));transition:width .4s;}
/* ===== PUBLISH TOGGLE (table-safe) ===== */
.pub-slider{position:absolute;inset:0;border-radius:24px;transition:.3s;cursor:pointer;}
.pub-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:white;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.pub-on{background:var(--blue);}
.pub-off{background:#ccc;}
.pub-on::before{transform:translateX(20px);}
</style>
</head>
<body>

<!-- ===== HEADER ===== -->
<div class="admin-header">
  <div class="header-logo">
    <div class="header-logo-icon">🔬</div>
    <span>实验室安全教育与考试</span>
  </div>
  <div class="header-right">
    <div onclick="window.open('admin_requirements.html','_blank')" style="cursor:pointer;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:6px;padding:4px 12px;font-size:13px;color:#fff;white-space:nowrap;">需求说明</div>
    <div style="color:rgba(255,255,255,.7);font-size:12px;">2026-07-31</div>
    <div class="header-username">管理员</div>
    <div class="header-avatar">👤</div>
  </div>
</div>

<!-- ===== BODY ===== -->
<div class="admin-body">

  <!-- ===== SIDEBAR ===== -->
  <div class="sidebar" id="sidebar">
    <div class="nav-group">
      <div class="nav-group-label">培训活动</div>
      <div class="nav-item active" onclick="showPage('page-training-plan')"><span class="nav-icon">📋</span>培训计划</div>
      <div class="nav-item" onclick="showPage('page-training-activity-list')"><span class="nav-icon">📅</span>线下培训</div>
    </div>
    <div class="nav-group">
      <div class="nav-group-label">考试管理</div>
      <div class="nav-item" onclick="showPage('page-exam-template')"><span class="nav-icon">📋</span>考试模板</div>
    </div>
  </div>

  <!-- ===== MAIN CONTENT ===== -->
  <div class="main-content">

    <!-- ==================== PAGE: 培训计划 ==================== -->
    <div class="page active" id="page-training-plan">
      <div class="breadcrumb"><a onclick="showPage('page-workbench');switchMenu('workbench')">工作台</a><span class="breadcrumb-sep">/</span><span>培训活动</span><span class="breadcrumb-sep">/</span><span>培训计划</span></div>
      <div class="page-header">
        <div><div class="page-title">培训计划</div><div class="page-subtitle">管理所有培训活动的计划与发布状态</div></div>
        <button class="btn btn-primary" onclick="showPage('page-training-new')">➕ 新建培训</button>
      </div>
      <div class="search-bar">
        <div class="search-input-wrap"><span class="search-icon">🔍</span><input class="search-input" placeholder="搜索培训名称、主讲人..."></div>
        <select class="form-input form-select" style="width:130px;"><option>全部状态</option><option>进行中</option><option>即将开始</option><option>已结束</option></select>
        <select class="form-input form-select" style="width:130px;"><option>全部分类</option><option>知识讲座</option><option>应急演练</option></select>
        <input class="form-input" type="text" placeholder="组织单位" style="width:140px;">
        <div class="flex items-center gap8" style="flex-shrink:0;">
          <input class="form-input" type="date" style="width:150px;" title="开始日期">
          <span style="color:var(--text-hint);font-size:13px;">至</span>
          <input class="form-input" type="date" style="width:150px;" title="结束日期">
        </div>
        <button class="btn btn-outline">筛选</button>
        <button class="btn btn-outline-gray">重置</button>
      </div>
      <!-- Teacher view -->
      <div id="plan-teacher-view">
        <div class="table-wrap">
          <table>
            <thead><tr><th>培训名称</th><th>分类</th><th>培训时间</th><th>组织单位</th><th>学时/积分</th><th>签到人数</th><th>签到状态</th><th>发布</th><th>操作</th></tr></thead>
            <tbody>
              <tr>
                <td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showPage('page-training-plan-detail')">实验室生物安全操作规范培训</span></td>
                <td><span class="tag tag-blue">知识讲座</span></td>
                <td style="white-space:nowrap;">2026-08-01<br><span class="text-xs text-gray">10:00–12:00</span></td>
                <td>生命科学学院</td>
                <td><span class="text-green text-bold">2学时 +10分</span></td>
                <td><div><span class="text-bold text-blue">42</span> / 60</div><div class="progress-wrap" style="width:80px;margin-top:4px;"><div class="progress-bar" style="width:70%;"></div></div></td>
                <td><div class="flex" style="gap:4px;flex-wrap:wrap;"><span class="tag tag-green" style="font-size:10px;">已签到 42</span><span class="tag tag-red" style="font-size:10px;">未到 18</span></div></td>
                <td><div style="width:44px;height:24px;position:relative;cursor:pointer;"><div class="pub-slider pub-on"></div></div></td>
                <td><div class="flex gap8"><button class="btn btn-sm btn-outline" onclick="showModal('modal-qr')">📷 签到码</button><button class="btn btn-sm btn-outline" onclick="showModal('modal-progress')">📊 进度</button><button class="btn btn-sm btn-outline" onclick="showPage('page-training-new')">编辑</button><button class="btn btn-sm btn-danger" onclick="showModal('modal-confirm-delete')">删除</button></div></td>
              </tr>
              <tr>
                <td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showPage('page-training-plan-detail')">化学品泄漏应急演练2026</span></td>
                <td><span class="tag tag-orange">应急演练</span></td>
                <td style="white-space:nowrap;">2026-08-05<br><span class="text-xs text-gray">14:00–17:00</span></td>
                <td>化学化工学院</td>
                <td><span class="text-green text-bold">3学时 +15分</span></td>
                <td><div><span class="text-bold text-orange">0</span> / 50</div><div class="progress-wrap" style="width:80px;margin-top:4px;"><div class="progress-bar" style="width:0%;"></div></div></td>
                <td><span class="tag tag-gray" style="font-size:10px;">未开始</span></td>
                <td><div style="width:44px;height:24px;position:relative;cursor:pointer;"><div class="pub-slider pub-off"></div></div></td>
                <td><div class="flex gap8"><button class="btn btn-sm btn-outline" onclick="showModal('modal-qr')">📷 签到码</button><button class="btn btn-sm btn-outline" onclick="showModal('modal-progress')">📊 进度</button><button class="btn btn-sm btn-outline" onclick="showPage('page-training-new')">编辑</button><button class="btn btn-sm btn-danger" onclick="showModal('modal-confirm-delete')">删除</button></div></td>
              </tr>
              <tr>
                <td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showPage('page-training-plan-detail')">辐射安全基础知识讲座</span></td>
                <td><span class="tag tag-blue">知识讲座</span></td>
                <td style="white-space:nowrap;">2026-07-20<br><span class="text-xs text-gray">14:00–16:00</span></td>
                <td>物理学院</td>
                <td><span class="text-green text-bold">2学时 +10分</span></td>
                <td><div><span class="text-bold text-green">55</span> / 60</div><div class="progress-wrap" style="width:80px;margin-top:4px;"><div class="progress-bar" style="width:92%;background:linear-gradient(90deg,var(--green),var(--green-dark));"></div></div></td>
                <td><div class="flex" style="gap:4px;flex-wrap:wrap;"><span class="tag tag-green" style="font-size:10px;">已签到 55</span><span class="tag tag-red" style="font-size:10px;">未到 5</span></div></td>
                <td><div style="width:44px;height:24px;position:relative;cursor:pointer;"><div class="pub-slider pub-on"></div></div></td>
                <td><div class="flex gap8"><button class="btn btn-sm btn-outline-gray" onclick="showModal('modal-record-detail')">查看记录</button><button class="btn btn-sm btn-outline" onclick="showPage('page-training-new')">编辑</button><button class="btn btn-sm btn-danger" onclick="showModal('modal-confirm-delete')">删除</button></div></td>
              </tr>
              <tr>
                <td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showPage('page-training-plan-detail')">全校实验室安全通识培训2026</span></td>
                <td><span class="tag tag-blue">知识讲座</span></td>
                <td style="white-space:nowrap;">2026-09-01<br><span class="text-xs text-gray">09:00–11:00</span></td>
                <td>测试大学</td>
                <td><span class="text-green text-bold">2学时 +10分</span></td>
                <td><div><span class="text-bold text-gray">0</span> / —</div><div class="progress-wrap" style="width:80px;margin-top:4px;"><div class="progress-bar" style="width:0%;"></div></div></td>
                <td><span class="tag tag-gray" style="font-size:10px;">未开始</span></td>
                <td><div style="width:44px;height:24px;position:relative;cursor:pointer;"><div class="pub-slider pub-off"></div></div></td>
                <td><div class="flex gap8"><button class="btn btn-sm btn-outline" onclick="showModal('modal-qr')">📷 签到码</button><button class="btn btn-sm btn-outline" onclick="showModal('modal-progress')">📊 进度</button><button class="btn btn-sm btn-outline" onclick="showPage('page-training-new')">编辑</button><button class="btn btn-sm btn-danger" onclick="showModal('modal-confirm-delete')">删除</button></div></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="pagination">
        <button class="page-btn">«</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">»</button>
        <span class="page-info">共 18 条</span>
      </div>
    </div>
    <div class="page" id="page-training-new">
      <div class="breadcrumb"><span>培训活动</span><span class="breadcrumb-sep">/</span><span>新建培训</span></div>
      <div class="page-header">
        <div><div class="page-title">新建培训</div><div class="page-subtitle">填写培训活动信息</div></div>
        <div class="flex gap8">
          <button class="btn btn-outline-gray" onclick="showPage('page-training-plan')">取消</button>
          <button class="btn btn-primary">保存</button>
        </div>
      </div>
      <div class="card">
        <div class="card-title">基本信息</div>
        <div class="form-grid">
          <div class="form-item col-2">
            <label class="form-label required">活动名称</label>
            <input class="form-input" placeholder="请输入培训活动名称">
          </div>
          <div class="form-item">
            <label class="form-label required">活动分类</label>
            <select class="form-input form-select"><option value="">请选择</option><option>知识讲座</option><option>应急演练</option></select>
          </div>
          <div class="form-item">
            <label class="form-label required">组织单位</label>
            <input class="form-input" placeholder="请输入组织单位">
          </div>
          <div class="form-item">
            <label class="form-label required">培训开始时间</label>
            <input class="form-input" type="datetime-local" step="1">
          </div>
          <div class="form-item">
            <label class="form-label required">培训结束时间</label>
            <input class="form-input" type="datetime-local" step="1">
          </div>
          <div class="form-item">
            <label class="form-label required">主讲人</label>
            <input class="form-input" placeholder="请输入主讲人姓名">
          </div>
          <div class="form-item">
            <label class="form-label required">培训地点</label>
            <input class="form-input" placeholder="请输入培训地点">
          </div>
          <div class="form-item">
            <label class="form-label required">可得学时</label>
            <input class="form-input" type="number" placeholder="例：2" min="0.5" step="0.5">
          </div>
          <div class="form-item">
            <label class="form-label required">可得积分</label>
            <input class="form-input" type="number" placeholder="例：10" min="0" step="1">
          </div>
          <div class="form-item col-2">
            <label class="form-label required">培训学员</label>
            <div class="flex gap8" style="margin-bottom:10px;">
              <label style="display:flex;align-items:center;gap:6px;cursor:pointer;padding:7px 14px;border:1.5px solid var(--gray-border);border-radius:6px;font-size:13px;transition:all .15s;" id="scope-label-all" onclick="setScopeMode('all')">
                <input type="radio" name="training-scope" value="all" checked style="accent-color:var(--blue);"> 全校
              </label>
              <label style="display:flex;align-items:center;gap:6px;cursor:pointer;padding:7px 14px;border:1.5px solid var(--gray-border);border-radius:6px;font-size:13px;transition:all .15s;" id="scope-label-dept" onclick="setScopeMode('dept')">
                <input type="radio" name="training-scope" value="dept" style="accent-color:var(--blue);"> 指定范围
              </label>
              <label style="display:flex;align-items:center;gap:6px;cursor:pointer;padding:7px 14px;border:1.5px solid var(--gray-border);border-radius:6px;font-size:13px;transition:all .15s;" id="scope-label-person" onclick="setScopeMode('person')">
                <input type="radio" name="training-scope" value="person" style="accent-color:var(--blue);"> 指定人员
              </label>
            </div>
            <!-- 指定范围：多维筛选 -->
            <div id="scope-dept-section" style="display:none;padding:16px;background:var(--blue-xlight);border-radius:8px;border:1px solid rgba(24,87,212,.12);">
              <div style="display:flex;flex-direction:column;gap:14px;">
                <!-- 学院单位 -->
                <div>
                  <div style="font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;">学院单位</div>
                  <div style="display:flex;flex-wrap:wrap;gap:8px;">
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">生命科学学院</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">化学化工学院</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">物理学院</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">材料科学学院</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">医学院</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">环境科学学院</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">安全管理处</label>
                  </div>
                </div>
                <!-- 学年 -->
                <div>
                  <div style="font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;">学年</div>
                  <div style="display:flex;flex-wrap:wrap;gap:8px;">
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">2026级</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">2025级</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">2024级</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">2023级</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">2022级</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">2021级及以前</label>
                  </div>
                </div>
                <!-- 用户类别 -->
                <div>
                  <div style="font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;">用户类别</div>
                  <div style="display:flex;flex-wrap:wrap;gap:8px;">
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">教职工</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">本科生</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">研究生</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">博士生</label>
                  </div>
                </div>
                <!-- 专业 -->
                <div>
                  <div style="font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;">专业</div>
                  <div style="display:flex;flex-wrap:wrap;gap:8px;">
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">生物技术</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">化学工程</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">应用化学</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">物理学</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">材料科学</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">临床医学</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">环境工程</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">安全工程</label>
                  </div>
                </div>
              </div>
            </div>
            <!-- 指定人员 -->
            <div id="scope-person-section" style="display:none;padding:16px;background:var(--blue-xlight);border-radius:8px;border:1px solid rgba(24,87,212,.12);">
              <!-- 搜索栏 -->
              <div class="flex gap8" style="margin-bottom:14px;">
                <div class="search-input-wrap" style="flex:1;">
                  <span class="search-icon">🔍</span>
                  <input class="search-input" placeholder="搜索姓名 / 学工号...">
                </div>
                <button class="btn btn-outline" style="white-space:nowrap;">📥 批量导入</button>
              </div>
              <!-- 筛选维度 -->
              <div style="display:flex;flex-direction:column;gap:14px;margin-bottom:14px;">
                <div>
                  <div style="font-size:12px;color:var(--text-secondary);font-weight:500;margin-bottom:8px;">学院单位</div>
                  <div style="display:flex;flex-wrap:wrap;gap:8px;">
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">生命科学学院</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">化学化工学院</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">物理学院</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">材料科学学院</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">医学院</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">环境科学学院</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">安全管理处</label>
                  </div>
                </div>
                <div>
                  <div style="font-size:12px;color:var(--text-secondary);font-weight:500;margin-bottom:8px;">学年</div>
                  <div style="display:flex;flex-wrap:wrap;gap:8px;">
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">2026级</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">2025级</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">2024级</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">2023级</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">2022级</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">2021级及以前</label>
                  </div>
                </div>
                <div>
                  <div style="font-size:12px;color:var(--text-secondary);font-weight:500;margin-bottom:8px;">用户类别</div>
                  <div style="display:flex;flex-wrap:wrap;gap:8px;">
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">教职工</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">本科生</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">研究生</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">博士生</label>
                  </div>
                </div>
                <div>
                  <div style="font-size:12px;color:var(--text-secondary);font-weight:500;margin-bottom:8px;">专业</div>
                  <div style="display:flex;flex-wrap:wrap;gap:8px;">
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">生物技术</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">化学工程</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">应用化学</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">物理学</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">材料科学</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">临床医学</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">环境工程</label>
                    <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">安全工程</label>
                  </div>
                </div>
              </div>
              <!-- 查询结果列表 -->
              <div style="background:var(--white);border-radius:8px;border:1px solid var(--gray-border);overflow:hidden;">
                <table class="data-table" style="margin:0;">
                  <thead>
                    <tr>
                      <th style="width:36px;"><input type="checkbox" style="accent-color:var(--blue);"></th>
                      <th>姓名</th>
                      <th>学工号</th>
                      <th>学院</th>
                      <th>专业</th>
                      <th>类别</th>
                      <th>学年</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><input type="checkbox" style="accent-color:var(--blue);" checked></td>
                      <td>张明远</td><td>2024010123</td><td>化学化工学院</td><td>化学工程</td><td>本科生</td><td>2024级</td>
                    </tr>
                    <tr>
                      <td><input type="checkbox" style="accent-color:var(--blue);" checked></td>
                      <td>李晓燕</td><td>2024010256</td><td>生命科学学院</td><td>生物技术</td><td>本科生</td><td>2024级</td>
                    </tr>
                    <tr>
                      <td><input type="checkbox" style="accent-color:var(--blue);"></td>
                      <td>王浩然</td><td>2023020078</td><td>材料科学学院</td><td>材料科学</td><td>研究生</td><td>2023级</td>
                    </tr>
                    <tr>
                      <td><input type="checkbox" style="accent-color:var(--blue);"></td>
                      <td>陈思雨</td><td>2025010312</td><td>物理学院</td><td>物理学</td><td>本科生</td><td>2025级</td>
                    </tr>
                    <tr>
                      <td><input type="checkbox" style="accent-color:var(--blue);"></td>
                      <td>刘建国</td><td>T20180045</td><td>安全管理处</td><td>—</td><td>教职工</td><td>—</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="divider"></div>
        <div class="card-title">封面图片</div>
        <div class="upload-area" style="max-width:400px;">
          <div class="upload-icon">🖼️</div>
          <div class="upload-text">点击或拖拽上传封面图<br><span style="font-size:11px;">推荐尺寸 16:9，支持 JPG / PNG，最大 5MB</span></div>
        </div>
        <div class="divider"></div>
        <div class="card-title">培训详情</div>
        <div class="rich-editor">
          <div class="rich-toolbar">
            <button class="rich-tool-btn">B</button><button class="rich-tool-btn"><i>I</i></button><button class="rich-tool-btn">U</button>
            <button class="rich-tool-btn">H1</button><button class="rich-tool-btn">H2</button>
            <button class="rich-tool-btn">≡</button><button class="rich-tool-btn">•</button>
            <button class="rich-tool-btn">🔗</button><button class="rich-tool-btn">🖼</button><button class="rich-tool-btn">📊</button>
          </div>
          <div class="rich-body" contenteditable="true">请输入培训详情内容，可包含培训目标、培训内容大纲、注意事项等...</div>
        </div>
        <div class="divider"></div>
        <div class="card-title">附件上传</div>
        <div class="upload-area">
          <div class="upload-icon">📎</div>
          <div class="upload-text">点击上传培训相关文件（PPT、PDF、Word等）<br><span style="font-size:11px;">支持 PDF / PPT / PPTX / DOC / DOCX，单文件最大 50MB</span></div>
        </div>
        <div class="divider"></div>
        <div style="display:flex;flex-direction:column;gap:16px;">
          <div class="form-item">
            <label class="form-label">发布状态</label>
            <div class="flex items-center gap8">
              <label class="toggle"><input type="checkbox" id="publish-toggle"><span class="toggle-slider"></span></label>
              <span style="font-size:13px;color:var(--text-secondary);">开启后培训学员可见</span>
            </div>
          </div>
          <div class="form-item">
            <label class="form-label">颁发证书</label>
            <div class="flex items-center gap8" style="margin-bottom:10px;">
              <label class="toggle"><input type="checkbox" id="cert-toggle" onchange="toggleCertTemplate(this)"><span class="toggle-slider"></span></label>
              <span style="font-size:13px;color:var(--text-secondary);">开启后完成培训的学员可获得培训证书</span>
            </div>
            <div id="cert-template-section" style="display:none;margin-top:8px;padding:14px;background:var(--blue-xlight);border-radius:8px;border:1px solid rgba(24,87,212,.12);">
              <label class="form-label" style="margin-bottom:8px;">证书模板</label>
              <select class="form-input form-select" style="max-width:360px;">
                <option value="">请选择证书模板</option>
                <option>实验室安全培训证书（通用）</option>
                <option>生物安全专项培训证书</option>
                <option>化学品安全培训证书</option>
                <option>应急演练参与证书</option>
              </select>
              <div class="form-hint" style="margin-top:6px;">证书将自动填入学员姓名、培训名称、培训日期及学时信息</div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!-- ==================== PAGE: 培训记录 ==================== -->
    <div class="page" id="page-training-record">
      <div class="breadcrumb"><a onclick="showPage('page-workbench');switchMenu('workbench')">工作台</a><span class="breadcrumb-sep">/</span><span>培训活动</span><span class="breadcrumb-sep">/</span><span>培训记录</span></div>
      <div class="page-header">
        <div><div class="page-title">培训记录</div><div class="page-subtitle">已结束培训的参与记录与证明</div></div>
        <button class="btn btn-outline">📤 导出记录</button>
      </div>
      <div class="search-bar">
        <div class="search-input-wrap"><span class="search-icon">🔍</span><input class="search-input" placeholder="搜索培训名称、学员姓名..."></div>
        <select class="form-input form-select" style="width:130px;"><option>全部分类</option><option>知识讲座</option><option>应急演练</option></select>
        <input class="form-input" type="month" style="width:160px;" value="2026-07">
        <button class="btn btn-outline">筛选</button>
      </div>
      <div class="card mb16">
        <div class="card-title">已结束培训列表</div>
        <div class="table-wrap">
          <table>
            <thead><tr><th>培训名称</th><th>分类</th><th>培训时间</th><th>主讲人</th><th>应到人数</th><th>实到人数</th><th>签到率</th><th>操作</th></tr></thead>
            <tbody>
              <tr>
                <td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showModal('modal-record-detail')">辐射安全基础知识讲座</span></td>
                <td><span class="tag tag-blue">知识讲座</span></td>
                <td style="white-space:nowrap;">2026-07-20<br><span class="text-xs text-gray">14:00–16:00</span></td>
                <td>陈教授</td>
                <td>60</td>
                <td><span class="text-bold text-green">55</span></td>
                <td>
                  <div>91.7%</div>
                  <div class="progress-wrap" style="width:80px;"><div class="progress-bar" style="width:92%;background:linear-gradient(90deg,var(--green),var(--green-dark));"></div></div>
                </td>
                <td><div class="flex gap8"><button class="btn btn-sm btn-outline" onclick="showModal('modal-record-detail')">查看详情</button><button class="btn btn-sm btn-outline-gray">导出</button></div></td>
              </tr>
              <tr>
                <td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showModal('modal-record-detail')">生物安全法规与合规操作</span></td>
                <td><span class="tag tag-blue">知识讲座</span></td>
                <td style="white-space:nowrap;">2026-07-10<br><span class="text-xs text-gray">09:00–11:00</span></td>
                <td>刘研究员</td>
                <td>45</td>
                <td><span class="text-bold text-green">43</span></td>
                <td>
                  <div>95.6%</div>
                  <div class="progress-wrap" style="width:80px;"><div class="progress-bar" style="width:96%;background:linear-gradient(90deg,var(--green),var(--green-dark));"></div></div>
                </td>
                <td><div class="flex gap8"><button class="btn btn-sm btn-outline" onclick="showModal('modal-record-detail')">查看详情</button><button class="btn btn-sm btn-outline-gray">导出</button></div></td>
              </tr>
              <tr>
                <td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showModal('modal-record-detail')">消防疏散应急演练（A区）</span></td>
                <td><span class="tag tag-orange">应急演练</span></td>
                <td style="white-space:nowrap;">2026-06-25<br><span class="text-xs text-gray">15:00–17:30</span></td>
                <td>安全部</td>
                <td>120</td>
                <td><span class="text-bold text-blue">98</span></td>
                <td>
                  <div>81.7%</div>
                  <div class="progress-wrap" style="width:80px;"><div class="progress-bar" style="width:82%;"></div></div>
                </td>
                <td><div class="flex gap8"><button class="btn btn-sm btn-outline" onclick="showModal('modal-record-detail')">查看详情</button><button class="btn btn-sm btn-outline-gray">导出</button></div></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="pagination">
          <button class="page-btn">«</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">»</button>
          <span class="page-info">共 9 条</span>
        </div>
      </div>
    </div>

    <!-- PAGE: 线下培训列表 -->
    <div class="page" id="page-training-activity-list">
      <div class="breadcrumb"><a onclick="showPage('page-workbench');switchMenu('workbench')">工作台</a><span class="breadcrumb-sep">/</span><span>培训活动</span><span class="breadcrumb-sep">/</span><span>线下培训</span></div>
      <div class="page-header">
        <div><div class="page-title">线下培训</div><div class="page-subtitle">全部线下培训活动列表</div></div>
        <button class="btn btn-primary" onclick="showPage('page-training-new');switchMenu('training-mgmt')">+ 新建培训</button>
      </div>
      <div class="search-bar">
        <div class="search-input-wrap"><span class="search-icon">&#128269;</span><input class="search-input" placeholder="搜索培训名称、主讲人..."></div>
        <select class="form-input form-select" style="width:130px;"><option>全部状态</option><option>进行中</option><option>即将开始</option><option>报名中</option><option>已结束</option></select>
        <select class="form-input form-select" style="width:130px;"><option>全部分类</option><option>知识讲座</option><option>应急演练</option></select>
        <button class="btn btn-outline">筛选</button>
        <div style="margin-left:auto;display:flex;gap:8px;">
          <button class="btn btn-outline-gray" onclick="setListView('grid')">卡片视图</button>
          <button class="btn btn-outline-gray" onclick="setListView('list')">列表视图</button>
        </div>
      </div>
      <div id="activity-grid-view" class="training-events-grid">
        <div class="training-event-card" onclick="showPage('page-training-activity-detail')">
          <div class="training-event-cover" style="background:linear-gradient(135deg,#1857d4,#2e6fe0);">&#129514;<div style="position:absolute;top:10px;left:10px;"><span class="tag tag-orange" style="background:rgba(230,126,34,.9);color:#fff;">进行中</span></div><div style="position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.15);border-radius:6px;padding:4px 8px;font-size:11px;color:rgba(255,255,255,.9);">2学时</div></div>
          <div class="training-event-body"><div class="training-event-title">实验室生物安全操作规范培训</div><div class="training-event-meta"><div>2026-08-01 10:00-12:00</div><div>生命科学楼 B206</div><div class="flex items-center gap8 mt8"><span class="tag tag-blue">知识讲座</span><span class="text-xs text-gray">42/60人</span><span class="text-xs text-green">+2学时+10积分</span></div></div></div>
        </div>
        <div class="training-event-card" onclick="showPage('page-training-activity-detail')">
          <div class="training-event-cover" style="background:linear-gradient(135deg,#e67e22,#f39c12);">&#128666;<div style="position:absolute;top:10px;left:10px;"><span class="tag" style="background:rgba(229,62,62,.9);color:#fff;">即将开始</span></div><div style="position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.15);border-radius:6px;padding:4px 8px;font-size:11px;color:rgba(255,255,255,.9);">3学时</div></div>
          <div class="training-event-body"><div class="training-event-title">化学品泄漏应急演练2026</div><div class="training-event-meta"><div>2026-08-05 14:00-17:00</div><div>化学实验楼 A101</div><div class="flex items-center gap8 mt8"><span class="tag tag-orange">应急演练</span><span class="text-xs text-gray">28/50人</span><span class="text-xs text-green">+3学时+15积分</span></div></div></div>
        </div>
        <div class="training-event-card" onclick="showPage('page-training-activity-detail')">
          <div class="training-event-cover" style="background:linear-gradient(135deg,#10a37f,#0d8f6f);">&#9889;<div style="position:absolute;top:10px;left:10px;"><span class="tag tag-green" style="background:rgba(16,163,127,.9);color:#fff;">报名中</span></div><div style="position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.15);border-radius:6px;padding:4px 8px;font-size:11px;color:rgba(255,255,255,.9);">1.5学时</div></div>
          <div class="training-event-body"><div class="training-event-title">实验室用电安全与消防知识讲座</div><div class="training-event-meta"><div>2026-08-10 09:30-11:00</div><div>综合楼 3F 多功能厅</div><div class="flex items-center gap8 mt8"><span class="tag tag-blue">知识讲座</span><span class="text-xs text-gray">15/80人</span><span class="text-xs text-green">+1.5学时+8积分</span></div></div></div>
        </div>
        <div class="training-event-card" onclick="showPage('page-training-activity-detail')">
          <div class="training-event-cover" style="background:linear-gradient(135deg,#6f42c1,#5a35a0);">&#9762;<div style="position:absolute;top:10px;left:10px;"><span class="tag tag-gray" style="background:rgba(136,150,167,.9);color:#fff;">已结束</span></div><div style="position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.15);border-radius:6px;padding:4px 8px;font-size:11px;color:rgba(255,255,255,.9);">2学时</div></div>
          <div class="training-event-body"><div class="training-event-title">辐射安全基础知识讲座</div><div class="training-event-meta"><div>2026-07-20 14:00-16:00</div><div>物理楼 C301</div><div class="flex items-center gap8 mt8"><span class="tag tag-blue">知识讲座</span><span class="text-xs text-green text-bold">55/60人签到</span></div></div></div>
        </div>
        <div class="training-event-card" onclick="showPage('page-training-activity-detail')">
          <div class="training-event-cover" style="background:linear-gradient(135deg,#e53e3e,#c53030);">&#128293;<div style="position:absolute;top:10px;left:10px;"><span class="tag tag-gray" style="background:rgba(136,150,167,.9);color:#fff;">已结束</span></div><div style="position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.15);border-radius:6px;padding:4px 8px;font-size:11px;color:rgba(255,255,255,.9);">2.5学时</div></div>
          <div class="training-event-body"><div class="training-event-title">消防疏散应急演练（A区）</div><div class="training-event-meta"><div>2026-06-25 15:00-17:30</div><div>A区操场及实验楼</div><div class="flex items-center gap8 mt8"><span class="tag tag-orange">应急演练</span><span class="text-xs text-blue text-bold">98/120人签到</span></div></div></div>
        </div>
      </div>
      <div id="activity-list-view" style="display:none;">
        <div class="table-wrap"><table>
          <thead><tr><th>培训名称</th><th>分类</th><th>培训时间</th><th>主讲人</th><th>组织单位</th><th>地点</th><th>学时/积分</th><th>签到</th><th>状态</th><th>操作</th></tr></thead>
          <tbody>
            <tr><td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showPage('page-training-activity-detail')">实验室生物安全操作规范培训</span></td><td><span class="tag tag-blue">知识讲座</span></td><td>2026-08-01</td><td>李教授</td><td>生命科学学院</td><td>生命科学楼 B206</td><td><span class="text-green text-bold">2学时+10分</span></td><td>42/60</td><td><span class="tag tag-orange">进行中</span></td><td><button class="btn btn-sm btn-outline" onclick="showPage('page-training-activity-detail')">详情</button></td></tr>
            <tr><td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showPage('page-training-activity-detail')">化学品泄漏应急演练2026</span></td><td><span class="tag tag-orange">应急演练</span></td><td>2026-08-05</td><td>王老师</td><td>化学化工学院</td><td>化学楼 A101</td><td><span class="text-green text-bold">3学时+15分</span></td><td>28/50</td><td><span class="tag tag-blue">即将开始</span></td><td><button class="btn btn-sm btn-outline" onclick="showPage('page-training-activity-detail')">详情</button></td></tr>
            <tr><td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showPage('page-training-activity-detail')">辐射安全基础知识讲座</span></td><td><span class="tag tag-blue">知识讲座</span></td><td>2026-07-20</td><td>陈教授</td><td>物理学院</td><td>物理楼 C301</td><td><span class="text-green text-bold">2学时+10分</span></td><td>55/60</td><td><span class="tag tag-gray">已结束</span></td><td><button class="btn btn-sm btn-outline-gray" onclick="showPage('page-training-record');switchMenu('training-mgmt')">记录</button></td></tr>
          </tbody>
        </table></div>
      </div>
      <div class="pagination" style="margin-top:20px;">
        <button class="page-btn">«</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">»</button>
        <span class="page-info">共 12 条</span>
      </div>
    </div>

    <!-- PAGE: 线下培训详情 -->
    <div class="page" id="page-training-activity-detail">
      <div class="breadcrumb"><a onclick="showPage('page-training-activity-list');switchMenu('training-activity')">线下培训</a><span class="breadcrumb-sep">/</span><span>培训详情</span></div>
      <div style="display:flex;gap:20px;align-items:flex-start;">
        <div style="flex:1;">
          <div class="card mb16">
            <div style="background:linear-gradient(135deg,#1857d4,#2e6fe0);border-radius:8px;height:200px;display:flex;align-items:center;justify-content:center;font-size:64px;margin-bottom:20px;position:relative;">&#129514;<div style="position:absolute;top:14px;left:14px;"><span class="tag tag-orange" style="background:rgba(230,126,34,.9);color:#fff;">进行中</span></div><div style="position:absolute;bottom:14px;right:14px;background:rgba(255,255,255,.15);border-radius:8px;padding:6px 12px;color:rgba(255,255,255,.95);font-size:13px;">2学时</div></div>
            <div style="font-size:22px;font-weight:700;margin-bottom:12px;">实验室生物安全操作规范培训</div>
            <div style="display:flex;gap:8px;margin-bottom:16px;"><span class="tag tag-blue">知识讲座</span><span class="tag tag-green">+2学时</span><span class="tag tag-orange">+10积分</span></div>
            <div class="divider"></div>
            <div class="detail-section">
              <div class="detail-section-title">活动信息</div>
              <div class="info-row"><div class="info-key">培训时间</div><div class="info-val">2026-08-01  10:00 – 12:00</div></div>
              <div class="info-row"><div class="info-key">培训地点</div><div class="info-val">生命科学楼 B206 报告厅</div></div>
              <div class="info-row"><div class="info-key">主讲人</div><div class="info-val">李教授（生命科学学院）</div></div>
              <div class="info-row"><div class="info-key">组织单位</div><div class="info-val">生命科学学院 安全教育办公室</div></div>
              <div class="info-row"><div class="info-key">培训时长</div><div class="info-val">2 学时（120分钟）</div></div>
              <div class="info-row"><div class="info-key">可获学时</div><div class="info-val"><span class="text-green text-bold">2 学时</span></div></div>
              <div class="info-row"><div class="info-key">可获积分</div><div class="info-val"><span class="text-orange text-bold">10 积分</span></div></div>
            </div>
            <div class="divider"></div>
            <div class="detail-section">
              <div class="detail-section-title">培训详情</div>
              <div style="font-size:14px;color:var(--text-secondary);line-height:1.8;">
                <p style="margin-bottom:10px;">本次培训旨在强化实验室人员生物安全意识，规范日常实验操作，降低生物安全风险。</p>
                <p style="margin-bottom:8px;font-weight:600;color:var(--text-primary);">培训内容：</p>
                <ul style="padding-left:20px;display:flex;flex-direction:column;gap:6px;"><li>生物安全基本概念与法律法规解读</li><li>实验室生物安全等级介绍</li><li>个人防护装备（PPE）的正确使用</li><li>生物危险废弃物的分类处置</li><li>意外事故应急处理流程</li></ul>
              </div>
            </div>
          </div>
        </div>
        <div style="width:300px;flex-shrink:0;">
          <div class="card mb16">
            <div class="card-title">签到二维码</div>
            <div style="text-align:center;padding:16px 0;">
              <div style="width:140px;height:140px;background:var(--gray-light);border:2px solid var(--gray-border);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 12px;font-size:48px;cursor:pointer;" onclick="showModal('modal-qr')">&#9640;<div style="font-size:11px;color:var(--text-hint);margin-top:4px;">点击放大</div></div>
              <button class="btn btn-primary" style="width:100%;margin-bottom:8px;" onclick="showModal('modal-qr')">显示签到码</button>
              <button class="btn btn-outline" style="width:100%;">下载二维码</button>
            </div>
          </div>
          <div class="card" style="margin-top:0;">
            <div class="card-title">培训证明图片</div>
            <div style="font-size:12px;color:var(--text-hint);margin-bottom:12px;">上传培训现场照片、签到表扫描件等作为培训证明，供学员查看下载。</div>
            <div style="display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;">
              <div style="width:90px;height:90px;border-radius:6px;background:var(--gray-light);border:1px solid var(--gray-border);display:flex;align-items:center;justify-content:center;font-size:32px;cursor:pointer;" onclick="showModal('modal-proof-img')">🖼️</div>
              <div style="width:90px;height:90px;border-radius:6px;background:var(--gray-light);border:1px solid var(--gray-border);display:flex;align-items:center;justify-content:center;font-size:32px;cursor:pointer;" onclick="showModal('modal-proof-img')">🖼️</div>
              <label style="width:90px;height:90px;border-radius:6px;border:1px dashed var(--gray-border);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;gap:4px;color:var(--text-hint);font-size:12px;">
                <span style="font-size:24px;">＋</span>上传图片
                <input type="file" accept="image/*" multiple style="display:none;">
              </label>
            </div>
            <div style="font-size:11px;color:var(--text-hint);">支持 JPG / PNG，单张最大 10MB</div>
          </div>
        </div>
      </div>
    </div>


    <!-- ==================== MODALS ==================== -->

    <!-- QR Code Modal -->
    <div class="modal-overlay" id="modal-qr">
      <div class="modal-box" style="max-width:360px;">
        <div class="modal-header">
          <div class="modal-title">&#128247; 签到二维码</div>
          <button class="modal-close" onclick="hideModal('modal-qr')">&#10005;</button>
        </div>
        <div class="modal-body" style="text-align:center;">
          <div style="font-size:15px;font-weight:600;margin-bottom:4px;">实验室生物安全操作规范培训</div>
          <div style="font-size:12px;color:var(--text-hint);margin-bottom:16px;">2026-08-01 10:00–12:00</div>
          <div style="width:200px;height:200px;background:var(--gray-light);border:3px solid var(--gray-border);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 16px;font-size:80px;">&#9640;</div>
          <div style="background:var(--blue-xlight);border-radius:8px;padding:10px;font-size:12px;color:var(--text-secondary);margin-bottom:16px;">
            学员扫描此二维码完成签到<br>
            <span style="color:var(--orange);font-weight:500;">有效期至 2026-08-01 12:30</span>
          </div>
          <div class="flex gap8" style="justify-content:center;">
            <button class="btn btn-primary">&#11015; 下载二维码</button>
            <button class="btn btn-outline" onclick="hideModal('modal-qr')">关闭</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Progress Modal -->
    <div class="modal-overlay" id="modal-progress">
      <div class="modal-box modal-lg">
        <div class="modal-header">
          <div class="modal-title">&#128202; 培训进度详情</div>
          <button class="modal-close" onclick="hideModal('modal-progress')">&#10005;</button>
        </div>
        <div class="modal-body">
          <div style="font-size:15px;font-weight:600;margin-bottom:12px;">实验室生物安全操作规范培训</div>
          <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;">
            <div style="background:var(--blue-xlight);border-radius:8px;padding:12px;text-align:center;"><div style="font-size:24px;font-weight:700;color:var(--blue);">60</div><div class="text-xs text-gray">计划人数</div></div>
            <div style="background:var(--green-light);border-radius:8px;padding:12px;text-align:center;"><div style="font-size:24px;font-weight:700;color:var(--green);">42</div><div class="text-xs text-gray">已签到</div></div>
            <div style="background:var(--red-light);border-radius:8px;padding:12px;text-align:center;"><div style="font-size:24px;font-weight:700;color:var(--red);">18</div><div class="text-xs text-gray">未签到</div></div>
            <div style="background:var(--orange-light);border-radius:8px;padding:12px;text-align:center;"><div style="font-size:24px;font-weight:700;color:var(--orange);">70%</div><div class="text-xs text-gray">签到率</div></div>
          </div>
          <div class="progress-wrap" style="height:10px;margin-bottom:20px;"><div class="progress-bar" style="width:70%;"></div></div>
          <div class="table-wrap">
            <table>
              <thead><tr><th>姓名</th><th>学号</th><th>学院单位</th><th>签到状态</th><th>签到时间</th><th>获得学时</th><th>获得积分</th><th>培训证明</th></tr></thead>
              <tbody>
                <tr><td>张明远</td><td>20231001</td><td>生命科学学院</td><td><span class="tag tag-green">已签到</span></td><td>10:05</td><td>2</td><td>10</td><td><span class="text-blue text-sm" style="cursor:pointer;" onclick="showModal('modal-proof-img')">查看</span></td></tr>
                <tr><td>李晓燕</td><td>20221056</td><td>生命科学学院</td><td><span class="tag tag-green">已签到</span></td><td>10:02</td><td>2</td><td>10</td><td><span class="text-blue text-sm" style="cursor:pointer;" onclick="showModal('modal-proof-img')">查看</span></td></tr>
                <tr><td>王浩然</td><td>20231089</td><td>化学化工学院</td><td><span class="tag tag-orange">迟到</span></td><td>10:22</td><td>2</td><td>8</td><td><span class="text-blue text-sm" style="cursor:pointer;" onclick="showModal('modal-proof-img')">查看</span></td></tr>
                <tr><td>陈思雨</td><td>20241103</td><td>物理学院</td><td><span class="tag tag-red">未签到</span></td><td>—</td><td>0</td><td>0</td><td>—</td></tr>
                <tr><td>刘志远</td><td>20231055</td><td>生命科学学院</td><td><span class="tag tag-green">已签到</span></td><td>09:58</td><td>2</td><td>10</td><td><span class="text-blue text-sm" style="cursor:pointer;" onclick="showModal('modal-proof-img')">查看</span></td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline">&#128196; 导出Excel</button>
          <button class="btn btn-outline-gray" onclick="hideModal('modal-progress')">关闭</button>
        </div>
      </div>
    </div>

    <!-- Record Detail Modal -->
    <div class="modal-overlay" id="modal-record-detail">
      <div class="modal-box modal-lg">
        <div class="modal-header">
          <div class="modal-title">&#128196; 培训记录详情</div>
          <button class="modal-close" onclick="hideModal('modal-record-detail')">&#10005;</button>
        </div>
        <div class="modal-body">
          <div style="display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px;">
            <div style="font-size:16px;font-weight:700;">辐射安全基础知识讲座</div>
            <span class="tag tag-gray">已结束</span>
            <span class="tag tag-blue">知识讲座</span>
          </div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;font-size:13px;">
            <div><span style="color:var(--text-hint);">培训时间：</span>2026-07-20 14:00–16:00</div>
            <div><span style="color:var(--text-hint);">培训地点：</span>物理楼 C301</div>
            <div><span style="color:var(--text-hint);">主讲人：</span>陈教授</div>
            <div><span style="color:var(--text-hint);">可得学时：</span><span class="text-green text-bold">2 学时</span></div>
            <div><span style="color:var(--text-hint);">可得积分：</span><span class="text-orange text-bold">10 积分</span></div>
            <div><span style="color:var(--text-hint);">获得证书：</span>实验室安全培训证书（通用）</div>
          </div>
          <!-- 签到统计 -->
          <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;">
            <div style="background:var(--blue-xlight);border-radius:8px;padding:12px;text-align:center;"><div style="font-size:22px;font-weight:700;color:var(--blue);">60</div><div style="font-size:12px;color:var(--text-hint);margin-top:4px;">计划人数</div></div>
            <div style="background:var(--green-light);border-radius:8px;padding:12px;text-align:center;"><div style="font-size:22px;font-weight:700;color:var(--green);">55</div><div style="font-size:12px;color:var(--text-hint);margin-top:4px;">已签到</div></div>
            <div style="background:var(--red-light);border-radius:8px;padding:12px;text-align:center;"><div style="font-size:22px;font-weight:700;color:var(--red);">5</div><div style="font-size:12px;color:var(--text-hint);margin-top:4px;">未签到</div></div>
            <div style="background:var(--orange-light);border-radius:8px;padding:12px;text-align:center;"><div style="font-size:22px;font-weight:700;color:var(--orange);">91.7%</div><div style="font-size:12px;color:var(--text-hint);margin-top:4px;">签到率</div></div>
          </div>
          <div class="divider"></div>
          <div style="margin-bottom:12px;font-size:13px;font-weight:600;">参与人员签到记录</div>
          <div class="table-wrap">
            <table>
              <thead><tr><th>姓名</th><th>学号</th><th>学院单位</th><th>签到状态</th><th>签到时间</th><th>获得学时</th><th>获得积分</th><th>培训证明</th><th>操作</th></tr></thead>
              <tbody>
                <tr><td>张明远</td><td>20231001</td><td>生命科学学院</td><td><span class="tag tag-green">已签到</span></td><td>14:02</td><td><span class="text-green text-bold">2</span></td><td><span class="text-orange text-bold">10</span></td><td><span class="text-blue text-sm" style="cursor:pointer;" onclick="showModal('modal-proof-img')">查看</span></td><td><div class="flex gap8"><span class="text-blue text-sm" style="cursor:pointer;" onclick="showModal('modal-cert-preview')">查看证书</span><span class="text-blue text-sm" style="cursor:pointer;">下载</span></div></td></tr>
                <tr><td>李晓燕</td><td>20221056</td><td>生命科学学院</td><td><span class="tag tag-green">已签到</span></td><td>14:05</td><td><span class="text-green text-bold">2</span></td><td><span class="text-orange text-bold">10</span></td><td><span class="text-blue text-sm" style="cursor:pointer;" onclick="showModal('modal-proof-img')">查看</span></td><td><div class="flex gap8"><span class="text-blue text-sm" style="cursor:pointer;" onclick="showModal('modal-cert-preview')">查看证书</span><span class="text-blue text-sm" style="cursor:pointer;">下载</span></div></td></tr>
                <tr><td>王浩然</td><td>20231089</td><td>化学化工学院</td><td><span class="tag tag-orange">迟到</span></td><td>14:18</td><td><span class="text-green text-bold">2</span></td><td><span class="text-orange text-bold">8</span></td><td><span class="text-blue text-sm" style="cursor:pointer;" onclick="showModal('modal-proof-img')">查看</span></td><td><div class="flex gap8"><span class="text-blue text-sm" style="cursor:pointer;" onclick="showModal('modal-cert-preview')">查看证书</span><span class="text-blue text-sm" style="cursor:pointer;">下载</span></div></td></tr>
                <tr><td>陈思雨</td><td>20241103</td><td>物理学院</td><td><span class="tag tag-red">未签到</span></td><td>—</td><td>0</td><td>0</td><td>—</td><td>—</td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline">&#128196; 导出记录</button>
          <button class="btn btn-outline-gray" onclick="hideModal('modal-record-detail')">关闭</button>
        </div>
      </div>
    </div>

    <!-- 培训证明图片查看 Modal -->
    <div class="modal-overlay" id="modal-proof-img">
      <div class="modal-box modal-lg" style="max-width:720px;">
        <div class="modal-header">
          <div class="modal-title">🖼️ 培训证明图片</div>
          <button class="modal-close" onclick="hideModal('modal-proof-img')">&#10005;</button>
        </div>
        <div class="modal-body">
          <div style="font-size:13px;color:var(--text-hint);margin-bottom:16px;">实验室生物安全操作规范培训 · 2026-08-01</div>
          <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;">
            <div style="border-radius:8px;overflow:hidden;border:1px solid var(--gray-border);background:var(--gray-light);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:48px;cursor:pointer;">🖼️</div>
            <div style="border-radius:8px;overflow:hidden;border:1px solid var(--gray-border);background:var(--gray-light);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:48px;cursor:pointer;">🖼️</div>
            <div style="border-radius:8px;overflow:hidden;border:1px solid var(--gray-border);background:var(--gray-light);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-size:48px;cursor:pointer;">🖼️</div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline">📥 下载全部</button>
          <button class="btn btn-outline-gray" onclick="hideModal('modal-proof-img')">关闭</button>
        </div>
      </div>
    </div>

    <!-- Certificate Preview Modal -->
    <div class="modal-overlay" id="modal-cert-preview">
      <div class="modal-box" style="max-width:580px;">
        <div class="modal-header">
          <div class="modal-title">&#127941; 培训证书</div>
          <button class="modal-close" onclick="hideModal('modal-cert-preview')">&#10005;</button>
        </div>
        <div class="modal-body">
          <!-- Certificate card -->
          <div style="background:linear-gradient(135deg,#1857d4 0%,#0f3ea8 100%);border-radius:12px;padding:32px 28px;color:#fff;position:relative;overflow:hidden;margin-bottom:16px;">
            <div style="position:absolute;right:-30px;top:-30px;width:160px;height:160px;background:rgba(255,255,255,.06);border-radius:50%;"></div>
            <div style="position:absolute;right:20px;bottom:-40px;width:120px;height:120px;background:rgba(255,255,255,.04);border-radius:50%;"></div>
            <div style="text-align:center;margin-bottom:20px;">
              <div style="font-size:13px;letter-spacing:2px;opacity:.75;margin-bottom:4px;">实验室安全培训证书</div>
              <div style="font-size:11px;opacity:.55;letter-spacing:1px;">LABORATORY SAFETY TRAINING CERTIFICATE</div>
            </div>
            <div style="text-align:center;margin-bottom:20px;">
              <div style="font-size:11px;opacity:.7;margin-bottom:6px;">兹证明</div>
              <div style="font-size:26px;font-weight:700;letter-spacing:3px;margin-bottom:6px;">张 明 远</div>
              <div style="font-size:11px;opacity:.7;">学号：20231001 &nbsp;·&nbsp; 硕士研究生 &nbsp;·&nbsp; 生命科学学院</div>
            </div>
            <div style="text-align:center;margin-bottom:20px;font-size:13px;opacity:.85;line-height:1.7;">
              已参加并完成 <strong>辐射安全基础知识讲座</strong> 培训<br>
              培训时间：2026-07-20 &nbsp;·&nbsp; 获得学时：<strong>2 学时</strong> &nbsp;·&nbsp; 获得积分：<strong>10 分</strong>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid rgba(255,255,255,.2);padding-top:14px;font-size:11px;opacity:.7;">
              <div>证书编号：CERT-2026-0720-001</div>
              <div>颁发日期：2026-07-20</div>
              <div>颁发单位：实验室安全教育中心</div>
            </div>
          </div>
          <div class="flex gap8" style="justify-content:flex-end;">
            <button class="btn btn-primary">&#11015; 下载证书</button>
            <button class="btn btn-outline-gray" onclick="hideModal('modal-cert-preview')">关闭</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Delete Confirm Modal -->
    <div class="modal-overlay" id="modal-confirm-delete">
      <div class="modal-box" style="max-width:380px;">
        <div class="modal-header">
          <div class="modal-title">确认删除</div>
          <button class="modal-close" onclick="hideModal('modal-confirm-delete')">&#10005;</button>
        </div>
        <div class="modal-body" style="text-align:center;padding:24px;">
          <div style="font-size:40px;margin-bottom:12px;">🗑️</div>
          <div style="font-size:15px;font-weight:600;margin-bottom:8px;">确认删除此培训？</div>
          <div style="font-size:13px;color:var(--text-hint);">删除后数据将无法恢复，相关签到记录和证书也将一并删除。</div>
        </div>
        <div class="modal-footer" style="justify-content:center;">
          <button class="btn btn-outline-gray" onclick="hideModal('modal-confirm-delete')" style="min-width:90px;">取消</button>
          <button class="btn" style="min-width:90px;background:var(--red);color:#fff;" onclick="hideModal('modal-confirm-delete')">确认删除</button>
        </div>
      </div>
    </div>

    <!-- 选择试卷 modal -->
    <div class="modal-overlay" id="modal-select-paper">
      <div class="modal-box modal-lg" style="max-width:960px;">
        <div class="modal-header">
          <div class="modal-title">选择试卷</div>
          <button class="modal-close" onclick="hideModal('modal-select-paper')">&#10005;</button>
        </div>
        <div class="modal-body" style="padding:20px 28px;">
          <!-- 筛选栏 -->
          <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;">
            <select class="form-input form-select" style="width:110px;height:34px;font-size:13px;">
              <option value="">是否共享</option>
              <option>是</option>
              <option>否</option>
            </select>
            <select class="form-input form-select" style="width:110px;height:34px;font-size:13px;">
              <option value="">知识点</option>
              <option>通识安全</option>
              <option>化学安全</option>
              <option>生物安全</option>
              <option>辐射安全</option>
              <option>消防安全</option>
            </select>
            <select class="form-input form-select" style="width:110px;height:34px;font-size:13px;">
              <option value="">专业类别</option>
              <option>理工科</option>
              <option>医学</option>
              <option>文科</option>
            </select>
            <select class="form-input form-select" style="width:100px;height:34px;font-size:13px;">
              <option value="">来源</option>
              <option>系统内置</option>
              <option>自建</option>
              <option>共享</option>
            </select>
            <select class="form-input form-select" style="width:110px;height:34px;font-size:13px;">
              <option value="">组卷方式</option>
              <option>固定组卷</option>
              <option>随机组卷</option>
            </select>
            <input class="form-input" placeholder="搜索名称" style="width:140px;height:34px;font-size:13px;">
            <button class="btn btn-primary" style="height:34px;padding:0 18px;font-size:13px;">查询</button>
            <button class="btn btn-outline-gray" style="height:34px;padding:0 14px;font-size:13px;">重置</button>
          </div>
          <!-- 结果列表 -->
          <div class="table-wrap" style="margin:0;">
            <table>
              <thead>
                <tr>
                  <th>试卷名称</th>
                  <th>组卷方式</th>
                  <th>知识点</th>
                  <th>专业类别</th>
                  <th>是否共享</th>
                  <th>来源</th>
                  <th style="width:64px;">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>实验室安全基础知识</td>
                  <td>固定组卷</td>
                  <td>通识安全</td>
                  <td>通用</td>
                  <td>是</td>
                  <td>系统内置</td>
                  <td><span style="color:var(--blue);cursor:pointer;font-size:13px;font-weight:500;" onclick="selectPaper('实验室安全基础知识')">选定</span></td>
                </tr>
                <tr>
                  <td>化工安全专项考试</td>
                  <td>随机组卷</td>
                  <td>化学安全</td>
                  <td>理工科</td>
                  <td>否</td>
                  <td>自建</td>
                  <td><span style="color:var(--blue);cursor:pointer;font-size:13px;font-weight:500;" onclick="selectPaper('化工安全专项考试')">选定</span></td>
                </tr>
                <tr>
                  <td>医学实验室安全规范</td>
                  <td>固定组卷</td>
                  <td>生物安全</td>
                  <td>医学</td>
                  <td>是</td>
                  <td>自建</td>
                  <td><span style="color:var(--blue);cursor:pointer;font-size:13px;font-weight:500;" onclick="selectPaper('医学实验室安全规范')">选定</span></td>
                </tr>
                <tr>
                  <td>辐射防护基础考核</td>
                  <td>随机组卷</td>
                  <td>辐射安全</td>
                  <td>理工科</td>
                  <td>否</td>
                  <td>自建</td>
                  <td><span style="color:var(--blue);cursor:pointer;font-size:13px;font-weight:500;" onclick="selectPaper('辐射防护基础考核')">选定</span></td>
                </tr>
                <tr>
                  <td>消防安全知识测评</td>
                  <td>固定组卷</td>
                  <td>消防安全</td>
                  <td>通用</td>
                  <td>是</td>
                  <td>系统内置</td>
                  <td><span style="color:var(--blue);cursor:pointer;font-size:13px;font-weight:500;" onclick="selectPaper('消防安全知识测评')">选定</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>


    <div id="page-exam-template" class="page" style="padding:0;">
  <!-- Page Header -->
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;">
    <div>
      <div class="page-title">考试模板</div>
      <div class="page-subtitle">管理各类考试的模版配置，包含基本设置、考前配置、防作弊及证书颁发等。</div>
    </div>
    <span class="tag tag-blue" style="font-size:12px;padding:4px 12px;">唯一模版</span>
  </div>

  <!-- Top-level tabs: 开学考试 / 分级考试 / 应知应会 -->
  <div class="view-tabs" id="exam-top-tabs">
    <div class="view-tab active" onclick="switchExamTab('kaixue')">开学考试</div>
    <div class="view-tab" onclick="switchExamTab('fenji')">分级考试</div>
    <div class="view-tab" onclick="switchExamTab('yingzhi')">应知应会</div>
  </div>

  <!-- ══════════════════════════════════════════════════════════
       TAB 1: 开学考试
  ══════════════════════════════════════════════════════════ -->
  <div id="exam-tab-kaixue" class="exam-tab-panel" style="display:flex;gap:0;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;">
    <!-- Left sidebar nav -->
    <div style="width:180px;flex-shrink:0;border-right:1px solid var(--gray-border);background:var(--gray-light);padding:14px 0;">
      <div class="nav-item active" id="kaixue-nav-basic" onclick="switchExamSection('kaixue','basic')">基本配置</div>
      <div class="nav-item" id="kaixue-nav-scope" onclick="switchExamSection('kaixue','scope')">考试范围</div>
      <div class="nav-item" id="kaixue-nav-paper" onclick="switchExamSection('kaixue','paper')">试卷配置</div>
      <div class="nav-item" id="kaixue-nav-preexam" onclick="switchExamSection('kaixue','preexam')">考前配置</div>
      <div class="nav-item" id="kaixue-nav-cert" onclick="switchExamSection('kaixue','cert')">获得证书</div>
    </div>
    <!-- Right content area -->
    <div style="flex:1;padding:28px;overflow-y:auto;max-height:calc(100vh - var(--header-h) - 196px);">

      <!-- 基本设置 section -->
      <div id="kaixue-sec-basic" class="exam-section">
        <div class="card-title">基本配置</div>
        <div style="display:flex;flex-direction:column;gap:16px;">

          <div style="display:flex;align-items:center;gap:16px;">
            <span class="form-label" style="width:80px;flex-shrink:0;">考试类型</span>
            <input class="form-input" style="width:200px;" value="开学考试" disabled>
            <span class="form-hint">系统内置，不可更改</span>
          </div>

          <div style="display:flex;align-items:center;gap:16px;">
            <span class="form-label" style="width:80px;flex-shrink:0;">考试名称</span>
            <input class="form-input" style="width:300px;" placeholder="请输入考试名称">
          </div>

          <div style="display:flex;align-items:center;gap:16px;">
            <span class="form-label" style="width:80px;flex-shrink:0;">可考次数</span>
            <div style="display:flex;align-items:center;gap:8px;">
              <button class="btn btn-outline-gray btn-sm" onclick="stepNum('kaixue-answer-cnt',-1)">－</button>
              <input id="kaixue-answer-cnt" type="number" class="form-input" style="width:60px;text-align:center;" value="2" min="1">
              <button class="btn btn-outline-gray btn-sm" onclick="stepNum('kaixue-answer-cnt',1)">＋</button>
            </div>
            <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;margin-left:8px;">
              <input type="radio" name="kaixue-answer-mode" value="limit" checked> 限制次数
            </label>
            <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;">
              <input type="radio" name="kaixue-answer-mode" value="unlimited"> 无限制
            </label>
          </div>

          <div style="display:flex;align-items:center;gap:16px;">
            <span class="form-label" style="width:80px;flex-shrink:0;">考试时间</span>
            <input type="datetime-local" class="form-input" style="width:190px;" step="1">
            <span style="color:var(--text-hint);font-size:13px;">至</span>
            <input type="datetime-local" class="form-input" style="width:190px;" step="1">
          </div>

          <div style="display:flex;align-items:center;gap:16px;">
            <span class="form-label" style="width:80px;flex-shrink:0;">考试时长</span>
            <div style="display:flex;align-items:center;gap:8px;">
              <button class="btn btn-outline-gray btn-sm" onclick="stepNum('kaixue-duration',-5)">－</button>
              <input id="kaixue-duration" type="number" class="form-input" style="width:70px;text-align:center;" value="60" min="5" step="5">
              <button class="btn btn-outline-gray btn-sm" onclick="stepNum('kaixue-duration',5)">＋</button>
              <span style="font-size:13px;color:var(--text-secondary);">分钟</span>
            </div>
            <span class="form-hint">限制答卷最大时长</span>
          </div>

          <div style="display:flex;align-items:center;gap:16px;">
            <span class="form-label" style="width:80px;flex-shrink:0;">启用</span>
            <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
            <span class="form-hint">开启后，每学年按配置时间自动创建执行该考试，无需重复配置</span>
          </div>

        </div><!-- /flex col -->

        <!-- 防作弊配置 subsection -->
        <div style="margin-top:24px;padding-top:20px;border-top:1px solid var(--gray-border);">
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
            <span class="card-title" style="margin:0;">防作弊配置</span>
            <span class="form-hint" style="font-size:12px;">（防作弊配置仅适用教育考试一体机）</span>
          </div>
          <div style="display:flex;flex-direction:column;gap:14px;">

            <div style="display:flex;align-items:center;gap:12px;">
              <span class="form-label" style="width:100px;flex-shrink:0;">考前人脸校验</span>
              <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
              <span style="font-size:13px;color:var(--text-secondary);">开启后，考试前需要进行人脸识别校验</span>
            </div>

            <div style="display:flex;align-items:center;gap:12px;">
              <span class="form-label" style="width:100px;flex-shrink:0;">考后人脸校验</span>
              <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
              <span style="font-size:13px;color:var(--text-secondary);">开启后，考试结束后需要进行人脸识别校验</span>
            </div>

            <div style="display:flex;align-items:center;gap:12px;">
              <span class="form-label" style="width:100px;flex-shrink:0;">摄像头抓拍</span>
              <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
              <span style="font-size:13px;color:var(--text-secondary);">开启后，考试过程中摄像头随机抓拍</span>
            </div>

          </div>
        </div>

        <div style="margin-top:24px;display:flex;gap:12px;">
          <button class="btn btn-primary">保存设置</button>
          <button class="btn btn-outline-gray">重置</button>
        </div>
      </div><!-- /kaixue-sec-basic -->

      <!-- 考试范围 section -->
      <div id="kaixue-sec-scope" class="exam-section" style="display:none;">
        <div class="card-title">考试范围</div>

        <!-- 范围类型单选 -->
        <div style="display:flex;align-items:center;gap:20px;margin-bottom:20px;">
          <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;">
            <input type="radio" name="kaixue-scope-type" value="specify" checked onchange="switchKaixueScopeTab('specify')"> 指定范围
          </label>
          <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;">
            <input type="radio" name="kaixue-scope-type" value="person" onchange="switchKaixueScopeTab('person')"> 指定人员
          </label>
        </div>

        <!-- 指定范围 panel -->
        <div id="kaixue-scope-panel-specify">
          <div style="display:flex;flex-direction:column;gap:18px;">

            <!-- 学院单位 multiselect -->
            <div style="display:flex;align-items:flex-start;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:6px;">学院单位</span>
              <div style="flex:1;max-width:600px;">
                <div style="position:relative;margin-bottom:8px;">
                  <input class="form-input" style="padding-left:30px;" placeholder="搜索学院单位...">
                  <span style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-hint);font-size:13px;">🔍</span>
                </div>
                <div style="display:flex;flex-wrap:wrap;gap:6px;padding:10px;border:1px solid var(--gray-border);border-radius:var(--radius);min-height:44px;background:var(--white);">
                  <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">生命科学学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                  <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">化学化工学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                  <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">物理学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                  <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">材料科学与工程学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                  <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">医学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                  <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">环境科学学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                  <span class="tag" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px dashed var(--gray-border);border-radius:20px;cursor:pointer;color:var(--text-hint);">＋ 添加学院</span>
                </div>
                <div style="display:flex;align-items:center;gap:12px;margin-top:8px;">
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;color:var(--text-secondary);">
                    <input type="checkbox" checked style="accent-color:var(--blue);"> 全选
                  </label>
                  <span style="font-size:12px;color:var(--text-hint);">已全选所有学院单位</span>
                </div>
              </div>
            </div>


            <!-- 考生类别 -->
            <div style="display:flex;align-items:flex-start;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:6px;">考生类别</span>
              <div style="display:flex;flex-direction:column;gap:12px;">
                <!-- 新生 -->
                <div style="display:flex;align-items:center;gap:12px;">
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;font-weight:500;width:44px;flex-shrink:0;">
                    <input type="checkbox" id="kaixue-cat-xinsheng" checked style="accent-color:var(--blue);"> 新生
                  </label>
                  <div id="kaixue-cat-xinsheng-types" style="position:relative;">
                    <div class="multiselect-trigger" onclick="toggleMultiselect('kaixue-xinsheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:200px;background:var(--white);">
                      <span id="kaixue-xinsheng-label" style="flex:1;color:var(--text-primary);">本科生</span>
                      <span style="color:var(--text-hint);font-size:11px;">▼</span>
                    </div>
                    <div id="kaixue-xinsheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:160px;">
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" checked onchange="updateMultiselectLabel('kaixue-xinsheng-dd','kaixue-xinsheng-label')"> 本科生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('kaixue-xinsheng-dd','kaixue-xinsheng-label')"> 研究生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('kaixue-xinsheng-dd','kaixue-xinsheng-label')"> 博士生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('kaixue-xinsheng-dd','kaixue-xinsheng-label')"> 教职工</label>
                    </div>
                  </div>
                </div>
                <!-- 老生 -->
                <div style="display:flex;align-items:center;gap:12px;">
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;font-weight:500;width:44px;flex-shrink:0;">
                    <input type="checkbox" id="kaixue-cat-laosheng" style="accent-color:var(--blue);"> 老生
                  </label>
                  <div id="kaixue-cat-laosheng-types" style="position:relative;">
                    <div class="multiselect-trigger" onclick="toggleMultiselect('kaixue-laosheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:200px;background:var(--white);">
                      <span id="kaixue-laosheng-label" style="flex:1;color:var(--text-hint);">请选择类型</span>
                      <span style="color:var(--text-hint);font-size:11px;">▼</span>
                    </div>
                    <div id="kaixue-laosheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:160px;">
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('kaixue-laosheng-dd','kaixue-laosheng-label')"> 本科生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('kaixue-laosheng-dd','kaixue-laosheng-label')"> 研究生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('kaixue-laosheng-dd','kaixue-laosheng-label')"> 博士生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('kaixue-laosheng-dd','kaixue-laosheng-label')"> 教职工</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <div style="margin-top:24px;display:flex;gap:12px;">
            <button class="btn btn-primary">保存设置</button>
            <button class="btn btn-outline-gray">重置</button>
          </div>
        </div><!-- /specify panel -->

        <!-- 指定人员 panel -->
        <div id="kaixue-scope-panel-person" style="display:none;">
          <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:16px;">

            <!-- 筛选条件 row 1: 学院单位 chip multiselect + 学年 -->
            <div style="display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;">
              <div style="position:relative;">
                <div class="multiselect-trigger" onclick="toggleMultiselect('person-college-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:180px;background:var(--white);">
                  <span id="person-college-label" style="flex:1;color:var(--text-hint);">选择学院单位</span>
                  <span style="color:var(--text-hint);font-size:11px;">▼</span>
                </div>
                <div id="person-college-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:180px;">
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--gray-border);margin-bottom:4px;"><input type="checkbox" onchange="toggleSelectAll(this,'person-college-dd');updateMultiselectLabel('person-college-dd','person-college-label')"> 全选</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('person-college-dd','person-college-label')"> 生命科学学院</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('person-college-dd','person-college-label')"> 化学化工学院</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('person-college-dd','person-college-label')"> 物理学院</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('person-college-dd','person-college-label')"> 材料科学学院</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('person-college-dd','person-college-label')"> 医学院</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('person-college-dd','person-college-label')"> 环境科学学院</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('person-college-dd','person-college-label')"> 安全管理处</label>
                </div>
              </div>
            </div>

            <!-- 筛选条件 row 2: 新生/老生 + 类型下拉 + 姓名搜索 -->
            <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
              <!-- 新生 -->
              <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;font-weight:500;">
                <input type="checkbox" id="person-cat-xinsheng" checked style="accent-color:var(--blue);"> 新生
              </label>
              <div style="position:relative;">
                <div class="multiselect-trigger" onclick="toggleMultiselect('person-xinsheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:140px;background:var(--white);">
                  <span id="person-xinsheng-label" style="flex:1;color:var(--text-primary);">本科生</span>
                  <span style="color:var(--text-hint);font-size:11px;">▼</span>
                </div>
                <div id="person-xinsheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:140px;">
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" checked onchange="updateMultiselectLabel('person-xinsheng-dd','person-xinsheng-label')"> 本科生</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('person-xinsheng-dd','person-xinsheng-label')"> 研究生</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('person-xinsheng-dd','person-xinsheng-label')"> 博士生</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('person-xinsheng-dd','person-xinsheng-label')"> 教职工</label>
                </div>
              </div>
              <!-- 老生 -->
              <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;font-weight:500;margin-left:8px;">
                <input type="checkbox" id="person-cat-laosheng" style="accent-color:var(--blue);"> 老生
              </label>
              <div style="position:relative;">
                <div class="multiselect-trigger" onclick="toggleMultiselect('person-laosheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:140px;background:var(--white);">
                  <span id="person-laosheng-label" style="flex:1;color:var(--text-hint);">请选择类型</span>
                  <span style="color:var(--text-hint);font-size:11px;">▼</span>
                </div>
                <div id="person-laosheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:140px;">
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('person-laosheng-dd','person-laosheng-label')"> 本科生</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('person-laosheng-dd','person-laosheng-label')"> 研究生</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('person-laosheng-dd','person-laosheng-label')"> 博士生</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('person-laosheng-dd','person-laosheng-label')"> 教职工</label>
                </div>
              </div>
              <input class="form-input" style="width:180px;margin-left:8px;" placeholder="姓名/学号/工号">
              <button class="btn btn-outline btn-sm">搜索</button>
            </div>
          </div>

          <!-- Transfer box -->
          <div style="display:flex;gap:12px;align-items:stretch;">
            <!-- Left: candidate list -->
            <div style="flex:1;border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;">
              <div style="background:var(--gray-light);padding:8px 12px;font-size:13px;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--gray-border);display:flex;justify-content:space-between;align-items:center;">
                <span>待选人员</span>
                <span style="font-size:12px;color:var(--text-hint);">共 248 人</span>
              </div>
              <div style="padding:6px;border-bottom:1px solid var(--gray-border);">
                <input class="form-input" style="font-size:12px;" placeholder="在结果中搜索...">
              </div>
              <div style="flex:1;overflow-y:auto;max-height:280px;">
                <table style="width:100%;border-collapse:collapse;font-size:12px;">
                  <thead><tr style="background:var(--gray-light);"><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);"><input type="checkbox"> 姓名</th><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);">学号/工号</th><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);">学院</th><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);">类别</th></tr></thead>
                  <tbody>
                    <tr style="border-top:1px solid var(--gray-border);"><td style="padding:6px 10px;"><input type="checkbox"> 张三</td><td style="padding:6px 10px;">2026001</td><td style="padding:6px 10px;">生科院</td><td style="padding:6px 10px;">新生本科</td></tr>
                    <tr style="border-top:1px solid var(--gray-border);"><td style="padding:6px 10px;"><input type="checkbox"> 李四</td><td style="padding:6px 10px;">2026002</td><td style="padding:6px 10px;">化工院</td><td style="padding:6px 10px;">新生研究生</td></tr>
                    <tr style="border-top:1px solid var(--gray-border);"><td style="padding:6px 10px;"><input type="checkbox"> 王五</td><td style="padding:6px 10px;">2026003</td><td style="padding:6px 10px;">物理院</td><td style="padding:6px 10px;">新生博士</td></tr>
                    <tr style="border-top:1px solid var(--gray-border);color:var(--text-hint);"><td colspan="4" style="padding:20px;text-align:center;">显示前 3 条，搜索或筛选查看更多</td></tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- Transfer buttons -->
            <div style="display:flex;flex-direction:column;justify-content:center;gap:8px;flex-shrink:0;">
              <button class="btn btn-outline btn-sm" style="width:44px;" title="添加选中">›</button>
              <button class="btn btn-outline btn-sm" style="width:44px;" title="添加全部">»</button>
              <button class="btn btn-outline btn-sm" style="width:44px;" title="移除选中">‹</button>
              <button class="btn btn-outline btn-sm" style="width:44px;" title="移除全部">«</button>
            </div>

            <!-- Right: selected list -->
            <div style="flex:1;border:1px solid var(--blue);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;">
              <div style="background:var(--blue-xlight);padding:8px 12px;font-size:13px;font-weight:600;color:var(--blue);border-bottom:1px solid var(--blue);display:flex;justify-content:space-between;align-items:center;">
                <span>已选人员</span>
                <span style="font-size:12px;">已选 2 人</span>
              </div>
              <div style="padding:6px;border-bottom:1px solid var(--gray-border);">
                <input class="form-input" style="font-size:12px;" placeholder="在已选中搜索...">
              </div>
              <div style="flex:1;overflow-y:auto;max-height:280px;">
                <table style="width:100%;border-collapse:collapse;font-size:12px;">
                  <thead><tr style="background:var(--gray-light);"><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);"><input type="checkbox"> 姓名</th><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);">学号/工号</th><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);">学院</th><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);">操作</th></tr></thead>
                  <tbody>
                    <tr style="border-top:1px solid var(--gray-border);"><td style="padding:6px 10px;"><input type="checkbox"> 陈六</td><td style="padding:6px 10px;">2026010</td><td style="padding:6px 10px;">医学院</td><td style="padding:6px 10px;"><span style="color:var(--red);cursor:pointer;">移除</span></td></tr>
                    <tr style="border-top:1px solid var(--gray-border);"><td style="padding:6px 10px;"><input type="checkbox"> 赵七</td><td style="padding:6px 10px;">2026011</td><td style="padding:6px 10px;">材料院</td><td style="padding:6px 10px;"><span style="color:var(--red);cursor:pointer;">移除</span></td></tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div><!-- /transfer box -->

          <div style="margin-top:20px;display:flex;gap:12px;">
            <button class="btn btn-primary">保存设置</button>
            <button class="btn btn-outline-gray">重置</button>
          </div>
        </div><!-- /person panel -->

      </div><!-- /kaixue-sec-scope -->

      <!-- 试卷配置 section -->
      <div id="kaixue-sec-paper" class="exam-section" style="display:none;">
        <div class="card-title">试卷配置</div>
        <div style="font-size:13px;color:var(--text-hint);margin-bottom:16px;">根据考试范围，为各学院单位分别指定考试试卷。未单独指定的学院将使用全校默认试卷。</div>
        <div style="display:flex;flex-direction:column;gap:0;border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;">
          <!-- 表头 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;background:var(--gray-light);border-bottom:1px solid var(--gray-border);padding:10px 16px;font-size:13px;font-weight:600;color:var(--text-secondary);">
            <span>学院单位</span>
            <span>试卷</span>
            <span>操作</span>
          </div>
          <!-- 全校默认行 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);background:var(--blue-xlight);">
            <span style="font-size:13px;font-weight:600;color:var(--blue);">全校（默认）</span>
            <div style="display:flex;align-items:center;gap:8px;">
              <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;font-size:12px;">实验室安全基础知识<span style="cursor:pointer;margin-left:2px;opacity:.7;">×</span></span>
            </div>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">更换试卷</button>
          </div>
          <!-- 生命科学学院 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
            <span style="font-size:13px;color:var(--text-primary);">生命科学学院</span>
            <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
          </div>
          <!-- 化学化工学院 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
            <span style="font-size:13px;color:var(--text-primary);">化学化工学院</span>
            <div style="display:flex;align-items:center;gap:8px;">
              <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;font-size:12px;">化工安全专项考试<span style="cursor:pointer;margin-left:2px;opacity:.7;">×</span></span>
            </div>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">更换试卷</button>
          </div>
          <!-- 物理学院 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
            <span style="font-size:13px;color:var(--text-primary);">物理学院</span>
            <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
          </div>
          <!-- 材料科学学院 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
            <span style="font-size:13px;color:var(--text-primary);">材料科学学院</span>
            <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
          </div>
          <!-- 医学院 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
            <span style="font-size:13px;color:var(--text-primary);">医学院</span>
            <div style="display:flex;align-items:center;gap:8px;">
              <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;font-size:12px;">医学实验室安全规范<span style="cursor:pointer;margin-left:2px;opacity:.7;">×</span></span>
            </div>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">更换试卷</button>
          </div>
          <!-- 环境科学学院 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
            <span style="font-size:13px;color:var(--text-primary);">环境科学学院</span>
            <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
          </div>
          <!-- 安全管理处 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;">
            <span style="font-size:13px;color:var(--text-primary);">安全管理处</span>
            <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
          </div>
        </div>
        <div style="margin-top:24px;display:flex;gap:12px;">
          <button class="btn btn-primary">保存设置</button>
          <button class="btn btn-outline-gray">重置</button>
        </div>
      </div><!-- /kaixue-sec-paper -->

      <!-- 考前配置 section -->
      <div id="kaixue-sec-preexam" class="exam-section" style="display:none;">
        <div class="card-title">考前配置</div>
        <div style="display:flex;flex-direction:column;gap:20px;">

          <!-- 学时要求 -->
          <div style="display:flex;align-items:flex-start;gap:12px;">
            <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">学时要求</span>
            <div style="display:flex;flex-direction:column;gap:10px;flex:1;">
              <label class="toggle"><input type="checkbox" id="kaixue-credit-toggle" checked onchange="document.getElementById('kaixue-credit-detail').style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
              <div id="kaixue-credit-detail">
                <div style="font-size:13px;color:var(--text-hint);margin-bottom:10px;">按照试卷所属知识点配置对应学时要求</div>
                <div class="table-wrap">
                  <table>
                    <thead>
                      <tr>
                        <th>知识点</th>
                        <th style="width:120px;">所需学时</th>
                      </tr>
                    </thead>
                    <tbody id="kaixue-credit-tbody">
                      <tr>
                        <td>实验室基础安全</td>
                        <td><input type="number" class="form-input" style="width:80px;" value="2" min="1"></td>
                      </tr>
                      <tr>
                        <td>化学品安全</td>
                        <td><input type="number" class="form-input" style="width:80px;" value="1" min="1"></td>
                      </tr>
                      <tr>
                        <td>消防安全-应急</td>
                        <td><input type="number" class="form-input" style="width:80px;" value="1" min="1"></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

          <!-- 考前学习 -->
          <div style="display:flex;align-items:flex-start;gap:12px;">
            <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考前学习</span>
            <div style="display:flex;flex-direction:column;gap:8px;">
              <label class="toggle"><input type="checkbox" id="kaixue-prestudy-toggle" onchange="document.getElementById('kaixue-prestudy-detail').style.display=this.checked?'flex':'none'"><span class="toggle-slider"></span></label>
              <div id="kaixue-prestudy-detail" style="display:none;align-items:center;gap:8px;">
                <button class="btn btn-outline btn-sm">选择课程</button>
                <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;">实验室安全基础课程<span onclick="this.parentElement.remove()" style="cursor:pointer;margin-left:2px;">×</span></span>
                <span class="form-hint">只可选择一门课程</span>
              </div>
            </div>
          </div>

          <!-- 模拟考试 -->
          <div style="display:flex;align-items:flex-start;gap:12px;">
            <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">模拟考试</span>
            <div style="display:flex;flex-direction:column;gap:10px;">
              <label class="toggle"><input type="checkbox" id="kaixue-mock-toggle" onchange="document.getElementById('kaixue-mock-detail').style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
              <div id="kaixue-mock-detail" style="display:none;">
                <div style="display:flex;gap:16px;margin-bottom:10px;">
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;">
                    <input type="radio" name="kaixue-mock-mode" value="reuse" checked onchange="switchKaixueMockMode('reuse')"> 复用试卷
                  </label>
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;">
                    <input type="radio" name="kaixue-mock-mode" value="choose" onchange="switchKaixueMockMode('choose')"> 选择试卷
                  </label>
                </div>
                <!-- 复用试卷：显示当前正式考试试卷名称 -->
                <div id="kaixue-mock-reuse-wrap" style="display:flex;align-items:center;gap:8px;">
                  <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;">实验室安全综合试卷（2026）<span onclick="clearKaixueMockReuse()" style="cursor:pointer;margin-left:2px;">×</span></span>
                  <span class="form-hint">复用正式考试试卷作为模拟考试</span>
                </div>
                <!-- 选择试卷：手动选择 -->
                <div id="kaixue-mock-choose-wrap" style="display:none;align-items:center;gap:8px;">
                  <button class="btn btn-outline btn-sm" onclick="showModal('modal-select-paper')">选择试卷</button>
                  <span id="kaixue-mock-paper-tag" style="display:none;" class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;"></span>
                </div>
              </div>
            </div>
          </div>

          <!-- 考试承诺书 -->
          <div style="display:flex;align-items:flex-start;gap:12px;">
            <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考试承诺书</span>
            <div style="display:flex;flex-direction:column;gap:8px;flex:1;">
              <label class="toggle"><input type="checkbox" id="kaixue-pledge-toggle" onchange="document.getElementById('kaixue-pledge-editor').style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
              <div id="kaixue-pledge-editor" style="display:none;">
                <div class="rich-editor">
                  <div class="rich-toolbar">
                    <button class="rich-tool-btn">B</button><button class="rich-tool-btn">I</button>
                    <button class="rich-tool-btn">U</button><button class="rich-tool-btn">≡</button>
                    <button class="rich-tool-btn">链接</button><button class="rich-tool-btn">图片</button>
                  </div>
                  <div class="rich-body" contenteditable="true">
                    <p><strong>实验室安全承诺书</strong></p>
                    <p>本人郑重承诺：在参加实验室安全考试及日常实验操作过程中，严格遵守实验室各项安全规章制度，认真执行安全操作规程，不擅自使用不熟悉的仪器设备，不私自改装或违规操作实验装置。发现安全隐患及时上报，如实反映实验情况，对违规行为承担相应法律及校规责任。</p>
                  </div>
                </div>
                <div style="display:flex;align-items:center;gap:20px;margin-top:10px;flex-wrap:wrap;">
                  <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:var(--text-secondary);">
                    <input type="checkbox" style="accent-color:var(--blue);">
                    支持考生打印承诺书
                  </label>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div style="margin-top:24px;display:flex;gap:12px;">
          <button class="btn btn-primary">保存设置</button>
          <button class="btn btn-outline-gray">重置</button>
        </div>
      </div><!-- /kaixue-sec-preexam -->

      <!-- 获得证书 section -->
      <div id="kaixue-sec-cert" class="exam-section" style="display:none;">
        <div class="card-title">获得证书</div>
        <div style="display:flex;flex-direction:column;gap:16px;">
          <div style="display:flex;align-items:center;gap:12px;">
            <span class="form-label" style="width:80px;flex-shrink:0;">颁发证书</span>
            <label class="toggle"><input type="checkbox" id="kaixue-cert-toggle" onchange="document.getElementById('kaixue-cert-detail').style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
          </div>
          <div id="kaixue-cert-detail" style="display:none;">
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:6px;">证书模板</span>
              <div style="display:flex;flex-direction:column;gap:12px;">
                <select class="form-input form-select" style="width:240px;" id="kaixue-cert-tpl" onchange="previewKaixueCert(this)">
                  <option value="">请选择证书模板</option>
                  <option value="standard">实验室安全教育证书（标准版）</option>
                  <option value="elite">实验室安全教育证书（精英版）</option>
                </select>
                <div id="kaixue-cert-preview" style="display:none;border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;width:360px;background:var(--gray-light);">
                  <div style="padding:6px 10px;background:var(--blue-light);border-bottom:1px solid var(--gray-border);font-size:12px;color:var(--blue);display:flex;justify-content:space-between;align-items:center;">
                    <span id="kaixue-cert-preview-name"></span>
                    <span style="cursor:pointer;color:var(--text-hint);" onclick="document.getElementById('kaixue-cert-tpl').value='';previewKaixueCert(document.getElementById('kaixue-cert-tpl'))">×</span>
                  </div>
                  <div style="padding:24px;display:flex;align-items:center;justify-content:center;min-height:200px;">
                    <div id="kaixue-cert-img-wrap" style="text-align:center;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div><!-- /kaixue-cert-detail -->
        </div>
        <div style="margin-top:24px;display:flex;gap:12px;">
          <button class="btn btn-primary">保存设置</button>
          <button class="btn btn-outline-gray">重置</button>
        </div>
      </div><!-- /kaixue-sec-cert -->

    </div><!-- /right content -->
  </div><!-- /exam-tab-kaixue -->

  <!-- ══════════════════════════════════════════════════════════
       TAB 2: 分级考试
  ══════════════════════════════════════════════════════════ -->
  <div id="exam-tab-fenji" class="exam-tab-panel" style="display:none;">
    <!-- Grade sub-tabs -->
    <div class="view-tabs" id="fenji-grade-tabs" style="margin-bottom:0;padding:0 24px;background:var(--white);border:1px solid var(--gray-border);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;">
      <div class="view-tab active" onclick="switchGradeTab('g1')">Ⅰ级（重大风险）</div>
      <div class="view-tab" onclick="switchGradeTab('g2')">Ⅱ级（高风险）</div>
      <div class="view-tab" onclick="switchGradeTab('g3')">Ⅲ级（中风险）</div>
      <div class="view-tab" onclick="switchGradeTab('g4')">Ⅳ级（低风险）</div>
    </div>

    <!-- Each grade panel shares the same two-column layout. We generate g1-g4. -->
    <div id="fenji-grade-g1" class="fenji-grade-panel" style="display:flex;gap:0;background:var(--white);border:1px solid var(--gray-border);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);overflow:hidden;">
      <div style="width:180px;flex-shrink:0;border-right:1px solid var(--gray-border);background:var(--gray-light);padding:14px 0;">
        <div class="nav-item active" id="fenji-g1-nav-basic" onclick="switchExamSection('fenji-g1','basic')">基本配置</div>
        <div class="nav-item" id="fenji-g1-nav-scope" onclick="switchExamSection('fenji-g1','scope')">考试范围</div>
        <div class="nav-item" id="fenji-g1-nav-paper" onclick="switchExamSection('fenji-g1','paper')">试卷配置</div>
        <div class="nav-item" id="fenji-g1-nav-preexam" onclick="switchExamSection('fenji-g1','preexam')">考前配置</div>
        <div class="nav-item" id="fenji-g1-nav-cert" onclick="switchExamSection('fenji-g1','cert')">获得证书</div>
      </div>
      <div style="flex:1;padding:28px;overflow-y:auto;max-height:calc(100vh - var(--header-h) - 240px);">
        <!-- 基本配置 -->
        <div id="fenji-g1-sec-basic" class="exam-section">
          <div class="card-title">基本配置</div>
          <div style="display:flex;flex-direction:column;gap:16px;">
            <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试类型</span><input class="form-input" style="width:200px;" value="Ⅰ级（重大风险）" disabled></div>
            <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试名称</span><input class="form-input" style="width:300px;" placeholder="请输入考试名称"></div>
            <div style="display:flex;align-items:center;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">可考次数</span>
              <div style="display:flex;align-items:center;gap:8px;">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g1-ans',-1)">－</button>
                <input id="fenji-g1-ans" type="number" class="form-input" style="width:60px;text-align:center;" value="2" min="1">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g1-ans',1)">＋</button>
              </div>
              <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;margin-left:8px;"><input type="radio" name="fenji-g1-ans-mode" value="limit" checked> 限制次数</label>
              <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g1-ans-mode" value="unlimited"> 无限制</label>
            </div>
            <div style="display:flex;align-items:center;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">考试时间</span>
              <input type="datetime-local" class="form-input" style="width:190px;" step="1"><span style="color:var(--text-hint);font-size:13px;margin:0 4px;">至</span><input type="datetime-local" class="form-input" style="width:190px;" step="1">
            </div>
            <div style="display:flex;align-items:center;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">考试时长</span>
              <div style="display:flex;align-items:center;gap:8px;">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g1-dur',-5)">－</button>
                <input id="fenji-g1-dur" type="number" class="form-input" style="width:70px;text-align:center;" value="60" min="5" step="5">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g1-dur',5)">＋</button>
                <span style="font-size:13px;color:var(--text-secondary);">分钟</span>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">启用</span>
              <div style="display:flex;flex-direction:column;gap:6px;">
                <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
                <span class="form-hint">开启后，每学年按配置时间自动创建执行该考试，无需重复配置</span>
              </div>
            </div>
            <!-- 防作弊配置 -->
            <div style="border-top:1px solid var(--gray-border);padding-top:16px;margin-top:4px;">
              <div style="font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:12px;">防作弊配置 <span style="font-weight:400;color:var(--text-hint);">（防作弊配置仅适用教育考试一体机）</span></div>
              <div style="display:flex;flex-direction:column;gap:12px;">
                <div style="display:flex;align-items:center;gap:12px;">
                  <span class="form-label" style="width:100px;flex-shrink:0;">考前人脸校验</span>
                  <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
                  <span style="font-size:13px;color:var(--text-secondary);">开启后，考试前需要进行人脸识别校验</span>
                </div>
                <div style="display:flex;align-items:center;gap:12px;">
                  <span class="form-label" style="width:100px;flex-shrink:0;">考后人脸校验</span>
                  <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
                  <span style="font-size:13px;color:var(--text-secondary);">开启后，考试后需要进行人脸识别校验</span>
                </div>
                <div style="display:flex;align-items:center;gap:12px;">
                  <span class="form-label" style="width:100px;flex-shrink:0;">摄像头抓拍</span>
                  <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
                  <span style="font-size:13px;color:var(--text-secondary);">开启后，考试过程中摄像头随机抓拍</span>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 考试范围 section -->
        <div id="fenji-g1-sec-scope" class="exam-section" style="display:none;">
          <div class="card-title">考试范围</div>
          <div style="display:flex;align-items:center;gap:20px;margin-bottom:20px;">
            <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g1-scope-type" value="specify" checked onchange="switchScopeTab('fenji-g1','specify')"> 指定范围</label>
            <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g1-scope-type" value="person" onchange="switchScopeTab('fenji-g1','person')"> 指定人员</label>
          </div>
          <div id="fenji-g1-scope-panel-specify">
            <div style="display:flex;flex-direction:column;gap:18px;">
              <div style="display:flex;align-items:flex-start;gap:16px;">
                <span class="form-label" style="width:80px;flex-shrink:0;padding-top:6px;">学院单位</span>
                <div style="flex:1;max-width:600px;">
                  <div style="position:relative;margin-bottom:8px;"><input class="form-input" style="padding-left:30px;" placeholder="搜索学院单位..."><span style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-hint);font-size:13px;">🔍</span></div>
                  <div style="display:flex;flex-wrap:wrap;gap:6px;padding:10px;border:1px solid var(--gray-border);border-radius:var(--radius);min-height:44px;background:var(--white);">
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">生命科学学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">化学化工学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">物理学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">材料科学与工程学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">医学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px dashed var(--gray-border);border-radius:20px;cursor:pointer;color:var(--text-hint);">＋ 添加学院</span>
                  </div>
                  <div style="display:flex;align-items:center;gap:12px;margin-top:8px;">
                    <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;color:var(--text-secondary);"><input type="checkbox" checked style="accent-color:var(--blue);"> 全选</label>
                    <span style="font-size:12px;color:var(--text-hint);">已全选所有学院单位</span>
                  </div>
                </div>
              </div>
              <!-- 考生类别 -->
              <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;">
                <span class="form-label" style="width:80px;flex-shrink:0;">考生类别</span>
                <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="checkbox" checked style="accent-color:var(--blue);"> 新生</label>
                  <div style="position:relative;">
                    <div class="multiselect-trigger" onclick="toggleMultiselect('fenji-g1-xinsheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:180px;background:var(--white);"><span id="fenji-g1-xinsheng-label" style="flex:1;color:var(--text-primary);">本科生、研究生</span><span style="color:var(--text-hint);font-size:11px;">▼</span></div>
                    <div id="fenji-g1-xinsheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:160px;">
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" checked onchange="updateMultiselectLabel('fenji-g1-xinsheng-dd','fenji-g1-xinsheng-label')"> 本科生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g1-xinsheng-dd','fenji-g1-xinsheng-label')" checked> 研究生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g1-xinsheng-dd','fenji-g1-xinsheng-label')"> 博士生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g1-xinsheng-dd','fenji-g1-xinsheng-label')"> 教职工</label>
                    </div>
                  </div>
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="checkbox" style="accent-color:var(--blue);"> 老生</label>
                  <div style="position:relative;">
                    <div class="multiselect-trigger" onclick="toggleMultiselect('fenji-g1-laosheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:180px;background:var(--white);"><span id="fenji-g1-laosheng-label" style="flex:1;color:var(--text-hint);">请选择类型</span><span style="color:var(--text-hint);font-size:11px;">▼</span></div>
                    <div id="fenji-g1-laosheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:160px;">
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g1-laosheng-dd','fenji-g1-laosheng-label')"> 本科生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g1-laosheng-dd','fenji-g1-laosheng-label')"> 研究生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g1-laosheng-dd','fenji-g1-laosheng-label')"> 博士生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g1-laosheng-dd','fenji-g1-laosheng-label')"> 教职工</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="fenji-g1-scope-panel-person" style="display:none;">
            <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:12px;">
              <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
                <span class="form-label" style="width:80px;flex-shrink:0;">学院单位</span>
                <div style="position:relative;display:inline-block;">
                  <div class="multiselect-trigger" onclick="toggleMultiselect('fenji-g1-person-college-dd')" style="display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--gray-border);border-radius:6px;cursor:pointer;background:var(--white);min-width:180px;">
                    <span id="fenji-g1-person-college-label" style="font-size:13px;color:var(--text-hint);flex:1;">请选择学院</span><span style="font-size:11px;color:var(--text-hint);">▾</span>
                  </div>
                  <div id="fenji-g1-person-college-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:6px;box-shadow:var(--shadow-md);padding:8px;min-width:200px;max-height:220px;overflow-y:auto;">
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="toggleSelectAll(this,'fenji-g1-person-college-dd')"> 全选</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g1-person-college-dd','fenji-g1-person-college-label')"> 生命科学学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g1-person-college-dd','fenji-g1-person-college-label')"> 化学化工学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g1-person-college-dd','fenji-g1-person-college-label')"> 物理学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g1-person-college-dd','fenji-g1-person-college-label')"> 材料科学与工程学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g1-person-college-dd','fenji-g1-person-college-label')"> 医学院</label>
                  </div>
                </div>
                              </div>
              <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
                <span class="form-label" style="width:80px;flex-shrink:0;">姓名搜索</span>
                <input class="form-input" style="width:180px;" placeholder="请输入姓名">
                <button class="btn btn-outline btn-sm">搜索</button>
              </div>
            </div>
            <div style="display:flex;gap:12px;">
              <div style="flex:1;border:1px solid var(--gray-border);border-radius:6px;overflow:hidden;">
                <div style="padding:8px 12px;background:var(--gray-light);border-bottom:1px solid var(--gray-border);font-size:13px;font-weight:600;">待选人员</div>
                <div style="padding:8px;min-height:120px;font-size:13px;color:var(--text-hint);text-align:center;padding-top:40px;">搜索后显示</div>
              </div>
              <div style="display:flex;flex-direction:column;justify-content:center;gap:8px;">
                <button class="btn btn-outline btn-sm">»</button>
                <button class="btn btn-outline btn-sm">«</button>
              </div>
              <div style="flex:1;border:1px solid var(--gray-border);border-radius:6px;overflow:hidden;">
                <div style="padding:8px 12px;background:var(--gray-light);border-bottom:1px solid var(--gray-border);font-size:13px;font-weight:600;">已选人员</div>
                <div style="padding:8px;min-height:120px;"></div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 试卷配置 section -->
        <div id="fenji-g1-sec-paper" class="exam-section" style="display:none;">
          <div class="card-title">试卷配置</div>
          <div style="border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;">
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:10px 16px;background:var(--blue-xlight);border-bottom:1px solid var(--gray-border);font-size:13px;font-weight:600;color:var(--text-secondary);">
              <span>学院单位</span><span>试卷</span><span></span>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;background:var(--blue-light);border-bottom:1px solid var(--gray-border);">
              <span style="font-size:13px;font-weight:600;color:var(--blue);">全校（默认）</span>
              <span style="font-size:12px;color:var(--text-hint);">实验室安全综合试卷（2026）</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">更换试卷</button>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
              <span style="font-size:13px;color:var(--text-primary);">生命科学学院</span>
              <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
              <span style="font-size:13px;color:var(--text-primary);">化学化工学院</span>
              <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;">
              <span style="font-size:13px;color:var(--text-primary);">物理学院</span>
              <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 考前配置 section -->
        <div id="fenji-g1-sec-preexam" class="exam-section" style="display:none;">
          <div class="card-title">考前配置</div>
          <div style="display:flex;flex-direction:column;gap:20px;">
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">学时要求</span>
              <div style="background:#f4f6fa;border:1px solid #dde3ed;border-radius:6px;padding:12px 16px;font-size:13px;">
                <div style="color:#8896a7;margin-bottom:10px;display:flex;align-items:center;gap:6px;"><span>ℹ️</span>根据考生绑定实验室的分级匹配年度学时要求，当前等级：<span style="font-weight:600;color:#e53e3e;">Ⅰ级（重大风险）</span></div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:360px;">
                  <div style="background:#fff;border:1px solid #dde3ed;border-radius:6px;padding:12px 16px;text-align:center;">
                    <div style="font-size:11px;color:#8896a7;margin-bottom:4px;">准入学时</div>
                    <div style="font-size:24px;font-weight:700;color:#1857d4;">24</div>
                    <div style="font-size:12px;color:#8896a7;">学时</div>
                  </div>
                  <div style="background:#fff;border:1px solid #dde3ed;border-radius:6px;padding:12px 16px;text-align:center;">
                    <div style="font-size:11px;color:#8896a7;margin-bottom:4px;">第二年起年度学时</div>
                    <div style="font-size:24px;font-weight:700;color:#1857d4;">8</div>
                    <div style="font-size:12px;color:#8896a7;">学时</div>
                  </div>
                </div>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考前学习</span>
              <div style="display:flex;flex-direction:column;gap:8px;">
                <label class="toggle"><input type="checkbox" onchange="this.parentElement.nextElementSibling.style.display=this.checked?'flex':'none'"><span class="toggle-slider"></span></label>
                <div style="display:none;align-items:center;gap:8px;"><button class="btn btn-outline btn-sm">选择课程</button><span class="form-hint">只可选择一门课程</span></div>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">模拟考试</span>
              <div style="display:flex;flex-direction:column;gap:10px;">
                <label class="toggle"><input type="checkbox" onchange="this.parentElement.nextElementSibling.style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
                <div style="display:none;">
                  <div style="display:flex;gap:16px;margin-bottom:10px;">
                    <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g1-mock-mode" value="reuse" checked> 复用试卷</label>
                    <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g1-mock-mode" value="choose"> 选择试卷</label>
                  </div>
                  <div style="display:flex;align-items:center;gap:8px;"><span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;">复用正式考试试卷<span style="cursor:pointer;margin-left:2px;">×</span></span></div>
                </div>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考试承诺书</span>
              <div style="display:flex;flex-direction:column;gap:8px;flex:1;">
                <label class="toggle"><input type="checkbox" onchange="this.parentElement.nextElementSibling.style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
                <div style="display:none;">
                  <div class="rich-editor"><div class="rich-toolbar"><button class="rich-tool-btn">B</button><button class="rich-tool-btn">I</button><button class="rich-tool-btn">U</button><button class="rich-tool-btn">≡</button><button class="rich-tool-btn">链接</button><button class="rich-tool-btn">图片</button></div><div class="rich-body" contenteditable="true"><p><strong>实验室安全承诺书</strong></p><p>本人郑重承诺：在参加实验室安全考试及日常实验操作过程中，严格遵守实验室各项安全规章制度，认真执行安全操作规程，不擅自使用不熟悉的仪器设备，不私自改装或违规操作实验装置。发现安全隐患及时上报，如实反映实验情况，对违规行为承担相应法律及校规责任。</p></div></div>
                  <label style="display:flex;align-items:center;gap:6px;margin-top:10px;cursor:pointer;font-size:13px;color:var(--text-secondary);"><input type="checkbox" style="accent-color:var(--blue);"> 支持考生打印承诺书</label>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 获得证书 section -->
        <div id="fenji-g1-sec-cert" class="exam-section" style="display:none;">
          <div class="card-title">获得证书</div>
          <div style="display:flex;flex-direction:column;gap:16px;">
            <div style="display:flex;align-items:center;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">颁发证书</span>
              <label class="toggle"><input type="checkbox" onchange="document.getElementById('fenji-g1-cert-detail').style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
            </div>
            <div id="fenji-g1-cert-detail" style="display:none;">
              <div style="display:flex;align-items:flex-start;gap:12px;">
                <span class="form-label" style="width:80px;flex-shrink:0;padding-top:6px;">证书模板</span>
                <div style="display:flex;flex-direction:column;gap:12px;">
                  <select class="form-input form-select" style="width:240px;" onchange="previewCert(this,'fenji-g1-cert-preview','fenji-g1-cert-preview-name','fenji-g1-cert-img-wrap')">
                    <option value="">请选择证书模板</option>
                    <option value="standard">实验室安全教育证书（标准版）</option>
                    <option value="elite">实验室安全教育证书（精英版）</option>
                  </select>
                  <div id="fenji-g1-cert-preview" style="display:none;border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;width:360px;background:var(--gray-light);">
                    <div style="padding:6px 10px;background:var(--blue-light);border-bottom:1px solid var(--gray-border);font-size:12px;color:var(--blue);display:flex;justify-content:space-between;align-items:center;"><span id="fenji-g1-cert-preview-name"></span><span style="cursor:pointer;color:var(--text-hint);" onclick="this.closest('[id$=-cert-preview]').previousElementSibling.value='';this.closest('[id$=-cert-preview]').style.display='none'">×</span></div>
                    <div style="padding:24px;display:flex;align-items:center;justify-content:center;min-height:200px;"><div id="fenji-g1-cert-img-wrap"></div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
      </div><!-- /right content -->
    </div><!-- /fenji-grade-g1 -->

    <!-- Grades g2, g3, g4 share identical structure, only IDs and type labels differ -->
    <div id="fenji-grade-g2" class="fenji-grade-panel" style="display:none;gap:0;background:var(--white);border:1px solid var(--gray-border);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);overflow:hidden;flex-direction:row;">
      <div style="width:180px;flex-shrink:0;border-right:1px solid var(--gray-border);background:var(--gray-light);padding:14px 0;">
        <div class="nav-item active" id="fenji-g2-nav-basic" onclick="switchExamSection('fenji-g2','basic')">基本配置</div>
        <div class="nav-item" id="fenji-g2-nav-scope" onclick="switchExamSection('fenji-g2','scope')">考试范围</div>
        <div class="nav-item" id="fenji-g2-nav-paper" onclick="switchExamSection('fenji-g2','paper')">试卷配置</div>
        <div class="nav-item" id="fenji-g2-nav-preexam" onclick="switchExamSection('fenji-g2','preexam')">考前配置</div>
        <div class="nav-item" id="fenji-g2-nav-cert" onclick="switchExamSection('fenji-g2','cert')">获得证书</div>
      </div>
      <div style="flex:1;padding:28px;overflow-y:auto;max-height:calc(100vh - var(--header-h) - 240px);">
        <!-- 基本配置 section -->
        <div id="fenji-g2-sec-basic" class="exam-section">
          <div class="card-title">基本配置</div>
          <div style="display:flex;flex-direction:column;gap:16px;">
            <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试类型</span><input class="form-input" style="width:200px;" value="Ⅱ级（高风险）" disabled></div>
            <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试名称</span><input class="form-input" style="width:300px;" placeholder="请输入考试名称"></div>
            <div style="display:flex;align-items:center;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">可考次数</span>
              <div style="display:flex;align-items:center;gap:8px;">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g2-ans',-1)">－</button>
                <input id="fenji-g2-ans" type="number" class="form-input" style="width:60px;text-align:center;" value="2" min="1">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g2-ans',1)">＋</button>
              </div>
              <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;margin-left:8px;"><input type="radio" name="fenji-g2-ans-mode" value="limit" checked> 限制次数</label>
              <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g2-ans-mode" value="unlimited"> 无限制</label>
            </div>
            <div style="display:flex;align-items:center;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">考试时间</span>
              <input type="datetime-local" class="form-input" style="width:190px;" step="1"><span style="color:var(--text-hint);font-size:13px;margin:0 4px;">至</span><input type="datetime-local" class="form-input" style="width:190px;" step="1">
            </div>
            <div style="display:flex;align-items:center;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">考试时长</span>
              <div style="display:flex;align-items:center;gap:8px;">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g2-dur',-5)">－</button>
                <input id="fenji-g2-dur" type="number" class="form-input" style="width:70px;text-align:center;" value="60" min="5" step="5">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g2-dur',5)">＋</button>
                <span style="font-size:13px;color:var(--text-secondary);">分钟</span>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">启用</span>
              <div style="display:flex;flex-direction:column;gap:6px;">
                <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
                <span class="form-hint">开启后，每学年按配置时间自动创建执行该考试，无需重复配置</span>
              </div>
            </div>
            <!-- 防作弊配置 -->
            <div style="border-top:1px solid var(--gray-border);padding-top:16px;margin-top:4px;">
              <div style="font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:12px;">防作弊配置 <span style="font-weight:400;color:var(--text-hint);">（防作弊配置仅适用教育考试一体机）</span></div>
              <div style="display:flex;flex-direction:column;gap:12px;">
                <div style="display:flex;align-items:center;gap:12px;">
                  <span class="form-label" style="width:100px;flex-shrink:0;">考前人脸校验</span>
                  <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
                  <span style="font-size:13px;color:var(--text-secondary);">开启后，考试前需要进行人脸识别校验</span>
                </div>
                <div style="display:flex;align-items:center;gap:12px;">
                  <span class="form-label" style="width:100px;flex-shrink:0;">考后人脸校验</span>
                  <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
                  <span style="font-size:13px;color:var(--text-secondary);">开启后，考试后需要进行人脸识别校验</span>
                </div>
                <div style="display:flex;align-items:center;gap:12px;">
                  <span class="form-label" style="width:100px;flex-shrink:0;">摄像头抓拍</span>
                  <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
                  <span style="font-size:13px;color:var(--text-secondary);">开启后，考试过程中摄像头随机抓拍</span>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 考试范围 section -->
        <div id="fenji-g2-sec-scope" class="exam-section" style="display:none;">
          <div class="card-title">考试范围</div>
          <div style="display:flex;align-items:center;gap:20px;margin-bottom:20px;">
            <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g2-scope-type" value="specify" checked onchange="switchScopeTab('fenji-g2','specify')"> 指定范围</label>
            <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g2-scope-type" value="person" onchange="switchScopeTab('fenji-g2','person')"> 指定人员</label>
          </div>
          <div id="fenji-g2-scope-panel-specify">
            <div style="display:flex;flex-direction:column;gap:18px;">
              <div style="display:flex;align-items:flex-start;gap:16px;">
                <span class="form-label" style="width:80px;flex-shrink:0;padding-top:6px;">学院单位</span>
                <div style="flex:1;max-width:600px;">
                  <div style="position:relative;margin-bottom:8px;"><input class="form-input" style="padding-left:30px;" placeholder="搜索学院单位..."><span style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-hint);font-size:13px;">🔍</span></div>
                  <div style="display:flex;flex-wrap:wrap;gap:6px;padding:10px;border:1px solid var(--gray-border);border-radius:var(--radius);min-height:44px;background:var(--white);">
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">生命科学学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">化学化工学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">物理学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">材料科学与工程学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">医学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px dashed var(--gray-border);border-radius:20px;cursor:pointer;color:var(--text-hint);">＋ 添加学院</span>
                  </div>
                  <div style="display:flex;align-items:center;gap:12px;margin-top:8px;">
                    <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;color:var(--text-secondary);"><input type="checkbox" checked style="accent-color:var(--blue);"> 全选</label>
                    <span style="font-size:12px;color:var(--text-hint);">已全选所有学院单位</span>
                  </div>
                </div>
              </div>
              <!-- 考生类别 -->
              <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;">
                <span class="form-label" style="width:80px;flex-shrink:0;">考生类别</span>
                <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="checkbox" checked style="accent-color:var(--blue);"> 新生</label>
                  <div style="position:relative;">
                    <div class="multiselect-trigger" onclick="toggleMultiselect('fenji-g2-xinsheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:180px;background:var(--white);"><span id="fenji-g2-xinsheng-label" style="flex:1;color:var(--text-primary);">本科生、研究生</span><span style="color:var(--text-hint);font-size:11px;">▼</span></div>
                    <div id="fenji-g2-xinsheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:160px;">
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" checked onchange="updateMultiselectLabel('fenji-g2-xinsheng-dd','fenji-g2-xinsheng-label')"> 本科生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g2-xinsheng-dd','fenji-g2-xinsheng-label')" checked> 研究生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g2-xinsheng-dd','fenji-g2-xinsheng-label')"> 博士生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g2-xinsheng-dd','fenji-g2-xinsheng-label')"> 教职工</label>
                    </div>
                  </div>
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="checkbox" style="accent-color:var(--blue);"> 老生</label>
                  <div style="position:relative;">
                    <div class="multiselect-trigger" onclick="toggleMultiselect('fenji-g2-laosheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:180px;background:var(--white);"><span id="fenji-g2-laosheng-label" style="flex:1;color:var(--text-hint);">请选择类型</span><span style="color:var(--text-hint);font-size:11px;">▼</span></div>
                    <div id="fenji-g2-laosheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:160px;">
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g2-laosheng-dd','fenji-g2-laosheng-label')"> 本科生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g2-laosheng-dd','fenji-g2-laosheng-label')"> 研究生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g2-laosheng-dd','fenji-g2-laosheng-label')"> 博士生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g2-laosheng-dd','fenji-g2-laosheng-label')"> 教职工</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="fenji-g2-scope-panel-person" style="display:none;">
            <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:12px;">
              <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
                <span class="form-label" style="width:80px;flex-shrink:0;">学院单位</span>
                <div style="position:relative;display:inline-block;">
                  <div class="multiselect-trigger" onclick="toggleMultiselect('fenji-g2-person-college-dd')" style="display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--gray-border);border-radius:6px;cursor:pointer;background:var(--white);min-width:180px;">
                    <span id="fenji-g2-person-college-label" style="font-size:13px;color:var(--text-hint);flex:1;">请选择学院</span><span style="font-size:11px;color:var(--text-hint);">▾</span>
                  </div>
                  <div id="fenji-g2-person-college-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:6px;box-shadow:var(--shadow-md);padding:8px;min-width:200px;max-height:220px;overflow-y:auto;">
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="toggleSelectAll(this,'fenji-g2-person-college-dd')"> 全选</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g2-person-college-dd','fenji-g2-person-college-label')"> 生命科学学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g2-person-college-dd','fenji-g2-person-college-label')"> 化学化工学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g2-person-college-dd','fenji-g2-person-college-label')"> 物理学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g2-person-college-dd','fenji-g2-person-college-label')"> 材料科学与工程学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g2-person-college-dd','fenji-g2-person-college-label')"> 医学院</label>
                  </div>
                </div>
                              </div>
              <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
                <span class="form-label" style="width:80px;flex-shrink:0;">姓名搜索</span>
                <input class="form-input" style="width:180px;" placeholder="请输入姓名">
                <button class="btn btn-outline btn-sm">搜索</button>
              </div>
            </div>
            <div style="display:flex;gap:12px;">
              <div style="flex:1;border:1px solid var(--gray-border);border-radius:6px;overflow:hidden;">
                <div style="padding:8px 12px;background:var(--gray-light);border-bottom:1px solid var(--gray-border);font-size:13px;font-weight:600;">待选人员</div>
                <div style="padding:8px;min-height:120px;font-size:13px;color:var(--text-hint);text-align:center;padding-top:40px;">搜索后显示</div>
              </div>
              <div style="display:flex;flex-direction:column;justify-content:center;gap:8px;">
                <button class="btn btn-outline btn-sm">»</button>
                <button class="btn btn-outline btn-sm">«</button>
              </div>
              <div style="flex:1;border:1px solid var(--gray-border);border-radius:6px;overflow:hidden;">
                <div style="padding:8px 12px;background:var(--gray-light);border-bottom:1px solid var(--gray-border);font-size:13px;font-weight:600;">已选人员</div>
                <div style="padding:8px;min-height:120px;"></div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 试卷配置 section -->
        <div id="fenji-g2-sec-paper" class="exam-section" style="display:none;">
          <div class="card-title">试卷配置</div>
          <div style="border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;">
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:10px 16px;background:var(--blue-xlight);border-bottom:1px solid var(--gray-border);font-size:13px;font-weight:600;color:var(--text-secondary);">
              <span>学院单位</span><span>试卷</span><span></span>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;background:var(--blue-light);border-bottom:1px solid var(--gray-border);">
              <span style="font-size:13px;font-weight:600;color:var(--blue);">全校（默认）</span>
              <span style="font-size:12px;color:var(--text-hint);">实验室安全综合试卷（2026）</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">更换试卷</button>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
              <span style="font-size:13px;color:var(--text-primary);">生命科学学院</span>
              <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
              <span style="font-size:13px;color:var(--text-primary);">化学化工学院</span>
              <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;">
              <span style="font-size:13px;color:var(--text-primary);">物理学院</span>
              <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 考前配置 section -->
        <div id="fenji-g2-sec-preexam" class="exam-section" style="display:none;">
          <div class="card-title">考前配置</div>
          <div style="display:flex;flex-direction:column;gap:20px;">
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">学时要求</span>
              <div style="background:#f4f6fa;border:1px solid #dde3ed;border-radius:6px;padding:12px 16px;font-size:13px;">
                <div style="color:#8896a7;margin-bottom:10px;display:flex;align-items:center;gap:6px;"><span>ℹ️</span>根据考生绑定实验室的分级匹配年度学时要求，当前等级：<span style="font-weight:600;color:#e67e22;">Ⅱ级（高风险）</span></div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:360px;">
                  <div style="background:#fff;border:1px solid #dde3ed;border-radius:6px;padding:12px 16px;text-align:center;">
                    <div style="font-size:11px;color:#8896a7;margin-bottom:4px;">准入学时</div>
                    <div style="font-size:24px;font-weight:700;color:#1857d4;">16</div>
                    <div style="font-size:12px;color:#8896a7;">学时</div>
                  </div>
                  <div style="background:#fff;border:1px solid #dde3ed;border-radius:6px;padding:12px 16px;text-align:center;">
                    <div style="font-size:11px;color:#8896a7;margin-bottom:4px;">第二年起年度学时</div>
                    <div style="font-size:24px;font-weight:700;color:#1857d4;">4</div>
                    <div style="font-size:12px;color:#8896a7;">学时</div>
                  </div>
                </div>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考前学习</span>
              <div style="display:flex;flex-direction:column;gap:8px;">
                <label class="toggle"><input type="checkbox" onchange="this.parentElement.nextElementSibling.style.display=this.checked?'flex':'none'"><span class="toggle-slider"></span></label>
                <div style="display:none;align-items:center;gap:8px;"><button class="btn btn-outline btn-sm">选择课程</button><span class="form-hint">只可选择一门课程</span></div>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">模拟考试</span>
              <div style="display:flex;flex-direction:column;gap:10px;">
                <label class="toggle"><input type="checkbox" onchange="this.parentElement.nextElementSibling.style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
                <div style="display:none;">
                  <div style="display:flex;gap:16px;margin-bottom:10px;">
                    <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g2-mock-mode" value="reuse" checked> 复用试卷</label>
                    <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g2-mock-mode" value="choose"> 选择试卷</label>
                  </div>
                  <div style="display:flex;align-items:center;gap:8px;"><span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;">复用正式考试试卷<span style="cursor:pointer;margin-left:2px;">×</span></span></div>
                </div>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考试承诺书</span>
              <div style="display:flex;flex-direction:column;gap:8px;flex:1;">
                <label class="toggle"><input type="checkbox" onchange="this.parentElement.nextElementSibling.style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
                <div style="display:none;">
                  <div class="rich-editor"><div class="rich-toolbar"><button class="rich-tool-btn">B</button><button class="rich-tool-btn">I</button><button class="rich-tool-btn">U</button><button class="rich-tool-btn">≡</button><button class="rich-tool-btn">链接</button><button class="rich-tool-btn">图片</button></div><div class="rich-body" contenteditable="true"><p><strong>实验室安全承诺书</strong></p><p>本人郑重承诺：在参加实验室安全考试及日常实验操作过程中，严格遵守实验室各项安全规章制度，认真执行安全操作规程，不擅自使用不熟悉的仪器设备，不私自改装或违规操作实验装置。发现安全隐患及时上报，如实反映实验情况，对违规行为承担相应法律及校规责任。</p></div></div>
                  <label style="display:flex;align-items:center;gap:6px;margin-top:10px;cursor:pointer;font-size:13px;color:var(--text-secondary);"><input type="checkbox" style="accent-color:var(--blue);"> 支持考生打印承诺书</label>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 获得证书 section -->
        <div id="fenji-g2-sec-cert" class="exam-section" style="display:none;">
          <div class="card-title">获得证书</div>
          <div style="display:flex;flex-direction:column;gap:16px;">
            <div style="display:flex;align-items:center;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">颁发证书</span>
              <label class="toggle"><input type="checkbox" onchange="document.getElementById('fenji-g2-cert-detail').style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
            </div>
            <div id="fenji-g2-cert-detail" style="display:none;">
              <div style="display:flex;align-items:flex-start;gap:12px;">
                <span class="form-label" style="width:80px;flex-shrink:0;padding-top:6px;">证书模板</span>
                <div style="display:flex;flex-direction:column;gap:12px;">
                  <select class="form-input form-select" style="width:240px;" onchange="previewCert(this,'fenji-g2-cert-preview','fenji-g2-cert-preview-name','fenji-g2-cert-img-wrap')">
                    <option value="">请选择证书模板</option>
                    <option value="standard">实验室安全教育证书（标准版）</option>
                    <option value="elite">实验室安全教育证书（精英版）</option>
                  </select>
                  <div id="fenji-g2-cert-preview" style="display:none;border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;width:360px;background:var(--gray-light);">
                    <div style="padding:6px 10px;background:var(--blue-light);border-bottom:1px solid var(--gray-border);font-size:12px;color:var(--blue);display:flex;justify-content:space-between;align-items:center;"><span id="fenji-g2-cert-preview-name"></span><span style="cursor:pointer;color:var(--text-hint);" onclick="this.closest('[id$=-cert-preview]').previousElementSibling.value='';this.closest('[id$=-cert-preview]').style.display='none'">×</span></div>
                    <div style="padding:24px;display:flex;align-items:center;justify-content:center;min-height:200px;"><div id="fenji-g2-cert-img-wrap"></div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
      </div>
    </div><!-- /fenji-grade-g2 -->

    <div id="fenji-grade-g3" class="fenji-grade-panel" style="display:none;gap:0;background:var(--white);border:1px solid var(--gray-border);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);overflow:hidden;flex-direction:row;">
      <div style="width:180px;flex-shrink:0;border-right:1px solid var(--gray-border);background:var(--gray-light);padding:14px 0;">
        <div class="nav-item active" id="fenji-g3-nav-basic" onclick="switchExamSection('fenji-g3','basic')">基本配置</div>
        <div class="nav-item" id="fenji-g3-nav-scope" onclick="switchExamSection('fenji-g3','scope')">考试范围</div>
        <div class="nav-item" id="fenji-g3-nav-paper" onclick="switchExamSection('fenji-g3','paper')">试卷配置</div>
        <div class="nav-item" id="fenji-g3-nav-preexam" onclick="switchExamSection('fenji-g3','preexam')">考前配置</div>
        <div class="nav-item" id="fenji-g3-nav-cert" onclick="switchExamSection('fenji-g3','cert')">获得证书</div>
      </div>
      <div style="flex:1;padding:28px;overflow-y:auto;max-height:calc(100vh - var(--header-h) - 240px);">
        <!-- 基本配置 section -->
        <div id="fenji-g3-sec-basic" class="exam-section">
          <div class="card-title">基本配置</div>
          <div style="display:flex;flex-direction:column;gap:16px;">
            <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试类型</span><input class="form-input" style="width:200px;" value="Ⅲ级（中风险）" disabled></div>
            <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试名称</span><input class="form-input" style="width:300px;" placeholder="请输入考试名称"></div>
            <div style="display:flex;align-items:center;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">可考次数</span>
              <div style="display:flex;align-items:center;gap:8px;">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g3-ans',-1)">－</button>
                <input id="fenji-g3-ans" type="number" class="form-input" style="width:60px;text-align:center;" value="2" min="1">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g3-ans',1)">＋</button>
              </div>
              <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;margin-left:8px;"><input type="radio" name="fenji-g3-ans-mode" value="limit" checked> 限制次数</label>
              <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g3-ans-mode" value="unlimited"> 无限制</label>
            </div>
            <div style="display:flex;align-items:center;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">考试时间</span>
              <input type="datetime-local" class="form-input" style="width:190px;" step="1"><span style="color:var(--text-hint);font-size:13px;margin:0 4px;">至</span><input type="datetime-local" class="form-input" style="width:190px;" step="1">
            </div>
            <div style="display:flex;align-items:center;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">考试时长</span>
              <div style="display:flex;align-items:center;gap:8px;">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g3-dur',-5)">－</button>
                <input id="fenji-g3-dur" type="number" class="form-input" style="width:70px;text-align:center;" value="60" min="5" step="5">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g3-dur',5)">＋</button>
                <span style="font-size:13px;color:var(--text-secondary);">分钟</span>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">启用</span>
              <div style="display:flex;flex-direction:column;gap:6px;">
                <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
                <span class="form-hint">开启后，每学年按配置时间自动创建执行该考试，无需重复配置</span>
              </div>
            </div>
            <!-- 防作弊配置 -->
            <div style="border-top:1px solid var(--gray-border);padding-top:16px;margin-top:4px;">
              <div style="font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:12px;">防作弊配置 <span style="font-weight:400;color:var(--text-hint);">（防作弊配置仅适用教育考试一体机）</span></div>
              <div style="display:flex;flex-direction:column;gap:12px;">
                <div style="display:flex;align-items:center;gap:12px;">
                  <span class="form-label" style="width:100px;flex-shrink:0;">考前人脸校验</span>
                  <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
                  <span style="font-size:13px;color:var(--text-secondary);">开启后，考试前需要进行人脸识别校验</span>
                </div>
                <div style="display:flex;align-items:center;gap:12px;">
                  <span class="form-label" style="width:100px;flex-shrink:0;">考后人脸校验</span>
                  <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
                  <span style="font-size:13px;color:var(--text-secondary);">开启后，考试后需要进行人脸识别校验</span>
                </div>
                <div style="display:flex;align-items:center;gap:12px;">
                  <span class="form-label" style="width:100px;flex-shrink:0;">摄像头抓拍</span>
                  <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
                  <span style="font-size:13px;color:var(--text-secondary);">开启后，考试过程中摄像头随机抓拍</span>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 考试范围 section -->
        <div id="fenji-g3-sec-scope" class="exam-section" style="display:none;">
          <div class="card-title">考试范围</div>
          <div style="display:flex;align-items:center;gap:20px;margin-bottom:20px;">
            <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g3-scope-type" value="specify" checked onchange="switchScopeTab('fenji-g3','specify')"> 指定范围</label>
            <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g3-scope-type" value="person" onchange="switchScopeTab('fenji-g3','person')"> 指定人员</label>
          </div>
          <div id="fenji-g3-scope-panel-specify">
            <div style="display:flex;flex-direction:column;gap:18px;">
              <div style="display:flex;align-items:flex-start;gap:16px;">
                <span class="form-label" style="width:80px;flex-shrink:0;padding-top:6px;">学院单位</span>
                <div style="flex:1;max-width:600px;">
                  <div style="position:relative;margin-bottom:8px;"><input class="form-input" style="padding-left:30px;" placeholder="搜索学院单位..."><span style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-hint);font-size:13px;">🔍</span></div>
                  <div style="display:flex;flex-wrap:wrap;gap:6px;padding:10px;border:1px solid var(--gray-border);border-radius:var(--radius);min-height:44px;background:var(--white);">
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">生命科学学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">化学化工学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">物理学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">材料科学与工程学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">医学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px dashed var(--gray-border);border-radius:20px;cursor:pointer;color:var(--text-hint);">＋ 添加学院</span>
                  </div>
                  <div style="display:flex;align-items:center;gap:12px;margin-top:8px;">
                    <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;color:var(--text-secondary);"><input type="checkbox" checked style="accent-color:var(--blue);"> 全选</label>
                    <span style="font-size:12px;color:var(--text-hint);">已全选所有学院单位</span>
                  </div>
                </div>
              </div>
              <!-- 考生类别 -->
              <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;">
                <span class="form-label" style="width:80px;flex-shrink:0;">考生类别</span>
                <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="checkbox" checked style="accent-color:var(--blue);"> 新生</label>
                  <div style="position:relative;">
                    <div class="multiselect-trigger" onclick="toggleMultiselect('fenji-g3-xinsheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:180px;background:var(--white);"><span id="fenji-g3-xinsheng-label" style="flex:1;color:var(--text-primary);">本科生、研究生</span><span style="color:var(--text-hint);font-size:11px;">▼</span></div>
                    <div id="fenji-g3-xinsheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:160px;">
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" checked onchange="updateMultiselectLabel('fenji-g3-xinsheng-dd','fenji-g3-xinsheng-label')"> 本科生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g3-xinsheng-dd','fenji-g3-xinsheng-label')" checked> 研究生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g3-xinsheng-dd','fenji-g3-xinsheng-label')"> 博士生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g3-xinsheng-dd','fenji-g3-xinsheng-label')"> 教职工</label>
                    </div>
                  </div>
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="checkbox" style="accent-color:var(--blue);"> 老生</label>
                  <div style="position:relative;">
                    <div class="multiselect-trigger" onclick="toggleMultiselect('fenji-g3-laosheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:180px;background:var(--white);"><span id="fenji-g3-laosheng-label" style="flex:1;color:var(--text-hint);">请选择类型</span><span style="color:var(--text-hint);font-size:11px;">▼</span></div>
                    <div id="fenji-g3-laosheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:160px;">
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g3-laosheng-dd','fenji-g3-laosheng-label')"> 本科生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g3-laosheng-dd','fenji-g3-laosheng-label')"> 研究生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g3-laosheng-dd','fenji-g3-laosheng-label')"> 博士生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g3-laosheng-dd','fenji-g3-laosheng-label')"> 教职工</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="fenji-g3-scope-panel-person" style="display:none;">
            <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:12px;">
              <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
                <span class="form-label" style="width:80px;flex-shrink:0;">学院单位</span>
                <div style="position:relative;display:inline-block;">
                  <div class="multiselect-trigger" onclick="toggleMultiselect('fenji-g3-person-college-dd')" style="display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--gray-border);border-radius:6px;cursor:pointer;background:var(--white);min-width:180px;">
                    <span id="fenji-g3-person-college-label" style="font-size:13px;color:var(--text-hint);flex:1;">请选择学院</span><span style="font-size:11px;color:var(--text-hint);">▾</span>
                  </div>
                  <div id="fenji-g3-person-college-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:6px;box-shadow:var(--shadow-md);padding:8px;min-width:200px;max-height:220px;overflow-y:auto;">
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="toggleSelectAll(this,'fenji-g3-person-college-dd')"> 全选</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g3-person-college-dd','fenji-g3-person-college-label')"> 生命科学学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g3-person-college-dd','fenji-g3-person-college-label')"> 化学化工学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g3-person-college-dd','fenji-g3-person-college-label')"> 物理学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g3-person-college-dd','fenji-g3-person-college-label')"> 材料科学与工程学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g3-person-college-dd','fenji-g3-person-college-label')"> 医学院</label>
                  </div>
                </div>
                              </div>
              <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
                <span class="form-label" style="width:80px;flex-shrink:0;">姓名搜索</span>
                <input class="form-input" style="width:180px;" placeholder="请输入姓名">
                <button class="btn btn-outline btn-sm">搜索</button>
              </div>
            </div>
            <div style="display:flex;gap:12px;">
              <div style="flex:1;border:1px solid var(--gray-border);border-radius:6px;overflow:hidden;">
                <div style="padding:8px 12px;background:var(--gray-light);border-bottom:1px solid var(--gray-border);font-size:13px;font-weight:600;">待选人员</div>
                <div style="padding:8px;min-height:120px;font-size:13px;color:var(--text-hint);text-align:center;padding-top:40px;">搜索后显示</div>
              </div>
              <div style="display:flex;flex-direction:column;justify-content:center;gap:8px;">
                <button class="btn btn-outline btn-sm">»</button>
                <button class="btn btn-outline btn-sm">«</button>
              </div>
              <div style="flex:1;border:1px solid var(--gray-border);border-radius:6px;overflow:hidden;">
                <div style="padding:8px 12px;background:var(--gray-light);border-bottom:1px solid var(--gray-border);font-size:13px;font-weight:600;">已选人员</div>
                <div style="padding:8px;min-height:120px;"></div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 试卷配置 section -->
        <div id="fenji-g3-sec-paper" class="exam-section" style="display:none;">
          <div class="card-title">试卷配置</div>
          <div style="border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;">
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:10px 16px;background:var(--blue-xlight);border-bottom:1px solid var(--gray-border);font-size:13px;font-weight:600;color:var(--text-secondary);">
              <span>学院单位</span><span>试卷</span><span></span>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;background:var(--blue-light);border-bottom:1px solid var(--gray-border);">
              <span style="font-size:13px;font-weight:600;color:var(--blue);">全校（默认）</span>
              <span style="font-size:12px;color:var(--text-hint);">实验室安全综合试卷（2026）</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">更换试卷</button>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
              <span style="font-size:13px;color:var(--text-primary);">生命科学学院</span>
              <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
              <span style="font-size:13px;color:var(--text-primary);">化学化工学院</span>
              <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;">
              <span style="font-size:13px;color:var(--text-primary);">物理学院</span>
              <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 考前配置 section -->
        <div id="fenji-g3-sec-preexam" class="exam-section" style="display:none;">
          <div class="card-title">考前配置</div>
          <div style="display:flex;flex-direction:column;gap:20px;">
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">学时要求</span>
              <div style="background:#f4f6fa;border:1px solid #dde3ed;border-radius:6px;padding:12px 16px;font-size:13px;">
                <div style="color:#8896a7;margin-bottom:10px;display:flex;align-items:center;gap:6px;"><span>ℹ️</span>根据考生绑定实验室的分级匹配年度学时要求，当前等级：<span style="font-weight:600;color:#1857d4;">Ⅲ级（中风险）</span></div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:360px;">
                  <div style="background:#fff;border:1px solid #dde3ed;border-radius:6px;padding:12px 16px;text-align:center;">
                    <div style="font-size:11px;color:#8896a7;margin-bottom:4px;">准入学时</div>
                    <div style="font-size:24px;font-weight:700;color:#1857d4;">8</div>
                    <div style="font-size:12px;color:#8896a7;">学时</div>
                  </div>
                  <div style="background:#fff;border:1px solid #dde3ed;border-radius:6px;padding:12px 16px;text-align:center;">
                    <div style="font-size:11px;color:#8896a7;margin-bottom:4px;">第二年起年度学时</div>
                    <div style="font-size:24px;font-weight:700;color:#1857d4;">2</div>
                    <div style="font-size:12px;color:#8896a7;">学时</div>
                  </div>
                </div>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考前学习</span>
              <div style="display:flex;flex-direction:column;gap:8px;">
                <label class="toggle"><input type="checkbox" onchange="this.parentElement.nextElementSibling.style.display=this.checked?'flex':'none'"><span class="toggle-slider"></span></label>
                <div style="display:none;align-items:center;gap:8px;"><button class="btn btn-outline btn-sm">选择课程</button><span class="form-hint">只可选择一门课程</span></div>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">模拟考试</span>
              <div style="display:flex;flex-direction:column;gap:10px;">
                <label class="toggle"><input type="checkbox" onchange="this.parentElement.nextElementSibling.style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
                <div style="display:none;">
                  <div style="display:flex;gap:16px;margin-bottom:10px;">
                    <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g3-mock-mode" value="reuse" checked> 复用试卷</label>
                    <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g3-mock-mode" value="choose"> 选择试卷</label>
                  </div>
                  <div style="display:flex;align-items:center;gap:8px;"><span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;">复用正式考试试卷<span style="cursor:pointer;margin-left:2px;">×</span></span></div>
                </div>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考试承诺书</span>
              <div style="display:flex;flex-direction:column;gap:8px;flex:1;">
                <label class="toggle"><input type="checkbox" onchange="this.parentElement.nextElementSibling.style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
                <div style="display:none;">
                  <div class="rich-editor"><div class="rich-toolbar"><button class="rich-tool-btn">B</button><button class="rich-tool-btn">I</button><button class="rich-tool-btn">U</button><button class="rich-tool-btn">≡</button><button class="rich-tool-btn">链接</button><button class="rich-tool-btn">图片</button></div><div class="rich-body" contenteditable="true"><p><strong>实验室安全承诺书</strong></p><p>本人郑重承诺：在参加实验室安全考试及日常实验操作过程中，严格遵守实验室各项安全规章制度，认真执行安全操作规程，不擅自使用不熟悉的仪器设备，不私自改装或违规操作实验装置。发现安全隐患及时上报，如实反映实验情况，对违规行为承担相应法律及校规责任。</p></div></div>
                  <label style="display:flex;align-items:center;gap:6px;margin-top:10px;cursor:pointer;font-size:13px;color:var(--text-secondary);"><input type="checkbox" style="accent-color:var(--blue);"> 支持考生打印承诺书</label>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 获得证书 section -->
        <div id="fenji-g3-sec-cert" class="exam-section" style="display:none;">
          <div class="card-title">获得证书</div>
          <div style="display:flex;flex-direction:column;gap:16px;">
            <div style="display:flex;align-items:center;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">颁发证书</span>
              <label class="toggle"><input type="checkbox" onchange="document.getElementById('fenji-g3-cert-detail').style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
            </div>
            <div id="fenji-g3-cert-detail" style="display:none;">
              <div style="display:flex;align-items:flex-start;gap:12px;">
                <span class="form-label" style="width:80px;flex-shrink:0;padding-top:6px;">证书模板</span>
                <div style="display:flex;flex-direction:column;gap:12px;">
                  <select class="form-input form-select" style="width:240px;" onchange="previewCert(this,'fenji-g3-cert-preview','fenji-g3-cert-preview-name','fenji-g3-cert-img-wrap')">
                    <option value="">请选择证书模板</option>
                    <option value="standard">实验室安全教育证书（标准版）</option>
                    <option value="elite">实验室安全教育证书（精英版）</option>
                  </select>
                  <div id="fenji-g3-cert-preview" style="display:none;border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;width:360px;background:var(--gray-light);">
                    <div style="padding:6px 10px;background:var(--blue-light);border-bottom:1px solid var(--gray-border);font-size:12px;color:var(--blue);display:flex;justify-content:space-between;align-items:center;"><span id="fenji-g3-cert-preview-name"></span><span style="cursor:pointer;color:var(--text-hint);" onclick="this.closest('[id$=-cert-preview]').previousElementSibling.value='';this.closest('[id$=-cert-preview]').style.display='none'">×</span></div>
                    <div style="padding:24px;display:flex;align-items:center;justify-content:center;min-height:200px;"><div id="fenji-g3-cert-img-wrap"></div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
      </div>
    </div><!-- /fenji-grade-g3 -->

    <div id="fenji-grade-g4" class="fenji-grade-panel" style="display:none;gap:0;background:var(--white);border:1px solid var(--gray-border);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);overflow:hidden;flex-direction:row;">
      <div style="width:180px;flex-shrink:0;border-right:1px solid var(--gray-border);background:var(--gray-light);padding:14px 0;">
        <div class="nav-item active" id="fenji-g4-nav-basic" onclick="switchExamSection('fenji-g4','basic')">基本配置</div>
        <div class="nav-item" id="fenji-g4-nav-scope" onclick="switchExamSection('fenji-g4','scope')">考试范围</div>
        <div class="nav-item" id="fenji-g4-nav-paper" onclick="switchExamSection('fenji-g4','paper')">试卷配置</div>
        <div class="nav-item" id="fenji-g4-nav-preexam" onclick="switchExamSection('fenji-g4','preexam')">考前配置</div>
        <div class="nav-item" id="fenji-g4-nav-cert" onclick="switchExamSection('fenji-g4','cert')">获得证书</div>
      </div>
      <div style="flex:1;padding:28px;overflow-y:auto;max-height:calc(100vh - var(--header-h) - 240px);">
        <!-- 基本配置 section -->
        <div id="fenji-g4-sec-basic" class="exam-section">
          <div class="card-title">基本配置</div>
          <div style="display:flex;flex-direction:column;gap:16px;">
            <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试类型</span><input class="form-input" style="width:200px;" value="Ⅳ级（低风险）" disabled></div>
            <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试名称</span><input class="form-input" style="width:300px;" placeholder="请输入考试名称"></div>
            <div style="display:flex;align-items:center;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">可考次数</span>
              <div style="display:flex;align-items:center;gap:8px;">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g4-ans',-1)">－</button>
                <input id="fenji-g4-ans" type="number" class="form-input" style="width:60px;text-align:center;" value="2" min="1">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g4-ans',1)">＋</button>
              </div>
              <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;margin-left:8px;"><input type="radio" name="fenji-g4-ans-mode" value="limit" checked> 限制次数</label>
              <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g4-ans-mode" value="unlimited"> 无限制</label>
            </div>
            <div style="display:flex;align-items:center;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">考试时间</span>
              <input type="datetime-local" class="form-input" style="width:190px;" step="1"><span style="color:var(--text-hint);font-size:13px;margin:0 4px;">至</span><input type="datetime-local" class="form-input" style="width:190px;" step="1">
            </div>
            <div style="display:flex;align-items:center;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">考试时长</span>
              <div style="display:flex;align-items:center;gap:8px;">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g4-dur',-5)">－</button>
                <input id="fenji-g4-dur" type="number" class="form-input" style="width:70px;text-align:center;" value="60" min="5" step="5">
                <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g4-dur',5)">＋</button>
                <span style="font-size:13px;color:var(--text-secondary);">分钟</span>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">启用</span>
              <div style="display:flex;flex-direction:column;gap:6px;">
                <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
                <span class="form-hint">开启后，每学年按配置时间自动创建执行该考试，无需重复配置</span>
              </div>
            </div>
            <!-- 防作弊配置 -->
            <div style="border-top:1px solid var(--gray-border);padding-top:16px;margin-top:4px;">
              <div style="font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:12px;">防作弊配置 <span style="font-weight:400;color:var(--text-hint);">（防作弊配置仅适用教育考试一体机）</span></div>
              <div style="display:flex;flex-direction:column;gap:12px;">
                <div style="display:flex;align-items:center;gap:12px;">
                  <span class="form-label" style="width:100px;flex-shrink:0;">考前人脸校验</span>
                  <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
                  <span style="font-size:13px;color:var(--text-secondary);">开启后，考试前需要进行人脸识别校验</span>
                </div>
                <div style="display:flex;align-items:center;gap:12px;">
                  <span class="form-label" style="width:100px;flex-shrink:0;">考后人脸校验</span>
                  <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
                  <span style="font-size:13px;color:var(--text-secondary);">开启后，考试后需要进行人脸识别校验</span>
                </div>
                <div style="display:flex;align-items:center;gap:12px;">
                  <span class="form-label" style="width:100px;flex-shrink:0;">摄像头抓拍</span>
                  <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
                  <span style="font-size:13px;color:var(--text-secondary);">开启后，考试过程中摄像头随机抓拍</span>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 考试范围 section -->
        <div id="fenji-g4-sec-scope" class="exam-section" style="display:none;">
          <div class="card-title">考试范围</div>
          <div style="display:flex;align-items:center;gap:20px;margin-bottom:20px;">
            <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g4-scope-type" value="specify" checked onchange="switchScopeTab('fenji-g4','specify')"> 指定范围</label>
            <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g4-scope-type" value="person" onchange="switchScopeTab('fenji-g4','person')"> 指定人员</label>
          </div>
          <div id="fenji-g4-scope-panel-specify">
            <div style="display:flex;flex-direction:column;gap:18px;">
              <div style="display:flex;align-items:flex-start;gap:16px;">
                <span class="form-label" style="width:80px;flex-shrink:0;padding-top:6px;">学院单位</span>
                <div style="flex:1;max-width:600px;">
                  <div style="position:relative;margin-bottom:8px;"><input class="form-input" style="padding-left:30px;" placeholder="搜索学院单位..."><span style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-hint);font-size:13px;">🔍</span></div>
                  <div style="display:flex;flex-wrap:wrap;gap:6px;padding:10px;border:1px solid var(--gray-border);border-radius:var(--radius);min-height:44px;background:var(--white);">
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">生命科学学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">化学化工学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">物理学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">材料科学与工程学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">医学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                    <span class="tag" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px dashed var(--gray-border);border-radius:20px;cursor:pointer;color:var(--text-hint);">＋ 添加学院</span>
                  </div>
                  <div style="display:flex;align-items:center;gap:12px;margin-top:8px;">
                    <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;color:var(--text-secondary);"><input type="checkbox" checked style="accent-color:var(--blue);"> 全选</label>
                    <span style="font-size:12px;color:var(--text-hint);">已全选所有学院单位</span>
                  </div>
                </div>
              </div>
              <!-- 考生类别 -->
              <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;">
                <span class="form-label" style="width:80px;flex-shrink:0;">考生类别</span>
                <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="checkbox" checked style="accent-color:var(--blue);"> 新生</label>
                  <div style="position:relative;">
                    <div class="multiselect-trigger" onclick="toggleMultiselect('fenji-g4-xinsheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:180px;background:var(--white);"><span id="fenji-g4-xinsheng-label" style="flex:1;color:var(--text-primary);">本科生、研究生</span><span style="color:var(--text-hint);font-size:11px;">▼</span></div>
                    <div id="fenji-g4-xinsheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:160px;">
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" checked onchange="updateMultiselectLabel('fenji-g4-xinsheng-dd','fenji-g4-xinsheng-label')"> 本科生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g4-xinsheng-dd','fenji-g4-xinsheng-label')" checked> 研究生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g4-xinsheng-dd','fenji-g4-xinsheng-label')"> 博士生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g4-xinsheng-dd','fenji-g4-xinsheng-label')"> 教职工</label>
                    </div>
                  </div>
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="checkbox" style="accent-color:var(--blue);"> 老生</label>
                  <div style="position:relative;">
                    <div class="multiselect-trigger" onclick="toggleMultiselect('fenji-g4-laosheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:180px;background:var(--white);"><span id="fenji-g4-laosheng-label" style="flex:1;color:var(--text-hint);">请选择类型</span><span style="color:var(--text-hint);font-size:11px;">▼</span></div>
                    <div id="fenji-g4-laosheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:160px;">
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g4-laosheng-dd','fenji-g4-laosheng-label')"> 本科生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g4-laosheng-dd','fenji-g4-laosheng-label')"> 研究生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g4-laosheng-dd','fenji-g4-laosheng-label')"> 博士生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g4-laosheng-dd','fenji-g4-laosheng-label')"> 教职工</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="fenji-g4-scope-panel-person" style="display:none;">
            <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:12px;">
              <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
                <span class="form-label" style="width:80px;flex-shrink:0;">学院单位</span>
                <div style="position:relative;display:inline-block;">
                  <div class="multiselect-trigger" onclick="toggleMultiselect('fenji-g4-person-college-dd')" style="display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--gray-border);border-radius:6px;cursor:pointer;background:var(--white);min-width:180px;">
                    <span id="fenji-g4-person-college-label" style="font-size:13px;color:var(--text-hint);flex:1;">请选择学院</span><span style="font-size:11px;color:var(--text-hint);">▾</span>
                  </div>
                  <div id="fenji-g4-person-college-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:6px;box-shadow:var(--shadow-md);padding:8px;min-width:200px;max-height:220px;overflow-y:auto;">
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="toggleSelectAll(this,'fenji-g4-person-college-dd')"> 全选</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g4-person-college-dd','fenji-g4-person-college-label')"> 生命科学学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g4-person-college-dd','fenji-g4-person-college-label')"> 化学化工学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g4-person-college-dd','fenji-g4-person-college-label')"> 物理学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g4-person-college-dd','fenji-g4-person-college-label')"> 材料科学与工程学院</label>
                    <label style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('fenji-g4-person-college-dd','fenji-g4-person-college-label')"> 医学院</label>
                  </div>
                </div>
                              </div>
              <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
                <span class="form-label" style="width:80px;flex-shrink:0;">姓名搜索</span>
                <input class="form-input" style="width:180px;" placeholder="请输入姓名">
                <button class="btn btn-outline btn-sm">搜索</button>
              </div>
            </div>
            <div style="display:flex;gap:12px;">
              <div style="flex:1;border:1px solid var(--gray-border);border-radius:6px;overflow:hidden;">
                <div style="padding:8px 12px;background:var(--gray-light);border-bottom:1px solid var(--gray-border);font-size:13px;font-weight:600;">待选人员</div>
                <div style="padding:8px;min-height:120px;font-size:13px;color:var(--text-hint);text-align:center;padding-top:40px;">搜索后显示</div>
              </div>
              <div style="display:flex;flex-direction:column;justify-content:center;gap:8px;">
                <button class="btn btn-outline btn-sm">»</button>
                <button class="btn btn-outline btn-sm">«</button>
              </div>
              <div style="flex:1;border:1px solid var(--gray-border);border-radius:6px;overflow:hidden;">
                <div style="padding:8px 12px;background:var(--gray-light);border-bottom:1px solid var(--gray-border);font-size:13px;font-weight:600;">已选人员</div>
                <div style="padding:8px;min-height:120px;"></div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 试卷配置 section -->
        <div id="fenji-g4-sec-paper" class="exam-section" style="display:none;">
          <div class="card-title">试卷配置</div>
          <div style="border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;">
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:10px 16px;background:var(--blue-xlight);border-bottom:1px solid var(--gray-border);font-size:13px;font-weight:600;color:var(--text-secondary);">
              <span>学院单位</span><span>试卷</span><span></span>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;background:var(--blue-light);border-bottom:1px solid var(--gray-border);">
              <span style="font-size:13px;font-weight:600;color:var(--blue);">全校（默认）</span>
              <span style="font-size:12px;color:var(--text-hint);">实验室安全综合试卷（2026）</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">更换试卷</button>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
              <span style="font-size:13px;color:var(--text-primary);">生命科学学院</span>
              <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
              <span style="font-size:13px;color:var(--text-primary);">化学化工学院</span>
              <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
            </div>
            <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;">
              <span style="font-size:13px;color:var(--text-primary);">物理学院</span>
              <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
              <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 考前配置 section -->
        <div id="fenji-g4-sec-preexam" class="exam-section" style="display:none;">
          <div class="card-title">考前配置</div>
          <div style="display:flex;flex-direction:column;gap:20px;">
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">学时要求</span>
              <div style="background:#f4f6fa;border:1px solid #dde3ed;border-radius:6px;padding:12px 16px;font-size:13px;">
                <div style="color:#8896a7;margin-bottom:10px;display:flex;align-items:center;gap:6px;"><span>ℹ️</span>根据考生绑定实验室的分级匹配年度学时要求，当前等级：<span style="font-weight:600;color:#10a37f;">Ⅳ级（低风险）</span></div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:360px;">
                  <div style="background:#fff;border:1px solid #dde3ed;border-radius:6px;padding:12px 16px;text-align:center;">
                    <div style="font-size:11px;color:#8896a7;margin-bottom:4px;">准入学时</div>
                    <div style="font-size:24px;font-weight:700;color:#1857d4;">4</div>
                    <div style="font-size:12px;color:#8896a7;">学时</div>
                  </div>
                  <div style="background:#fff;border:1px solid #dde3ed;border-radius:6px;padding:12px 16px;text-align:center;">
                    <div style="font-size:11px;color:#8896a7;margin-bottom:4px;">第二年起年度学时</div>
                    <div style="font-size:24px;font-weight:700;color:#8896a7;">0</div>
                    <div style="font-size:12px;color:#8896a7;">学时</div>
                  </div>
                </div>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考前学习</span>
            </div>
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考前学习</span>
              <div style="display:flex;flex-direction:column;gap:8px;">
                <label class="toggle"><input type="checkbox" onchange="this.parentElement.nextElementSibling.style.display=this.checked?'flex':'none'"><span class="toggle-slider"></span></label>
                <div style="display:none;align-items:center;gap:8px;"><button class="btn btn-outline btn-sm">选择课程</button><span class="form-hint">只可选择一门课程</span></div>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">模拟考试</span>
              <div style="display:flex;flex-direction:column;gap:10px;">
                <label class="toggle"><input type="checkbox" onchange="this.parentElement.nextElementSibling.style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
                <div style="display:none;">
                  <div style="display:flex;gap:16px;margin-bottom:10px;">
                    <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g4-mock-mode" value="reuse" checked> 复用试卷</label>
                    <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g4-mock-mode" value="choose"> 选择试卷</label>
                  </div>
                  <div style="display:flex;align-items:center;gap:8px;"><span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;">复用正式考试试卷<span style="cursor:pointer;margin-left:2px;">×</span></span></div>
                </div>
              </div>
            </div>
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考试承诺书</span>
              <div style="display:flex;flex-direction:column;gap:8px;flex:1;">
                <label class="toggle"><input type="checkbox" onchange="this.parentElement.nextElementSibling.style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
                <div style="display:none;">
                  <div class="rich-editor"><div class="rich-toolbar"><button class="rich-tool-btn">B</button><button class="rich-tool-btn">I</button><button class="rich-tool-btn">U</button><button class="rich-tool-btn">≡</button><button class="rich-tool-btn">链接</button><button class="rich-tool-btn">图片</button></div><div class="rich-body" contenteditable="true"><p><strong>实验室安全承诺书</strong></p><p>本人郑重承诺：在参加实验室安全考试及日常实验操作过程中，严格遵守实验室各项安全规章制度，认真执行安全操作规程，不擅自使用不熟悉的仪器设备，不私自改装或违规操作实验装置。发现安全隐患及时上报，如实反映实验情况，对违规行为承担相应法律及校规责任。</p></div></div>
                  <label style="display:flex;align-items:center;gap:6px;margin-top:10px;cursor:pointer;font-size:13px;color:var(--text-secondary);"><input type="checkbox" style="accent-color:var(--blue);"> 支持考生打印承诺书</label>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
        <!-- 获得证书 section -->
        <div id="fenji-g4-sec-cert" class="exam-section" style="display:none;">
          <div class="card-title">获得证书</div>
          <div style="display:flex;flex-direction:column;gap:16px;">
            <div style="display:flex;align-items:center;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;">颁发证书</span>
              <label class="toggle"><input type="checkbox" onchange="document.getElementById('fenji-g4-cert-detail').style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
            </div>
            <div id="fenji-g4-cert-detail" style="display:none;">
              <div style="display:flex;align-items:flex-start;gap:12px;">
                <span class="form-label" style="width:80px;flex-shrink:0;padding-top:6px;">证书模板</span>
                <div style="display:flex;flex-direction:column;gap:12px;">
                  <select class="form-input form-select" style="width:240px;" onchange="previewCert(this,'fenji-g4-cert-preview','fenji-g4-cert-preview-name','fenji-g4-cert-img-wrap')">
                    <option value="">请选择证书模板</option>
                    <option value="standard">实验室安全教育证书（标准版）</option>
                    <option value="elite">实验室安全教育证书（精英版）</option>
                  </select>
                  <div id="fenji-g4-cert-preview" style="display:none;border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;width:360px;background:var(--gray-light);">
                    <div style="padding:6px 10px;background:var(--blue-light);border-bottom:1px solid var(--gray-border);font-size:12px;color:var(--blue);display:flex;justify-content:space-between;align-items:center;"><span id="fenji-g4-cert-preview-name"></span><span style="cursor:pointer;color:var(--text-hint);" onclick="this.closest('[id$=-cert-preview]').previousElementSibling.value='';this.closest('[id$=-cert-preview]').style.display='none'">×</span></div>
                    <div style="padding:24px;display:flex;align-items:center;justify-content:center;min-height:200px;"><div id="fenji-g4-cert-img-wrap"></div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
        </div>
      </div>
    </div><!-- /fenji-grade-g4 -->
  </div><!-- /exam-tab-fenji -->

  <!-- ══════════════════════════════════════════════════════════
       TAB 3: 应知应会
  ══════════════════════════════════════════════════════════ -->
  <div id="exam-tab-yingzhi" class="exam-tab-panel" style="display:none;gap:0;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;flex-direction:row;">
    <!-- Left sidebar nav -->
    <div style="width:180px;flex-shrink:0;border-right:1px solid var(--gray-border);background:var(--gray-light);padding:14px 0;">
      <div class="nav-item active" id="yingzhi-nav-basic" onclick="switchExamSection('yingzhi','basic')">基本配置</div>
      <div class="nav-item" id="yingzhi-nav-scope" onclick="switchExamSection('yingzhi','scope')">考试范围</div>
      <div class="nav-item" id="yingzhi-nav-paper" onclick="switchExamSection('yingzhi','paper')">试卷配置</div>
      <div class="nav-item" id="yingzhi-nav-preexam" onclick="switchExamSection('yingzhi','preexam')">考前配置</div>
      <div class="nav-item" id="yingzhi-nav-cert" onclick="switchExamSection('yingzhi','cert')">获得证书</div>
    </div>
    <!-- Right content area -->
    <div style="flex:1;padding:28px;overflow-y:auto;max-height:calc(100vh - var(--header-h) - 196px);">

      <!-- 基本设置 section -->
      <div id="yingzhi-sec-basic" class="exam-section">
        <div class="card-title">基本配置</div>
        <div style="display:flex;flex-direction:column;gap:16px;">

          <div style="display:flex;align-items:center;gap:16px;">
            <span class="form-label" style="width:80px;flex-shrink:0;">考试类型</span>
            <input class="form-input" style="width:200px;" value="应知应会" disabled>
            <span class="form-hint">系统内置，不可更改</span>
          </div>

          <div style="display:flex;align-items:center;gap:16px;">
            <span class="form-label" style="width:80px;flex-shrink:0;">考试名称</span>
            <input class="form-input" style="width:300px;" placeholder="请输入考试名称">
          </div>

          <div style="display:flex;align-items:center;gap:16px;">
            <span class="form-label" style="width:80px;flex-shrink:0;">可考次数</span>
            <div style="display:flex;align-items:center;gap:8px;">
              <button class="btn btn-outline-gray btn-sm" onclick="stepNum('yingzhi-answer-cnt',-1)">－</button>
              <input id="yingzhi-answer-cnt" type="number" class="form-input" style="width:60px;text-align:center;" value="2" min="1">
              <button class="btn btn-outline-gray btn-sm" onclick="stepNum('yingzhi-answer-cnt',1)">＋</button>
            </div>
            <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;margin-left:8px;">
              <input type="radio" name="yingzhi-answer-mode" value="limit" checked> 限制次数
            </label>
            <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;">
              <input type="radio" name="yingzhi-answer-mode" value="unlimited"> 无限制
            </label>
          </div>

          <div style="display:flex;align-items:center;gap:16px;">
            <span class="form-label" style="width:80px;flex-shrink:0;">考试时间</span>
            <input type="datetime-local" class="form-input" style="width:190px;" step="1">
            <span style="color:var(--text-hint);font-size:13px;">至</span>
            <input type="datetime-local" class="form-input" style="width:190px;" step="1">
          </div>

          <div style="display:flex;align-items:center;gap:16px;">
            <span class="form-label" style="width:80px;flex-shrink:0;">考试时长</span>
            <div style="display:flex;align-items:center;gap:8px;">
              <button class="btn btn-outline-gray btn-sm" onclick="stepNum('yingzhi-duration',-5)">－</button>
              <input id="yingzhi-duration" type="number" class="form-input" style="width:70px;text-align:center;" value="60" min="5" step="5">
              <button class="btn btn-outline-gray btn-sm" onclick="stepNum('yingzhi-duration',5)">＋</button>
              <span style="font-size:13px;color:var(--text-secondary);">分钟</span>
            </div>
            <span class="form-hint">限制答卷最大时长</span>
          </div>

          <div style="display:flex;align-items:center;gap:16px;">
            <span class="form-label" style="width:80px;flex-shrink:0;">启用</span>
            <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
            <span class="form-hint">开启后，每学年按配置时间自动创建执行该考试，无需重复配置</span>
          </div>

        </div><!-- /flex col -->

        <!-- 防作弊配置 subsection -->
        <div style="margin-top:24px;padding-top:20px;border-top:1px solid var(--gray-border);">
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;">
            <span class="card-title" style="margin:0;">防作弊配置</span>
            <span class="form-hint" style="font-size:12px;">（防作弊配置仅适用教育考试一体机）</span>
          </div>
          <div style="display:flex;flex-direction:column;gap:14px;">

            <div style="display:flex;align-items:center;gap:12px;">
              <span class="form-label" style="width:100px;flex-shrink:0;">考前人脸校验</span>
              <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
              <span style="font-size:13px;color:var(--text-secondary);">开启后，考试前需要进行人脸识别校验</span>
            </div>

            <div style="display:flex;align-items:center;gap:12px;">
              <span class="form-label" style="width:100px;flex-shrink:0;">考后人脸校验</span>
              <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
              <span style="font-size:13px;color:var(--text-secondary);">开启后，考试结束后需要进行人脸识别校验</span>
            </div>

            <div style="display:flex;align-items:center;gap:12px;">
              <span class="form-label" style="width:100px;flex-shrink:0;">摄像头抓拍</span>
              <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
              <span style="font-size:13px;color:var(--text-secondary);">开启后，考试过程中摄像头随机抓拍</span>
            </div>

          </div>
        </div>

        <div style="margin-top:24px;display:flex;gap:12px;">
          <button class="btn btn-primary">保存设置</button>
          <button class="btn btn-outline-gray">重置</button>
        </div>
      </div><!-- /kaixue-sec-basic -->

      <!-- 考试范围 section -->
      <div id="yingzhi-sec-scope" class="exam-section" style="display:none;">
        <div class="card-title">考试范围</div>

        <!-- 范围类型单选 -->
        <div style="display:flex;align-items:center;gap:20px;margin-bottom:20px;">
          <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;">
            <input type="radio" name="yingzhi-scope-type" value="specify" checked onchange="switchScopeTab('yingzhi','specify')"> 指定范围
          </label>
          <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;">
            <input type="radio" name="yingzhi-scope-type" value="person" onchange="switchScopeTab('yingzhi','person')"> 指定人员
          </label>
        </div>

        <!-- 指定范围 panel -->
        <div id="yingzhi-scope-panel-specify">
          <div style="display:flex;flex-direction:column;gap:18px;">

            <!-- 学院单位 multiselect -->
            <div style="display:flex;align-items:flex-start;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:6px;">学院单位</span>
              <div style="flex:1;max-width:600px;">
                <div style="position:relative;margin-bottom:8px;">
                  <input class="form-input" style="padding-left:30px;" placeholder="搜索学院单位...">
                  <span style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-hint);font-size:13px;">🔍</span>
                </div>
                <div style="display:flex;flex-wrap:wrap;gap:6px;padding:10px;border:1px solid var(--gray-border);border-radius:var(--radius);min-height:44px;background:var(--white);">
                  <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">生命科学学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                  <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">化学化工学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                  <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">物理学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                  <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">材料科学与工程学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                  <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">医学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                  <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;">环境科学学院<span style="cursor:pointer;margin-left:2px;">×</span></span>
                  <span class="tag" style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px dashed var(--gray-border);border-radius:20px;cursor:pointer;color:var(--text-hint);">＋ 添加学院</span>
                </div>
                <div style="display:flex;align-items:center;gap:12px;margin-top:8px;">
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;color:var(--text-secondary);">
                    <input type="checkbox" checked style="accent-color:var(--blue);"> 全选
                  </label>
                  <span style="font-size:12px;color:var(--text-hint);">已全选所有学院单位</span>
                </div>
              </div>
            </div>


            <!-- 考生类别 -->
            <div style="display:flex;align-items:flex-start;gap:16px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:6px;">考生类别</span>
              <div style="display:flex;flex-direction:column;gap:12px;">
                <!-- 新生 -->
                <div style="display:flex;align-items:center;gap:12px;">
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;font-weight:500;width:44px;flex-shrink:0;">
                    <input type="checkbox" id="yingzhi-cat-xinsheng" checked style="accent-color:var(--blue);"> 新生
                  </label>
                  <div id="yingzhi-cat-xinsheng-types" style="position:relative;">
                    <div class="multiselect-trigger" onclick="toggleMultiselect('yingzhi-xinsheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:200px;background:var(--white);">
                      <span id="yingzhi-xinsheng-label" style="flex:1;color:var(--text-primary);">本科生</span>
                      <span style="color:var(--text-hint);font-size:11px;">▼</span>
                    </div>
                    <div id="yingzhi-xinsheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:160px;">
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" checked onchange="updateMultiselectLabel('yingzhi-xinsheng-dd','yingzhi-xinsheng-label')"> 本科生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-xinsheng-dd','yingzhi-xinsheng-label')"> 研究生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-xinsheng-dd','yingzhi-xinsheng-label')"> 博士生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-xinsheng-dd','yingzhi-xinsheng-label')"> 教职工</label>
                    </div>
                  </div>
                </div>
                <!-- 老生 -->
                <div style="display:flex;align-items:center;gap:12px;">
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;font-weight:500;width:44px;flex-shrink:0;">
                    <input type="checkbox" id="yingzhi-cat-laosheng" style="accent-color:var(--blue);"> 老生
                  </label>
                  <div id="yingzhi-cat-laosheng-types" style="position:relative;">
                    <div class="multiselect-trigger" onclick="toggleMultiselect('yingzhi-laosheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:200px;background:var(--white);">
                      <span id="yingzhi-laosheng-label" style="flex:1;color:var(--text-hint);">请选择类型</span>
                      <span style="color:var(--text-hint);font-size:11px;">▼</span>
                    </div>
                    <div id="yingzhi-laosheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:160px;">
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-laosheng-dd','yingzhi-laosheng-label')"> 本科生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-laosheng-dd','yingzhi-laosheng-label')"> 研究生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-laosheng-dd','yingzhi-laosheng-label')"> 博士生</label>
                      <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-laosheng-dd','yingzhi-laosheng-label')"> 教职工</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <div style="margin-top:24px;display:flex;gap:12px;">
            <button class="btn btn-primary">保存设置</button>
            <button class="btn btn-outline-gray">重置</button>
          </div>
        </div><!-- /specify panel -->

        <!-- 指定人员 panel -->
        <div id="yingzhi-scope-panel-person" style="display:none;">
          <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:16px;">

            <!-- 筛选条件 row 1: 学院单位 chip multiselect + 学年 -->
            <div style="display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;">
              <div style="position:relative;">
                <div class="multiselect-trigger" onclick="toggleMultiselect('yingzhi-person-college-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:180px;background:var(--white);">
                  <span id="yingzhi-person-college-label" style="flex:1;color:var(--text-hint);">选择学院单位</span>
                  <span style="color:var(--text-hint);font-size:11px;">▼</span>
                </div>
                <div id="yingzhi-person-college-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:180px;">
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--gray-border);margin-bottom:4px;"><input type="checkbox" onchange="toggleSelectAll(this,'yingzhi-person-college-dd');updateMultiselectLabel('yingzhi-person-college-dd','yingzhi-person-college-label')"> 全选</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-person-college-dd','yingzhi-person-college-label')"> 生命科学学院</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-person-college-dd','yingzhi-person-college-label')"> 化学化工学院</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-person-college-dd','yingzhi-person-college-label')"> 物理学院</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-person-college-dd','yingzhi-person-college-label')"> 材料科学学院</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-person-college-dd','yingzhi-person-college-label')"> 医学院</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-person-college-dd','yingzhi-person-college-label')"> 环境科学学院</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-person-college-dd','yingzhi-person-college-label')"> 安全管理处</label>
                </div>
              </div>
            </div>

            <!-- 筛选条件 row 2: 新生/老生 + 类型下拉 + 姓名搜索 -->
            <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
              <!-- 新生 -->
              <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;font-weight:500;">
                <input type="checkbox" id="yingzhi-person-cat-xinsheng" checked style="accent-color:var(--blue);"> 新生
              </label>
              <div style="position:relative;">
                <div class="multiselect-trigger" onclick="toggleMultiselect('yingzhi-person-xinsheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:140px;background:var(--white);">
                  <span id="yingzhi-person-xinsheng-label" style="flex:1;color:var(--text-primary);">本科生</span>
                  <span style="color:var(--text-hint);font-size:11px;">▼</span>
                </div>
                <div id="yingzhi-person-xinsheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:140px;">
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" checked onchange="updateMultiselectLabel('yingzhi-person-xinsheng-dd','yingzhi-person-xinsheng-label')"> 本科生</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-person-xinsheng-dd','yingzhi-person-xinsheng-label')"> 研究生</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-person-xinsheng-dd','yingzhi-person-xinsheng-label')"> 博士生</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-person-xinsheng-dd','yingzhi-person-xinsheng-label')"> 教职工</label>
                </div>
              </div>
              <!-- 老生 -->
              <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;font-weight:500;margin-left:8px;">
                <input type="checkbox" id="yingzhi-person-cat-laosheng" style="accent-color:var(--blue);"> 老生
              </label>
              <div style="position:relative;">
                <div class="multiselect-trigger" onclick="toggleMultiselect('yingzhi-person-laosheng-dd')" style="display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--gray-border);border-radius:var(--radius);cursor:pointer;font-size:13px;min-width:140px;background:var(--white);">
                  <span id="yingzhi-person-laosheng-label" style="flex:1;color:var(--text-hint);">请选择类型</span>
                  <span style="color:var(--text-hint);font-size:11px;">▼</span>
                </div>
                <div id="yingzhi-person-laosheng-dd" style="display:none;position:absolute;top:100%;left:0;z-index:100;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0;min-width:140px;">
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-person-laosheng-dd','yingzhi-person-laosheng-label')"> 本科生</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-person-laosheng-dd','yingzhi-person-laosheng-label')"> 研究生</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-person-laosheng-dd','yingzhi-person-laosheng-label')"> 博士生</label>
                  <label style="display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;font-size:13px;"><input type="checkbox" onchange="updateMultiselectLabel('yingzhi-person-laosheng-dd','yingzhi-person-laosheng-label')"> 教职工</label>
                </div>
              </div>
              <input class="form-input" style="width:180px;margin-left:8px;" placeholder="姓名/学号/工号">
              <button class="btn btn-outline btn-sm">搜索</button>
            </div>
          </div>

          <!-- Transfer box -->
          <div style="display:flex;gap:12px;align-items:stretch;">
            <!-- Left: candidate list -->
            <div style="flex:1;border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;">
              <div style="background:var(--gray-light);padding:8px 12px;font-size:13px;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--gray-border);display:flex;justify-content:space-between;align-items:center;">
                <span>待选人员</span>
                <span style="font-size:12px;color:var(--text-hint);">共 248 人</span>
              </div>
              <div style="padding:6px;border-bottom:1px solid var(--gray-border);">
                <input class="form-input" style="font-size:12px;" placeholder="在结果中搜索...">
              </div>
              <div style="flex:1;overflow-y:auto;max-height:280px;">
                <table style="width:100%;border-collapse:collapse;font-size:12px;">
                  <thead><tr style="background:var(--gray-light);"><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);"><input type="checkbox"> 姓名</th><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);">学号/工号</th><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);">学院</th><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);">类别</th></tr></thead>
                  <tbody>
                    <tr style="border-top:1px solid var(--gray-border);"><td style="padding:6px 10px;"><input type="checkbox"> 张三</td><td style="padding:6px 10px;">2026001</td><td style="padding:6px 10px;">生科院</td><td style="padding:6px 10px;">新生本科</td></tr>
                    <tr style="border-top:1px solid var(--gray-border);"><td style="padding:6px 10px;"><input type="checkbox"> 李四</td><td style="padding:6px 10px;">2026002</td><td style="padding:6px 10px;">化工院</td><td style="padding:6px 10px;">新生研究生</td></tr>
                    <tr style="border-top:1px solid var(--gray-border);"><td style="padding:6px 10px;"><input type="checkbox"> 王五</td><td style="padding:6px 10px;">2026003</td><td style="padding:6px 10px;">物理院</td><td style="padding:6px 10px;">新生博士</td></tr>
                    <tr style="border-top:1px solid var(--gray-border);color:var(--text-hint);"><td colspan="4" style="padding:20px;text-align:center;">显示前 3 条，搜索或筛选查看更多</td></tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- Transfer buttons -->
            <div style="display:flex;flex-direction:column;justify-content:center;gap:8px;flex-shrink:0;">
              <button class="btn btn-outline btn-sm" style="width:44px;" title="添加选中">›</button>
              <button class="btn btn-outline btn-sm" style="width:44px;" title="添加全部">»</button>
              <button class="btn btn-outline btn-sm" style="width:44px;" title="移除选中">‹</button>
              <button class="btn btn-outline btn-sm" style="width:44px;" title="移除全部">«</button>
            </div>

            <!-- Right: selected list -->
            <div style="flex:1;border:1px solid var(--blue);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;">
              <div style="background:var(--blue-xlight);padding:8px 12px;font-size:13px;font-weight:600;color:var(--blue);border-bottom:1px solid var(--blue);display:flex;justify-content:space-between;align-items:center;">
                <span>已选人员</span>
                <span style="font-size:12px;">已选 2 人</span>
              </div>
              <div style="padding:6px;border-bottom:1px solid var(--gray-border);">
                <input class="form-input" style="font-size:12px;" placeholder="在已选中搜索...">
              </div>
              <div style="flex:1;overflow-y:auto;max-height:280px;">
                <table style="width:100%;border-collapse:collapse;font-size:12px;">
                  <thead><tr style="background:var(--gray-light);"><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);"><input type="checkbox"> 姓名</th><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);">学号/工号</th><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);">学院</th><th style="padding:6px 10px;text-align:left;font-weight:500;color:var(--text-secondary);">操作</th></tr></thead>
                  <tbody>
                    <tr style="border-top:1px solid var(--gray-border);"><td style="padding:6px 10px;"><input type="checkbox"> 陈六</td><td style="padding:6px 10px;">2026010</td><td style="padding:6px 10px;">医学院</td><td style="padding:6px 10px;"><span style="color:var(--red);cursor:pointer;">移除</span></td></tr>
                    <tr style="border-top:1px solid var(--gray-border);"><td style="padding:6px 10px;"><input type="checkbox"> 赵七</td><td style="padding:6px 10px;">2026011</td><td style="padding:6px 10px;">材料院</td><td style="padding:6px 10px;"><span style="color:var(--red);cursor:pointer;">移除</span></td></tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div><!-- /transfer box -->

          <div style="margin-top:20px;display:flex;gap:12px;">
            <button class="btn btn-primary">保存设置</button>
            <button class="btn btn-outline-gray">重置</button>
          </div>
        </div><!-- /person panel -->

      </div><!-- /kaixue-sec-scope -->

      <!-- 试卷配置 section -->
      <div id="yingzhi-sec-paper" class="exam-section" style="display:none;">
        <div class="card-title">试卷配置</div>
        <div style="font-size:13px;color:var(--text-hint);margin-bottom:16px;">根据考试范围，为各学院单位分别指定考试试卷。未单独指定的学院将使用全校默认试卷。</div>
        <div style="display:flex;flex-direction:column;gap:0;border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;">
          <!-- 表头 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;background:var(--gray-light);border-bottom:1px solid var(--gray-border);padding:10px 16px;font-size:13px;font-weight:600;color:var(--text-secondary);">
            <span>学院单位</span>
            <span>试卷</span>
            <span>操作</span>
          </div>
          <!-- 全校默认行 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);background:var(--blue-xlight);">
            <span style="font-size:13px;font-weight:600;color:var(--blue);">全校（默认）</span>
            <div style="display:flex;align-items:center;gap:8px;">
              <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;font-size:12px;">实验室安全基础知识<span style="cursor:pointer;margin-left:2px;opacity:.7;">×</span></span>
            </div>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">更换试卷</button>
          </div>
          <!-- 生命科学学院 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
            <span style="font-size:13px;color:var(--text-primary);">生命科学学院</span>
            <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
          </div>
          <!-- 化学化工学院 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
            <span style="font-size:13px;color:var(--text-primary);">化学化工学院</span>
            <div style="display:flex;align-items:center;gap:8px;">
              <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;font-size:12px;">化工安全专项考试<span style="cursor:pointer;margin-left:2px;opacity:.7;">×</span></span>
            </div>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">更换试卷</button>
          </div>
          <!-- 物理学院 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
            <span style="font-size:13px;color:var(--text-primary);">物理学院</span>
            <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
          </div>
          <!-- 材料科学学院 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
            <span style="font-size:13px;color:var(--text-primary);">材料科学学院</span>
            <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
          </div>
          <!-- 医学院 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
            <span style="font-size:13px;color:var(--text-primary);">医学院</span>
            <div style="display:flex;align-items:center;gap:8px;">
              <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;font-size:12px;">医学实验室安全规范<span style="cursor:pointer;margin-left:2px;opacity:.7;">×</span></span>
            </div>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">更换试卷</button>
          </div>
          <!-- 环境科学学院 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
            <span style="font-size:13px;color:var(--text-primary);">环境科学学院</span>
            <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
          </div>
          <!-- 安全管理处 -->
          <div style="display:grid;grid-template-columns:180px 1fr 140px;align-items:center;padding:12px 16px;">
            <span style="font-size:13px;color:var(--text-primary);">安全管理处</span>
            <span style="font-size:12px;color:var(--text-hint);">继承默认试卷</span>
            <button class="btn btn-outline btn-sm" style="height:28px;font-size:12px;" onclick="showModal('modal-select-paper')">指定试卷</button>
          </div>
        </div>
        <div style="margin-top:24px;display:flex;gap:12px;">
          <button class="btn btn-primary">保存设置</button>
          <button class="btn btn-outline-gray">重置</button>
        </div>
      </div><!-- /kaixue-sec-paper -->

      <!-- 考前配置 section -->
      <div id="yingzhi-sec-preexam" class="exam-section" style="display:none;">
        <div class="card-title">考前配置</div>
        <div style="display:flex;flex-direction:column;gap:20px;">

          <!-- 学时要求 -->
          <div style="display:flex;align-items:flex-start;gap:12px;">
            <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">学时要求</span>
            <div style="display:flex;flex-direction:column;gap:10px;flex:1;">
              <div style="display:flex;align-items:center;gap:12px;">
                <label class="toggle"><input type="checkbox" id="yingzhi-credit-toggle" checked onchange="document.getElementById('yingzhi-credit-detail').style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
                <span style="font-size:13px;color:var(--text-secondary);">开启后，需完成相应学时才能参加考试（学时为0即无学时要求）</span>
              </div>
              <div id="yingzhi-credit-detail">
                <div style="border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;max-width:680px;">
                  <!-- header -->
                  <div style="display:grid;grid-template-columns:1fr 200px;background:var(--gray-light);padding:10px 16px;font-size:13px;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--gray-border);">
                    <span>用户类别</span><span style="text-align:right;">学时要求配置</span>
                  </div>
                  <!-- 研究生 -->
                  <div style="border-bottom:1px solid var(--gray-border);">
                    <div style="display:grid;grid-template-columns:120px 1fr 200px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
                      <span style="font-size:13px;font-weight:600;color:var(--text-primary);">研究生</span>
                      <span style="font-size:13px;color:var(--text-secondary);">新生（无需进入实验室的）</span>
                      <div style="display:flex;align-items:center;gap:6px;justify-content:flex-end;">
                        <button class="btn btn-outline-gray btn-sm" style="width:28px;height:28px;padding:0;" onclick="stepNum('yc-grad-new',-1)">－</button>
                        <input id="yc-grad-new" type="number" class="form-input" style="width:60px;text-align:center;" value="4" min="0">
                        <button class="btn btn-outline-gray btn-sm" style="width:28px;height:28px;padding:0;" onclick="stepNum('yc-grad-new',1)">＋</button>
                      </div>
                    </div>
                    <div style="display:grid;grid-template-columns:120px 1fr auto;align-items:center;padding:12px 16px;">
                      <span></span>
                      <span style="font-size:13px;color:var(--text-secondary);">非新生（完成实验室分级年度学时任务）</span>
                      <span style="font-size:13px;color:var(--text-hint);background:var(--gray-light);padding:4px 10px;border-radius:4px;white-space:nowrap;">Ⅰ级 24学时 / Ⅱ级 16学时 / Ⅲ级 8学时 / Ⅳ级 4学时</span>
                    </div>
                  </div>
                  <!-- 本科生 -->
                  <div style="display:grid;grid-template-columns:120px 1fr 200px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
                    <span style="font-size:13px;font-weight:600;color:var(--text-primary);">本科生</span>
                    <span style="font-size:13px;color:var(--text-secondary);">非新生</span>
                    <div style="display:flex;align-items:center;gap:6px;justify-content:flex-end;">
                      <button class="btn btn-outline-gray btn-sm" style="width:28px;height:28px;padding:0;" onclick="stepNum('yc-undergrad',-1)">－</button>
                      <input id="yc-undergrad" type="number" class="form-input" style="width:60px;text-align:center;" value="0" min="0">
                      <button class="btn btn-outline-gray btn-sm" style="width:28px;height:28px;padding:0;" onclick="stepNum('yc-undergrad',1)">＋</button>
                    </div>
                  </div>
                  <!-- 教职工 -->
                  <div>
                    <div style="display:grid;grid-template-columns:120px 1fr 200px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--gray-border);">
                      <span style="font-size:13px;font-weight:600;color:var(--text-primary);">教职工</span>
                      <span style="font-size:13px;color:var(--text-secondary);">新入职</span>
                      <div style="display:flex;align-items:center;gap:6px;justify-content:flex-end;">
                        <button class="btn btn-outline-gray btn-sm" style="width:28px;height:28px;padding:0;" onclick="stepNum('yc-staff-new',-1)">－</button>
                        <input id="yc-staff-new" type="number" class="form-input" style="width:60px;text-align:center;" value="4" min="0">
                        <button class="btn btn-outline-gray btn-sm" style="width:28px;height:28px;padding:0;" onclick="stepNum('yc-staff-new',1)">＋</button>
                      </div>
                    </div>
                    <div style="display:grid;grid-template-columns:120px 1fr 200px;align-items:center;padding:12px 16px;">
                      <span></span>
                      <span style="font-size:13px;color:var(--text-secondary);">非新入职</span>
                      <div style="display:flex;align-items:center;gap:6px;justify-content:flex-end;">
                        <button class="btn btn-outline-gray btn-sm" style="width:28px;height:28px;padding:0;" onclick="stepNum('yc-staff-old',-1)">－</button>
                        <input id="yc-staff-old" type="number" class="form-input" style="width:60px;text-align:center;" value="0" min="0">
                        <button class="btn btn-outline-gray btn-sm" style="width:28px;height:28px;padding:0;" onclick="stepNum('yc-staff-old',1)">＋</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 考前学习 -->
          <div style="display:flex;align-items:flex-start;gap:12px;">
            <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考前学习</span>
            <div style="display:flex;flex-direction:column;gap:8px;">
              <label class="toggle"><input type="checkbox" id="yingzhi-prestudy-toggle" onchange="document.getElementById('yingzhi-prestudy-detail').style.display=this.checked?'flex':'none'"><span class="toggle-slider"></span></label>
              <div id="yingzhi-prestudy-detail" style="display:none;align-items:center;gap:8px;">
                <button class="btn btn-outline btn-sm">选择课程</button>
                <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;">实验室安全基础课程<span onclick="this.parentElement.remove()" style="cursor:pointer;margin-left:2px;">×</span></span>
                <span class="form-hint">只可选择一门课程</span>
              </div>
            </div>
          </div>

          <!-- 模拟考试 -->
          <div style="display:flex;align-items:flex-start;gap:12px;">
            <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">模拟考试</span>
            <div style="display:flex;flex-direction:column;gap:10px;">
              <label class="toggle"><input type="checkbox" id="yingzhi-mock-toggle" onchange="document.getElementById('yingzhi-mock-detail').style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
              <div id="yingzhi-mock-detail" style="display:none;">
                <div style="display:flex;gap:16px;margin-bottom:10px;">
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;">
                    <input type="radio" name="yingzhi-mock-mode" value="reuse" checked onchange="switchYingzhiMockMode('reuse')"> 复用试卷
                  </label>
                  <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;">
                    <input type="radio" name="yingzhi-mock-mode" value="choose" onchange="switchYingzhiMockMode('choose')"> 选择试卷
                  </label>
                </div>
                <!-- 复用试卷：显示当前正式考试试卷名称 -->
                <div id="yingzhi-mock-reuse-wrap" style="display:flex;align-items:center;gap:8px;">
                  <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;">实验室安全综合试卷（2026）<span onclick="clearYingzhiMockReuse()" style="cursor:pointer;margin-left:2px;">×</span></span>
                  <span class="form-hint">复用正式考试试卷作为模拟考试</span>
                </div>
                <!-- 选择试卷：手动选择 -->
                <div id="yingzhi-mock-choose-wrap" style="display:none;align-items:center;gap:8px;">
                  <button class="btn btn-outline btn-sm" onclick="showModal('modal-select-paper')">选择试卷</button>
                  <span id="yingzhi-mock-paper-tag" style="display:none;" class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;"></span>
                </div>
              </div>
            </div>
          </div>

          <!-- 考试承诺书 -->
          <div style="display:flex;align-items:flex-start;gap:12px;">
            <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考试承诺书</span>
            <div style="display:flex;flex-direction:column;gap:8px;flex:1;">
              <label class="toggle"><input type="checkbox" id="yingzhi-pledge-toggle" onchange="document.getElementById('yingzhi-pledge-editor').style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
              <div id="yingzhi-pledge-editor" style="display:none;">
                <div class="rich-editor">
                  <div class="rich-toolbar">
                    <button class="rich-tool-btn">B</button><button class="rich-tool-btn">I</button>
                    <button class="rich-tool-btn">U</button><button class="rich-tool-btn">≡</button>
                    <button class="rich-tool-btn">链接</button><button class="rich-tool-btn">图片</button>
                  </div>
                  <div class="rich-body" contenteditable="true">
                    <p><strong>实验室安全承诺书</strong></p>
                    <p>本人郑重承诺：在参加实验室安全考试及日常实验操作过程中，严格遵守实验室各项安全规章制度，认真执行安全操作规程，不擅自使用不熟悉的仪器设备，不私自改装或违规操作实验装置。发现安全隐患及时上报，如实反映实验情况，对违规行为承担相应法律及校规责任。</p>
                  </div>
                </div>
                <div style="display:flex;align-items:center;gap:20px;margin-top:10px;flex-wrap:wrap;">
                  <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:var(--text-secondary);">
                    <input type="checkbox" style="accent-color:var(--blue);">
                    支持考生打印承诺书
                  </label>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div style="margin-top:24px;display:flex;gap:12px;">
          <button class="btn btn-primary">保存设置</button>
          <button class="btn btn-outline-gray">重置</button>
        </div>
      </div><!-- /kaixue-sec-preexam -->

      <!-- 获得证书 section -->
      <div id="yingzhi-sec-cert" class="exam-section" style="display:none;">
        <div class="card-title">获得证书</div>
        <div style="display:flex;flex-direction:column;gap:16px;">
          <div style="display:flex;align-items:center;gap:12px;">
            <span class="form-label" style="width:80px;flex-shrink:0;">颁发证书</span>
            <label class="toggle"><input type="checkbox" id="yingzhi-cert-toggle" onchange="document.getElementById('yingzhi-cert-detail').style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
          </div>
          <div id="yingzhi-cert-detail" style="display:none;">
            <div style="display:flex;align-items:flex-start;gap:12px;">
              <span class="form-label" style="width:80px;flex-shrink:0;padding-top:6px;">证书模板</span>
              <div style="display:flex;flex-direction:column;gap:12px;">
                <select class="form-input form-select" style="width:240px;" id="yingzhi-cert-tpl" onchange="previewYingzhiCert(this)">
                  <option value="">请选择证书模板</option>
                  <option value="standard">实验室安全教育证书（标准版）</option>
                  <option value="elite">实验室安全教育证书（精英版）</option>
                </select>
                <div id="yingzhi-cert-preview" style="display:none;border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;width:360px;background:var(--gray-light);">
                  <div style="padding:6px 10px;background:var(--blue-light);border-bottom:1px solid var(--gray-border);font-size:12px;color:var(--blue);display:flex;justify-content:space-between;align-items:center;">
                    <span id="yingzhi-cert-preview-name"></span>
                    <span style="cursor:pointer;color:var(--text-hint);" onclick="document.getElementById('yingzhi-cert-tpl').value='';previewYingzhiCert(document.getElementById('yingzhi-cert-tpl'))">×</span>
                  </div>
                  <div style="padding:24px;display:flex;align-items:center;justify-content:center;min-height:200px;">
                    <div id="yingzhi-cert-img-wrap" style="text-align:center;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div><!-- /kaixue-cert-detail -->
        </div>
        <div style="margin-top:24px;display:flex;gap:12px;">
          <button class="btn btn-primary">保存设置</button>
          <button class="btn btn-outline-gray">重置</button>
        </div>
      </div><!-- /kaixue-sec-cert -->

    </div><!-- /right content -->
  </div><!-- /exam-tab-yingzhi -->

</div><!-- /page-exam-template -->
  </div><!-- end main-content -->


</div><!-- end admin-body -->

<script>
// ===== PAGE ROUTING =====
function showPage(id) {
  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
  const target = document.getElementById(id);
  if (target) { target.classList.add('active'); window.scrollTo(0,0); }
  // Highlight matching nav item by onclick attr
  document.querySelectorAll('.nav-item').forEach(n => {
    n.classList.remove('active');
    const oc = n.getAttribute('onclick') || '';
    if (oc.includes("'" + id + "'")) n.classList.add('active');
    // detail pages highlight their parent list item
    if (id === 'page-training-activity-detail' && oc.includes("'page-training-activity-list'")) n.classList.add('active');
  });
}

// switchMenu kept for backwards compat with any remaining onclick refs — no-op since sidebar is now unified
function switchMenu() {}

// ===== CERT TEMPLATE TOGGLE =====
function toggleCertTemplate(checkbox) {
  document.getElementById('cert-template-section').style.display = checkbox.checked ? 'block' : 'none';
}

// ===== TRAINING SCOPE MODE =====
function setScopeMode(mode) {
  document.getElementById('scope-dept-section').style.display = mode === 'dept' ? 'block' : 'none';
  document.getElementById('scope-person-section').style.display = mode === 'person' ? 'block' : 'none';
  ['all','dept','person'].forEach(function(m) {
    var lbl = document.getElementById('scope-label-' + m);
    if (lbl) {
      lbl.style.borderColor = m === mode ? 'var(--blue)' : 'var(--gray-border)';
      lbl.style.background = m === mode ? 'var(--blue-xlight)' : '';
      lbl.style.color = m === mode ? 'var(--blue)' : '';
    }
  });
}

// ===== PUBLISH TOGGLE CLICK =====
document.addEventListener('click', function(e) {
  const wrap = e.target.closest('.pub-slider');
  if (!wrap) return;
  const isOn = wrap.classList.contains('pub-on');
  wrap.classList.toggle('pub-on', !isOn);
  wrap.classList.toggle('pub-off', isOn);
});

// ===== LIST/GRID VIEW =====
function setListView(mode) {
  const grid = document.getElementById('activity-grid-view');
  const list = document.getElementById('activity-list-view');
  if (!grid || !list) return;
  if (mode === 'grid') { grid.style.display = 'grid'; list.style.display = 'none'; }
  else { grid.style.display = 'none'; list.style.display = 'block'; }
}

// ===== MODALS =====
function showModal(id) {
  const m = document.getElementById(id);
  if (m) m.classList.add('active');
}
function hideModal(id) {
  const m = document.getElementById(id);
  if (m) m.classList.remove('active');
}
function selectPaper(name) {
  // TODO: wire up to the target cell when a real data model exists
  hideModal('modal-select-paper');
}
// Close modal on backdrop click
document.querySelectorAll('.modal-overlay').forEach(m => {
  m.addEventListener('click', function(e) {
    if (e.target === this) this.classList.remove('active');
  });
});

// ===== EXAM TEMPLATE PAGE =====
function switchExamTab(tab) {
  document.querySelectorAll('.exam-tab-panel').forEach(function(p) { p.style.display = 'none'; });
  var panel = document.getElementById('exam-tab-' + tab);
  if (panel) {
    panel.style.display = tab === 'yingzhi' ? 'flex' : 'flex';
    if (tab === 'fenji') {
      // ensure flex for fenji sub-tab wrapper
      panel.style.display = 'block';
    }
  }
  document.querySelectorAll('#exam-top-tabs .view-tab').forEach(function(t) { t.classList.remove('active'); });
  var tabMap = { kaixue: 0, fenji: 1, yingzhi: 2 };
  var tabs = document.querySelectorAll('#exam-top-tabs .view-tab');
  if (tabs[tabMap[tab]]) tabs[tabMap[tab]].classList.add('active');
}

function switchExamSection(prefix, section) {
  // Hide all sections in this prefix's container
  var secs = document.querySelectorAll('#' + prefix + '-sec-basic, #' + prefix + '-sec-scope, #' + prefix + '-sec-paper, #' + prefix + '-sec-preexam, #' + prefix + '-sec-cheat, #' + prefix + '-sec-cert');
  secs.forEach(function(s) { s.style.display = 'none'; });
  var target = document.getElementById(prefix + '-sec-' + section);
  if (target) target.style.display = 'block';
  // Update nav active state - find nav items in same sidebar
  var secContainer = target && target.closest('[style*="overflow:hidden"]');
  if (secContainer) {
    secContainer.querySelectorAll('.nav-item').forEach(function(n) {
      n.classList.remove('active');
      var oc = n.getAttribute('onclick') || '';
      if (oc.includes("'" + section + "'")) n.classList.add('active');
    });
  }
}

function switchGradeTab(grade) {
  document.querySelectorAll('.fenji-grade-panel').forEach(function(p) { p.style.display = 'none'; });
  var panel = document.getElementById('fenji-grade-' + grade);
  if (panel) panel.style.display = 'flex';
  document.querySelectorAll('#fenji-grade-tabs .view-tab').forEach(function(t) { t.classList.remove('active'); });
  var gradeMap = { g1: 0, g2: 1, g3: 2, g4: 3 };
  var tabs = document.querySelectorAll('#fenji-grade-tabs .view-tab');
  if (tabs[gradeMap[grade]]) tabs[gradeMap[grade]].classList.add('active');
}

function setKaixueScope(mode) {
  document.getElementById('kaixue-scope-table').style.display = (mode === 'specify' || mode === 'student') ? 'block' : 'none';
  document.querySelectorAll('[name="kaixue-scope"]').forEach(function(r) {
    r.checked = (r.value === mode);
  });
}

// 证书模板预览
var kaixueCertTplMap = {
  'standard': { name: '实验室安全教育证书（标准版）', color: '#1857d4', bg: '#eef3fd' },
  'elite':    { name: '实验室安全教育证书（精英版）', color: '#10a37f', bg: '#edfaf6' }
};
function previewKaixueCert(sel) {
  var val = sel.value;
  var preview = document.getElementById('kaixue-cert-preview');
  var nameEl  = document.getElementById('kaixue-cert-preview-name');
  var imgWrap = document.getElementById('kaixue-cert-img-wrap');
  if (!val) {
    preview.style.display = 'none';
    return;
  }
  var tpl = kaixueCertTplMap[val];
  nameEl.textContent = tpl.name;
  // Placeholder certificate mockup (replaced with real <img> once backend provides URLs)
  imgWrap.innerHTML =
    '<div style="width:280px;height:198px;border:2px solid ' + tpl.color + ';border-radius:6px;background:' + tpl.bg + ';display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;">' +
      '<div style="font-size:18px;font-weight:700;color:' + tpl.color + ';letter-spacing:2px;">实验室安全教育证书</div>' +
      '<div style="font-size:11px;color:var(--text-hint);">此处为证书样式预览</div>' +
      '<div style="font-size:12px;color:var(--text-secondary);margin-top:4px;">' + tpl.name + '</div>' +
    '</div>';
  preview.style.display = 'block';
}

function switchKaixueMockMode(mode) {
  document.getElementById('kaixue-mock-reuse-wrap').style.display = mode === 'reuse' ? 'flex' : 'none';
  document.getElementById('kaixue-mock-choose-wrap').style.display = mode === 'choose' ? 'flex' : 'none';
}

function clearKaixueMockReuse() {
  var wrap = document.getElementById('kaixue-mock-reuse-wrap');
  wrap.innerHTML = '<span class="form-hint">暂无复用试卷</span>';
}

function switchYingzhiMockMode(mode) {
  document.getElementById('yingzhi-mock-reuse-wrap').style.display = mode === 'reuse' ? 'flex' : 'none';
  document.getElementById('yingzhi-mock-choose-wrap').style.display = mode === 'choose' ? 'flex' : 'none';
}

function clearYingzhiMockReuse() {
  var wrap = document.getElementById('yingzhi-mock-reuse-wrap');
  wrap.innerHTML = '<span class="form-hint">暂无复用试卷</span>';
}

function previewYingzhiCert(sel) {
  previewCert(sel, 'yingzhi-cert-preview', 'yingzhi-cert-preview-name', 'yingzhi-cert-img-wrap');
}

// Generic scope tab switcher for fenji/yingzhi (prefix-based)
function switchScopeTab(prefix, tab) {
  ['specify','person'].forEach(function(p) {
    var el = document.getElementById(prefix + '-scope-panel-' + p);
    if (el) el.style.display = (p === tab) ? 'block' : 'none';
  });
}

// Generic cert preview (shared by fenji/yingzhi grades)
function previewCert(sel, previewId, nameId, imgId) {
  var val = sel.value;
  var preview = document.getElementById(previewId);
  var nameEl = document.getElementById(nameId);
  var imgWrap = document.getElementById(imgId);
  if (!val) { if (preview) preview.style.display = 'none'; return; }
  var tpl = kaixueCertTplMap[val];
  if (!tpl || !preview) return;
  nameEl.textContent = tpl.name;
  imgWrap.innerHTML =
    '<div style="width:280px;height:198px;border:2px solid ' + tpl.color + ';border-radius:6px;background:' + tpl.bg + ';display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;">' +
      '<div style="font-size:18px;font-weight:700;color:' + tpl.color + ';letter-spacing:2px;">实验室安全教育证书</div>' +
      '<div style="font-size:11px;color:var(--text-hint);">此处为证书样式预览</div>' +
      '<div style="font-size:12px;color:var(--text-secondary);margin-top:4px;">' + tpl.name + '</div>' +
    '</div>';
  preview.style.display = 'block';
}

function switchKaixueScopeTab(tab) {
  var panels = ['specify', 'person'];
  panels.forEach(function(p) {
    var panel = document.getElementById('kaixue-scope-panel-' + p);
    if (panel) panel.style.display = (p === tab) ? 'block' : 'none';
  });
}

function toggleMultiselect(ddId) {
  var dd = document.getElementById(ddId);
  if (!dd) return;
  var isOpen = dd.style.display !== 'none';
  // Close all open dropdowns first
  document.querySelectorAll('[id$="-dd"]').forEach(function(el) { el.style.display = 'none'; });
  if (!isOpen) dd.style.display = 'block';
}

function updateMultiselectLabel(ddId, labelId) {
  var dd = document.getElementById(ddId);
  var label = document.getElementById(labelId);
  if (!dd || !label) return;
  var checked = Array.from(dd.querySelectorAll('input[type=checkbox]:checked')).filter(function(cb) {
    return !cb.closest('label').textContent.trim().startsWith('全选');
  }).map(function(cb) { return cb.parentElement.textContent.trim(); });
  label.textContent = checked.length ? checked.join('、') : '请选择类型';
  label.style.color = checked.length ? 'var(--text-primary)' : 'var(--text-hint)';
}

function toggleSelectAll(allCb, ddId) {
  var dd = document.getElementById(ddId);
  if (!dd) return;
  dd.querySelectorAll('input[type=checkbox]').forEach(function(cb) { cb.checked = allCb.checked; });
}

// Close multiselect dropdowns on outside click
document.addEventListener('click', function(e) {
  if (!e.target.closest('.multiselect-trigger') && !e.target.closest('[id$="-dd"]')) {
    document.querySelectorAll('[id$="-dd"]').forEach(function(el) { el.style.display = 'none'; });
  }
});

function stepNum(id, delta) {
  var el = document.getElementById(id);
  if (!el) return;
  var val = (parseInt(el.value, 10) || 0) + delta;
  var min = parseInt(el.min, 10);
  if (!isNaN(min) && val < min) val = min;
  el.value = val;
}

function updateKaixueHours() {
  // Reflect checked user types in the hours table
  var tbody = document.getElementById('kaixue-hours-tbody');
  if (!tbody) return;
  var types = [
    { id: 'kaixue-user-undergrad', label: '新入学本科生', def: 4 },
    { id: 'kaixue-user-postgrad',  label: '新入学研究生', def: 4 },
    { id: 'kaixue-user-staff',     label: '新入职教职工',  def: 2 }
  ];
  var rows = '';
  types.forEach(function(t) {
    var cb = document.getElementById(t.id);
    if (cb && cb.checked) {
      rows += '<tr><td>' + t.label + '</td><td><input type="number" class="form-input" style="width:80px;" value="' + t.def + '" min="0"></td></tr>';
    }
  });
  tbody.innerHTML = rows || '<tr><td colspan="2" style="text-align:center;color:var(--text-hint);">请先选择用户类别</td></tr>';
}

</script>
</body>
</html>