eparmak
/
DebTik


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430443144324433443444354436443744384439444044414442444344444445444644474448444944504451445244534454445544564457445844594460446144624463446444654466446744684469447044714472447344744475447644774478447944804481448244834484448544864487448844894490449144924493449444954496449744984499450045014502450345044505450645074508450945104511451245134514451545164517451845194520452145224523452445254526452745284529453045314532453345344535453645374538453945404541454245434544454545464547454845494550455145524553455445554556455745584559456045614562456345644565456645674568456945704571457245734574457545764577457845794580458145824583458445854586458745884589459045914592459345944595459645974598459946004601460246034604460546064607460846094610461146124613461446154616461746184619462046214622462346244625462646274628462946304631463246334634463546364637463846394640464146424643464446454646464746484649465046514652465346544655465646574658465946604661466246634664466546664667466846694670467146724673467446754676467746784679468046814682468346844685468646874688468946904691469246934694469546964697469846994700470147024703470447054706470747084709471047114712471347144715471647174718471947204721472247234724472547264727472847294730473147324733473447354736473747384739474047414742474347444745474647474748474947504751475247534754475547564757475847594760476147624763476447654766476747684769477047714772477347744775477647774778477947804781478247834784478547864787478847894790479147924793479447954796479747984799480048014802480348044805480648074808480948104811481248134814481548164817481848194820482148224823482448254826482748284829483048314832483348344835483648374838483948404841484248434844484548464847484848494850485148524853485448554856485748584859486048614862486348644865486648674868486948704871487248734874487548764877487848794880488148824883488448854886488748884889489048914892489348944895489648974898489949004901490249034904490549064907490849094910491149124913491449154916491749184919492049214922492349244925492649274928492949304931493249334934493549364937493849394940494149424943494449454946494749484949495049514952495349544955495649574958495949604961496249634964496549664967496849694970497149724973497449754976497749784979498049814982498349844985498649874988498949904991499249934994499549964997499849995000500150025003500450055006500750085009501050115012501350145015501650175018501950205021502250235024502550265027502850295030503150325033503450355036503750385039504050415042504350445045504650475048504950505051505250535054505550565057505850595060506150625063506450655066506750685069507050715072507350745075507650775078507950805081508250835084508550865087508850895090509150925093509450955096509750985099510051015102510351045105510651075108510951105111511251135114511551165117511851195120512151225123512451255126512751285129513051315132513351345135513651375138513951405141514251435144514551465147514851495150515151525153515451555156515751585159516051615162516351645165516651675168516951705171517251735174517551765177517851795180518151825183518451855186518751885189519051915192519351945195519651975198519952005201520252035204520552065207520852095210521152125213521452155216521752185219522052215222522352245225522652275228522952305231523252335234523552365237523852395240524152425243524452455246524752485249525052515252525352545255525652575258525952605261526252635264526552665267526852695270527152725273527452755276527752785279528052815282528352845285528652875288528952905291529252935294529552965297529852995300530153025303530453055306530753085309531053115312531353145315531653175318531953205321532253235324532553265327532853295330533153325333533453355336533753385339534053415342534353445345534653475348534953505351535253535354535553565357535853595360536153625363536453655366536753685369537053715372537353745375537653775378537953805381538253835384538553865387538853895390539153925393539453955396539753985399540054015402540354045405540654075408540954105411541254135414541554165417541854195420542154225423542454255426542754285429543054315432543354345435543654375438543954405441544254435444544554465447544854495450545154525453545454555456545754585459546054615462546354645465546654675468546954705471547254735474547554765477547854795480548154825483548454855486548754885489549054915492549354945495549654975498549955005501550255035504550555065507550855095510551155125513551455155516551755185519552055215522552355245525552655275528552955305531553255335534553555365537553855395540554155425543554455455546554755485549555055515552555355545555555655575558555955605561556255635564556555665567556855695570557155725573557455755576557755785579558055815582558355845585558655875588558955905591559255935594559555965597559855995600560156025603560456055606560756085609561056115612561356145615561656175618561956205621562256235624562556265627562856295630563156325633563456355636563756385639564056415642564356445645564656475648564956505651565256535654565556565657565856595660566156625663566456655666566756685669567056715672567356745675567656775678567956805681568256835684568556865687568856895690569156925693569456955696569756985699570057015702570357045705570657075708570957105711571257135714571557165717571857195720572157225723572457255726572757285729573057315732573357345735573657375738573957405741574257435744574557465747574857495750575157525753575457555756575757585759576057615762576357645765576657675768576957705771577257735774577557765777577857795780578157825783578457855786578757885789579057915792579357945795579657975798579958005801580258035804580558065807580858095810581158125813581458155816581758185819582058215822582358245825582658275828582958305831583258335834583558365837583858395840584158425843584458455846584758485849585058515852585358545855585658575858585958605861586258635864586558665867586858695870587158725873587458755876587758785879588058815882588358845885588658875888588958905891589258935894589558965897589858995900590159025903590459055906590759085909591059115912591359145915591659175918591959205921592259235924592559265927592859295930593159325933593459355936593759385939594059415942594359445945594659475948594959505951595259535954595559565957595859595960596159625963596459655966596759685969597059715972597359745975597659775978597959805981598259835984598559865987598859895990599159925993599459955996599759985999600060016002600360046005600660076008600960106011601260136014601560166017601860196020602160226023602460256026602760286029603060316032603360346035603660376038603960406041604260436044604560466047604860496050605160526053605460556056605760586059606060616062606360646065606660676068606960706071607260736074607560766077607860796080608160826083608460856086608760886089609060916092609360946095609660976098609961006101610261036104610561066107610861096110611161126113611461156116611761186119612061216122612361246125612661276128612961306131613261336134613561366137613861396140614161426143614461456146614761486149615061516152615361546155615661576158615961606161616261636164616561666167616861696170617161726173617461756176617761786179618061816182618361846185618661876188618961906191619261936194619561966197619861996200620162026203620462056206620762086209621062116212621362146215621662176218621962206221622262236224622562266227622862296230623162326233623462356236623762386239624062416242624362446245624662476248624962506251625262536254625562566257625862596260626162626263626462656266626762686269627062716272627362746275627662776278627962806281628262836284628562866287628862896290629162926293629462956296629762986299630063016302630363046305630663076308630963106311631263136314631563166317631863196320632163226323632463256326632763286329633063316332633363346335633663376338633963406341634263436344634563466347634863496350635163526353635463556356635763586359636063616362636363646365636663676368636963706371637263736374637563766377637863796380638163826383638463856386638763886389639063916392639363946395639663976398639964006401640264036404640564066407640864096410641164126413641464156416641764186419642064216422642364246425642664276428642964306431643264336434643564366437643864396440644164426443644464456446644764486449645064516452645364546455645664576458645964606461646264636464646564666467646864696470647164726473647464756476647764786479648064816482648364846485648664876488648964906491649264936494649564966497649864996500650165026503650465056506650765086509651065116512651365146515651665176518651965206521652265236524652565266527652865296530653165326533653465356536653765386539654065416542654365446545654665476548654965506551655265536554655565566557655865596560656165626563656465656566656765686569657065716572657365746575657665776578657965806581658265836584658565866587658865896590659165926593659465956596659765986599660066016602660366046605660666076608660966106611661266136614661566166617661866196620662166226623662466256626662766286629663066316632663366346635663666376638663966406641664266436644664566466647664866496650665166526653665466556656665766586659666066616662666366646665666666676668666966706671667266736674667566766677667866796680668166826683668466856686668766886689669066916692669366946695669666976698669967006701670267036704670567066707670867096710671167126713671467156716671767186719672067216722672367246725672667276728672967306731673267336734673567366737673867396740674167426743674467456746674767486749675067516752675367546755675667576758675967606761676267636764676567666767676867696770677167726773677467756776677767786779678067816782678367846785678667876788678967906791679267936794679567966797679867996800680168026803680468056806680768086809681068116812681368146815681668176818681968206821682268236824682568266827682868296830683168326833683468356836683768386839684068416842684368446845684668476848684968506851685268536854685568566857685868596860686168626863686468656866686768686869687068716872687368746875687668776878687968806881688268836884688568866887688868896890689168926893689468956896689768986899690069016902690369046905690669076908690969106911691269136914691569166917691869196920692169226923692469256926692769286929693069316932693369346935693669376938693969406941694269436944694569466947694869496950695169526953695469556956695769586959696069616962696369646965696669676968696969706971697269736974697569766977697869796980698169826983698469856986698769886989699069916992699369946995699669976998699970007001700270037004700570067007700870097010701170127013701470157016701770187019702070217022702370247025702670277028702970307031703270337034703570367037703870397040704170427043704470457046704770487049705070517052705370547055705670577058705970607061706270637064706570667067706870697070707170727073707470757076707770787079708070817082708370847085708670877088708970907091709270937094709570967097709870997100710171027103710471057106710771087109711071117112711371147115711671177118711971207121712271237124712571267127712871297130713171327133713471357136713771387139714071417142714371447145714671477148714971507151715271537154715571567157715871597160716171627163716471657166716771687169717071717172717371747175717671777178717971807181718271837184718571867187718871897190719171927193719471957196719771987199720072017202720372047205720672077208720972107211721272137214721572167217721872197220722172227223722472257226722772287229723072317232723372347235723672377238723972407241724272437244724572467247724872497250725172527253725472557256725772587259726072617262726372647265726672677268726972707271727272737274727572767277727872797280728172827283728472857286728772887289729072917292729372947295729672977298729973007301730273037304730573067307730873097310731173127313731473157316731773187319732073217322732373247325732673277328732973307331733273337334733573367337733873397340734173427343734473457346734773487349735073517352735373547355735673577358735973607361736273637364736573667367736873697370737173727373737473757376737773787379738073817382738373847385738673877388738973907391739273937394739573967397739873997400740174027403740474057406740774087409741074117412741374147415741674177418741974207421742274237424742574267427742874297430743174327433743474357436743774387439744074417442744374447445744674477448744974507451745274537454745574567457745874597460746174627463746474657466746774687469747074717472747374747475747674777478747974807481748274837484748574867487748874897490749174927493749474957496749774987499750075017502750375047505750675077508750975107511751275137514751575167517751875197520752175227523752475257526752775287529753075317532753375347535753675377538753975407541754275437544754575467547754875497550755175527553755475557556755775587559756075617562756375647565756675677568756975707571757275737574757575767577757875797580758175827583758475857586758775887589759075917592759375947595759675977598759976007601760276037604760576067607760876097610761176127613761476157616761776187619762076217622762376247625762676277628762976307631763276337634763576367637763876397640764176427643764476457646764776487649765076517652765376547655765676577658765976607661766276637664766576667667766876697670767176727673767476757676767776787679768076817682768376847685768676877688768976907691769276937694769576967697769876997700770177027703770477057706770777087709771077117712771377147715771677177718771977207721772277237724772577267727772877297730773177327733773477357736773777387739774077417742774377447745
							<!DOCTYPE html>
<html lang="el" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proxmox RouterOS | Network Appliance</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'><path d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/></svg>">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            brand: {
              50: '#ecfdf5',
              100: '#d1fae5',
              400: '#34d399',
              500: '#10b981',
              600: '#059669',
              700: '#047857',
              800: '#065f46',
              900: '#064e3b',
            }
          }
        }
      }
    }
  </script>
  <link rel="stylesheet" href="style.css?v=2.1">
</head>
<body class="bg-[#0b101e] text-slate-100 min-h-screen flex flex-col font-sans antialiased selection:bg-brand-500 selection:text-white">

  <!-- Toast Notification Container -->
  <div id="toast-container" class="fixed top-5 right-5 z-50 flex flex-col space-y-2 pointer-events-none"></div>

  <!-- Main Layout -->
  <div class="flex flex-1 overflow-hidden h-screen">

    <!-- Sidebar -->
    <aside id="sidebar" class="w-64 bg-[#0f172a]/95 border-r border-slate-800 flex flex-col flex-shrink-0 transition-all duration-300 z-30">
      <!-- Brand Header -->
      <div class="h-16 flex items-center px-5 border-b border-slate-800 justify-between">
        <div class="flex items-center space-x-3">
          <div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-brand-600 to-cyan-500 flex items-center justify-center shadow-lg shadow-brand-500/20 text-white font-bold">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
          </div>
          <div>
            <div class="font-bold text-sm tracking-wide text-white flex items-center gap-1.5">
              <span>RouterOS</span>
              <span class="text-[10px] bg-brand-500/20 text-brand-400 font-mono px-1.5 py-0.5 rounded border border-brand-500/30">LXC</span>
            </div>
            <div class="text-[11px] text-slate-400">Proxmox Gateway</div>
          </div>
        </div>
      </div>

      <!-- Live Health Pill -->
      <div class="px-4 py-3 border-b border-slate-800/60 bg-slate-900/40">
        <div class="flex items-center justify-between text-xs mb-1.5">
          <span class="text-slate-400 font-medium">Gateway Status</span>
          <span class="flex items-center text-emerald-400 font-medium text-[11px]">
            <span class="relative flex h-2 w-2 mr-1.5">
              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
              <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
            </span>
            Online
          </span>
        </div>
        <div class="text-[11px] text-slate-400 font-mono truncate" id="side-gateway-ip">GW: Scanning...</div>
      </div>

      <!-- Navigation Menu -->
      <nav class="flex-1 px-3 py-3 space-y-1 overflow-y-auto">

        <!-- CATEGORY: OVERVIEW -->
        <div class="px-3 pt-2 pb-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">Overview</div>

        <a href="#dashboard" onclick="navigate('dashboard')" id="nav-dashboard"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group bg-brand-500/10 text-brand-400 border border-brand-500/20">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
            </svg>
            <span>Dashboard</span>
          </div>
        </a>

        <!-- CATEGORY: NETWORKING -->
        <div class="px-3 pt-3 pb-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">Networking</div>

        <a href="#interfaces" onclick="navigate('interfaces')" id="nav-interfaces"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            <span>Interfaces</span>
          </div>
          <span id="badge-ifaces-count" class="text-[10px] bg-slate-800 text-slate-300 px-1.5 py-0.2 rounded-full font-mono">0</span>
        </a>

        <a href="#dhcp-client" onclick="navigate('dhcp-client')" id="nav-dhcp-client"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
            <span>DHCP Client</span>
          </div>
          <span id="badge-dhcp-client-count" class="text-[10px] bg-slate-800 text-slate-300 px-1.5 py-0.2 rounded-full font-mono">0</span>
        </a>

        <a href="#bridge" onclick="navigate('bridge')" id="nav-bridge"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4 text-sky-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18M5 14v4a2 2 0 002 2h2a2 2 0 002-2v-4m6 0v4a2 2 0 002 2h2a2 2 0 002-2v-4M4 10V6a2 2 0 012-2h12a2 2 0 012 2v4" />
            </svg>
            <span>Bridge</span>
          </div>
          <span id="badge-bridge-count" class="text-[10px] bg-sky-950 text-sky-300 border border-sky-800/40 px-1.5 py-0.2 rounded-full font-mono">0</span>
        </a>

        <a href="#firewall" onclick="navigate('firewall')" id="nav-firewall"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
            <span>Firewall</span>
          </div>
          <span id="badge-firewall-count" class="text-[10px] bg-emerald-950 text-emerald-400 border border-emerald-800/50 px-1.5 py-0.2 rounded-full font-mono">0</span>
        </a>

        <!-- CATEGORY: ROUTING -->
        <div class="px-3 pt-3 pb-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">Routing</div>

        <a href="#routes" onclick="navigate('routes')" id="nav-routes"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
            </svg>
            <span>Routes & Policy</span>
          </div>
          <span id="badge-routes-count" class="text-[10px] bg-slate-800 text-slate-300 px-1.5 py-0.2 rounded-full font-mono">0</span>
        </a>

        <a href="#bgp" onclick="navigate('bgp')" id="nav-bgp"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
            </svg>
            <span>BGP (/routing bgp)</span>
          </div>
          <div class="flex items-center gap-1.5">
            <span id="badge-bgp-dot" class="w-2 h-2 rounded-full bg-slate-600" title="BGP Status"></span>
            <span id="badge-bgp-count" class="text-[10px] bg-purple-950 text-purple-300 border border-purple-800/40 px-1.5 py-0.2 rounded-full font-mono">0</span>
          </div>
        </a>

        <a href="#ospf" onclick="navigate('ospf')" id="nav-ospf"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
            <span>OSPF (/routing ospf)</span>
          </div>
          <div class="flex items-center gap-1.5">
            <span id="badge-ospf-dot" class="w-2 h-2 rounded-full bg-slate-600" title="OSPF Status"></span>
            <span id="badge-ospf-count" class="text-[10px] bg-indigo-950 text-indigo-300 border border-indigo-800/40 px-1.5 py-0.2 rounded-full font-mono">0</span>
          </div>
        </a>

        <a href="#routing-filters" onclick="navigate('routing-filters')" id="nav-routing-filters"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
            </svg>
            <span>Routing Filters</span>
          </div>
          <span id="badge-filters-count" class="text-[10px] bg-slate-800 text-slate-300 px-1.5 py-0.2 rounded-full font-mono">0</span>
        </a>

        <!-- CATEGORY: WAN & ACCESS -->
        <div class="px-3 pt-3 pb-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">WAN & Access</div>

        <a href="#pppoe" onclick="navigate('pppoe')" id="nav-pppoe"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
            <span>PPPoE Client</span>
          </div>
          <span id="badge-pppoe-status" class="w-2 h-2 rounded-full bg-slate-600"></span>
        </a>

        <!-- CATEGORY: VPN & TUNNELS -->
        <div class="px-3 pt-3 pb-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">VPN & Tunnels</div>

        <a href="#wireguard" onclick="navigate('wireguard')" id="nav-wireguard"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4 text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
            <span>WireGuard</span>
          </div>
          <span id="badge-wg-status" class="w-2 h-2 rounded-full bg-slate-600"></span>
        </a>

        <a href="#ipsec" onclick="navigate('ipsec')" id="nav-ipsec"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
            <span>IPSec (IKEv2)</span>
          </div>
          <span id="badge-ipsec-status" class="w-2 h-2 rounded-full bg-slate-600"></span>
        </a>

        <a href="#l2tp" onclick="navigate('l2tp')" id="nav-l2tp"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
            </svg>
            <span>L2TP Client</span>
          </div>
          <span id="badge-l2tp-status" class="w-2 h-2 rounded-full bg-slate-600"></span>
        </a>

        <a href="#pptp" onclick="navigate('pptp')" id="nav-pptp"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
            </svg>
            <span>PPTP Client</span>
          </div>
          <span id="badge-pptp-status" class="w-2 h-2 rounded-full bg-slate-600"></span>
        </a>

        <a href="#ppp" onclick="navigate('ppp')" id="nav-ppp"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
            </svg>
            <span>PPP (Servers & Users)</span>
          </div>
          <span id="badge-ppp-sessions" class="text-[10px] bg-violet-950 text-violet-300 border border-violet-800/40 px-1.5 py-0.2 rounded-full font-mono">0</span>
        </a>

        <a href="#eoip" onclick="navigate('eoip')" id="nav-eoip"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
            </svg>
            <span>EoIP Tunnels</span>
          </div>
          <span id="badge-eoip-count" class="text-[10px] bg-slate-800 text-slate-300 px-1.5 py-0.2 rounded-full font-mono">0</span>
        </a>

        <!-- CATEGORY: DIAGNOSTICS & TOOLS -->
        <div class="px-3 pt-3 pb-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">Diagnostics</div>

        <a href="#tools" onclick="navigate('tools')" id="nav-tools"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <span>Troubleshoot (/tool)</span>
          </div>
          <span class="text-[10px] bg-amber-950 text-amber-300 border border-amber-800/40 px-1.5 py-0.2 rounded-full font-mono">Tools</span>
        </a>

        <!-- CATEGORY: SYSTEM -->
        <div class="px-3 pt-3 pb-1 text-[10px] font-bold text-slate-500 uppercase tracking-wider">System</div>

        <a href="#persistence" onclick="navigate('persistence')" id="nav-persistence"
           class="nav-link flex items-center justify-between px-3 py-2 rounded-lg text-xs font-medium transition-all group text-slate-300 hover:bg-slate-800/80 hover:text-white">
          <div class="flex items-center space-x-2.5">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
            </svg>
            <span>Debian Config</span>
          </div>
          <span class="text-[10px] bg-slate-800 text-slate-400 px-1.5 py-0.2 rounded">.cfg</span>
        </a>

      </nav>

      <!-- Sidebar Footer: Host System Metrics -->
      <div class="p-4 border-t border-slate-800/80 bg-slate-900/60">
        <div class="flex items-center justify-between text-xs text-slate-400 mb-2">
          <span class="truncate font-mono" id="side-hostname">debian-lxc</span>
          <span class="text-[11px] text-slate-500" id="side-uptime">0h 0m</span>
        </div>

        <div class="mb-2">
          <div class="flex justify-between text-[11px] text-slate-400 mb-1">
            <span>CPU Usage</span>
            <span id="side-cpu-val" class="font-mono text-slate-300">0.0%</span>
          </div>
          <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
            <div id="side-cpu-bar" class="bg-brand-500 h-full rounded-full transition-all duration-500" style="width: 5%"></div>
          </div>
        </div>

        <div>
          <div class="flex justify-between text-[11px] text-slate-400 mb-1">
            <span>RAM Usage</span>
            <span id="side-ram-val" class="font-mono text-slate-300">0%</span>
          </div>
          <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden">
            <div id="side-ram-bar" class="bg-cyan-500 h-full rounded-full transition-all duration-500" style="width: 25%"></div>
          </div>
        </div>
      </div>
    </aside>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col min-w-0 overflow-hidden">

      <!-- Top Navbar -->
      <header class="h-16 bg-[#0f172a]/80 backdrop-blur border-b border-slate-800 flex items-center justify-between px-6 z-20">
        <div class="flex items-center space-x-4">
          <button onclick="toggleSidebar()" class="lg:hidden p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
          <div>
            <h1 id="page-title" class="text-lg font-bold text-white tracking-tight">Dashboard Overview</h1>
            <p id="page-subtitle" class="text-xs text-slate-400">Live router performance and interface management</p>
          </div>
        </div>
      </header>

      <!-- Scrollable Main Viewport -->
      <main class="flex-1 overflow-y-auto p-6 space-y-6">

        <!-- ================= SECTION: DASHBOARD ================= -->
        <section id="section-dashboard" class="space-y-6">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-5">

            <!-- CPU Usage -->
            <div class="bg-slate-900/80 border border-slate-800 rounded-xl p-5 relative overflow-hidden group hover:border-slate-700 transition">
              <div class="flex items-center justify-between mb-3">
                <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">CPU Usage</span>
                <div class="p-2 bg-emerald-500/10 text-emerald-400 rounded-lg">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M3 9h2m-2 6h2m14-6h2m-2 6h2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                  </svg>
                </div>
              </div>
              <div class="flex items-baseline justify-between">
                <div class="flex items-baseline space-x-2">
                  <span id="dash-cpu-val" class="text-2xl font-bold text-white">0.0%</span>
                  <span id="dash-cpu-cores" class="text-xs text-slate-400 font-mono">0 Cores</span>
                </div>
                <span id="dash-cpu-status" class="text-[11px] font-semibold text-emerald-400 uppercase px-2 py-0.5 rounded bg-emerald-500/10">Normal</span>
              </div>
              <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden my-2.5">
                <div id="dash-cpu-bar" class="h-full rounded-full bg-emerald-500 transition-all duration-500" style="width: 0%"></div>
              </div>
              <div class="text-xs text-slate-400 flex items-center justify-between">
                <span>Load: <span id="dash-cpu-load" class="font-mono text-slate-300">0.00, 0.00, 0.00</span></span>
                <span class="text-[11px] text-slate-500 font-mono">Container vCPU</span>
              </div>
            </div>

            <!-- RAM Usage -->
            <div class="bg-slate-900/80 border border-slate-800 rounded-xl p-5 relative overflow-hidden group hover:border-slate-700 transition">
              <div class="flex items-center justify-between mb-3">
                <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">RAM Usage</span>
                <div class="p-2 bg-indigo-500/10 text-indigo-400 rounded-lg">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                  </svg>
                </div>
              </div>
              <div class="flex items-baseline justify-between">
                <div class="flex items-baseline space-x-2">
                  <span id="dash-ram-val" class="text-2xl font-bold text-white">0%</span>
                  <span id="dash-ram-used-total" class="text-xs text-slate-400 font-mono">0 / 0 MB</span>
                </div>
                <span id="dash-ram-status" class="text-[11px] font-semibold text-indigo-400 uppercase px-2 py-0.5 rounded bg-indigo-500/10">Active</span>
              </div>
              <div class="w-full bg-slate-800 h-1.5 rounded-full overflow-hidden my-2.5">
                <div id="dash-ram-bar" class="h-full rounded-full bg-indigo-500 transition-all duration-500" style="width: 0%"></div>
              </div>
              <div class="text-xs text-slate-400 flex items-center justify-between">
                <span>Free: <span id="dash-ram-free" class="font-mono text-slate-300">0 MB</span></span>
                <span class="text-[11px] text-slate-500 font-mono">Dynamic Alloc</span>
              </div>
            </div>

            <!-- Live Traffic -->
            <div class="bg-slate-900/80 border border-slate-800 rounded-xl p-5 relative overflow-hidden group hover:border-slate-700 transition">
              <div class="flex items-center justify-between mb-3">
                <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Live Traffic</span>
                <div class="p-2 bg-amber-500/10 text-amber-400 rounded-lg">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                  </svg>
                </div>
              </div>
              <div class="space-y-1">
                <div class="flex items-center justify-between text-xs">
                  <span class="text-slate-400 flex items-center gap-1.5"><span class="text-emerald-400 font-bold">↓</span> RX:</span>
                  <span id="stat-traffic-rx" class="font-mono font-semibold text-emerald-400 text-sm">0 B/s</span>
                </div>
                <div class="flex items-center justify-between text-xs">
                  <span class="text-slate-400 flex items-center gap-1.5"><span class="text-cyan-400 font-bold">↑</span> TX:</span>
                  <span id="stat-traffic-tx" class="font-mono font-semibold text-cyan-400 text-sm">0 B/s</span>
                </div>
              </div>
              <div class="mt-2.5 pt-2 border-t border-slate-800/80 text-[11px] text-slate-500 flex items-center justify-between font-mono">
                <span>Throughput</span>
                <span class="text-emerald-400 font-semibold flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span> Streaming</span>
              </div>
            </div>

          </div>

          <!-- Port Matrix -->
          <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
            <div class="flex items-center justify-between mb-4">
              <div>
                <h3 class="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
                  <span>Hardware & Virtual Port Matrix</span>
                  <span class="text-[10px] bg-slate-800 text-slate-400 font-normal px-2 py-0.5 rounded-full">Live Hardware State</span>
                </h3>
              </div>
            </div>
            <div id="port-matrix" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3"></div>
          </div>

          <!-- Quick Overview: Interfaces -->
          <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-sm font-bold text-white flex items-center gap-2">
                <span>Interfaces Overview</span>
                <span class="text-[10px] bg-slate-800 text-slate-400 font-normal px-2 py-0.5 rounded-full">Active Ports & Addresses</span>
              </h3>
              <button onclick="navigate('interfaces')" class="text-xs text-brand-400 hover:text-brand-300 font-medium">View All Interfaces →</button>
            </div>
            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs">
                <thead class="text-slate-400 border-b border-slate-800 text-[11px] uppercase tracking-wider">
                  <tr>
                    <th class="pb-2.5">Interface</th>
                    <th class="pb-2.5">Role / Type</th>
                    <th class="pb-2.5">MAC Address</th>
                    <th class="pb-2.5">IP Address</th>
                    <th class="pb-2.5">Live Traffic</th>
                    <th class="pb-2.5 text-right">Status</th>
                  </tr>
                </thead>
                <tbody id="quick-interfaces-table" class="divide-y divide-slate-800/60 font-mono"></tbody>
              </table>
            </div>
          </div>
        </section>

        <!-- ================= SECTION: INTERFACES (HIERARCHICAL TREE) ================= -->
        <section id="section-interfaces" class="hidden space-y-6">
          <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-4 flex flex-wrap items-center justify-between gap-4">
            <div class="relative flex-1 min-w-[280px]">
              <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
              </div>
              <input type="text" id="iface-search" oninput="renderInterfacesList()"
                     placeholder="Search interfaces by Name or IP (e.g. eth0, 192.168.1.1)..."
                     class="w-full bg-slate-800/90 border border-slate-700 rounded-lg pl-10 pr-4 py-2 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-brand-500 transition">
            </div>

            <div class="flex items-center space-x-2">
              <button onclick="expandAllIfaces(true)" class="text-xs text-cyan-400 hover:text-cyan-300 font-medium px-3 py-2 rounded-lg bg-cyan-950/50 hover:bg-cyan-950 border border-cyan-800/60 transition flex items-center gap-1.5">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                <span>Expand All</span>
              </button>
              <button onclick="expandAllIfaces(false)" class="text-xs text-slate-400 hover:text-slate-300 font-medium px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 transition flex items-center gap-1.5">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
                <span>Collapse All</span>
              </button>
            </div>
          </div>

          <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden shadow-2xl">
            <div class="p-4 border-b border-slate-800 bg-slate-950/40 flex items-center justify-between">
              <div>
                <h3 class="text-sm font-bold text-white">Interface Table View</h3>
              </div>
              <div class="text-xs text-slate-400">
                <span id="ifaces-list-summary" class="font-mono">Loading interfaces...</span>
              </div>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs">
                <thead class="text-slate-400 bg-slate-950/80 border-b border-slate-800 uppercase tracking-wider text-[11px]">
                  <tr>
                    <th class="py-3 px-3 font-semibold w-8 text-center"></th>
                    <th class="py-3 px-4 font-semibold">Interface / Type</th>
                    <th class="py-3 px-4 font-semibold">Role & Alias</th>
                    <th class="py-3 px-4 font-semibold">IP Address (CIDR)</th>
                    <th class="py-3 px-4 font-semibold">MAC & MTU</th>
                    <th class="py-3 px-4 font-semibold">Throughput (RX/TX)</th>
                    <th class="py-3 px-4 font-semibold">Link State</th>
                    <th class="py-3 px-4 font-semibold text-right">Actions</th>
                  </tr>
                </thead>
                <tbody id="interfaces-tree-tbody" class="divide-y divide-slate-800 font-mono"></tbody>
              </table>
            </div>

            <div id="interfaces-empty-state" class="hidden p-12 text-center text-slate-500">
              No interfaces found matching your search.
            </div>
          </div>
        </section>

        <!-- ================= SECTION: DHCP CLIENT (/ip dhcp-client) ================= -->
        <section id="section-dhcp-client" class="hidden space-y-6">
          <div class="flex items-center justify-between">
            <button onclick="openDHCPClientModal()" class="px-4 py-2 rounded-lg font-semibold text-xs bg-amber-500 hover:bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20 transition flex items-center gap-1.5">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
              <span>+ Add</span>
            </button>
          </div>

          <!-- KPI Summary Cards -->
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-slate-900 border border-slate-800 rounded-xl p-4">
              <div class="text-xs text-slate-400">Total Configured</div>
              <div id="dhcp-stat-total" class="text-xl font-bold text-white font-mono mt-1">0</div>
            </div>
            <div class="bg-slate-900 border border-slate-800 rounded-xl p-4">
              <div class="text-xs text-slate-400">Bound Leases</div>
              <div id="dhcp-stat-bound" class="text-xl font-bold text-emerald-400 font-mono mt-1">0</div>
            </div>
            <div class="bg-slate-900 border border-slate-800 rounded-xl p-4">
              <div class="text-xs text-slate-400">Searching / Requesting</div>
              <div id="dhcp-stat-searching" class="text-xl font-bold text-amber-400 font-mono mt-1">0</div>
            </div>
            <div class="bg-slate-900 border border-slate-800 rounded-xl p-4">
              <div class="text-xs text-slate-400">Disabled</div>
              <div id="dhcp-stat-disabled" class="text-xl font-bold text-slate-500 font-mono mt-1">0</div>
            </div>
          </div>

          <!-- DHCP Clients Table -->
          <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <div>
                <h3 class="text-xs font-bold text-white">DHCP Client Interfaces</h3>
                <p class="text-[11px] text-slate-400 mt-0.5">Active leases, assigned IP addresses, default gateways and lease duration</p>
              </div>
            </div>
            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px]">
                  <tr>
                    <th class="py-3 px-4">Interface</th>
                    <th class="py-3 px-4">Status</th>
                    <th class="py-3 px-4">IP Address / Netmask</th>
                    <th class="py-3 px-4">Gateway</th>
                    <th class="py-3 px-4">DHCP Server</th>
                    <th class="py-3 px-4">DNS Servers</th>
                    <th class="py-3 px-4">Expires In</th>
                    <th class="py-3 px-4">Options</th>
                    <th class="py-3 px-4 text-right">Actions</th>
                  </tr>
                </thead>
                <tbody id="dhcp-clients-tbody" class="divide-y divide-slate-800 font-mono"></tbody>
              </table>
            </div>
            <div id="dhcp-clients-empty" class="hidden p-12 text-center text-slate-500">
              <div class="text-3xl mb-2">⚡</div>
              <div class="font-semibold text-slate-400 text-sm">No DHCP Clients Configured</div>
              <div class="text-xs mt-1 text-slate-500">Click &ldquo;Add DHCP Client&rdquo; to automatically obtain an IP on any interface.</div>
            </div>
          </div>
        </section>

        <!-- ================= SECTION: BRIDGE (/interface bridge) ================= -->
        <section id="section-bridge" class="hidden space-y-6">
          <!-- Bridge Navigation Header -->
          <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-4 flex flex-wrap items-center justify-between gap-4">
            <div class="flex items-center space-x-3">
              <div class="p-2.5 rounded-lg bg-sky-500/10 border border-sky-500/20 text-sky-400">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18M5 14v4a2 2 0 002 2h2a2 2 0 002-2v-4m6 0v4a2 2 0 002 2h2a2 2 0 002-2v-4M4 10V6a2 2 0 012-2h12a2 2 0 012 2v4" />
                </svg>
              </div>
              <div>
                <div class="flex items-center gap-2">
                  <h2 class="text-base font-bold text-white">Bridge Interfaces</h2>
                  <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-sky-500/20 text-sky-300 border border-sky-500/30 font-semibold">IEEE 802.1D / 802.1Q</span>
                </div>
                <p class="text-xs text-slate-400">Layer 2 software bridge with Rapid Spanning Tree Protocol (RSTP), 802.1Q VLAN filtering, horizon port isolation, and dynamic forwarding database (FDB).</p>
              </div>
            </div>

            <div class="flex items-center space-x-3">
              <button id="bridge-top-action-btn" onclick="openCurrentBridgeModal()" class="flex items-center space-x-2 bg-gradient-to-r from-sky-600 to-cyan-600 hover:from-sky-500 hover:to-cyan-500 text-white font-semibold text-xs px-4 py-2.5 rounded-lg shadow-lg shadow-sky-500/20 transition">
                <span>+ Add Bridge</span>
              </button>
            </div>
          </div>

          <!-- Bridge Subtabs Nav -->
          <div class="bg-slate-900/60 border border-slate-800/80 rounded-xl overflow-hidden p-1 flex flex-wrap items-center justify-between gap-2">
            <div class="flex items-center space-x-1">
              <button id="bridge-subtab-btn-bridges" onclick="switchBridgeSubTab('bridges')" class="px-4 py-2 text-xs font-bold rounded-lg bg-slate-800 text-white shadow-sm transition flex items-center gap-2">
                <span>Bridges</span>
                <span id="bridge-badge-bridges" class="px-1.5 py-0.2 rounded text-[10px] bg-sky-950 text-sky-300 border border-sky-800/40">0</span>
              </button>
              <button id="bridge-subtab-btn-ports" onclick="switchBridgeSubTab('ports')" class="px-4 py-2 text-xs font-bold rounded-lg text-slate-400 hover:text-slate-200 transition flex items-center gap-2">
                <span>Ports</span>
                <span id="bridge-badge-ports" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
              </button>
              <button id="bridge-subtab-btn-vlans" onclick="switchBridgeSubTab('vlans')" class="px-4 py-2 text-xs font-bold rounded-lg text-slate-400 hover:text-slate-200 transition flex items-center gap-2">
                <span>VLANs</span>
                <span id="bridge-badge-vlans" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
              </button>
              <button id="bridge-subtab-btn-hosts" onclick="switchBridgeSubTab('hosts')" class="px-4 py-2 text-xs font-bold rounded-lg text-slate-400 hover:text-slate-200 transition flex items-center gap-2">
                <span>Hosts (MAC Table)</span>
                <span id="bridge-badge-hosts" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
              </button>
            </div>

            <!-- Stats Bar -->
            <div class="flex items-center space-x-4 px-3 text-xs font-mono text-slate-400">
              <div>Bridges: <span id="bridge-stat-bridges" class="font-bold text-white">0</span></div>
              <div>Ports: <span id="bridge-stat-ports" class="font-bold text-sky-400">0</span></div>
              <div>Learned MACs: <span id="bridge-stat-hosts" class="font-bold text-emerald-400">0</span></div>
            </div>
          </div>

          <!-- ================= SUBTAB 1: BRIDGES ================= -->
          <div id="bridge-subtab-bridges" class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <h3 class="text-sm font-bold text-white">Configured Bridges</h3>
              <span id="bridge-count-badge" class="text-xs font-mono text-slate-400">0 Bridges</span>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-10 text-center">#</th>
                    <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Running, X=Disabled">Flag</th>
                    <th class="py-2.5 px-3">Name</th>
                    <th class="py-2.5 px-3">MTU</th>
                    <th class="py-2.5 px-3">MAC Address</th>
                    <th class="py-2.5 px-3">STP</th>
                    <th class="py-2.5 px-3">VLAN Filtering</th>
                    <th class="py-2.5 px-3">PVID</th>
                    <th class="py-2.5 px-3">Ports</th>
                    <th class="py-2.5 px-3">IP Addresses</th>
                    <th class="py-2.5 px-3">Traffic</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="bridge-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="bridge-empty-bridges" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No bridge interfaces configured. Click "+ Add Bridge" to create one.
            </div>
          </div>

          <!-- ================= SUBTAB 2: PORTS ================= -->
          <div id="bridge-subtab-ports" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
              <div class="flex items-center gap-3">
                <h3 class="text-sm font-bold text-white">Bridge Ports</h3>
                <span id="bridge-ports-count-badge" class="text-xs font-mono text-slate-400">0 Ports</span>
              </div>
              <div class="flex items-center space-x-2">
                <label class="text-xs text-slate-400">Filter Bridge:</label>
                <select id="bridge-ports-filter-bridge" onchange="renderBridgePorts()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white">
                  <option value="">All Bridges</option>
                </select>
              </div>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-10 text-center">#</th>
                    <th class="py-2.5 px-3 w-12 text-center" title="Flags: X=Disabled">Flag</th>
                    <th class="py-2.5 px-3">Interface</th>
                    <th class="py-2.5 px-3">Bridge</th>
                    <th class="py-2.5 px-3">PVID</th>
                    <th class="py-2.5 px-3">Frame Types</th>
                    <th class="py-2.5 px-3">Ingress Filter</th>
                    <th class="py-2.5 px-3">Horizon</th>
                    <th class="py-2.5 px-3">Role / Status</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="bridge-ports-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="bridge-empty-ports" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No bridge ports configured. Click "+ Add Port" to attach a physical NIC, VLAN or EoIP tunnel.
            </div>
          </div>

          <!-- ================= SUBTAB 3: VLANS ================= -->
          <div id="bridge-subtab-vlans" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
              <div class="flex items-center gap-3">
                <h3 class="text-sm font-bold text-white">Bridge VLAN Filtering Table</h3>
                <span id="bridge-vlans-count-badge" class="text-xs font-mono text-slate-400">0 Entries</span>
              </div>
              <div class="flex items-center space-x-2">
                <label class="text-xs text-slate-400">Filter Bridge:</label>
                <select id="bridge-vlans-filter-bridge" onchange="renderBridgeVLANs()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white">
                  <option value="">All Bridges</option>
                </select>
              </div>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-10 text-center">#</th>
                    <th class="py-2.5 px-3 w-12 text-center" title="Flags: X=Disabled">Flag</th>
                    <th class="py-2.5 px-3">Bridge</th>
                    <th class="py-2.5 px-3">VLAN IDs</th>
                    <th class="py-2.5 px-3">Tagged Member Ports</th>
                    <th class="py-2.5 px-3">Untagged Member Ports</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="bridge-vlans-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="bridge-empty-vlans" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No bridge VLAN filtering entries configured. Click "+ Add VLAN Entry" to configure 802.1Q tagged ports.
            </div>
          </div>

          <!-- ================= SUBTAB 4: HOSTS (MAC TABLE) ================= -->
          <div id="bridge-subtab-hosts" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
              <div class="flex items-center gap-3">
                <h3 class="text-sm font-bold text-white">Forwarding Database (MAC Table)</h3>
                <span id="bridge-hosts-count-badge" class="text-xs font-mono text-slate-400">0 Entries</span>
              </div>
              <div class="flex items-center space-x-2">
                <input type="text" id="bridge-hosts-search" oninput="renderBridgeHosts()" placeholder="Search MAC or Interface..." class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white">
                <select id="bridge-hosts-filter-bridge" onchange="loadBridgeHosts()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white">
                  <option value="">All Bridges</option>
                </select>
                <button onclick="loadBridgeHosts()" class="px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs font-semibold text-slate-200 border border-slate-700">🔄 Refresh</button>
                <button onclick="flushBridgeHosts()" class="px-2.5 py-1 rounded-lg bg-rose-950/60 hover:bg-rose-900/80 text-rose-300 border border-rose-800/40 text-xs font-semibold">🗑️ Flush Dynamic</button>
              </div>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3">MAC Address</th>
                    <th class="py-2.5 px-3">Interface / Port</th>
                    <th class="py-2.5 px-3">Bridge</th>
                    <th class="py-2.5 px-3">VLAN</th>
                    <th class="py-2.5 px-3">Age (s)</th>
                    <th class="py-2.5 px-3">Flags (L=Local, S=Static, D=Dynamic)</th>
                  </tr>
                </thead>
                <tbody id="bridge-hosts-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="bridge-empty-hosts" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No MAC addresses learned in the forwarding database.
            </div>
          </div>
        </section>

        <!-- ================= SECTION: PPPoE CLIENTS ================= -->
        <section id="section-pppoe" class="hidden space-y-6">
          <div class="bg-gradient-to-r from-blue-950/40 via-slate-900 to-slate-900 border border-blue-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-blue-500/20 text-blue-300 border border-blue-500/30 font-semibold">/interface pppoe-client</span>
                <h2 class="text-base font-bold text-white">PPPoE Client Sessions</h2>
              </div>
              <p class="text-xs text-slate-400">Point-to-Point Protocol over Ethernet (PPPoE) client management with automated reconnection, default gateway negotiation, and peer DNS acquisition.</p>
            </div>
            <div class="flex items-center gap-2">
              <button onclick="navigate('ppp'); switchPPPSubTab('pppoe')" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-blue-300 border border-blue-900/40 transition flex items-center gap-1.5" title="Configure Router as PPPoE Access Concentrator Server">
                <span>⚙ Server Settings</span>
              </button>
              <button onclick="openAddPPPoEModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-500/20 transition flex items-center gap-1.5">
                <span>+ Add PPPoE Client</span>
              </button>
            </div>
          </div>

          <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <h3 class="text-sm font-bold text-white">Configured PPPoE Interfaces</h3>
              <span id="pppoe-count-badge" class="text-xs font-mono bg-slate-800 text-slate-300 px-2.5 py-0.5 rounded-full">0 Interfaces</span>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Running, X=Disabled">Flag</th>
                    <th class="py-2.5 px-3">Name</th>
                    <th class="py-2.5 px-3">Interface</th>
                    <th class="py-2.5 px-3">User</th>
                    <th class="py-2.5 px-3">Assigned IP</th>
                    <th class="py-2.5 px-3">Device</th>
                    <th class="py-2.5 px-3 text-center">Def. Route</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="pppoe-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="pppoe-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No PPPoE clients configured. Click "+ Add PPPoE Client" to add a connection.
            </div>
          </div>
        </section>

        <!-- ================= SECTION: WIREGUARD ================= -->
        <section id="section-wireguard" class="hidden space-y-6">
          <div class="bg-gradient-to-r from-rose-950/40 via-slate-900 to-slate-900 border border-rose-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-rose-500/20 text-rose-300 border border-rose-500/30 font-semibold">/interface wireguard</span>
                <h2 class="text-base font-bold text-white">WireGuard VPN Suite</h2>
              </div>
              <p class="text-xs text-slate-400">High-performance multi-interface WireGuard VPN with kernel-accelerated cryptography, peer roaming, and endpoint keepalives.</p>
            </div>

            <div class="flex items-center space-x-2.5">
              <button onclick="openAddWGInterfaceModal()" class="text-xs font-semibold px-3.5 py-2 rounded-lg bg-rose-600 hover:bg-rose-500 text-white shadow-lg shadow-rose-500/20 transition">
                + Add Interface
              </button>
              <button onclick="openAddWGPeerModal()" class="text-xs font-semibold px-3.5 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-white border border-slate-700 transition">
                + Add Peer
              </button>
            </div>
          </div>

          <!-- Sub Tabs: Interfaces / Peers -->
          <div class="flex border-b border-slate-800 space-x-2">
            <button id="wg-subtab-btn-ifaces" onclick="switchWGSubTab('ifaces')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-rose-500 text-white transition flex items-center gap-2">
              <span>Interfaces</span>
              <span id="wg-subtab-badge-ifaces" class="px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
            <button id="wg-subtab-btn-peers" onclick="switchWGSubTab('peers')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2">
              <span>Peers</span>
              <span id="wg-subtab-badge-peers" class="px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
          </div>

          <!-- Sub-Tab 1: Interfaces -->
          <div id="wg-subtab-ifaces" class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <h3 class="text-sm font-bold text-white">WireGuard Interfaces</h3>
              <span id="wg-ifaces-count" class="text-xs font-mono text-slate-400">0 Interfaces</span>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Running, X=Disabled">Flag</th>
                    <th class="py-2.5 px-3">Name</th>
                    <th class="py-2.5 px-3">Listen Port</th>
                    <th class="py-2.5 px-3">Tunnel Address</th>
                    <th class="py-2.5 px-3">Public Key</th>
                    <th class="py-2.5 px-3">MTU</th>
                    <th class="py-2.5 px-3 text-center">Peers</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="wg-ifaces-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="wg-ifaces-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No WireGuard interfaces configured. Click "+ Add Interface" to create wg0.
            </div>
          </div>

          <!-- Sub-Tab 2: Peers -->
          <div id="wg-subtab-peers" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
              <div class="flex items-center gap-3">
                <h3 class="text-sm font-bold text-white">WireGuard Peers</h3>
                <span id="wg-peers-count" class="text-xs font-mono text-slate-400">0 Peers</span>
              </div>
              <div class="flex items-center gap-2">
                <label class="text-xs text-slate-400 font-sans">Filter Interface:</label>
                <select id="wg-peers-filter-iface" onchange="renderWGPeers()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white font-mono">
                  <option value="">All Interfaces</option>
                </select>
              </div>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Active, X=Disabled">Flag</th>
                    <th class="py-2.5 px-3">Interface</th>
                    <th class="py-2.5 px-3">Peer Name</th>
                    <th class="py-2.5 px-3">Public Key</th>
                    <th class="py-2.5 px-3">Allowed IPs</th>
                    <th class="py-2.5 px-3">Endpoint</th>
                    <th class="py-2.5 px-3">Latest Handshake</th>
                    <th class="py-2.5 px-3">Traffic (RX/TX)</th>
                    <th class="py-2.5 px-3 text-right font-sans">Action</th>
                  </tr>
                </thead>
                <tbody id="wg-peers-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="wg-peers-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No peers found for the selected interface. Click "+ Add Peer" to add a client or branch.
            </div>
          </div>
        </section>

        <!-- ================= SECTION: IPSEC ================= -->
        <section id="section-ipsec" class="hidden space-y-6">
          <div class="bg-gradient-to-r from-amber-950/40 via-slate-900 to-slate-900 border border-amber-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-amber-500/20 text-amber-300 border border-amber-500/30 font-semibold">/ip ipsec</span>
                <h2 class="text-base font-bold text-white">IPSec (IKEv2) Tunnels</h2>
              </div>
              <p class="text-xs text-slate-400">Enterprise IKEv2 / IPsec cryptographic tunnels with policy routing, automated SA rekeying, and Roadwarrior mobile client support.</p>
            </div>
            <div class="flex items-center gap-2">
              <button onclick="openIPSecServerModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-amber-300 border border-amber-900/40 transition flex items-center gap-1.5" title="Configure Router as IPSec IKEv2 Roadwarrior Mobile Client Server">
                <span>⚙ Roadwarrior Server</span>
              </button>
              <button onclick="openAddIPSecModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-amber-600 hover:bg-amber-500 text-white shadow-lg shadow-amber-500/20 transition">
                + Add IPSec Tunnel
              </button>
            </div>
          </div>

          <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <h3 class="text-sm font-bold text-white">Configured IPSec Tunnels</h3>
              <span id="ipsec-sas-badge" class="text-xs font-mono bg-slate-800 text-slate-300 px-2.5 py-0.5 rounded-full">0 Active SAs</span>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Established, X=Disabled">Flag</th>
                    <th class="py-2.5 px-4">Connection Name</th>
                    <th class="py-2.5 px-4">Local Subnet</th>
                    <th class="py-2.5 px-4">Remote Gateway</th>
                    <th class="py-2.5 px-4">Remote Subnet</th>
                    <th class="py-2.5 px-4">Status</th>
                    <th class="py-2.5 px-4 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="ipsec-table-body" class="divide-y divide-slate-800"></tbody>
              </table>
            </div>

            <div id="ipsec-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No IPSec tunnels configured. Click "+ Add IPSec Tunnel" to set up site-to-site networking.
            </div>
          </div>
        </section>

        <!-- ================= SECTION: L2TP CLIENT ================= -->
        <section id="section-l2tp" class="hidden space-y-6">
          <div class="bg-gradient-to-r from-cyan-950/40 via-slate-900 to-slate-900 border border-cyan-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-cyan-500/20 text-cyan-300 border border-cyan-500/30 font-semibold">/interface l2tp-client</span>
                <h2 class="text-base font-bold text-white">L2TP Client Sessions</h2>
              </div>
              <p class="text-xs text-slate-400">Layer 2 Tunneling Protocol (L2TP) multi-instance client manager with optional IPsec pre-shared key encapsulation.</p>
            </div>
            <div class="flex items-center gap-2">
              <button onclick="navigate('ppp'); switchPPPSubTab('l2tp')" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-cyan-300 border border-cyan-900/40 transition flex items-center gap-1.5" title="Configure Router as L2TP Server">
                <span>⚙ Server Settings</span>
              </button>
              <button onclick="openAddL2TPModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20 transition">
                + Add L2TP Client
              </button>
            </div>
          </div>

          <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <h3 class="text-sm font-bold text-white">Configured L2TP Clients</h3>
              <span id="l2tp-count-badge" class="text-xs font-mono bg-slate-800 text-slate-300 px-2.5 py-0.5 rounded-full">0 Clients</span>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Running, X=Disabled">Flag</th>
                    <th class="py-2.5 px-3">Name</th>
                    <th class="py-2.5 px-3">Server Address</th>
                    <th class="py-2.5 px-3">User</th>
                    <th class="py-2.5 px-3">Assigned IP</th>
                    <th class="py-2.5 px-3">Device</th>
                    <th class="py-2.5 px-3 text-center">Def. Route</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="l2tp-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="l2tp-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No L2TP clients configured. Click "+ Add L2TP Client" to add a tunnel.
            </div>
          </div>
        </section>

        <!-- ================= SECTION: PPTP CLIENT ================= -->
        <section id="section-pptp" class="hidden space-y-6">
          <div class="bg-gradient-to-r from-purple-950/40 via-slate-900 to-slate-900 border border-purple-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-purple-500/20 text-purple-300 border border-purple-500/30 font-semibold">/interface pptp-client</span>
                <h2 class="text-base font-bold text-white">PPTP Client Sessions</h2>
              </div>
              <p class="text-xs text-slate-400">Point-to-Point Tunneling Protocol (PPTP) client management with MPPE-128 stateful encryption and automated routing.</p>
            </div>
            <div class="flex items-center gap-2">
              <button onclick="navigate('ppp'); switchPPPSubTab('pptp')" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-purple-300 border border-purple-900/40 transition flex items-center gap-1.5" title="Configure Router as PPTP Server">
                <span>⚙ Server Settings</span>
              </button>
              <button onclick="openAddPPTPModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20 transition">
                + Add PPTP Client
              </button>
            </div>
          </div>

          <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <h3 class="text-sm font-bold text-white">Configured PPTP Clients</h3>
              <span id="pptp-count-badge" class="text-xs font-mono bg-slate-800 text-slate-300 px-2.5 py-0.5 rounded-full">0 Clients</span>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Running, X=Disabled">Flag</th>
                    <th class="py-2.5 px-3">Name</th>
                    <th class="py-2.5 px-3">Server Address</th>
                    <th class="py-2.5 px-3">User</th>
                    <th class="py-2.5 px-3">Assigned IP</th>
                    <th class="py-2.5 px-3">Device</th>
                    <th class="py-2.5 px-3 text-center">MPPE</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="pptp-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="pptp-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No PPTP clients configured. Click "+ Add PPTP Client" to add a tunnel.
            </div>
          </div>
        </section>

        <!-- ================= SECTION: PPP SERVERS & SECRETS (/ppp) ================= -->
        <section id="section-ppp" class="hidden space-y-6">
          <div class="bg-gradient-to-r from-violet-950/40 via-slate-900 to-slate-900 border border-violet-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-violet-500/20 text-violet-300 border border-violet-500/30 font-semibold">/ppp</span>
                <h2 class="text-base font-bold text-white">PPP Servers, Secrets & Profiles</h2>
              </div>
              <p class="text-xs text-slate-400">Centralized subscriber credentials, dynamic address assignment pools, and multi-protocol VPN access concentrators.</p>
            </div>

            <div class="flex items-center space-x-2.5">
              <button id="ppp-primary-add-btn" onclick="openCurrentPPPModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-violet-600 hover:bg-violet-500 text-white shadow-lg shadow-violet-500/20 transition flex items-center gap-1.5">
                <span>+ Add User (Secret)</span>
              </button>
            </div>
          </div>

          <!-- Sub Tabs: Secrets / Profiles / PPPoE Server / PPTP Server / L2TP Server / Active Sessions -->
          <div class="flex border-b border-slate-800 space-x-1 overflow-x-auto">
            <button id="ppp-subtab-btn-secrets" onclick="switchPPPSubTab('secrets')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-violet-500 text-white transition flex items-center gap-2 whitespace-nowrap">
              <span>Secrets (Users)</span>
              <span id="ppp-badge-secrets" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
            <button id="ppp-subtab-btn-profiles" onclick="switchPPPSubTab('profiles')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>Profiles (Pools)</span>
              <span id="ppp-badge-profiles" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
            <button id="ppp-subtab-btn-pppoe" onclick="switchPPPSubTab('pppoe')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>PPPoE Server</span>
              <span id="ppp-badge-pppoe-state" class="w-2 h-2 rounded-full bg-slate-600"></span>
            </button>
            <button id="ppp-subtab-btn-pptp" onclick="switchPPPSubTab('pptp')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>PPTP Server</span>
              <span id="ppp-badge-pptp-state" class="w-2 h-2 rounded-full bg-slate-600"></span>
            </button>
            <button id="ppp-subtab-btn-l2tp" onclick="switchPPPSubTab('l2tp')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>L2TP Server</span>
              <span id="ppp-badge-l2tp-state" class="w-2 h-2 rounded-full bg-slate-600"></span>
            </button>
            <button id="ppp-subtab-btn-active" onclick="switchPPPSubTab('active')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>Active Sessions</span>
              <span id="ppp-badge-active" class="px-1.5 py-0.2 rounded text-[10px] bg-emerald-950 text-emerald-400 border border-emerald-800/40">0</span>
            </button>
          </div>

          <!-- TAB 1: SECRETS (USERS) -->
          <div id="ppp-subtab-secrets" class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <h3 class="text-sm font-bold text-white">PPP Secrets (/ppp secret)</h3>
              <span id="secrets-count-badge" class="text-xs font-mono text-slate-400">0 Users</span>
            </div>
            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-12 text-center">Flag</th>
                    <th class="py-2.5 px-3">Name (Username)</th>
                    <th class="py-2.5 px-3">Service</th>
                    <th class="py-2.5 px-3">Profile</th>
                    <th class="py-2.5 px-3">Local Address</th>
                    <th class="py-2.5 px-3">Remote Address</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="secrets-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>
            <div id="secrets-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No PPP secrets configured. Click "+ Add User" to define an account.
            </div>
          </div>

          <!-- TAB 2: PROFILES (POOLS) -->
          <div id="ppp-subtab-profiles" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <h3 class="text-sm font-bold text-white">PPP Profiles (/ppp profile)</h3>
              <span id="profiles-count-badge" class="text-xs font-mono text-slate-400">0 Profiles</span>
            </div>
            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3">Profile Name</th>
                    <th class="py-2.5 px-3">Local Address</th>
                    <th class="py-2.5 px-3">Remote Address (Pool)</th>
                    <th class="py-2.5 px-3">DNS Servers</th>
                    <th class="py-2.5 px-3">Encryption</th>
                    <th class="py-2.5 px-3 text-center">Only One</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="profiles-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>
          </div>

          <!-- TAB 3: PPPoE SERVER -->
          <div id="ppp-subtab-pppoe" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl p-6">
            <form onsubmit="savePPPoEServerConfig(event)" class="max-w-2xl space-y-5">
              <div class="flex items-center justify-between border-b border-slate-800 pb-4">
                <div>
                  <h3 class="text-sm font-bold text-white">PPPoE Access Concentrator Server</h3>
                  <p class="text-xs text-slate-400">Listens on physical interface or VLAN for PPPoE Discovery (PADI) packets</p>
                </div>
                <div class="flex items-center gap-3">
                  <span id="pppoe-server-status-pill" class="px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-slate-800 text-slate-400">STOPPED</span>
                  <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" id="pppoe-server-enabled" class="sr-only peer">
                    <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                  </label>
                </div>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs font-sans">
                <div>
                  <label class="block text-slate-300 font-medium mb-1">Service Name</label>
                  <input type="text" id="pppoe-server-name" placeholder="proxmox-pppoe" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
                </div>
                <div>
                  <label class="block text-slate-300 font-medium mb-1">Listen Interface</label>
                  <select id="pppoe-server-iface" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
                </div>
                <div>
                  <label class="block text-slate-300 font-medium mb-1">Default Profile</label>
                  <select id="pppoe-server-profile" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
                </div>
                <div>
                  <label class="block text-slate-300 font-medium mb-1">Max MTU / MRU</label>
                  <input type="number" id="pppoe-server-mtu" value="1480" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
                </div>
              </div>
              <div class="flex items-center space-x-2 pt-2">
                <input type="checkbox" id="pppoe-server-onesession" class="rounded bg-slate-800 border-slate-700 text-blue-600">
                <label for="pppoe-server-onesession" class="text-xs text-slate-300">One Session Per Host (limit 1 PPPoE session per client MAC)</label>
              </div>
              <div class="pt-4 border-t border-slate-800 flex justify-end">
                <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-500/20 transition">
                  Apply PPPoE Server Settings
                </button>
              </div>
            </form>
          </div>

          <!-- TAB 4: PPTP SERVER -->
          <div id="ppp-subtab-pptp" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl p-6">
            <form onsubmit="savePPTPServerConfig(event)" class="max-w-2xl space-y-5">
              <div class="flex items-center justify-between border-b border-slate-800 pb-4">
                <div>
                  <h3 class="text-sm font-bold text-white">PPTP Server (/interface pptp-server server)</h3>
                  <p class="text-xs text-slate-400">Point-to-Point Tunneling Server listening on TCP port 1723 with MPPE-128 encryption</p>
                </div>
                <div class="flex items-center gap-3">
                  <span id="pptp-server-status-pill" class="px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-slate-800 text-slate-400">STOPPED</span>
                  <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" id="pptp-server-enabled" class="sr-only peer">
                    <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
                  </label>
                </div>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs font-sans">
                <div>
                  <label class="block text-slate-300 font-medium mb-1">Port</label>
                  <input type="number" id="pptp-server-port" value="1723" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
                </div>
                <div>
                  <label class="block text-slate-300 font-medium mb-1">Default Profile</label>
                  <select id="pptp-server-profile" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
                </div>
              </div>
              <div class="flex items-center space-x-2 pt-2">
                <input type="checkbox" id="pptp-server-mppe" checked class="rounded bg-slate-800 border-slate-700 text-purple-600">
                <label for="pptp-server-mppe" class="text-xs text-slate-300">Require 128-bit MPPE Encryption (MS-CHAPv2)</label>
              </div>
              <div class="pt-4 border-t border-slate-800 flex justify-end">
                <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20 transition">
                  Apply PPTP Server Settings
                </button>
              </div>
            </form>
          </div>

          <!-- TAB 5: L2TP SERVER -->
          <div id="ppp-subtab-l2tp" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl p-6">
            <form onsubmit="saveL2TPServerConfig(event)" class="max-w-2xl space-y-5">
              <div class="flex items-center justify-between border-b border-slate-800 pb-4">
                <div>
                  <h3 class="text-sm font-bold text-white">L2TP Server (/interface l2tp-server server)</h3>
                  <p class="text-xs text-slate-400">Layer 2 Tunneling Protocol Server listening on UDP port 1701 with optional IPSec</p>
                </div>
                <div class="flex items-center gap-3">
                  <span id="l2tp-server-status-pill" class="px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-slate-800 text-slate-400">STOPPED</span>
                  <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" id="l2tp-server-enabled" class="sr-only peer">
                    <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-600"></div>
                  </label>
                </div>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs font-sans">
                <div>
                  <label class="block text-slate-300 font-medium mb-1">Port</label>
                  <input type="number" id="l2tp-server-port" value="1701" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
                </div>
                <div>
                  <label class="block text-slate-300 font-medium mb-1">Default Profile</label>
                  <select id="l2tp-server-profile" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
                </div>
                <div>
                  <label class="block text-slate-300 font-medium mb-1">Use IPSec</label>
                  <select id="l2tp-server-useipsec" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
                    <option value="no">no</option>
                    <option value="yes">yes</option>
                    <option value="required">required</option>
                  </select>
                </div>
                <div>
                  <label class="block text-slate-300 font-medium mb-1">IPSec Secret (PSK)</label>
                  <input type="password" id="l2tp-server-ipsecsecret" placeholder="Optional Pre-Shared Key" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
                </div>
              </div>
              <div class="pt-4 border-t border-slate-800 flex justify-end">
                <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20 transition">
                  Apply L2TP Server Settings
                </button>
              </div>
            </form>
          </div>

          <!-- TAB 6: ACTIVE SESSIONS -->
          <div id="ppp-subtab-active" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <h3 class="text-sm font-bold text-white">Active PPP Connections (/ppp active)</h3>
              <button onclick="loadPPPSessions()" class="text-xs text-slate-400 hover:text-white px-2 py-1 rounded bg-slate-800">Refresh</button>
            </div>
            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3">Interface</th>
                    <th class="py-2.5 px-3">Username</th>
                    <th class="py-2.5 px-3">Service</th>
                    <th class="py-2.5 px-3">Client IP Address</th>
                    <th class="py-2.5 px-3">Uptime</th>
                    <th class="py-2.5 px-3">RX / TX Traffic</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="active-ppp-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>
            <div id="active-ppp-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No active PPP sessions currently connected.
            </div>
          </div>
        </section>

        <!-- ================= SECTION: EoIP TUNNELS (/interface eoip) ================= -->
        <section id="section-eoip" class="hidden space-y-6">
          <div class="bg-gradient-to-r from-emerald-950/40 via-slate-900 to-slate-900 border border-emerald-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 font-semibold">/interface eoip</span>
                <h2 class="text-base font-bold text-white">EoIP Tunnels (Ethernet over IP)</h2>
              </div>
              <p class="text-xs text-slate-400">Ethernet over IP (EoIP / GRETAP) encapsulation protocol to transparently bridge Layer 2 broadcast domains across IP networks.</p>
            </div>
            <button onclick="openAddEoIPModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20 transition flex items-center gap-1.5">
              <span>+ Add EoIP Tunnel</span>
            </button>
          </div>

          <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <h3 class="text-sm font-bold text-white">Configured EoIP Interfaces</h3>
              <span id="eoip-count-badge" class="text-xs font-mono bg-slate-800 text-slate-300 px-2.5 py-0.5 rounded-full">0 Tunnels</span>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-12 text-center" title="Flags: R=Running, X=Disabled">Flag</th>
                    <th class="py-2.5 px-3">Name</th>
                    <th class="py-2.5 px-3">Tunnel ID</th>
                    <th class="py-2.5 px-3">Tunnel IP</th>
                    <th class="py-2.5 px-3">Remote Address</th>
                    <th class="py-2.5 px-3">Local Address</th>
                    <th class="py-2.5 px-3">MAC Address</th>
                    <th class="py-2.5 px-3">MTU</th>
                    <th class="py-2.5 px-3">RX / TX Traffic</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="eoip-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="eoip-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No EoIP tunnels configured. Click "+ Add EoIP Tunnel" to create one.
            </div>
          </div>
        </section>

        <!-- ================= SECTION: FIREWALL (/ip firewall) ================= -->
        <section id="section-firewall" class="hidden space-y-6">
          <div class="bg-gradient-to-r from-emerald-950/40 via-slate-900 to-slate-900 border border-emerald-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 font-semibold">/ip firewall</span>
                <h2 class="text-base font-bold text-white">Firewall & Traffic Controller</h2>
              </div>
              <p class="text-xs text-slate-400">Enterprise stateful inspection firewall, network address translation (NAT), packet marking (Mangle), IP address lists, and active connection tracking (conntrack).</p>
            </div>

            <div class="flex items-center space-x-2.5">
              <button id="fw-primary-add-btn" onclick="openCurrentFWModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20 transition flex items-center gap-1.5">
                <span>+ Add Rule</span>
              </button>
              <button onclick="resetFirewallCounters()" class="text-xs font-medium px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition" title="Reset all packet & byte counters to zero">
                Reset Counters
              </button>
            </div>
          </div>

          <!-- Sub Tabs: Filter / NAT / Mangle / Address Lists / Connections -->
          <div class="flex border-b border-slate-800 space-x-1 overflow-x-auto">
            <button id="fw-subtab-btn-filter" onclick="switchFWSubTab('filter')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-emerald-500 text-white transition flex items-center gap-2 whitespace-nowrap">
              <span>Filter Rules</span>
              <span id="fw-badge-filter" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
            <button id="fw-subtab-btn-nat" onclick="switchFWSubTab('nat')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>NAT</span>
              <span id="fw-badge-nat" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
            <button id="fw-subtab-btn-mangle" onclick="switchFWSubTab('mangle')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>Mangle</span>
              <span id="fw-badge-mangle" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
            <button id="fw-subtab-btn-addrlist" onclick="switchFWSubTab('addrlist')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>Address Lists</span>
              <span id="fw-badge-addrlist" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
            <button id="fw-subtab-btn-geo" onclick="switchFWSubTab('geo')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>Geo-Location</span>
              <span id="fw-badge-geo" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
            <button id="fw-subtab-btn-connections" onclick="switchFWSubTab('connections')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>Connections</span>
              <span id="fw-badge-connections" class="px-1.5 py-0.2 rounded text-[10px] bg-emerald-950 text-emerald-400 border border-emerald-800/40">0</span>
            </button>
          </div>

          <!-- ================= TAB 1: FILTER RULES ================= -->
          <div id="fw-subtab-filter" class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
              <div class="flex items-center gap-3">
                <h3 class="text-sm font-bold text-white">Firewall Filter Rules</h3>
                <span id="filter-count-badge" class="text-xs font-mono text-slate-400">0 Rules</span>
              </div>
              <div class="flex items-center gap-2">
                <label class="text-xs text-slate-400 font-sans">Chain:</label>
                <select id="filter-filter-chain" onchange="renderFilterRules()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white font-mono">
                  <option value="">All Chains</option>
                  <option value="input">input</option>
                  <option value="forward">forward</option>
                  <option value="output">output</option>
                </select>
              </div>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-10 text-center">#</th>
                    <th class="py-2.5 px-3 w-12 text-center" title="Flags: X=Disabled, C=Comment">Flag</th>
                    <th class="py-2.5 px-3">Chain</th>
                    <th class="py-2.5 px-3">Src. Address</th>
                    <th class="py-2.5 px-3">Dst. Address</th>
                    <th class="py-2.5 px-3">Protocol</th>
                    <th class="py-2.5 px-3">Ports</th>
                    <th class="py-2.5 px-3">In / Out</th>
                    <th class="py-2.5 px-3">Action</th>
                    <th class="py-2.5 px-3">Packets / Bytes</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Order & Actions</th>
                  </tr>
                </thead>
                <tbody id="filter-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="filter-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No filter rules found in this chain. Click "+ Add Rule" to create one.
            </div>
          </div>

          <!-- ================= TAB 2: NAT RULES ================= -->
          <div id="fw-subtab-nat" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
              <div class="flex items-center gap-3">
                <h3 class="text-sm font-bold text-white">NAT Rules</h3>
                <span id="nat-count-badge" class="text-xs font-mono text-slate-400">0 Rules</span>
              </div>
              <div class="flex items-center gap-2">
                <label class="text-xs text-slate-400 font-sans">Chain:</label>
                <select id="nat-filter-chain" onchange="renderNATRules()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white font-mono">
                  <option value="">All Chains</option>
                  <option value="srcnat">srcnat (SNAT / Masquerade)</option>
                  <option value="dstnat">dstnat (Port Forwarding)</option>
                </select>
              </div>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-10 text-center">#</th>
                    <th class="py-2.5 px-3 w-12 text-center">Flag</th>
                    <th class="py-2.5 px-3">Chain</th>
                    <th class="py-2.5 px-3">Src. Address</th>
                    <th class="py-2.5 px-3">Dst. Address</th>
                    <th class="py-2.5 px-3">Proto/Port</th>
                    <th class="py-2.5 px-3">Out / In</th>
                    <th class="py-2.5 px-3">Action</th>
                    <th class="py-2.5 px-3">To Address:Port</th>
                    <th class="py-2.5 px-3">Packets / Bytes</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Order & Actions</th>
                  </tr>
                </thead>
                <tbody id="nat-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="nat-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No NAT rules configured. Click "+ Add Rule" to add masquerade or port forwarding.
            </div>
          </div>

          <!-- ================= TAB 3: MANGLE RULES ================= -->
          <div id="fw-subtab-mangle" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
              <div class="flex items-center gap-3">
                <h3 class="text-sm font-bold text-white">Mangle Packet & Connection Marking</h3>
                <span id="mangle-count-badge" class="text-xs font-mono text-slate-400">0 Rules</span>
              </div>
              <div class="flex items-center gap-2">
                <label class="text-xs text-slate-400 font-sans">Chain:</label>
                <select id="mangle-filter-chain" onchange="renderMangleRules()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white font-mono">
                  <option value="">All Chains</option>
                  <option value="prerouting">prerouting</option>
                  <option value="forward">forward</option>
                  <option value="postrouting">postrouting</option>
                  <option value="input">input</option>
                  <option value="output">output</option>
                </select>
              </div>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-10 text-center">#</th>
                    <th class="py-2.5 px-3 w-12 text-center">Flag</th>
                    <th class="py-2.5 px-3">Chain</th>
                    <th class="py-2.5 px-3">Src. Address</th>
                    <th class="py-2.5 px-3">Dst. Address</th>
                    <th class="py-2.5 px-3">Action</th>
                    <th class="py-2.5 px-3">New Mark / Value</th>
                    <th class="py-2.5 px-3 text-center">Pass</th>
                    <th class="py-2.5 px-3">Packets / Bytes</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Order & Actions</th>
                  </tr>
                </thead>
                <tbody id="mangle-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="mangle-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No mangle rules configured. Click "+ Add Rule" to mark connections or routing for Multi-WAN.
            </div>
          </div>

          <!-- ================= TAB 4: ADDRESS LISTS ================= -->
          <div id="fw-subtab-addrlist" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
              <div class="flex items-center gap-3">
                <h3 class="text-sm font-bold text-white">Address Lists (ipset)</h3>
                <span id="addrlist-count-badge" class="text-xs font-mono text-slate-400">0 Entries</span>
              </div>
              <div class="flex items-center gap-2">
                <label class="text-xs text-slate-400 font-sans">List:</label>
                <select id="addrlist-filter-name" onchange="renderAddressLists()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white font-mono">
                  <option value="">All Lists</option>
                </select>
              </div>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-10 text-center">#</th>
                    <th class="py-2.5 px-3 w-12 text-center">Flag</th>
                    <th class="py-2.5 px-3">List Name</th>
                    <th class="py-2.5 px-3">IP Address / CIDR</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="addrlist-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="addrlist-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No address list entries configured. Click "+ Add Item" to define a group of IPs/subnets.
            </div>
          </div>

          <!-- ================= TAB 5: ACTIVE CONNECTIONS ================= -->
          <div id="fw-subtab-connections" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
              <div class="flex items-center gap-3">
                <h3 class="text-sm font-bold text-white">Active Conntrack Connections</h3>
                <span id="conns-count-badge" class="text-xs font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 px-2 py-0.5 rounded-full">0 Flows</span>
              </div>
              <div class="flex items-center gap-2 flex-wrap">
                <input type="text" id="conns-search-input" oninput="renderConnections()" placeholder="Filter IP, port..." class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1 text-xs text-white font-mono focus:outline-none focus:border-emerald-500">
                <select id="conns-filter-proto" onchange="renderConnections()" class="bg-slate-800 border border-slate-700 rounded-lg px-2 py-1 text-xs text-white font-mono">
                  <option value="">All Proto</option>
                  <option value="TCP">TCP</option>
                  <option value="UDP">UDP</option>
                  <option value="ICMP">ICMP</option>
                </select>
                <button onclick="loadConnections()" class="text-xs text-emerald-400 hover:text-emerald-300 font-semibold px-2 py-1 bg-slate-800 rounded border border-slate-700">Refresh</button>
              </div>
            </div>

            <div class="overflow-x-auto max-h-[550px] overflow-y-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/80 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans sticky top-0 z-10 backdrop-blur-sm">
                  <tr>
                    <th class="py-2.5 px-3">Proto</th>
                    <th class="py-2.5 px-3">Source Address</th>
                    <th class="py-2.5 px-3">Destination Address</th>
                    <th class="py-2.5 px-3">Reply Source</th>
                    <th class="py-2.5 px-3">Reply Dest</th>
                    <th class="py-2.5 px-3">TCP State</th>
                    <th class="py-2.5 px-3">Mark</th>
                    <th class="py-2.5 px-3">Timeout</th>
                    <th class="py-2.5 px-3 text-right font-sans">Action</th>
                  </tr>
                </thead>
                <tbody id="conns-table-body" class="divide-y divide-slate-800/60"></tbody>
              </table>
            </div>

            <div id="conns-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No active connections found matching your search.
            </div>
          </div>

          <!-- ================= TAB 5: GEO-LOCATION ================= -->
          <div id="fw-subtab-geo" class="hidden space-y-4">
            <!-- Geo Header & Scheduler Status -->
            <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-4 flex flex-wrap items-center justify-between gap-4">
              <div class="flex items-center space-x-3">
                <div class="p-2.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 text-emerald-400">
                  <span class="text-xl">🌍</span>
                </div>
                <div>
                  <div class="flex items-center gap-2">
                    <h3 class="text-sm font-bold text-white">Geo-Location IP Filtering</h3>
                    <span id="geo-status-badge" class="px-2 py-0.5 rounded text-[10px] font-mono font-bold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">Auto-Update ON</span>
                  </div>
                  <p class="text-xs text-slate-400">Aggregated country CIDR databases loaded into Linux kernel <code class="text-emerald-300">ipset</code>. Usable anywhere in Filter, NAT, and Mangle rules.</p>
                </div>
              </div>

              <!-- Controls -->
              <div class="flex items-center flex-wrap gap-2">
                <div class="flex items-center space-x-1.5 bg-slate-950/60 border border-slate-800 px-3 py-1.5 rounded-lg text-xs font-mono">
                  <span class="text-slate-400">Schedule:</span>
                  <span id="geo-interval-label" class="font-bold text-white">Every 24h</span>
                </div>
                <button onclick="openGeoIntervalModal()" class="text-xs font-semibold px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 transition">
                  ⚙️ Settings
                </button>
                <button id="geo-btn-update-now" onclick="triggerGeoUpdateNow()" class="text-xs font-semibold px-3.5 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20 transition flex items-center gap-1.5">
                  <span id="geo-update-spinner" class="hidden animate-spin text-xs">⏳</span>
                  <span>🔄 Update Now</span>
                </button>
              </div>
            </div>

            <!-- Stats Bar -->
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
              <div class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3">
                <span class="text-[10px] uppercase font-bold text-slate-500 block">Countries in Rules</span>
                <span id="geo-stat-active-countries" class="text-base font-bold font-mono text-emerald-400">0</span>
              </div>
              <div class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3">
                <span class="text-[10px] uppercase font-bold text-slate-500 block">Total Subnets in Kernel</span>
                <span id="geo-stat-total-subnets" class="text-base font-bold font-mono text-cyan-400">0</span>
              </div>
              <div class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3">
                <span class="text-[10px] uppercase font-bold text-slate-500 block">Last Synced</span>
                <span id="geo-stat-last-sync" class="text-xs font-mono text-slate-300">-</span>
              </div>
              <div class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3">
                <span class="text-[10px] uppercase font-bold text-slate-500 block">Next Scheduled Run</span>
                <span id="geo-stat-next-sync" class="text-xs font-mono text-slate-300">-</span>
              </div>
            </div>

            <!-- Filters & Country Table -->
            <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
              <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
                <div class="flex items-center flex-wrap gap-2">
                  <input type="text" id="geo-search-input" oninput="renderGeoCountries()" placeholder="Search country name or code (e.g. Greece, GR, Germany)..." class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 w-64">

                  <select id="geo-continent-filter" onchange="renderGeoCountries()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-white font-mono">
                    <option value="">All Continents</option>
                    <option value="Europe">Europe</option>
                    <option value="Asia">Asia</option>
                    <option value="Americas">Americas</option>
                    <option value="Africa">Africa</option>
                    <option value="Oceania">Oceania</option>
                  </select>

                  <label class="flex items-center space-x-1.5 text-xs text-slate-300 cursor-pointer ml-2">
                    <input type="checkbox" id="geo-filter-inuse-only" onchange="renderGeoCountries()" class="rounded bg-slate-800 border-slate-700 text-emerald-500">
                    <span>In Use by Rules only</span>
                  </label>

                  <label class="flex items-center space-x-1.5 text-xs text-slate-300 cursor-pointer ml-2">
                    <input type="checkbox" id="geo-filter-cached-only" onchange="renderGeoCountries()" class="rounded bg-slate-800 border-slate-700 text-cyan-500">
                    <span>Cached Only</span>
                  </label>
                </div>

                <div class="flex items-center space-x-2">
                  <span class="text-xs text-slate-400 font-sans">Quick Filter:</span>
                  <button onclick="quickFilterGeo('GR')" class="px-2.5 py-1 text-xs rounded bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 font-mono">🇬🇷 GR</button>
                  <button onclick="quickFilterGeo('Europe')" class="px-2.5 py-1 text-xs rounded bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 font-mono">🇪🇺 Europe</button>
                  <button onclick="quickFilterGeo('HIGHRISK')" class="px-2.5 py-1 text-xs rounded bg-rose-950/40 hover:bg-rose-900/50 text-rose-300 border border-rose-800/50 font-mono">🚫 High-Risk</button>
                  <button onclick="quickFilterGeo('')" class="px-2.5 py-1 text-xs rounded bg-slate-800 hover:bg-slate-700 text-slate-400 border border-slate-700 font-mono">Reset</button>
                </div>
              </div>

              <div class="overflow-x-auto max-h-[600px] overflow-y-auto">
                <table class="w-full text-left text-xs font-mono">
                  <thead class="text-slate-400 bg-slate-950/80 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans sticky top-0 z-10 backdrop-blur-sm">
                    <tr>
                      <th class="py-2.5 px-3 w-16 text-center">Code</th>
                      <th class="py-2.5 px-3">Country Name</th>
                      <th class="py-2.5 px-3">Continent</th>
                      <th class="py-2.5 px-3">Subnets</th>
                      <th class="py-2.5 px-3">Kernel IPSet</th>
                      <th class="py-2.5 px-3">Rule Usage</th>
                      <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                    </tr>
                  </thead>
                  <tbody id="geo-table-body" class="divide-y divide-slate-800/60"></tbody>
                </table>
              </div>

              <div id="geo-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
                No countries found matching your search.
              </div>
            </div>
          </div>
        </section>

        <!-- ================= SECTION: ROUTES & POLICY (/ip route & rules) ================= -->
        <section id="section-routes" class="hidden space-y-6">
          <!-- Top Routing Switcher Bar -->
          <div class="flex items-center gap-1.5 p-1 bg-slate-900/90 border border-slate-800 rounded-xl w-fit">
            <button onclick="navigate('routes')" class="px-3.5 py-1.5 text-xs font-bold rounded-lg transition bg-cyan-600/20 text-cyan-300 border border-cyan-500/40 shadow-sm flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
              </svg>
              <span>Routes & Policy (/ip route)</span>
            </button>
            <button onclick="navigate('bgp')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
              </svg>
              <span>BGP (/routing bgp)</span>
            </button>
            <button onclick="navigate('ospf')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
              <span>OSPF (/routing ospf)</span>
            </button>
            <button onclick="navigate('routing-filters')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
              </svg>
              <span>Filters (/routing filter)</span>
            </button>
          </div>

          <div class="bg-gradient-to-r from-cyan-950/40 via-slate-900 to-slate-900 border border-cyan-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-cyan-500/20 text-cyan-300 border border-cyan-500/30 font-semibold">/ip route</span>
                <h2 class="text-base font-bold text-white">IP Routes & Policy Rules</h2>
              </div>
              <p class="text-xs text-slate-400">Kernel FIB/RIB routing tables, static gateways, multipath uplinks, and policy routing (ip rule / fwmark lookup).</p>
            </div>

            <div class="flex items-center space-x-2.5">
              <button onclick="openAddRouteModal()" class="text-xs font-semibold px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20 transition">
                + Add Route
              </button>
              <button onclick="openAddPolicyRuleModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-white border border-slate-700 transition">
                + Add Rule
              </button>
              <button onclick="openAddTableModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition">
                + New Table
              </button>
            </div>
          </div>

          <!-- Sub Tabs: Routes / Policy Rules / Tables -->
          <div class="flex border-b border-slate-800 space-x-1">
            <button id="routes-subtab-btn-routes" onclick="switchRoutesSubTab('routes')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-cyan-500 text-white transition flex items-center gap-2">
              <span>Routes</span>
              <span id="routes-badge-routes" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
            <button id="routes-subtab-btn-rules" onclick="switchRoutesSubTab('rules')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2">
              <span>Policy Rules (/ip route rule)</span>
              <span id="routes-badge-rules" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
            <button id="routes-subtab-btn-tables" onclick="switchRoutesSubTab('tables')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2">
              <span>Routing Tables</span>
              <span id="routes-badge-tables" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
          </div>

          <!-- Sub-Tab 1: Routes Table -->
          <div id="routes-subtab-routes" class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
              <div class="flex items-center gap-3">
                <h3 class="text-sm font-bold text-white">Active Routing Table (RIB)</h3>
                <span id="routes-count-badge" class="text-xs font-mono text-slate-400">0 Routes</span>
              </div>
              <div class="flex items-center gap-2">
                <label class="text-xs text-slate-400 font-sans">Table Filter:</label>
                <select id="routes-filter-table" onchange="renderRoutesList()" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-xs text-white font-mono">
                  <option value="">All Tables</option>
                  <option value="main">main</option>
                </select>
                <button onclick="loadRoutes()" class="text-xs text-cyan-400 hover:text-cyan-300 font-semibold px-2 py-1 bg-slate-800 rounded border border-slate-700">Refresh</button>
              </div>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-16 text-center" title="Flags: D=Dynamic, A=Active, C=Connect, S=Static, X=Disabled">Flags</th>
                    <th class="py-2.5 px-3">Dst. Address</th>
                    <th class="py-2.5 px-3">Gateway</th>
                    <th class="py-2.5 px-3">Distance</th>
                    <th class="py-2.5 px-3">Table / Mark</th>
                    <th class="py-2.5 px-3">Interface</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="routes-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="routes-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No routes found.
            </div>
          </div>

          <!-- Sub-Tab 2: Policy Rules (/ip route rule) -->
          <div id="routes-subtab-rules" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
              <div class="flex items-center gap-3">
                <h3 class="text-sm font-bold text-white">Policy Routing Rules (ip rule)</h3>
                <span id="rules-count-badge" class="text-xs font-mono text-slate-400">0 Rules</span>
              </div>
              <div class="flex items-center gap-2">
                <label class="flex items-center gap-1.5 text-xs text-slate-400 hover:text-white cursor-pointer select-none bg-slate-800/80 hover:bg-slate-800 border border-slate-700/80 px-2.5 py-1 rounded-lg transition">
                  <input type="checkbox" id="prule-show-system" onchange="renderPolicyRules()" class="rounded bg-slate-900 border-slate-700 text-cyan-500 focus:ring-0 w-3.5 h-3.5">
                  <span>Show System / Default Rules</span>
                </label>
                <button onclick="loadRoutes()" class="text-xs text-cyan-400 hover:text-cyan-300 font-semibold px-2 py-1 bg-slate-800 rounded border border-slate-700">Refresh</button>
              </div>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-16">Pref</th>
                    <th class="py-2.5 px-3">Src. Address</th>
                    <th class="py-2.5 px-3">Dst. Address</th>
                    <th class="py-2.5 px-3">Routing Mark (fwmark)</th>
                    <th class="py-2.5 px-3">Lookup Table</th>
                    <th class="py-2.5 px-3">Action</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="rules-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>

            <div id="rules-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No policy rules configured. Click "+ Add Rule" to route traffic based on routing-mark or source IP.
            </div>
          </div>

          <!-- Sub-Tab 3: Routing Tables -->
          <div id="routes-subtab-tables" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <h3 class="text-sm font-bold text-white">Defined Routing Tables (/etc/iproute2/rt_tables)</h3>
              <span id="tables-count-badge" class="text-xs font-mono text-slate-400">0 Tables</span>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-20">FIB ID</th>
                    <th class="py-2.5 px-3">Table Name</th>
                    <th class="py-2.5 px-3">Comment / Purpose</th>
                  </tr>
                </thead>
                <tbody id="tables-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>
          </div>
        </section>

        <!-- ================= SECTION: BGP ROUTING (/routing bgp) ================= -->
        <section id="section-bgp" class="hidden space-y-6">
          <!-- Top Routing Switcher Bar -->
          <div class="flex items-center gap-1.5 p-1 bg-slate-900/90 border border-slate-800 rounded-xl w-fit">
            <button onclick="navigate('routes')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
              </svg>
              <span>Routes & Policy (/ip route)</span>
            </button>
            <button onclick="navigate('bgp')" class="px-3.5 py-1.5 text-xs font-bold rounded-lg transition bg-purple-600/20 text-purple-300 border border-purple-500/40 shadow-sm flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
              </svg>
              <span>BGP (/routing bgp)</span>
            </button>
            <button onclick="navigate('ospf')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
              <span>OSPF (/routing ospf)</span>
            </button>
            <button onclick="navigate('routing-filters')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
              </svg>
              <span>Filters (/routing filter)</span>
            </button>
          </div>

          <div class="bg-gradient-to-r from-purple-950/40 via-slate-900 to-slate-900 border border-purple-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-purple-500/20 text-purple-300 border border-purple-500/30 font-semibold">/routing bgp</span>
                <h2 class="text-base font-bold text-white">BGP Dynamic Routing</h2>
                <span id="bgp-live-status-pill" class="text-[10px] px-2 py-0.5 rounded font-mono bg-slate-800 text-slate-400 border border-slate-700">Checking...</span>
              </div>
              <p class="text-xs text-slate-400">High-Performance BIRD 2 BGP Engine: Multi-Instance / Multi-AS peering sessions, programmable route filters, prefix announcements, and BGP routing table (RIB).</p>
            </div>

            <div class="flex items-center space-x-2 flex-wrap gap-y-2">
              <button onclick="openBgpInstanceModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-purple-300 border border-purple-900/50 transition flex items-center gap-1.5">
                <span>⚙ BGP Settings</span>
              </button>
              <button onclick="openAddBgpPeerModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20 transition">
                + Add BGP Peer
              </button>
              <button onclick="openAddBgpNetworkModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition">
                + Add Network
              </button>
              <button onclick="loadDynamicRouting()" class="text-xs text-slate-400 hover:text-white px-2.5 py-2 bg-slate-800 rounded-lg border border-slate-700 transition">
                Refresh
              </button>
            </div>
          </div>

          <!-- BGP Sub-Tabs -->
          <div class="flex border-b border-slate-800 space-x-1 overflow-x-auto">
            <button id="bgp-subtab-btn-bgp-peers" onclick="switchBgpSubTab('bgp-peers')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-purple-500 text-white transition flex items-center gap-2 whitespace-nowrap">
              <span>BGP Peers (/routing bgp connection)</span>
              <span id="dyn-badge-bgp-peers" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
            <button id="bgp-subtab-btn-bgp-nets" onclick="switchBgpSubTab('bgp-nets')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>Advertised Networks (/routing bgp network)</span>
              <span id="dyn-badge-bgp-nets" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
            <button id="bgp-subtab-btn-bgp-routes" onclick="switchBgpSubTab('bgp-routes')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>BGP Routes (RIB)</span>
              <span id="dyn-badge-bgp-routes" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
          </div>

          <!-- Sub-Tab 1: BGP Peers -->
          <div id="dyn-subtab-bgp-peers" class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
              <div class="flex items-center gap-3">
                <h3 class="text-sm font-bold text-white">Configured BGP Peers</h3>
                <span id="bgp-peers-count-badge" class="text-xs font-mono text-slate-400">0 Peers</span>
                <span id="bgp-live-status-pill" class="text-[10px] px-2 py-0.5 rounded font-mono bg-slate-800 text-slate-400 border border-slate-700">Checking...</span>
              </div>
              <div class="flex items-center gap-2">
                <button onclick="loadDynamicRouting()" class="text-xs text-purple-400 hover:text-purple-300 font-semibold px-2.5 py-1 bg-slate-800 rounded border border-slate-700">Refresh</button>
              </div>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-16 text-center">Flags</th>
                    <th class="py-2.5 px-3">Name</th>
                    <th class="py-2.5 px-3">Remote Address</th>
                    <th class="py-2.5 px-3">Remote AS</th>
                    <th class="py-2.5 px-3">State</th>
                    <th class="py-2.5 px-3">Uptime</th>
                    <th class="py-2.5 px-3">Prefixes (RX/TX)</th>
                    <th class="py-2.5 px-3">Routing Filters</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="bgp-peers-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>
            <div id="bgp-peers-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No BGP peers configured. Click "+ Add BGP Peer" to establish an eBGP or iBGP peering session.
            </div>
          </div>

          <!-- Sub-Tab 2: BGP Networks -->
          <div id="dyn-subtab-bgp-nets" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <div class="flex items-center gap-3">
                <h3 class="text-sm font-bold text-white">Advertised BGP Networks (/routing bgp network)</h3>
                <span id="bgp-nets-count-badge" class="text-xs font-mono text-slate-400">0 Networks</span>
              </div>
              <button onclick="openAddBgpNetworkModal()" class="text-xs font-semibold px-3 py-1.5 rounded-lg bg-purple-600 hover:bg-purple-500 text-white transition">
                + Add Network
              </button>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3">Network (CIDR)</th>
                    <th class="py-2.5 px-3">Status</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="bgp-nets-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>
            <div id="bgp-nets-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No networks advertised. Click "+ Add Network" to announce your IP prefixes to BGP peers.
            </div>
          </div>

          <!-- Sub-Tab 3: BGP Routes -->
          <div id="dyn-subtab-bgp-routes" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <h3 class="text-sm font-bold text-white">BGP Routing Information Base (show ip bgp)</h3>
              <span id="bgp-routes-count-badge" class="text-xs font-mono text-slate-400">0 Routes</span>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3">Prefix</th>
                    <th class="py-2.5 px-3">Next Hop</th>
                    <th class="py-2.5 px-3">Metric</th>
                    <th class="py-2.5 px-3">Weight</th>
                    <th class="py-2.5 px-3">AS Path</th>
                    <th class="py-2.5 px-3">Origin</th>
                  </tr>
                </thead>
                <tbody id="bgp-routes-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>
            <div id="bgp-routes-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No active routes in BGP table. Check peer connections and ensure BGP is enabled.
            </div>
          </div>
        </section>

        <!-- ================= SECTION: OSPF ROUTING (/routing ospf) ================= -->
        <section id="section-ospf" class="hidden space-y-6">
          <!-- Top Routing Switcher Bar -->
          <div class="flex items-center gap-1.5 p-1 bg-slate-900/90 border border-slate-800 rounded-xl w-fit">
            <button onclick="navigate('routes')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
              </svg>
              <span>Routes & Policy (/ip route)</span>
            </button>
            <button onclick="navigate('bgp')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
              </svg>
              <span>BGP (/routing bgp)</span>
            </button>
            <button onclick="navigate('ospf')" class="px-3.5 py-1.5 text-xs font-bold rounded-lg transition bg-indigo-600/20 text-indigo-300 border border-indigo-500/40 shadow-sm flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
              <span>OSPF (/routing ospf)</span>
            </button>
            <button onclick="navigate('routing-filters')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
              </svg>
              <span>Filters (/routing filter)</span>
            </button>
          </div>

          <div class="bg-gradient-to-r from-indigo-950/40 via-slate-900 to-slate-900 border border-indigo-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 font-semibold">/routing ospf</span>
                <h2 class="text-base font-bold text-white">OSPF Dynamic Routing</h2>
                <span id="ospf-live-status-pill" class="text-[10px] px-2 py-0.5 rounded font-mono bg-slate-800 text-slate-400 border border-slate-700">Checking...</span>
              </div>
              <p class="text-xs text-slate-400">High-Performance BIRD 2 OSPFv2 Engine: Link-state interior gateway routing, multi-area topologies, and neighbor adjacencies.</p>
            </div>

            <div class="flex items-center space-x-2 flex-wrap gap-y-2">
              <button onclick="openOspfInstanceModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-indigo-300 border border-indigo-900/50 transition flex items-center gap-1.5">
                <span>⚙ OSPF Settings</span>
              </button>
              <button onclick="openAddOspfInterfaceModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white shadow-lg shadow-indigo-500/20 transition">
                + Add OSPF Interface
              </button>
              <button onclick="openAddOspfAreaModal()" class="text-xs font-semibold px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition">
                + Add Area
              </button>
              <button onclick="loadDynamicRouting()" class="text-xs text-slate-400 hover:text-white px-2.5 py-2 bg-slate-800 rounded-lg border border-slate-700 transition">
                Refresh
              </button>
            </div>
          </div>

          <!-- OSPF Sub-Tabs -->
          <div class="flex border-b border-slate-800 space-x-1 overflow-x-auto">
            <button id="ospf-subtab-btn-ospf-ifaces" onclick="switchOspfSubTab('ospf-ifaces')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-indigo-500 text-white transition flex items-center gap-2 whitespace-nowrap">
              <span>OSPF Interfaces</span>
              <span id="dyn-badge-ospf-ifaces" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
            <button id="ospf-subtab-btn-ospf-areas" onclick="switchOspfSubTab('ospf-areas')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>OSPF Areas</span>
              <span id="dyn-badge-ospf-areas" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
            <button id="ospf-subtab-btn-ospf-nbrs" onclick="switchOspfSubTab('ospf-nbrs')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>OSPF Neighbors</span>
              <span id="dyn-badge-ospf-nbrs" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
            <button id="ospf-subtab-btn-ospf-routes" onclick="switchOspfSubTab('ospf-routes')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>OSPF Routes</span>
              <span id="dyn-badge-ospf-routes" class="px-1.5 py-0.2 rounded text-[10px] bg-slate-800 text-slate-300">0</span>
            </button>
          </div>

          <!-- Sub-Tab 4: OSPF Interfaces -->
          <div id="dyn-subtab-ospf-ifaces" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between flex-wrap gap-3">
              <div class="flex items-center gap-3">
                <h3 class="text-sm font-bold text-white">OSPF Interface Templates (/routing ospf interface-template)</h3>
                <span id="ospf-ifaces-count-badge" class="text-xs font-mono text-slate-400">0 Interfaces</span>
                <span id="ospf-live-status-pill" class="text-[10px] px-2 py-0.5 rounded font-mono bg-slate-800 text-slate-400 border border-slate-700">Checking...</span>
              </div>
              <button onclick="openAddOspfInterfaceModal()" class="text-xs font-semibold px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white transition">
                + Add Interface
              </button>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 w-16 text-center">Flags</th>
                    <th class="py-2.5 px-3">Network (CIDR)</th>
                    <th class="py-2.5 px-3">Area</th>
                    <th class="py-2.5 px-3">Interface</th>
                    <th class="py-2.5 px-3">Cost</th>
                    <th class="py-2.5 px-3">Priority</th>
                    <th class="py-2.5 px-3">Timers (H/D)</th>
                    <th class="py-2.5 px-3">Auth</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="ospf-ifaces-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>
            <div id="ospf-ifaces-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No OSPF interfaces configured. Click "+ Add OSPF Interface" to enable OSPF on local subnets.
            </div>
          </div>

          <!-- Sub-Tab 5: OSPF Areas -->
          <div id="dyn-subtab-ospf-areas" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <div class="flex items-center gap-3">
                <h3 class="text-sm font-bold text-white">OSPF Areas (/routing ospf area)</h3>
                <span id="ospf-areas-count-badge" class="text-xs font-mono text-slate-400">0 Areas</span>
              </div>
              <button onclick="openAddOspfAreaModal()" class="text-xs font-semibold px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white transition">
                + Add Area
              </button>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3">Name</th>
                    <th class="py-2.5 px-3">Area ID</th>
                    <th class="py-2.5 px-3">Type</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="ospf-areas-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>
          </div>

          <!-- Sub-Tab 6: OSPF Neighbors -->
          <div id="dyn-subtab-ospf-nbrs" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <h3 class="text-sm font-bold text-white">Live OSPF Neighbors (show ip ospf neighbor)</h3>
              <span id="ospf-nbrs-count-badge" class="text-xs font-mono text-slate-400">0 Neighbors</span>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3">Neighbor ID</th>
                    <th class="py-2.5 px-3">IP Address</th>
                    <th class="py-2.5 px-3">Interface</th>
                    <th class="py-2.5 px-3">Area</th>
                    <th class="py-2.5 px-3">State</th>
                    <th class="py-2.5 px-3">Dead Timer</th>
                  </tr>
                </thead>
                <tbody id="ospf-nbrs-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>
            <div id="ospf-nbrs-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No active OSPF neighbors discovered. Ensure neighbors are in the same subnet and hello/dead timers match.
            </div>
          </div>

          <!-- Sub-Tab 7: OSPF Routes -->
          <div id="dyn-subtab-ospf-routes" class="hidden bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <h3 class="text-sm font-bold text-white">OSPF Routing Table (show ip ospf route)</h3>
              <span id="ospf-routes-count-badge" class="text-xs font-mono text-slate-400">0 Routes</span>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3">Prefix</th>
                    <th class="py-2.5 px-3">Type</th>
                    <th class="py-2.5 px-3">Cost</th>
                    <th class="py-2.5 px-3">Area</th>
                    <th class="py-2.5 px-3">Next Hop / Dev</th>
                  </tr>
                </thead>
                <tbody id="ospf-routes-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>
            <div id="ospf-routes-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No OSPF routes calculated.
            </div>
          </div>
        </section>

        <!-- ================= SECTION: ROUTING FILTERS (/routing filter) ================= -->
        <section id="section-routing-filters" class="hidden space-y-6">
          <!-- Top Routing Switcher Bar -->
          <div class="flex items-center gap-1.5 p-1 bg-slate-900/90 border border-slate-800 rounded-xl w-fit">
            <button onclick="navigate('routes')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
              </svg>
              <span>Routes & Policy (/ip route)</span>
            </button>
            <button onclick="navigate('bgp')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
              </svg>
              <span>BGP (/routing bgp)</span>
            </button>
            <button onclick="navigate('ospf')" class="px-3.5 py-1.5 text-xs font-medium rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 transition flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
              <span>OSPF (/routing ospf)</span>
            </button>
            <button onclick="navigate('routing-filters')" class="px-3.5 py-1.5 text-xs font-bold rounded-lg transition bg-emerald-600/20 text-emerald-300 border border-emerald-500/40 shadow-sm flex items-center gap-2">
              <svg class="w-3.5 h-3.5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
              </svg>
              <span>Filters (/routing filter)</span>
            </button>
          </div>

          <!-- Top Banner -->
          <div class="bg-gradient-to-r from-emerald-950/40 via-slate-900 to-slate-900 border border-emerald-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 font-semibold">/routing filter</span>
                <h2 class="text-base font-bold text-white">Routing Filters & Policy Maps</h2>
              </div>
              <p class="text-xs text-slate-400">Policy routing filter chains (in-filter / out-filter), prefix-list evaluation, BGP community matching, and route metric manipulation.</p>
            </div>

            <div class="flex items-center gap-2.5">
              <div class="flex items-center gap-2">
                <label class="text-[11px] text-slate-400 font-medium">Chain:</label>
                <select id="routing-filter-chain-select" onchange="filterRoutingFiltersByChain(this.value)" class="bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-white font-mono">
                  <option value="all">All Chains</option>
                </select>
              </div>
              <button onclick="openAddRoutingFilterModal()" class="px-3.5 py-1.5 rounded-lg text-xs font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20 transition flex items-center gap-1.5">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
                <span>+ Add Filter Rule</span>
              </button>
              <button onclick="loadDynamicRouting(true)" class="px-3 py-1.5 rounded-lg text-xs font-medium bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700 transition" title="Refresh routing telemetry">
                ↻
              </button>
            </div>
          </div>

          <!-- Filter Rules Table -->
          <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
            <div class="p-4 border-b border-slate-800 flex items-center justify-between">
              <div class="flex items-center gap-2">
                <h3 class="text-sm font-bold text-white">Filter Rules</h3>
                <span id="routing-filters-count-badge" class="px-2 py-0.5 rounded text-[10px] font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-semibold">0 Rules</span>
              </div>
              <span class="text-xs text-slate-500 font-sans">Evaluated sequentially by order</span>
            </div>

            <div class="overflow-x-auto">
              <table class="w-full text-left text-xs font-mono">
                <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                  <tr>
                    <th class="py-2.5 px-3 text-center w-12">Flags</th>
                    <th class="py-2.5 px-3 w-16">#</th>
                    <th class="py-2.5 px-3">Chain</th>
                    <th class="py-2.5 px-3">Action</th>
                    <th class="py-2.5 px-3">Match Prefix / Length</th>
                    <th class="py-2.5 px-3">Match AS-Path / Community</th>
                    <th class="py-2.5 px-3">Set Modifications</th>
                    <th class="py-2.5 px-3">Comment</th>
                    <th class="py-2.5 px-3 text-right font-sans">Actions</th>
                  </tr>
                </thead>
                <tbody id="routing-filters-table-body" class="divide-y divide-slate-800/80"></tbody>
              </table>
            </div>
            <div id="routing-filters-empty" class="hidden p-10 text-center text-slate-500 text-xs font-sans">
              No routing filter rules configured. Click "+ Add Filter Rule" to create a filter chain.
            </div>
          </div>
        </section>

        <!-- ================= SECTION: DEBIAN CONFIG PERSISTENCE ================= -->
        <section id="section-persistence" class="hidden space-y-6">
          <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
            <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
              <div>
                <h3 class="text-sm font-bold text-white flex items-center gap-2">
                  <span>Debian /etc/network/interfaces.d/ Persistence</span>
                  <span class="text-[10px] bg-brand-500/20 text-brand-400 px-2 py-0.5 rounded border border-brand-500/30">Debian Native</span>
                </h3>
                <p class="text-xs text-slate-400 mt-1">Changes saved to <code class="text-brand-400">/etc/network/interfaces.d/vlans.cfg</code> survive container reboots.</p>
              </div>
              <div class="flex items-center space-x-3">
                <button onclick="loadDebianConfig()" class="text-xs bg-slate-800 hover:bg-slate-700 text-slate-300 px-3 py-2 rounded-lg border border-slate-700 transition">Re-generate Preview</button>
                <button onclick="saveDebianConfig()" class="flex items-center space-x-2 bg-brand-600 hover:bg-brand-500 text-white font-medium text-xs px-4 py-2 rounded-lg shadow-lg shadow-brand-500/20 transition">
                  <span>Save to Debian Config</span>
                </button>
              </div>
            </div>
            <div class="relative">
              <pre id="debian-config-view" class="bg-slate-950 p-4 rounded-lg font-mono text-xs text-slate-300 overflow-x-auto border border-slate-800 max-h-96 leading-relaxed">Loading config preview...</pre>
            </div>
          </div>
        </section>

        <!-- ================= SECTION: TROUBLESHOOT TOOLS (/tool) ================= -->
        <section id="section-tools" class="hidden space-y-6">
          <!-- Top Banner -->
          <div class="bg-gradient-to-r from-amber-950/40 via-slate-900 to-slate-900 border border-amber-900/30 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
            <div>
              <div class="flex items-center gap-2 mb-1">
                <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-amber-500/20 text-amber-300 border border-amber-500/30 font-semibold">/tool</span>
                <h2 class="text-base font-bold text-white">Troubleshoot & Diagnostic Tools</h2>
              </div>
              <p class="text-xs text-slate-400">Comprehensive network diagnostic suite: ICMP echo latency, path route tracing, continuous MTR telemetry, DNS resolution, and TCP port probing.</p>
            </div>
          </div>

          <!-- Tools Subtabs Navigation -->
          <div class="flex items-center gap-1 border-b border-slate-800 pb-0 overflow-x-auto">
            <button id="tools-subtab-btn-ping" onclick="switchToolsSubTab('ping')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-amber-400 text-amber-300 transition flex items-center gap-2 whitespace-nowrap">
              <span>Ping (/tool ping)</span>
            </button>
            <button id="tools-subtab-btn-traceroute" onclick="switchToolsSubTab('traceroute')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>Traceroute (/tool traceroute)</span>
            </button>
            <button id="tools-subtab-btn-mtr" onclick="switchToolsSubTab('mtr')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>MTR Telemetry</span>
            </button>
            <button id="tools-subtab-btn-dns" onclick="switchToolsSubTab('dns')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>DNS Lookup (/tool resolve)</span>
            </button>
            <button id="tools-subtab-btn-port" onclick="switchToolsSubTab('port')" class="px-4 py-2.5 text-xs font-bold border-b-2 border-transparent text-slate-400 hover:text-slate-200 transition flex items-center gap-2 whitespace-nowrap">
              <span>Port Probe (TCP Check)</span>
            </button>
          </div>

          <!-- ================= SUBTAB: PING ================= -->
          <div id="tools-view-ping" class="space-y-5">
            <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
              <form id="tools-ping-form" onsubmit="executePing(event)" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div class="md:col-span-2">
                    <label class="block text-xs font-semibold text-slate-300 mb-1.5">Target Host or IP *</label>
                    <input type="text" id="tools-ping-target" required placeholder="e.g. 8.8.8.8, 1.1.1.1, google.com" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
                  </div>
                  <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1.5">Count</label>
                    <select id="tools-ping-count" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
                      <option value="0">Continuous (Until Stopped)</option>
                      <option value="4" selected>4 packets</option>
                      <option value="5">5 packets</option>
                      <option value="10">10 packets</option>
                      <option value="20">20 packets</option>
                      <option value="50">50 packets</option>
                      <option value="100">100 packets</option>
                    </select>
                  </div>
                  <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1.5">Source Interface</label>
                    <select id="tools-ping-iface" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
                      <option value="">Auto (Default Route)</option>
                    </select>
                  </div>
                </div>

                <div class="flex flex-wrap items-center justify-between gap-4 pt-2">
                  <div class="flex items-center space-x-6 text-xs">
                    <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
                      <input type="checkbox" id="tools-ping-df" class="rounded text-amber-500 bg-slate-800 border-slate-700">
                      <span>Don't Fragment (DF bit)</span>
                    </label>
                    <div class="flex items-center space-x-2">
                      <span class="text-slate-400">Size (bytes):</span>
                      <input type="number" id="tools-ping-size" value="56" min="1" max="65500" class="w-20 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-white font-mono">
                    </div>
                  </div>

                  <button type="submit" id="tools-ping-btn" class="px-5 py-2 rounded-lg font-semibold text-xs bg-amber-500 hover:bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20 transition flex items-center gap-2">
                    <span id="tools-ping-spinner" class="hidden animate-spin">↻</span>
                    <span id="tools-ping-btn-text">Start Ping</span>
                  </button>
                </div>
              </form>
            </div>

            <!-- Ping Results Container -->
            <div id="tools-ping-results" class="hidden space-y-4">
              <!-- KPI Summary Cards -->
              <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
                <div class="bg-slate-900 border border-slate-800 rounded-xl p-3 text-center">
                  <div class="text-[10px] text-slate-400 uppercase">Packets Sent</div>
                  <div id="tools-ping-stat-sent" class="text-base font-bold text-white font-mono mt-1">0</div>
                </div>
                <div class="bg-slate-900 border border-slate-800 rounded-xl p-3 text-center">
                  <div class="text-[10px] text-slate-400 uppercase">Received</div>
                  <div id="tools-ping-stat-recv" class="text-base font-bold text-emerald-400 font-mono mt-1">0</div>
                </div>
                <div class="bg-slate-900 border border-slate-800 rounded-xl p-3 text-center">
                  <div class="text-[10px] text-slate-400 uppercase">Packet Loss</div>
                  <div id="tools-ping-stat-loss" class="text-base font-bold font-mono mt-1">0%</div>
                </div>
                <div class="bg-slate-900 border border-slate-800 rounded-xl p-3 text-center">
                  <div class="text-[10px] text-slate-400 uppercase">Avg RTT</div>
                  <div id="tools-ping-stat-avg" class="text-base font-bold text-cyan-400 font-mono mt-1">0 ms</div>
                </div>
                <div class="bg-slate-900 border border-slate-800 rounded-xl p-3 text-center">
                  <div class="text-[10px] text-slate-400 uppercase">Min / Max</div>
                  <div id="tools-ping-stat-minmax" class="text-xs font-bold text-purple-300 font-mono mt-1.5">-</div>
                </div>
              </div>

              <!-- Replies Table -->
              <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
                <div class="p-3 border-b border-slate-800 flex items-center justify-between">
                  <div class="flex items-center gap-2.5">
                    <span class="text-xs font-bold text-white">ICMP Echo Replies</span>
                    <span id="tools-ping-status-badge" class="px-2 py-0.5 rounded text-[10px] font-mono font-semibold"></span>
                  </div>
                  <button type="button" onclick="clearPingTable()" class="text-[11px] text-slate-400 hover:text-white px-2 py-0.5 rounded bg-slate-800/60 hover:bg-slate-800 border border-slate-700/60 transition">Clear</button>
                </div>
                <div class="overflow-x-auto">
                  <table class="w-full text-left text-xs font-mono">
                    <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                      <tr>
                        <th class="py-2 px-3"># Seq</th>
                        <th class="py-2 px-3">Responder</th>
                        <th class="py-2 px-3">Bytes</th>
                        <th class="py-2 px-3">TTL</th>
                        <th class="py-2 px-3">Latency (RTT)</th>
                        <th class="py-2 px-3 text-right">Status</th>
                      </tr>
                    </thead>
                    <tbody id="tools-ping-tbody" class="divide-y divide-slate-800/80"></tbody>
                  </table>
                </div>
              </div>

              <!-- Raw CLI Drawer -->
              <details class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3 text-xs">
                <summary class="cursor-pointer text-slate-400 font-medium hover:text-white">Raw CLI Console Output</summary>
                <pre id="tools-ping-raw" class="mt-2 bg-slate-950 p-3 rounded font-mono text-[11px] text-slate-300 overflow-x-auto border border-slate-800 leading-relaxed"></pre>
              </details>
            </div>
          </div>

          <!-- ================= SUBTAB: TRACEROUTE ================= -->
          <div id="tools-view-traceroute" class="hidden space-y-5">
            <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
              <form id="tools-traceroute-form" onsubmit="executeTraceroute(event)" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                  <div class="md:col-span-2">
                    <label class="block text-xs font-semibold text-slate-300 mb-1.5">Target Host or IP *</label>
                    <input type="text" id="tools-tr-target" required placeholder="e.g. 1.1.1.1 or google.com" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
                  </div>
                  <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1.5">Max Hops</label>
                    <input type="number" id="tools-tr-maxhops" value="15" min="1" max="30" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
                  </div>
                  <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1.5">Protocol</label>
                    <select id="tools-tr-proto" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
                      <option value="icmp" selected>ICMP Echo (-I)</option>
                      <option value="udp">UDP Probe</option>
                    </select>
                  </div>
                  <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1.5">Source Interface</label>
                    <select id="tools-tr-iface" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
                      <option value="">Auto (Default Route)</option>
                    </select>
                  </div>
                </div>

                <div class="flex items-center justify-between pt-2">
                  <label class="flex items-center space-x-2 text-xs text-slate-300 cursor-pointer">
                    <input type="checkbox" id="tools-tr-resolve" class="rounded text-amber-500 bg-slate-800 border-slate-700">
                    <span>Resolve Hostnames (Reverse DNS)</span>
                  </label>

                  <button type="submit" id="tools-tr-btn" class="px-5 py-2 rounded-lg font-semibold text-xs bg-amber-500 hover:bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20 transition flex items-center gap-2">
                    <span id="tools-tr-spinner" class="hidden animate-spin">↻</span>
                    <span id="tools-tr-btn-text">Start Traceroute</span>
                  </button>
                </div>
              </form>
            </div>

            <div id="tools-tr-results" class="hidden space-y-4">
              <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
                <div class="p-3 border-b border-slate-800 flex items-center justify-between">
                  <div class="flex items-center gap-2.5">
                    <span class="text-xs font-bold text-white">Route Hops</span>
                    <span id="tools-tr-hops-count" class="text-xs font-mono text-slate-400">0 Hops</span>
                  </div>
                  <button type="button" onclick="clearTracerouteTable()" class="text-[11px] text-slate-400 hover:text-white px-2 py-0.5 rounded bg-slate-800/60 hover:bg-slate-800 border border-slate-700/60 transition">Clear</button>
                </div>
                <div class="overflow-x-auto">
                  <table class="w-full text-left text-xs font-mono">
                    <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                      <tr>
                        <th class="py-2.5 px-3 w-16">Hop #</th>
                        <th class="py-2.5 px-3">Gateway Host / IP</th>
                        <th class="py-2.5 px-3">RTT 1</th>
                        <th class="py-2.5 px-3">RTT 2</th>
                        <th class="py-2.5 px-3 text-right">Status</th>
                      </tr>
                    </thead>
                    <tbody id="tools-tr-tbody" class="divide-y divide-slate-800/80"></tbody>
                  </table>
                </div>
              </div>

              <details class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3 text-xs">
                <summary class="cursor-pointer text-slate-400 font-medium hover:text-white">Raw CLI Console Output</summary>
                <pre id="tools-tr-raw" class="mt-2 bg-slate-950 p-3 rounded font-mono text-[11px] text-slate-300 overflow-x-auto border border-slate-800 leading-relaxed"></pre>
              </details>
            </div>
          </div>

          <!-- ================= SUBTAB: MTR ================= -->
          <div id="tools-view-mtr" class="hidden space-y-5">
            <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
              <form id="tools-mtr-form" onsubmit="executeMTR(event)" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div class="md:col-span-2">
                    <label class="block text-xs font-semibold text-slate-300 mb-1.5">Target Host or IP *</label>
                    <input type="text" id="tools-mtr-target" required placeholder="e.g. 1.1.1.1 or 8.8.8.8" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
                  </div>
                  <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1.5">Cycle Count</label>
                    <select id="tools-mtr-count" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
                      <option value="2">2 cycles (Fast)</option>
                      <option value="3" selected>3 cycles</option>
                      <option value="5">5 cycles</option>
                      <option value="10">10 cycles (Deep)</option>
                    </select>
                  </div>
                </div>

                <div class="flex justify-end pt-2">
                  <button type="submit" id="tools-mtr-btn" class="px-5 py-2 rounded-lg font-semibold text-xs bg-amber-500 hover:bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20 transition flex items-center gap-2">
                    <span id="tools-mtr-spinner" class="hidden">↻</span>
                    <span>Start MTR Report</span>
                  </button>
                </div>
              </form>
            </div>

            <div id="tools-mtr-results" class="hidden space-y-4">
              <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
                <div class="p-3 border-b border-slate-800 flex items-center justify-between">
                  <span class="text-xs font-bold text-white">MTR Route Telemetry</span>
                  <span id="tools-mtr-hops-count" class="text-xs font-mono text-slate-400">0 Hops</span>
                </div>
                <div class="overflow-x-auto">
                  <table class="w-full text-left text-xs font-mono">
                    <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                      <tr>
                        <th class="py-2.5 px-3 w-16">Hop #</th>
                        <th class="py-2.5 px-3">Host / Router</th>
                        <th class="py-2.5 px-3">Loss %</th>
                        <th class="py-2.5 px-3">Sent</th>
                        <th class="py-2.5 px-3">Last (ms)</th>
                        <th class="py-2.5 px-3">Avg (ms)</th>
                        <th class="py-2.5 px-3">Best (ms)</th>
                        <th class="py-2.5 px-3">Worst (ms)</th>
                        <th class="py-2.5 px-3">StDev</th>
                      </tr>
                    </thead>
                    <tbody id="tools-mtr-tbody" class="divide-y divide-slate-800/80"></tbody>
                  </table>
                </div>
              </div>

              <details class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3 text-xs">
                <summary class="cursor-pointer text-slate-400 font-medium hover:text-white">Raw CLI Console Output</summary>
                <pre id="tools-mtr-raw" class="mt-2 bg-slate-950 p-3 rounded font-mono text-[11px] text-slate-300 overflow-x-auto border border-slate-800 leading-relaxed"></pre>
              </details>
            </div>
          </div>

          <!-- ================= SUBTAB: DNS LOOKUP ================= -->
          <div id="tools-view-dns" class="hidden space-y-5">
            <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
              <form id="tools-dns-form" onsubmit="executeDNS(event)" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div class="md:col-span-2">
                    <label class="block text-xs font-semibold text-slate-300 mb-1.5">Domain Name *</label>
                    <input type="text" id="tools-dns-domain" required placeholder="e.g. cloudflare.com, google.com" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
                  </div>
                  <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1.5">Record Type</label>
                    <select id="tools-dns-type" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
                      <option value="A" selected>A (IPv4)</option>
                      <option value="AAAA">AAAA (IPv6)</option>
                      <option value="CNAME">CNAME</option>
                      <option value="MX">MX (Mail)</option>
                      <option value="TXT">TXT</option>
                      <option value="NS">NS (Nameserver)</option>
                      <option value="SOA">SOA</option>
                      <option value="ANY">ANY</option>
                    </select>
                  </div>
                  <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1.5">Custom DNS Server (Optional)</label>
                    <input type="text" id="tools-dns-server" placeholder="e.g. 1.1.1.1, 8.8.8.8" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
                  </div>
                </div>

                <div class="flex justify-end pt-2">
                  <button type="submit" id="tools-dns-btn" class="px-5 py-2 rounded-lg font-semibold text-xs bg-amber-500 hover:bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20 transition flex items-center gap-2">
                    <span id="tools-dns-spinner" class="hidden">↻</span>
                    <span>Resolve Domain</span>
                  </button>
                </div>
              </form>
            </div>

            <div id="tools-dns-results" class="hidden space-y-4">
              <div class="bg-slate-900/90 border border-slate-800 rounded-xl overflow-hidden">
                <div class="p-3 border-b border-slate-800 flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <span class="text-xs font-bold text-white">DNS Answer Records</span>
                    <span id="tools-dns-meta" class="text-[11px] font-mono text-cyan-300"></span>
                  </div>
                </div>
                <div class="overflow-x-auto">
                  <table class="w-full text-left text-xs font-mono">
                    <thead class="text-slate-400 bg-slate-950/60 border-b border-slate-800 uppercase tracking-wider text-[10px] font-sans">
                      <tr>
                        <th class="py-2.5 px-3">Name</th>
                        <th class="py-2.5 px-3">TTL (s)</th>
                        <th class="py-2.5 px-3">Class</th>
                        <th class="py-2.5 px-3">Type</th>
                        <th class="py-2.5 px-3">Value / Target</th>
                      </tr>
                    </thead>
                    <tbody id="tools-dns-tbody" class="divide-y divide-slate-800/80"></tbody>
                  </table>
                </div>
              </div>

              <details class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3 text-xs">
                <summary class="cursor-pointer text-slate-400 font-medium hover:text-white">Raw CLI Console Output</summary>
                <pre id="tools-dns-raw" class="mt-2 bg-slate-950 p-3 rounded font-mono text-[11px] text-slate-300 overflow-x-auto border border-slate-800 leading-relaxed"></pre>
              </details>
            </div>
          </div>

          <!-- ================= SUBTAB: PORT PROBE ================= -->
          <div id="tools-view-port" class="hidden space-y-5">
            <div class="bg-slate-900/90 border border-slate-800 rounded-xl p-5">
              <form id="tools-port-form" onsubmit="executePortProbe(event)" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                  <div class="md:col-span-2">
                    <label class="block text-xs font-semibold text-slate-300 mb-1.5">Target Host or IP *</label>
                    <input type="text" id="tools-port-target" required placeholder="e.g. 1.1.1.1, 192.168.131.1" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
                  </div>
                  <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1.5">Port (TCP) *</label>
                    <input type="number" id="tools-port-num" required min="1" max="65535" value="80" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
                  </div>
                  <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1.5">Timeout (s)</label>
                    <input type="number" id="tools-port-timeout" value="3" min="1" max="10" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
                  </div>
                </div>

                <!-- Quick Presets -->
                <div class="flex flex-wrap items-center gap-2 pt-1">
                  <span class="text-[11px] text-slate-400">Quick Ports:</span>
                  <button type="button" onclick="setPortPreset(80)" class="px-2 py-0.5 rounded bg-slate-800 hover:bg-slate-700 text-[11px] font-mono text-cyan-300 border border-slate-700">HTTP: 80</button>
                  <button type="button" onclick="setPortPreset(443)" class="px-2 py-0.5 rounded bg-slate-800 hover:bg-slate-700 text-[11px] font-mono text-emerald-300 border border-slate-700">HTTPS: 443</button>
                  <button type="button" onclick="setPortPreset(22)" class="px-2 py-0.5 rounded bg-slate-800 hover:bg-slate-700 text-[11px] font-mono text-purple-300 border border-slate-700">SSH: 22</button>
                  <button type="button" onclick="setPortPreset(53)" class="px-2 py-0.5 rounded bg-slate-800 hover:bg-slate-700 text-[11px] font-mono text-indigo-300 border border-slate-700">DNS: 53</button>
                  <button type="button" onclick="setPortPreset(179)" class="px-2 py-0.5 rounded bg-slate-800 hover:bg-slate-700 text-[11px] font-mono text-amber-300 border border-slate-700">BGP: 179</button>
                  <button type="button" onclick="setPortPreset(8291)" class="px-2 py-0.5 rounded bg-slate-800 hover:bg-slate-700 text-[11px] font-mono text-pink-300 border border-slate-700">Winbox: 8291</button>
                  <button type="button" onclick="setPortPreset(8006)" class="px-2 py-0.5 rounded bg-slate-800 hover:bg-slate-700 text-[11px] font-mono text-orange-300 border border-slate-700">PVE: 8006</button>
                </div>

                <div class="flex justify-end pt-2">
                  <button type="submit" id="tools-port-btn" class="px-5 py-2 rounded-lg font-semibold text-xs bg-amber-500 hover:bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20 transition flex items-center gap-2">
                    <span id="tools-port-spinner" class="hidden">↻</span>
                    <span>Probe Port</span>
                  </button>
                </div>
              </form>
            </div>

            <div id="tools-port-results" class="hidden space-y-4">
              <div id="tools-port-banner" class="rounded-xl p-5 border flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <span id="tools-port-icon" class="w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm"></span>
                  <div>
                    <h3 id="tools-port-title" class="text-sm font-bold"></h3>
                    <p id="tools-port-sub" class="text-xs mt-0.5 font-mono"></p>
                  </div>
                </div>
                <div class="text-right">
                  <div class="text-[10px] uppercase text-slate-400">Handshake Latency</div>
                  <div id="tools-port-latency" class="text-base font-bold font-mono text-white"></div>
                </div>
              </div>

              <details class="bg-slate-900/60 border border-slate-800/80 rounded-xl p-3 text-xs">
                <summary class="cursor-pointer text-slate-400 font-medium hover:text-white">Handshake Details</summary>
                <pre id="tools-port-raw" class="mt-2 bg-slate-950 p-3 rounded font-mono text-[11px] text-slate-300 overflow-x-auto border border-slate-800 leading-relaxed"></pre>
              </details>
            </div>
          </div>
        </section>

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

  <!-- ================= MODAL: CREATE VLAN ================= -->
  <div id="vlan-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 class="text-sm font-bold text-white">Create New VLAN Interface</h3>
        <button onclick="closeVlanModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form id="vlan-form" onsubmit="submitCreateVlan(event)" class="p-6 space-y-4">
        <div>
          <label class="block text-xs font-semibold text-slate-300 mb-1.5">Parent Interface *</label>
          <select id="vlan-parent" onchange="autoSuggestVlanName()" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white focus:outline-none focus:border-cyan-500 font-mono"></select>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">VLAN ID (1-4094) *</label>
            <input type="number" id="vlan-id" min="1" max="4094" placeholder="10" required oninput="autoSuggestVlanName()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Interface Name</label>
            <input type="text" id="vlan-name" placeholder="eth0.10" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
          </div>
        </div>
        <div>
          <div class="flex items-center justify-between mb-1.5">
            <label class="text-xs font-semibold text-slate-300">Router IP Address & CIDR</label>
            <div class="flex space-x-1">
              <button type="button" onclick="setSubnetPreset('/24')" class="text-[10px] bg-slate-800 text-slate-400 px-1.5 py-0.5 rounded">/24</button>
              <button type="button" onclick="setSubnetPreset('/23')" class="text-[10px] bg-slate-800 text-slate-400 px-1.5 py-0.5 rounded">/23</button>
              <button type="button" onclick="setSubnetPreset('/16')" class="text-[10px] bg-slate-800 text-slate-400 px-1.5 py-0.5 rounded">/16</button>
            </div>
          </div>
          <input type="text" id="vlan-ip" placeholder="192.168.10.1/24" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Role Tag</label>
            <select id="vlan-role" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white">
              <option value="LAN">LAN</option>
              <option value="GUEST">Guest Network</option>
              <option value="IOT">IoT / Smart Home</option>
              <option value="DMZ">DMZ / Isolated</option>
              <option value="MGMT">Management</option>
              <option value="WAN">WAN / Uplink</option>
            </select>
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Description / Alias</label>
            <input type="text" id="vlan-desc" placeholder="Guest WiFi Subnet" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white">
          </div>
        </div>
        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeVlanModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" id="vlan-submit-btn" class="px-5 py-2 rounded-lg text-xs font-semibold bg-gradient-to-r from-brand-600 to-cyan-600 text-white">Create VLAN</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: EDIT INTERFACE ================= -->
  <div id="iface-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div>
          <h3 class="text-sm font-bold text-white flex items-center gap-2">
            <span id="modal-iface-name">eth0</span>
            <span id="modal-iface-badge" class="text-[10px] font-mono px-2 py-0.5 rounded bg-slate-800 text-slate-300">Ethernet</span>
          </h3>
        </div>
        <button onclick="closeIfaceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <div class="p-6 space-y-5">
        <div class="grid grid-cols-2 gap-4 p-3 bg-slate-950/60 rounded-xl border border-slate-800/80">
          <div>
            <span class="block text-[11px] text-slate-400 mb-1">Administrative Link</span>
            <div class="flex items-center space-x-2">
              <button id="modal-btn-up" onclick="setIfaceState(currentModalIface, 'up')" class="px-3 py-1 rounded text-xs font-semibold bg-emerald-600/30 text-emerald-400 border border-emerald-500/40">UP</button>
              <button id="modal-btn-down" onclick="setIfaceState(currentModalIface, 'down')" class="px-3 py-1 rounded text-xs font-semibold bg-slate-800 text-slate-400 hover:bg-rose-600/30 hover:text-rose-400">DOWN</button>
            </div>
          </div>
          <div>
            <span class="block text-[11px] text-slate-400 mb-1">MTU Size</span>
            <div class="flex items-center space-x-2">
              <input type="number" id="modal-iface-mtu" min="68" max="9000" class="w-24 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-white font-mono">
              <button onclick="applyMTU()" class="text-xs bg-slate-800 hover:bg-slate-700 text-white px-2.5 py-1 rounded border border-slate-700">Set</button>
            </div>
          </div>
        </div>

        <div>
          <label class="block text-xs font-semibold text-slate-300 mb-1.5">Assigned IP Addresses</label>
          <div id="modal-ip-list" class="space-y-1.5 mb-3 font-mono text-xs"></div>
          <div class="flex space-x-2">
            <input type="text" id="modal-new-ip" placeholder="192.168.100.1/24" class="flex-1 bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
            <button onclick="addInterfaceIP()" class="bg-brand-600 hover:bg-brand-500 text-white px-4 py-2 rounded-lg text-xs font-semibold">+ Add IP</button>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Role Tag</label>
            <select id="modal-iface-role" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white">
              <option value="WAN">WAN / Uplink</option>
              <option value="LAN">LAN</option>
              <option value="DMZ">DMZ</option>
              <option value="GUEST">Guest</option>
              <option value="IOT">IoT</option>
              <option value="MGMT">Management</option>
            </select>
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Description</label>
            <input type="text" id="modal-iface-desc" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white">
          </div>
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-between items-center">
          <button id="modal-delete-vlan-btn" onclick="confirmDeleteVlan(currentModalIface)" class="hidden text-xs text-rose-400 hover:text-rose-300">Delete VLAN</button>
          <div class="flex space-x-3">
            <button onclick="closeIfaceModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800">Close</button>
            <button onclick="saveInterfaceMetadata()" class="px-5 py-2 rounded-lg text-xs font-semibold bg-brand-600 hover:bg-brand-500 text-white">Save Changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ================= MODAL: PPPoE CLIENT ================= -->
  <div id="pppoe-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 id="pppoe-modal-title" class="text-sm font-bold text-white">Add PPPoE Client Interface</h3>
        <button onclick="closePPPoEModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSavePPPoE(event)" class="p-6 space-y-4">
        <input type="hidden" id="pppoe-modal-edit-orig">
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Name *</label>
            <input type="text" id="pppoe-modal-name" placeholder="pppoe-out1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-blue-500">
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Interface *</label>
            <select id="pppoe-modal-iface" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-blue-500"></select>
          </div>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Username *</label>
            <input type="text" id="pppoe-modal-user" placeholder="user@isp" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-blue-500">
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Password *</label>
            <input type="password" id="pppoe-modal-pass" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-blue-500">
          </div>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Service Name (Optional)</label>
            <input type="text" id="pppoe-modal-service" placeholder="ISP Service" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white">
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">MTU</label>
            <input type="number" id="pppoe-modal-mtu" value="1492" min="576" max="1500" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
          </div>
        </div>
        <div class="grid grid-cols-3 gap-2 pt-2 border-t border-slate-800/80">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="pppoe-modal-defroute" checked class="rounded bg-slate-800 border-slate-700 text-blue-500">
            <span class="text-xs text-slate-300 font-medium">Default Route</span>
          </label>
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="pppoe-modal-reconnect" checked class="rounded bg-slate-800 border-slate-700 text-blue-500">
            <span class="text-xs text-slate-300 font-medium">Auto-Reconnect</span>
          </label>
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="pppoe-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
            <span class="text-xs text-slate-300 font-medium">Disabled (X)</span>
          </label>
        </div>
        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closePPPoEModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-500/20">Save PPPoE</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: WIREGUARD INTERFACE ================= -->
  <!-- ================= MODAL: ADD / EDIT WIREGUARD INTERFACE ================= -->
  <div id="wg-iface-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div class="flex items-center gap-2">
          <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-rose-500/20 text-rose-300 border border-rose-500/30 font-semibold">/interface wireguard</span>
          <h3 id="wg-iface-modal-title" class="text-sm font-bold text-white">Add WireGuard Interface</h3>
        </div>
        <button onclick="closeAddWGInterfaceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSaveWGInterface(event)" class="p-6 space-y-4 text-xs">
        <input type="hidden" id="wg-iface-modal-edit-orig">
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Interface Name *</label>
            <input type="text" id="wg-iface-modal-name" placeholder="wg0" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-rose-500">
            <p class="text-[10px] text-slate-500 mt-1">e.g. wg0, wg-office, wgx-Space</p>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Listen Port *</label>
            <input type="number" id="wg-iface-modal-port" value="51820" min="1" max="65535" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-rose-500">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Tunnel IP (CIDR)</label>
            <input type="text" id="wg-iface-modal-addr" placeholder="10.10.0.1/24" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-rose-500">
            <p class="text-[10px] text-slate-500 mt-1">Assigned IP/mask, or leave blank</p>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">MTU</label>
            <input type="number" id="wg-iface-modal-mtu" value="1420" min="1280" max="1500" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Comment / Alias</label>
          <input type="text" id="wg-iface-modal-comment" placeholder="e.g. Main Roadwarrior Server, Site-to-Site tunnel" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-rose-500">
        </div>

        <div class="bg-slate-950/60 border border-slate-800/80 rounded-xl p-3.5 space-y-3">
          <div class="flex items-center justify-between">
            <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider font-mono">Cryptographic Keypair</span>
            <button type="button" onclick="generateWGInterfaceKeys()" class="text-[11px] text-rose-400 hover:text-rose-300 font-semibold flex items-center gap-1">
              <span>⚡ Generate New Keypair</span>
            </button>
          </div>

          <div>
            <div class="flex items-center justify-between mb-1">
              <label class="text-[11px] font-semibold text-slate-300">Public Key</label>
              <button type="button" onclick="copyWGInterfacePubKey()" class="text-[10px] text-cyan-400 hover:text-cyan-300">📋 Copy Public Key</button>
            </div>
            <input type="text" id="wg-iface-modal-pubkey" readonly class="w-full bg-slate-900 border border-slate-800 rounded-lg px-3 py-2 text-slate-300 font-mono text-[11px]">
          </div>

          <div>
            <div class="flex items-center justify-between mb-1">
              <label class="text-[11px] font-semibold text-slate-300">Private Key (Secret) *</label>
              <button type="button" onclick="toggleWGPrivKeyVisibility()" id="btn-toggle-wg-privkey" class="text-[10px] text-slate-400 hover:text-white">👁️ Show</button>
            </div>
            <input type="password" id="wg-iface-modal-privkey" required oninput="onWGInterfacePrivKeyInput()" class="w-full bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono text-[11px] focus:outline-none focus:border-rose-500">
            <p class="text-[10px] text-slate-500 mt-1">You can paste any existing base64 private key; the public key will update automatically.</p>
          </div>
        </div>

        <div class="pt-1">
          <label class="flex items-center space-x-2.5 cursor-pointer">
            <input type="checkbox" id="wg-iface-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500 focus:ring-rose-500">
            <span class="font-medium text-slate-300">Disabled (X)</span>
          </label>
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeAddWGInterfaceModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800 transition">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-rose-600 hover:bg-rose-500 text-white shadow-lg shadow-rose-500/20 transition">Save Interface</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: ADD / EDIT WIREGUARD PEER ================= -->
  <div id="wg-peer-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div class="flex items-center gap-2">
          <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-rose-500/20 text-rose-300 border border-rose-500/30 font-semibold">/interface wireguard peers</span>
          <h3 id="wg-peer-modal-title" class="text-sm font-bold text-white">Add WireGuard Peer</h3>
        </div>
        <button onclick="closeAddWGPeerModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>

      <form onsubmit="submitSaveWGPeer(event)" class="p-6 space-y-4 text-xs">
        <input type="hidden" id="wg-peer-modal-edit-orig-iface">
        <input type="hidden" id="wg-peer-modal-edit-orig-pubkey">

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">WireGuard Interface *</label>
            <select id="wg-peer-modal-iface" onchange="checkWGPeerKeyValidity()" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-rose-500"></select>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Peer Name / Alias *</label>
            <input type="text" id="wg-peer-modal-name" placeholder="Laptop, iPhone, Branch-Athens" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-rose-500">
          </div>
        </div>

        <div>
          <div class="flex items-center justify-between mb-1.5">
            <label class="font-semibold text-slate-300">Peer Public Key *</label>
            <button type="button" onclick="generatePeerKeypairHelper()" class="text-[11px] text-cyan-400 hover:text-cyan-300 font-semibold flex items-center gap-1">
              <span>⚡ Generate Client Keypair</span>
            </button>
          </div>
          <input type="text" id="wg-peer-modal-pubkey" oninput="checkWGPeerKeyValidity()" placeholder="Base64 44-character public key" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-rose-500">
          
          <!-- Warning if user tries to paste interface's own public key -->
          <div id="wg-peer-key-warning" class="hidden text-rose-400 text-[11px] font-sans mt-1.5 bg-rose-950/50 p-2.5 rounded-lg border border-rose-800/70">
            ⚠️ <strong>Invalid Key:</strong> The peer public key cannot be the same as the interface's own public key. A WireGuard node cannot connect to itself!
          </div>

          <!-- Box showing generated client secret key if generated here -->
          <div id="wg-peer-gen-key-box" class="hidden mt-2.5 bg-slate-950/80 p-3 rounded-xl border border-cyan-800/60 text-xs font-mono space-y-1.5">
            <div class="flex items-center justify-between text-[11px] text-cyan-300 font-bold font-sans">
              <span>Generated Client Private Key (Secret):</span>
              <button type="button" onclick="copyGeneratedPeerPrivKey()" class="text-white hover:text-cyan-300 font-semibold text-[10px] bg-slate-800 px-2 py-0.5 rounded border border-slate-700">📋 Copy Secret</button>
            </div>
            <input type="text" id="wg-peer-gen-privkey" readonly class="w-full bg-slate-900 border border-slate-800 rounded px-2.5 py-1.5 text-slate-300 text-xs font-mono">
            <p class="text-[10px] text-slate-400 font-sans">Copy and save this private key to configure the client device (e.g. phone or remote router).</p>
          </div>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Allowed IPs (CIDR) *</label>
          <input type="text" id="wg-peer-modal-allowedips" placeholder="e.g. 10.10.0.2/32, 192.168.20.0/24 or 0.0.0.0/0" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-rose-500">
          <p class="text-[10px] text-slate-500 mt-1">IP ranges routed to/from this peer (comma-separated)</p>
        </div>

        <div class="grid grid-cols-3 gap-3">
          <div class="col-span-2">
            <label class="block font-semibold text-slate-300 mb-1.5">Endpoint Host/IP (Optional)</label>
            <input type="text" id="wg-peer-modal-endpoint" placeholder="e.g. 10.2.145.253 or vpn.example.com" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-rose-500">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Endpoint Port</label>
            <input type="number" id="wg-peer-modal-port" placeholder="51820" min="1" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-rose-500">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Keepalive (seconds)</label>
            <input type="number" id="wg-peer-modal-keepalive" value="25" min="0" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-rose-500">
            <p class="text-[10px] text-slate-500 mt-1">25s recommended for NAT traversal</p>
          </div>
          <div>
            <div class="flex items-center justify-between mb-1.5">
              <label class="font-semibold text-slate-300">Preshared Key</label>
              <button type="button" onclick="generatePeerPSK()" class="text-[10px] text-purple-400 hover:text-purple-300 font-semibold">Generate</button>
            </div>
            <input type="password" id="wg-peer-modal-preshared" placeholder="Optional PSK" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono text-xs focus:outline-none focus:border-rose-500">
          </div>
        </div>

        <div class="pt-1">
          <label class="flex items-center space-x-2.5 cursor-pointer">
            <input type="checkbox" id="wg-peer-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500 focus:ring-rose-500">
            <span class="font-medium text-slate-300">Disabled (X)</span>
          </label>
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeAddWGPeerModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800 transition">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-rose-600 hover:bg-rose-500 text-white shadow-lg shadow-rose-500/20 transition">Save Peer</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: IPSEC TUNNEL ================= -->
  <div id="ipsec-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 id="ipsec-modal-title" class="text-sm font-bold text-white">Configure IPSec IKEv2 Tunnel</h3>
        <button onclick="closeAddIPSecModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSaveIPSec(event)" class="p-6 space-y-4">
        <div>
          <label class="block text-xs font-semibold text-slate-300 mb-1.5">Connection Name *</label>
          <input type="text" id="ipsec-modal-name" placeholder="e.g. site-to-site-office" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Local Subnet *</label>
            <input type="text" id="ipsec-modal-localts" placeholder="192.168.10.0/24" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Remote Subnet *</label>
            <input type="text" id="ipsec-modal-remotets" placeholder="192.168.20.0/24" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
          </div>
        </div>
        <div>
          <label class="block text-xs font-semibold text-slate-300 mb-1.5">Remote Gateway IP / FQDN *</label>
          <input type="text" id="ipsec-modal-remotegw" placeholder="203.0.113.50 or vpn.remote.com" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
        </div>
        <div>
          <label class="block text-xs font-semibold text-slate-300 mb-1.5">Pre-Shared Key (PSK) *</label>
          <input type="password" id="ipsec-modal-psk" placeholder="Secret Pre-Shared Key" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">IKE Proposals</label>
            <input type="text" id="ipsec-modal-ikeprop" value="aes256-sha256-modp2048,default" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-[11px] text-white font-mono">
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">ESP Proposals</label>
            <input type="text" id="ipsec-modal-espprop" value="aes256-sha256-modp2048,default" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-[11px] text-white font-mono">
          </div>
        </div>
        <div class="grid grid-cols-2 gap-4 pt-2">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="ipsec-modal-autostart" checked class="rounded bg-slate-800 border-slate-700 text-amber-500">
            <span class="text-xs text-slate-300 font-medium">Auto-start on boot</span>
          </label>
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="ipsec-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
            <span class="text-xs text-slate-300 font-medium">Disabled (X)</span>
          </label>
        </div>
        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeAddIPSecModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-amber-600 hover:bg-amber-500 text-white">Save Tunnel</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: L2TP CLIENT ================= -->
  <div id="l2tp-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 id="l2tp-modal-title" class="text-sm font-bold text-white">Add L2TP Client Interface</h3>
        <button onclick="closeL2TPModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSaveL2TP(event)" class="p-6 space-y-4">
        <div>
          <label class="block text-xs font-semibold text-slate-300 mb-1.5">Client Interface Name *</label>
          <input type="text" id="l2tp-modal-name" placeholder="l2tp-out1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
        </div>
        <div>
          <label class="block text-xs font-semibold text-slate-300 mb-1.5">Connect To (Server IP / Host) *</label>
          <input type="text" id="l2tp-modal-server" placeholder="vpn.example.com or 203.0.113.1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Username *</label>
            <input type="text" id="l2tp-modal-user" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Password *</label>
            <input type="password" id="l2tp-modal-pass" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-cyan-500">
          </div>
        </div>
        <div>
          <label class="block text-xs font-semibold text-slate-300 mb-1.5">IPSec Secret / PSK (Optional for L2TP/IPsec)</label>
          <input type="password" id="l2tp-modal-ipsec" placeholder="Optional Pre-Shared Key" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono">
        </div>
        <div class="grid grid-cols-2 gap-4 pt-2">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="l2tp-modal-defroute" checked class="rounded bg-slate-800 border-slate-700 text-cyan-500">
            <span class="text-xs text-slate-300 font-medium">Default Route</span>
          </label>
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="l2tp-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
            <span class="text-xs text-slate-300 font-medium">Disabled (X)</span>
          </label>
        </div>
        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeL2TPModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20">Save L2TP</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: PPTP CLIENT ================= -->
  <div id="pptp-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 id="pptp-modal-title" class="text-sm font-bold text-white">Add PPTP Client Interface</h3>
        <button onclick="closePPTPModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSavePPTP(event)" class="p-6 space-y-4">
        <div>
          <label class="block text-xs font-semibold text-slate-300 mb-1.5">Client Interface Name *</label>
          <input type="text" id="pptp-modal-name" placeholder="pptp-out1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-purple-500">
        </div>
        <div>
          <label class="block text-xs font-semibold text-slate-300 mb-1.5">Connect To (Server IP / Host) *</label>
          <input type="text" id="pptp-modal-server" placeholder="vpn.example.com or 203.0.113.1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-purple-500">
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Username *</label>
            <input type="text" id="pptp-modal-user" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-purple-500">
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Password *</label>
            <input type="password" id="pptp-modal-pass" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white font-mono focus:outline-none focus:border-purple-500">
          </div>
        </div>
        <div class="grid grid-cols-3 gap-2 pt-2 border-t border-slate-800/80">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="pptp-modal-mppe" checked class="rounded bg-slate-800 border-slate-700 text-purple-500">
            <span class="text-xs text-slate-300 font-medium">MPPE-128</span>
          </label>
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="pptp-modal-defroute" checked class="rounded bg-slate-800 border-slate-700 text-purple-500">
            <span class="text-xs text-slate-300 font-medium">Default Route</span>
          </label>
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="pptp-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
            <span class="text-xs text-slate-300 font-medium">Disabled (X)</span>
          </label>
        </div>
        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closePPTPModal()" class="px-4 py-2 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg text-xs font-semibold bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20">Save PPTP</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: FIREWALL FILTER RULE (ROUTEROS WEBFIG / WINBOX V4 REPLICA) ================= -->
  <div id="filter-modal" class="fixed inset-0 bg-black/60 backdrop-blur-[2px] z-50 hidden flex items-center justify-center p-2 sm:p-4">
    <div id="filter-modal-window" class="bg-[#131b26] border border-[#243347] rounded-md shadow-2xl w-full max-w-[720px] max-h-[92vh] flex flex-col overflow-hidden text-xs select-none">
      
      <!-- Window Title Bar -->
      <div class="bg-[#162335] border-b border-[#223145] px-3.5 py-1.5 flex items-center justify-between shrink-0">
        <div class="flex items-center gap-2">
          <!-- WinBox v4 Logo -->
          <div class="flex items-center gap-0.5 text-cyan-400 font-bold font-mono text-[11px] leading-none">
            <svg class="w-3.5 h-3.5 text-cyan-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
              <path d="M4 5l3.5 10L11 5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M15 5v5h4m0-5v10" stroke-linecap="round" stroke-linejoin="round"/>
              <circle cx="12" cy="20" r="1.5" fill="currentColor"/>
            </svg>
            <span class="text-cyan-400 font-bold text-xs tracking-tight">v4</span>
          </div>
          <span class="text-slate-200 font-medium text-xs">Firewall Rule &gt;</span>
          <span id="fw-modal-badge" class="bg-[#0078d4] text-white text-[11px] px-2 py-0.5 rounded font-mono font-medium">New...</span>
        </div>
        <div class="flex items-center gap-2">
          <button type="button" onclick="toggleMaximizeFilterModal()" title="Maximize / Restore" class="text-slate-400 hover:text-white p-0.5 text-xs transition-colors">
            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
          </button>
          <button type="button" onclick="closeFilterModal()" title="Close" class="text-slate-400 hover:text-rose-400 p-0.5 text-xs font-bold leading-none transition-colors">✕</button>
        </div>
      </div>

      <!-- Window Tabs Bar -->
      <div class="bg-[#111923] border-b border-[#1f2d3e] px-2 flex items-center gap-1 shrink-0">
        <button type="button" onclick="switchFwRuleTab('general')" id="fw-tab-btn-general" class="fw-rule-tab-btn bg-[#182638] text-white border-t-2 border-sky-400 px-3.5 py-1.5 text-xs font-medium transition-colors">General</button>
        <button type="button" onclick="switchFwRuleTab('advanced')" id="fw-tab-btn-advanced" class="fw-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Advanced</button>
        <button type="button" onclick="switchFwRuleTab('extra')" id="fw-tab-btn-extra" class="fw-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Extra</button>
        <button type="button" onclick="switchFwRuleTab('action')" id="fw-tab-btn-action" class="fw-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Action</button>
        <button type="button" onclick="switchFwRuleTab('statistics')" id="fw-tab-btn-statistics" class="fw-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Statistics</button>
      </div>

      <!-- Window Body (Split Layout: Left Tab Content + Right Action Sidebar) -->
      <div class="flex-1 flex min-h-0 overflow-hidden">
        
        <!-- Form Content Container (Scrollable) -->
        <form id="fw-rule-form" onsubmit="event.preventDefault(); applyFilterRule(true);" class="flex-1 overflow-y-auto px-4 py-3 min-w-0 space-y-1">
          <input type="hidden" id="filter-modal-id">

          <!-- TAB PANE: GENERAL -->
          <div id="fw-pane-general" class="fw-rule-pane space-y-1">
            <!-- Enabled -->
            <div class="flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Enabled</label>
              <div class="flex items-center">
                <input type="checkbox" id="filter-modal-enabled" checked class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
              </div>
            </div>

            <!-- Comment -->
            <div class="flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Comment</label>
              <div class="flex-1">
                <input type="text" id="filter-modal-comment" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- Chain -->
            <div class="flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Chain</label>
              <div class="flex-1">
                <select id="filter-modal-chain" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
                  <option value="forward" selected>forward</option>
                  <option value="input">input</option>
                  <option value="output">output</option>
                </select>
              </div>
            </div>

            <!-- Src. Address -->
            <div class="flex items-center text-xs py-1" id="fw-row-src">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Address</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('src', true)" id="fw-plus-src" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-src" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-src" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="fw-val-src" placeholder="192.168.1.0/24" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('src', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Address -->
            <div class="flex items-center text-xs py-1" id="fw-row-dst">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Address</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('dst', true)" id="fw-plus-dst" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-dst" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-dst" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="fw-val-dst" placeholder="0.0.0.0/0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('dst', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Src. Address List -->
            <div class="flex items-center text-xs py-1" id="fw-row-srclist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Address List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('srclist', true)" id="fw-plus-srclist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-srclist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-srclist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="fw-val-srclist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleFwField('srclist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Address List -->
            <div class="flex items-center text-xs py-1" id="fw-row-dstlist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Address List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('dstlist', true)" id="fw-plus-dstlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-dstlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-dstlist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="fw-val-dstlist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleFwField('dstlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Src. Geo Location -->
            <div class="flex items-center text-xs py-1" id="fw-row-srcgeo">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Geo Location</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('srcgeo', true)" id="fw-plus-srcgeo" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-srcgeo" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-srcgeo" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="fw-val-srcgeo" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleFwField('srcgeo', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Geo Location -->
            <div class="flex items-center text-xs py-1" id="fw-row-dstgeo">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Geo Location</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('dstgeo', true)" id="fw-plus-dstgeo" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-dstgeo" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-dstgeo" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="fw-val-dstgeo" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleFwField('dstgeo', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Protocol -->
            <div class="flex items-center text-xs py-1" id="fw-row-proto">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Protocol</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('proto', true)" id="fw-plus-proto" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-proto" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-proto" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="fw-val-proto" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="tcp">6 (tcp)</option>
                    <option value="udp">17 (udp)</option>
                    <option value="icmp">1 (icmp)</option>
                    <option value="gre">47 (gre)</option>
                    <option value="esp">50 (esp)</option>
                    <option value="ipip">4 (ipip)</option>
                    <option value="vrrp">112 (vrrp)</option>
                    <option value="all">all</option>
                  </select>
                  <button type="button" onclick="toggleFwField('proto', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Src. Port -->
            <div class="flex items-center text-xs py-1" id="fw-row-sport">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Port</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('sport', true)" id="fw-plus-sport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-sport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-sport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="fw-val-sport" placeholder="80 or 1024-65535" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('sport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Port -->
            <div class="flex items-center text-xs py-1" id="fw-row-dport">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Port</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('dport', true)" id="fw-plus-dport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-dport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-dport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="fw-val-dport" placeholder="80,443" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('dport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Any. Port -->
            <div class="flex items-center text-xs py-1" id="fw-row-anyport">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Any. Port</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('anyport', true)" id="fw-plus-anyport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-anyport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-anyport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="fw-val-anyport" placeholder="53" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('anyport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- In. Interface -->
            <div class="flex items-center text-xs py-1" id="fw-row-iniface">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Interface</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('iniface', true)" id="fw-plus-iniface" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-iniface" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-iniface" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="fw-val-iniface" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleFwField('iniface', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Out. Interface -->
            <div class="flex items-center text-xs py-1" id="fw-row-outiface">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Interface</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('outiface', true)" id="fw-plus-outiface" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-outiface" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-outiface" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="fw-val-outiface" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleFwField('outiface', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- In. Interface List -->
            <div class="flex items-center text-xs py-1" id="fw-row-inifacelist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Interface List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('inifacelist', true)" id="fw-plus-inifacelist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-inifacelist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-inifacelist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="fw-val-inifacelist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="all">all</option>
                    <option value="none">none</option>
                    <option value="dynamic">dynamic</option>
                    <option value="LAN">LAN</option>
                    <option value="WAN">WAN</option>
                  </select>
                  <button type="button" onclick="toggleFwField('inifacelist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Out. Interface List -->
            <div class="flex items-center text-xs py-1" id="fw-row-outifacelist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Interface List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('outifacelist', true)" id="fw-plus-outifacelist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-outifacelist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-outifacelist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="fw-val-outifacelist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="all">all</option>
                    <option value="none">none</option>
                    <option value="dynamic">dynamic</option>
                    <option value="LAN">LAN</option>
                    <option value="WAN">WAN</option>
                  </select>
                  <button type="button" onclick="toggleFwField('outifacelist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Packet Mark -->
            <div class="flex items-center text-xs py-1" id="fw-row-pktmark">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Mark</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('pktmark', true)" id="fw-plus-pktmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-pktmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-pktmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="fw-val-pktmark" placeholder="e.g. qos_voip" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('pktmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Connection Mark -->
            <div class="flex items-center text-xs py-1" id="fw-row-connmark">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Mark</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('connmark', true)" id="fw-plus-connmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-connmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-connmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="fw-val-connmark" placeholder="e.g. wan1_conn" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('connmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Routing Mark -->
            <div class="flex items-center text-xs py-1" id="fw-row-routingmark">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Routing Mark</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('routingmark', true)" id="fw-plus-routingmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-routingmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-routingmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="fw-val-routingmark" placeholder="e.g. to_wan2" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('routingmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Connection Type -->
            <div class="flex items-center text-xs py-1" id="fw-row-conntype">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Type</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('conntype', true)" id="fw-plus-conntype" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-conntype" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <select id="fw-val-conntype" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="ftp">ftp</option>
                    <option value="h323">h323</option>
                    <option value="irc">irc</option>
                    <option value="pptp">pptp</option>
                    <option value="sip">sip</option>
                    <option value="tftp">tftp</option>
                  </select>
                  <button type="button" onclick="toggleFwField('conntype', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Connection State -->
            <div class="flex items-center text-xs py-1" id="fw-row-cs">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection State</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('cs', true)" id="fw-plus-cs" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-cs" class="hidden flex-1 flex flex-wrap items-center gap-2 min-w-0 bg-[#15202e] border border-[#26374d] rounded px-2 py-1">
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="filter-modal-cs-established" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">established</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="filter-modal-cs-related" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">related</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="filter-modal-cs-new" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">new</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="filter-modal-cs-invalid" class="rounded bg-[#101721] border-[#2b3e56] text-rose-500"><span class="text-slate-300">invalid</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="filter-modal-cs-untracked" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500"><span class="text-slate-300">untracked</span></label>
                  <button type="button" onclick="toggleFwField('cs', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0 ml-auto" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Connection NAT State -->
            <div class="flex items-center text-xs py-1" id="fw-row-natstate">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection NAT State</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('natstate', true)" id="fw-plus-natstate" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-natstate" class="hidden flex-1 flex items-center gap-3 min-w-0 bg-[#15202e] border border-[#26374d] rounded px-2 py-1">
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="filter-modal-nat-srcnat" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">srcnat</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="filter-modal-nat-dstnat" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">dstnat</span></label>
                  <button type="button" onclick="toggleFwField('natstate', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0 ml-auto" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>
          </div>

          <!-- TAB PANE: ADVANCED (Screenshot 2) -->
          <div id="fw-pane-advanced" class="fw-rule-pane hidden space-y-1">
            <!-- Layer7 Protocol -->
            <div class="flex items-center text-xs py-1" id="fw-row-layer7">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Layer7 Protocol</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('layer7', true)" id="fw-plus-layer7" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-layer7" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-layer7" placeholder="e.g. youtube_regex" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('layer7', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Content -->
            <div class="flex items-center text-xs py-1" id="fw-row-content">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Content</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('content', true)" id="fw-plus-content" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-content" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-content" placeholder="e.g. facebook.com" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('content', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Connection Bytes -->
            <div class="flex items-center text-xs py-1" id="fw-row-connbytes">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Bytes</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('connbytes', true)" id="fw-plus-connbytes" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-connbytes" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-connbytes" placeholder="e.g. 0-500000" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('connbytes', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Connection Rate -->
            <div class="flex items-center text-xs py-1" id="fw-row-connrate">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Rate</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('connrate', true)" id="fw-plus-connrate" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-connrate" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-connrate" placeholder="e.g. 0-100k" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('connrate', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Per Connection Classifier -->
            <div class="flex items-center text-xs py-1" id="fw-row-pcc">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Per Connection Classifier</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('pcc', true)" id="fw-plus-pcc" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-pcc" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-pcc" placeholder="both-addresses:2/0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('pcc', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Src. MAC Address -->
            <div class="flex items-center text-xs py-1" id="fw-row-srcmac">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. MAC Address</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('srcmac', true)" id="fw-plus-srcmac" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-srcmac" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="fw-inv-srcmac" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="fw-val-srcmac" placeholder="e.g. 00:11:22:33:44:55" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('srcmac', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Out. Bridge Port -->
            <div class="flex items-center text-xs py-1" id="fw-row-outbridgeport">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Bridge Port</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('outbridgeport', true)" id="fw-plus-outbridgeport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-outbridgeport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-outbridgeport" placeholder="e.g. eth1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('outbridgeport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- In. Bridge Port -->
            <div class="flex items-center text-xs py-1" id="fw-row-inbridgeport">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Bridge Port</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('inbridgeport', true)" id="fw-plus-inbridgeport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-inbridgeport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-inbridgeport" placeholder="e.g. eth0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('inbridgeport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- In. Bridge Port List -->
            <div class="flex items-center text-xs py-1" id="fw-row-inbridgeportlist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Bridge Port List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('inbridgeportlist', true)" id="fw-plus-inbridgeportlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-inbridgeportlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-inbridgeportlist" placeholder="e.g. LAN" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('inbridgeportlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Out. Bridge Port List -->
            <div class="flex items-center text-xs py-1" id="fw-row-outbridgeportlist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Bridge Port List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('outbridgeportlist', true)" id="fw-plus-outbridgeportlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-outbridgeportlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-outbridgeportlist" placeholder="e.g. WAN" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('outbridgeportlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- IPsec Policy -->
            <div class="flex items-center text-xs py-1" id="fw-row-ipsec">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">IPsec Policy</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('ipsec', true)" id="fw-plus-ipsec" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-ipsec" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <select id="fw-val-ipsec" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="in:ipsec">in:ipsec</option>
                    <option value="out:ipsec">out:ipsec</option>
                    <option value="in:none">in:none</option>
                    <option value="out:none">out:none</option>
                  </select>
                  <button type="button" onclick="toggleFwField('ipsec', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- TLS Host -->
            <div class="flex items-center text-xs py-1" id="fw-row-tlshost">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TLS Host</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('tlshost', true)" id="fw-plus-tlshost" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-tlshost" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-tlshost" placeholder="e.g. *.netflix.com" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('tlshost', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Ingress Priority -->
            <div class="flex items-center text-xs py-1" id="fw-row-ingresspriority">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Ingress Priority</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('ingresspriority', true)" id="fw-plus-ingresspriority" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-ingresspriority" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-ingresspriority" placeholder="0-7" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('ingresspriority', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Priority -->
            <div class="flex items-center text-xs py-1" id="fw-row-priority">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Priority</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('priority', true)" id="fw-plus-priority" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-priority" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-priority" placeholder="0-7" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('priority', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- DSCP -->
            <div class="flex items-center text-xs py-1" id="fw-row-dscp">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">DSCP</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('dscp', true)" id="fw-plus-dscp" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-dscp" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-dscp" placeholder="0-63 (e.g. 46 for EF)" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('dscp', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- TCP MSS -->
            <div class="flex items-center text-xs py-1" id="fw-row-tcpmss">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TCP MSS</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('tcpmss', true)" id="fw-plus-tcpmss" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-tcpmss" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-tcpmss" placeholder="e.g. 1440" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('tcpmss', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- TOS -->
            <div class="flex items-center text-xs py-1" id="fw-row-tos">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TOS</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <select id="fw-val-tos" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
                  <option value="">(any)</option>
                  <option value="0">0 (Normal Service)</option>
                  <option value="min-delay">min-delay (16)</option>
                  <option value="max-throughput">max-throughput (8)</option>
                  <option value="max-reliability">max-reliability (4)</option>
                  <option value="min-cost">min-cost (2)</option>
                </select>
              </div>
            </div>

            <!-- Packet Size -->
            <div class="flex items-center text-xs py-1" id="fw-row-pktsize">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Size</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('pktsize', true)" id="fw-plus-pktsize" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-pktsize" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-pktsize" placeholder="e.g. 64-1500" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('pktsize', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Random -->
            <div class="flex items-center text-xs py-1" id="fw-row-random">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Random</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('random', true)" id="fw-plus-random" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-random" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-random" placeholder="1-100 %" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('random', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- TCP Flags -->
            <div class="flex items-center text-xs py-1" id="fw-row-tcpflags">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TCP Flags</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('tcpflags', true)" id="fw-plus-tcpflags" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-tcpflags" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-tcpflags" placeholder="syn,ack,fin,rst" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('tcpflags', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- ICMP Options -->
            <div class="flex items-center text-xs py-1" id="fw-row-icmpoptions">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">ICMP Options</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('icmpoptions', true)" id="fw-plus-icmpoptions" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-icmpoptions" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-icmpoptions" placeholder="e.g. 8:0 (echo-request)" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('icmpoptions', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- IPv4 Options -->
            <div class="flex items-center text-xs py-1" id="fw-row-ipv4options">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">IPv4 Options</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('ipv4options', true)" id="fw-plus-ipv4options" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-ipv4options" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-ipv4options" placeholder="any, loose-source-routing" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('ipv4options', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- TTL -->
            <div class="flex items-center text-xs py-1" id="fw-row-ttl">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TTL</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('ttl', true)" id="fw-plus-ttl" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-ttl" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-ttl" placeholder="equal:64 or less-than:10" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('ttl', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>
          </div>

          <!-- TAB PANE: EXTRA -->
          <div id="fw-pane-extra" class="fw-rule-pane hidden space-y-1">
            <!-- Time -->
            <div class="flex items-center text-xs py-1" id="fw-row-time">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Time</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('time', true)" id="fw-plus-time" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-time" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-time" placeholder="00:00:00-23:59:59" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('time', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Days -->
            <div class="flex items-center text-xs py-1" id="fw-row-days">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Days</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('days', true)" id="fw-plus-days" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-days" class="hidden flex-1 flex flex-wrap items-center gap-2 min-w-0 bg-[#15202e] border border-[#26374d] rounded px-2 py-1">
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="fw-day-sun" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">sun</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="fw-day-mon" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">mon</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="fw-day-tue" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">tue</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="fw-day-wed" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">wed</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="fw-day-thu" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">thu</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="fw-day-fri" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">fri</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="fw-day-sat" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">sat</span></label>
                  <button type="button" onclick="toggleFwField('days', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0 ml-auto">-</button>
                </div>
              </div>
            </div>

            <!-- Limit -->
            <div class="flex items-center text-xs py-1" id="fw-row-limit">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Limit</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('limit', true)" id="fw-plus-limit" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-limit" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-limit" placeholder="e.g. 100,5:packet" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('limit', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Limit -->
            <div class="flex items-center text-xs py-1" id="fw-row-dstlimit">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Limit</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('dstlimit', true)" id="fw-plus-dstlimit" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-dstlimit" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-dstlimit" placeholder="e.g. 100/5s,5" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('dstlimit', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- PSD -->
            <div class="flex items-center text-xs py-1" id="fw-row-psd">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">PSD</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('psd', true)" id="fw-plus-psd" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-psd" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-psd" placeholder="Weight: 21, 3s, 3, 1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('psd', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>
          </div>

          <!-- TAB PANE: ACTION (Screenshot 3) -->
          <div id="fw-pane-action" class="fw-rule-pane hidden space-y-2">
            <!-- Action -->
            <div class="flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Action</label>
              <div class="flex-1">
                <select id="filter-modal-action" onchange="toggleFilterActionFields()" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
                  <option value="accept" selected>accept</option>
                  <option value="add-dst-to-address-list">add-dst-to-address-list</option>
                  <option value="add-src-to-address-list">add-src-to-address-list</option>
                  <option value="drop">drop</option>
                  <option value="fasttrack-connection">fasttrack-connection</option>
                  <option value="jump">jump</option>
                  <option value="log">log</option>
                  <option value="passthrough">passthrough</option>
                  <option value="reject">reject</option>
                  <option value="return">return</option>
                  <option value="tarpit">tarpit</option>
                </select>
              </div>
            </div>

            <!-- Reject With (Shown when action === reject) -->
            <div id="filter-action-reject-box" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-rose-300 shrink-0 select-none">Reject With</label>
              <div class="flex-1">
                <select id="filter-modal-rejectwith" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-rose-500 w-full cursor-pointer">
                  <option value="icmp-network-unreachable">icmp-network-unreachable</option>
                  <option value="icmp-host-unreachable">icmp-host-unreachable</option>
                  <option value="icmp-port-unreachable">icmp-port-unreachable</option>
                  <option value="icmp-admin-prohibited">icmp-admin-prohibited</option>
                  <option value="tcp-reset">tcp-reset</option>
                </select>
              </div>
            </div>

            <!-- Jump Target (Shown when action === jump) -->
            <div id="filter-action-jump-box" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-sky-300 shrink-0 select-none">Jump Target</label>
              <div class="flex-1">
                <input type="text" id="filter-modal-jumptarget" placeholder="chain name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- Address List & Timeout (Shown when action starts with add-) -->
            <div id="filter-action-addrlist-box" class="hidden space-y-1">
              <div class="flex items-center text-xs py-1">
                <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Address List</label>
                <div class="flex-1">
                  <input type="text" id="filter-modal-action-addrlist" list="fw-addrlist-datalist" placeholder="list name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                </div>
              </div>
              <div class="flex items-center text-xs py-1">
                <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Timeout</label>
                <div class="flex-1">
                  <input type="text" id="filter-modal-action-timeout" placeholder="none or 1d 00:00:00" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Log -->
            <div class="flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log</label>
              <div class="flex items-center">
                <input type="checkbox" id="filter-modal-log" onchange="toggleFwLogPrefix()" class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
              </div>
            </div>

            <!-- Log Prefix -->
            <div class="flex items-center text-xs py-1" id="fw-row-logprefix">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log Prefix</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleFwField('logprefix', true)" id="fw-plus-logprefix" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="fw-field-logprefix" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="fw-val-logprefix" placeholder="e.g. FW_DROP: " class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleFwField('logprefix', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>
          </div>

          <!-- TAB PANE: STATISTICS (Screenshot 4) -->
          <div id="fw-pane-statistics" class="fw-rule-pane hidden space-y-2 py-1">
            <!-- Bytes -->
            <div class="flex items-center text-xs">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Bytes</label>
              <div class="flex-1">
                <input type="text" id="fw-stat-bytes" readonly value="0 B" class="bg-[#121c27] border border-sky-600/80 rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
              </div>
            </div>

            <!-- Packets -->
            <div class="flex items-center text-xs">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packets</label>
              <div class="flex-1">
                <input type="text" id="fw-stat-packets" readonly value="0" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
              </div>
            </div>

            <div class="h-1"></div>

            <!-- Rate -->
            <div class="flex items-center text-xs">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Rate</label>
              <div class="flex-1">
                <input type="text" id="fw-stat-rate" readonly value="0 bps" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
              </div>
            </div>

            <!-- Packet Rate -->
            <div class="flex items-center text-xs">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Rate</label>
              <div class="flex-1">
                <input type="text" id="fw-stat-pktrate" readonly value="0 p/s" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
              </div>
            </div>

            <div class="h-2"></div>

            <!-- Rate Graph -->
            <div class="space-y-1">
              <div class="text-[11px] text-slate-300 font-medium pl-1">Rate Graph</div>
              <div class="bg-[#0f1721] border border-[#202e40] rounded p-1.5 relative overflow-hidden">
                <svg id="fw-stat-rate-svg" class="w-full h-24" viewBox="0 0 500 100" preserveAspectRatio="none">
                  <!-- Generated grid and sparkline -->
                </svg>
              </div>
              <div class="flex items-center justify-center gap-1.5 text-[11px] text-slate-300 py-0.5">
                <span class="w-2 h-2 rounded-full bg-sky-400"></span>
                <span id="fw-stat-legend-rate" class="font-mono font-semibold text-white">0 bps</span>
                <span class="text-slate-400">Rate</span>
              </div>
            </div>

            <!-- Packet Rate Graph -->
            <div class="space-y-1">
              <div class="text-[11px] text-slate-300 font-medium pl-1">Packet Rate Graph</div>
              <div class="bg-[#0f1721] border border-[#202e40] rounded p-1.5 relative overflow-hidden">
                <svg id="fw-stat-pktrate-svg" class="w-full h-24" viewBox="0 0 500 100" preserveAspectRatio="none">
                  <!-- Generated grid and sparkline -->
                </svg>
              </div>
              <div class="flex items-center justify-center gap-1.5 text-[11px] text-slate-300 py-0.5">
                <span class="w-2 h-2 rounded-full bg-sky-400"></span>
                <span id="fw-stat-legend-pktrate" class="font-mono font-semibold text-white">0 p/s</span>
                <span class="text-slate-400">Packet Rate</span>
              </div>
            </div>
          </div>
        </form>

        <!-- Right Vertical Sidebar -->
        <div class="w-40 min-w-[150px] border-l border-[#213042] bg-[#121a24] p-3 text-xs flex flex-col space-y-4 shrink-0">
          <div>
            <button type="button" onclick="copyFilterRule()" class="w-full flex items-center gap-2 text-slate-300 hover:text-sky-300 text-xs py-1 transition-colors">
              <svg class="w-3.5 h-3.5 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
              </svg>
              <span>Copy</span>
            </button>
          </div>

          <div class="space-y-2">
            <div class="text-slate-300 font-semibold flex items-center gap-1.5 text-xs">
              <span class="text-amber-400">⚡</span>
              <span>Actions</span>
            </div>
            <div class="flex flex-col space-y-1.5 pl-1">
              <button type="button" onclick="resetCurrentRuleCounters()" class="text-left text-slate-400 hover:text-sky-300 text-xs py-0.5 transition-colors">Reset Counters</button>
              <button type="button" onclick="resetAllFwCounters()" class="text-left text-slate-400 hover:text-sky-300 text-xs py-0.5 transition-colors">Reset All Counters</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Window Bottom Button Bar -->
      <div class="bg-[#141e2b] border-t border-[#1f2d3e] px-4 py-2 flex items-center justify-end gap-2 shrink-0">
        <button type="button" onclick="closeFilterModal()" class="px-4 py-1.5 rounded bg-[#1c2838] hover:bg-[#25364b] border border-[#2a3c54] text-xs font-medium text-slate-300 transition-colors">Cancel</button>
        <button type="button" onclick="applyFilterRule(false)" class="px-5 py-1.5 rounded bg-[#0078d4] hover:bg-[#006cbd] text-xs font-semibold text-white shadow-sm transition-colors">Apply</button>
        <button type="button" onclick="applyFilterRule(true)" class="px-5 py-1.5 rounded bg-[#0078d4] hover:bg-[#006cbd] text-xs font-semibold text-white shadow-sm transition-colors">OK</button>
      </div>
    </div>
  </div>

  <!-- ================= MODAL: FIREWALL NAT RULE (ROUTEROS WEBFIG / WINBOX V4 REPLICA) ================= -->
  <div id="nat-modal" class="fixed inset-0 bg-black/60 backdrop-blur-[2px] z-50 hidden flex items-center justify-center p-2 sm:p-4">
    <div id="nat-modal-window" class="bg-[#131b26] border border-[#243347] rounded-md shadow-2xl w-full max-w-[720px] max-h-[92vh] flex flex-col overflow-hidden text-xs select-none">
      
      <!-- Window Title Bar -->
      <div class="bg-[#162335] border-b border-[#223145] px-3.5 py-1.5 flex items-center justify-between shrink-0">
        <div class="flex items-center gap-2">
          <!-- WinBox v4 Logo -->
          <div class="flex items-center gap-0.5 text-cyan-400 font-bold font-mono text-[11px] leading-none">
            <svg class="w-3.5 h-3.5 text-cyan-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
              <path d="M4 5l3.5 10L11 5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M15 5v5h4m0-5v10" stroke-linecap="round" stroke-linejoin="round"/>
              <circle cx="12" cy="20" r="1.5" fill="currentColor"/>
            </svg>
            <span class="text-cyan-400 font-bold text-xs tracking-tight">v4</span>
          </div>
          <span class="text-slate-200 font-medium text-xs">NAT Rule &gt;</span>
          <span id="nat-modal-badge" class="bg-[#0078d4] text-white text-[11px] px-2 py-0.5 rounded font-mono font-medium">New...</span>
        </div>
        <div class="flex items-center gap-2">
          <button type="button" onclick="toggleMaximizeNATModal()" title="Maximize / Restore" class="text-slate-400 hover:text-white p-0.5 text-xs transition-colors">
            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
          </button>
          <button type="button" onclick="closeNATModal()" title="Close" class="text-slate-400 hover:text-rose-400 p-0.5 text-xs font-bold leading-none transition-colors">✕</button>
        </div>
      </div>

      <!-- Window Tabs Bar -->
      <div class="bg-[#111923] border-b border-[#1f2d3e] px-2 flex items-center gap-1 shrink-0">
        <button type="button" onclick="switchNATRuleTab('general')" id="nat-tab-btn-general" class="nat-rule-tab-btn bg-[#182638] text-white border-t-2 border-sky-400 px-3.5 py-1.5 text-xs font-medium transition-colors">General</button>
        <button type="button" onclick="switchNATRuleTab('advanced')" id="nat-tab-btn-advanced" class="nat-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Advanced</button>
        <button type="button" onclick="switchNATRuleTab('extra')" id="nat-tab-btn-extra" class="nat-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Extra</button>
        <button type="button" onclick="switchNATRuleTab('action')" id="nat-tab-btn-action" class="nat-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Action</button>
        <button type="button" onclick="switchNATRuleTab('statistics')" id="nat-tab-btn-statistics" class="nat-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Statistics</button>
      </div>

      <!-- Window Body (Split Layout: Left Tab Content + Right Action Sidebar) -->
      <div class="flex-1 flex min-h-0 overflow-hidden">
        
        <!-- Form Content Container (Scrollable) -->
        <form id="nat-rule-form" onsubmit="event.preventDefault(); applyNATRule(true);" class="flex-1 overflow-y-auto px-4 py-3 min-w-0 space-y-1">
          <input type="hidden" id="nat-modal-id">

          <!-- TAB PANE: GENERAL (Screenshot 1) -->
          <div id="nat-pane-general" class="nat-rule-pane space-y-1">
            <!-- Enabled -->
            <div class="flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Enabled</label>
              <div class="flex items-center">
                <input type="checkbox" id="nat-modal-enabled" checked class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
              </div>
            </div>

            <!-- Comment -->
            <div class="flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Comment</label>
              <div class="flex-1">
                <input type="text" id="nat-modal-comment" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- Chain -->
            <div class="flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Chain</label>
              <div class="flex-1">
                <select id="nat-modal-chain" onchange="handleNATChainChange()" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
                  <option value="srcnat" selected>srcnat</option>
                  <option value="dstnat">dstnat</option>
                </select>
              </div>
            </div>

            <!-- Src. Address -->
            <div class="flex items-center text-xs py-1" id="nat-row-src">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Address</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('src', true)" id="nat-plus-src" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-src" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-src" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="nat-val-src" placeholder="192.168.10.0/24" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('src', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Address -->
            <div class="flex items-center text-xs py-1" id="nat-row-dst">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Address</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('dst', true)" id="nat-plus-dst" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-dst" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-dst" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="nat-val-dst" placeholder="0.0.0.0/0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('dst', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Src. Address List -->
            <div class="flex items-center text-xs py-1" id="nat-row-srclist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Address List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('srclist', true)" id="nat-plus-srclist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-srclist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-srclist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="nat-val-srclist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleNATField('srclist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Address List -->
            <div class="flex items-center text-xs py-1" id="nat-row-dstlist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Address List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('dstlist', true)" id="nat-plus-dstlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-dstlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-dstlist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="nat-val-dstlist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleNATField('dstlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Src. Geo Location -->
            <div class="flex items-center text-xs py-1" id="nat-row-srcgeo">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Geo Location</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('srcgeo', true)" id="nat-plus-srcgeo" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-srcgeo" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-srcgeo" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="nat-val-srcgeo" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleNATField('srcgeo', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Geo Location -->
            <div class="flex items-center text-xs py-1" id="nat-row-dstgeo">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Geo Location</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('dstgeo', true)" id="nat-plus-dstgeo" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-dstgeo" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-dstgeo" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="nat-val-dstgeo" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleNATField('dstgeo', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Protocol -->
            <div class="flex items-center text-xs py-1" id="nat-row-proto">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Protocol</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('proto', true)" id="nat-plus-proto" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-proto" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-proto" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="nat-val-proto" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="tcp">6 (tcp)</option>
                    <option value="udp">17 (udp)</option>
                    <option value="icmp">1 (icmp)</option>
                    <option value="gre">47 (gre)</option>
                    <option value="esp">50 (esp)</option>
                    <option value="all">all</option>
                  </select>
                  <button type="button" onclick="toggleNATField('proto', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Src. Port -->
            <div class="flex items-center text-xs py-1" id="nat-row-sport">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Port</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('sport', true)" id="nat-plus-sport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-sport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-sport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="nat-val-sport" placeholder="e.g. 80,443 or 1000-2000" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('sport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Port -->
            <div class="flex items-center text-xs py-1" id="nat-row-dport">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Port</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('dport', true)" id="nat-plus-dport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-dport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-dport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="nat-val-dport" placeholder="e.g. 80,443,8080" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('dport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Any. Port -->
            <div class="flex items-center text-xs py-1" id="nat-row-anyport">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Any. Port</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('anyport', true)" id="nat-plus-anyport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-anyport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-anyport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="nat-val-anyport" placeholder="53" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('anyport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- In. Interface -->
            <div class="flex items-center text-xs py-1" id="nat-row-iniface">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Interface</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('iniface', true)" id="nat-plus-iniface" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-iniface" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-iniface" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="nat-val-iniface" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleNATField('iniface', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Out. Interface -->
            <div class="flex items-center text-xs py-1" id="nat-row-outiface">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Interface</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('outiface', true)" id="nat-plus-outiface" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-outiface" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-outiface" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="nat-val-outiface" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleNATField('outiface', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- In. Interface List -->
            <div class="flex items-center text-xs py-1" id="nat-row-inifacelist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Interface List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('inifacelist', true)" id="nat-plus-inifacelist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-inifacelist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-inifacelist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="nat-val-inifacelist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="all">all</option>
                    <option value="none">none</option>
                    <option value="dynamic">dynamic</option>
                    <option value="LAN">LAN</option>
                    <option value="WAN">WAN</option>
                  </select>
                  <button type="button" onclick="toggleNATField('inifacelist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Out. Interface List -->
            <div class="flex items-center text-xs py-1" id="nat-row-outifacelist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Interface List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('outifacelist', true)" id="nat-plus-outifacelist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-outifacelist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-outifacelist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="nat-val-outifacelist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="all">all</option>
                    <option value="none">none</option>
                    <option value="dynamic">dynamic</option>
                    <option value="LAN">LAN</option>
                    <option value="WAN">WAN</option>
                  </select>
                  <button type="button" onclick="toggleNATField('outifacelist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Packet Mark -->
            <div class="flex items-center text-xs py-1" id="nat-row-pktmark">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Mark</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('pktmark', true)" id="nat-plus-pktmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-pktmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-pktmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="nat-val-pktmark" placeholder="e.g. qos_nat" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('pktmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Connection Mark -->
            <div class="flex items-center text-xs py-1" id="nat-row-connmark">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Mark</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('connmark', true)" id="nat-plus-connmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-connmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-connmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="nat-val-connmark" placeholder="e.g. wan1_conn" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('connmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Routing Mark -->
            <div class="flex items-center text-xs py-1" id="nat-row-routingmark">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Routing Mark</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('routingmark', true)" id="nat-plus-routingmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-routingmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-routingmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="nat-val-routingmark" placeholder="e.g. to_wan2" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('routingmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Connection Type -->
            <div class="flex items-center text-xs py-1" id="nat-row-conntype">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Type</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('conntype', true)" id="nat-plus-conntype" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-conntype" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <select id="nat-val-conntype" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="ftp">ftp</option>
                    <option value="h323">h323</option>
                    <option value="irc">irc</option>
                    <option value="pptp">pptp</option>
                    <option value="sip">sip</option>
                    <option value="tftp">tftp</option>
                  </select>
                  <button type="button" onclick="toggleNATField('conntype', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>
          </div>

          <!-- TAB PANE: ADVANCED (Screenshot 2) -->
          <div id="nat-pane-advanced" class="nat-rule-pane hidden space-y-1">
            <!-- Layer7 Protocol -->
            <div class="flex items-center text-xs py-1" id="nat-row-layer7">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Layer7 Protocol</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('layer7', true)" id="nat-plus-layer7" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-layer7" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-layer7" placeholder="e.g. youtube_regex" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('layer7', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Content -->
            <div class="flex items-center text-xs py-1" id="nat-row-content">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Content</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('content', true)" id="nat-plus-content" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-content" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-content" placeholder="e.g. facebook.com" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('content', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Connection Bytes -->
            <div class="flex items-center text-xs py-1" id="nat-row-connbytes">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Bytes</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('connbytes', true)" id="nat-plus-connbytes" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-connbytes" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-connbytes" placeholder="e.g. 0-500000" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('connbytes', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Connection Rate -->
            <div class="flex items-center text-xs py-1" id="nat-row-connrate">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Rate</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('connrate', true)" id="nat-plus-connrate" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-connrate" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-connrate" placeholder="e.g. 0-100k" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('connrate', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Per Connection Classifier -->
            <div class="flex items-center text-xs py-1" id="nat-row-pcc">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Per Connection Classifier</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('pcc', true)" id="nat-plus-pcc" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-pcc" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-pcc" placeholder="both-addresses:2/0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('pcc', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Src. MAC Address -->
            <div class="flex items-center text-xs py-1" id="nat-row-srcmac">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. MAC Address</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('srcmac', true)" id="nat-plus-srcmac" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-srcmac" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="nat-inv-srcmac" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="nat-val-srcmac" placeholder="e.g. 00:11:22:33:44:55" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('srcmac', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Out. Bridge Port -->
            <div class="flex items-center text-xs py-1" id="nat-row-outbridgeport">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Bridge Port</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('outbridgeport', true)" id="nat-plus-outbridgeport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-outbridgeport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-outbridgeport" placeholder="e.g. eth1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('outbridgeport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- In. Bridge Port -->
            <div class="flex items-center text-xs py-1" id="nat-row-inbridgeport">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Bridge Port</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('inbridgeport', true)" id="nat-plus-inbridgeport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-inbridgeport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-inbridgeport" placeholder="e.g. eth0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('inbridgeport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- In. Bridge Port List -->
            <div class="flex items-center text-xs py-1" id="nat-row-inbridgeportlist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Bridge Port List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('inbridgeportlist', true)" id="nat-plus-inbridgeportlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-inbridgeportlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-inbridgeportlist" placeholder="e.g. LAN" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('inbridgeportlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Out. Bridge Port List -->
            <div class="flex items-center text-xs py-1" id="nat-row-outbridgeportlist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Bridge Port List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('outbridgeportlist', true)" id="nat-plus-outbridgeportlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-outbridgeportlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-outbridgeportlist" placeholder="e.g. WAN" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('outbridgeportlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- IPsec Policy -->
            <div class="flex items-center text-xs py-1" id="nat-row-ipsec">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">IPsec Policy</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('ipsec', true)" id="nat-plus-ipsec" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-ipsec" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <select id="nat-val-ipsec" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="in:ipsec">in:ipsec</option>
                    <option value="out:ipsec">out:ipsec</option>
                    <option value="in:none">in:none</option>
                    <option value="out:none">out:none</option>
                  </select>
                  <button type="button" onclick="toggleNATField('ipsec', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Ingress Priority -->
            <div class="flex items-center text-xs py-1" id="nat-row-ingresspriority">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Ingress Priority</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('ingresspriority', true)" id="nat-plus-ingresspriority" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-ingresspriority" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-ingresspriority" placeholder="0-7" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('ingresspriority', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Priority -->
            <div class="flex items-center text-xs py-1" id="nat-row-priority">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Priority</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('priority', true)" id="nat-plus-priority" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-priority" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-priority" placeholder="0-7" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('priority', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- DSCP -->
            <div class="flex items-center text-xs py-1" id="nat-row-dscp">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">DSCP</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('dscp', true)" id="nat-plus-dscp" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-dscp" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-dscp" placeholder="0-63" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('dscp', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- TCP MSS -->
            <div class="flex items-center text-xs py-1" id="nat-row-tcpmss">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TCP MSS</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('tcpmss', true)" id="nat-plus-tcpmss" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-tcpmss" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-tcpmss" placeholder="e.g. 1440" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('tcpmss', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- TOS -->
            <div class="flex items-center text-xs py-1" id="nat-row-tos">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TOS</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <select id="nat-val-tos" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
                  <option value="">(any)</option>
                  <option value="0">0 (Normal Service)</option>
                  <option value="min-delay">min-delay (16)</option>
                  <option value="max-throughput">max-throughput (8)</option>
                  <option value="max-reliability">max-reliability (4)</option>
                  <option value="min-cost">min-cost (2)</option>
                </select>
              </div>
            </div>

            <!-- Packet Size -->
            <div class="flex items-center text-xs py-1" id="nat-row-pktsize">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Size</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('pktsize', true)" id="nat-plus-pktsize" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-pktsize" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-pktsize" placeholder="e.g. 64-1500" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('pktsize', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Random -->
            <div class="flex items-center text-xs py-1" id="nat-row-random">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Random</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('random', true)" id="nat-plus-random" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-random" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-random" placeholder="1-100 %" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('random', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- ICMP Options -->
            <div class="flex items-center text-xs py-1" id="nat-row-icmpoptions">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">ICMP Options</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('icmpoptions', true)" id="nat-plus-icmpoptions" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-icmpoptions" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-icmpoptions" placeholder="e.g. 8:0 (echo-request)" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('icmpoptions', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- IPv4 Options -->
            <div class="flex items-center text-xs py-1" id="nat-row-ipv4options">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">IPv4 Options</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('ipv4options', true)" id="nat-plus-ipv4options" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-ipv4options" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-ipv4options" placeholder="any, loose-source-routing" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('ipv4options', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- TTL -->
            <div class="flex items-center text-xs py-1" id="nat-row-ttl">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TTL</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('ttl', true)" id="nat-plus-ttl" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-ttl" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-ttl" placeholder="equal:64 or less-than:10" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('ttl', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>
          </div>

          <!-- TAB PANE: EXTRA -->
          <div id="nat-pane-extra" class="nat-rule-pane hidden space-y-1">
            <!-- Time -->
            <div class="flex items-center text-xs py-1" id="nat-row-time">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Time</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('time', true)" id="nat-plus-time" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-time" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-time" placeholder="00:00:00-23:59:59" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('time', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Days -->
            <div class="flex items-center text-xs py-1" id="nat-row-days">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Days</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('days', true)" id="nat-plus-days" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-days" class="hidden flex-1 flex flex-wrap items-center gap-2 min-w-0 bg-[#15202e] border border-[#26374d] rounded px-2 py-1">
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="nat-day-sun" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">sun</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="nat-day-mon" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">mon</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="nat-day-tue" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">tue</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="nat-day-wed" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">wed</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="nat-day-thu" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">thu</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="nat-day-fri" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">fri</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="nat-day-sat" checked class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">sat</span></label>
                  <button type="button" onclick="toggleNATField('days', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0 ml-auto">-</button>
                </div>
              </div>
            </div>

            <!-- Limit -->
            <div class="flex items-center text-xs py-1" id="nat-row-limit">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Limit</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('limit', true)" id="nat-plus-limit" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-limit" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-limit" placeholder="e.g. 100,5:packet" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('limit', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Limit -->
            <div class="flex items-center text-xs py-1" id="nat-row-dstlimit">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Limit</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('dstlimit', true)" id="nat-plus-dstlimit" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-dstlimit" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-dstlimit" placeholder="e.g. 100/5s,5" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('dstlimit', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- PSD -->
            <div class="flex items-center text-xs py-1" id="nat-row-psd">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">PSD</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('psd', true)" id="nat-plus-psd" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-psd" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-psd" placeholder="Weight: 21, 3s, 3, 1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('psd', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>
          </div>

          <!-- TAB PANE: ACTION (Screenshot 3) -->
          <div id="nat-pane-action" class="nat-rule-pane hidden space-y-2">
            <!-- Action -->
            <div class="flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Action</label>
              <div class="flex-1">
                <select id="nat-modal-action" onchange="toggleNATActionFields()" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
                  <option value="accept">accept</option>
                  <option value="add-dst-to-address-list">add dst to address list</option>
                  <option value="add-src-to-address-list">add src to address list</option>
                  <option value="dst-nat">dst-nat</option>
                  <option value="endpoint-independent-nat">endpoint-independent-nat</option>
                  <option value="jump">jump</option>
                  <option value="log">log</option>
                  <option value="masquerade" selected>masquerade</option>
                  <option value="netmap">netmap</option>
                  <option value="passthrough">passthrough</option>
                  <option value="redirect">redirect</option>
                  <option value="return">return</option>
                  <option value="same">same</option>
                  <option value="socksify">socksify</option>
                  <option value="src-nat">src-nat</option>
                </select>
              </div>
            </div>

            <!-- To Addresses (Shown for src-nat, dst-nat, netmap, same, socksify, endpoint-independent-nat) -->
            <div id="nat-row-toaddr" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">To Addresses</label>
              <div class="flex-1">
                <input type="text" id="nat-modal-toaddr" placeholder="192.168.10.50 or WAN IP" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- To Ports (Shown for src-nat, dst-nat, redirect, masquerade, netmap, socksify, endpoint-independent-nat) -->
            <div id="nat-row-toport" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">To Ports</label>
              <div class="flex-1">
                <input type="text" id="nat-modal-toport" placeholder="80 or 8080 or 1024-65535" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- Jump Target (Shown when action === jump) -->
            <div id="nat-action-jump-box" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-sky-300 shrink-0 select-none">Jump Target</label>
              <div class="flex-1">
                <input type="text" id="nat-modal-jumptarget" placeholder="chain name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- Address List & Timeout (Shown when action starts with add-) -->
            <div id="nat-action-addrlist-box" class="hidden space-y-1">
              <div class="flex items-center text-xs py-1">
                <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Address List</label>
                <div class="flex-1">
                  <input type="text" id="nat-modal-action-addrlist" list="fw-addrlist-datalist" placeholder="list name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                </div>
              </div>
              <div class="flex items-center text-xs py-1">
                <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Timeout</label>
                <div class="flex-1">
                  <input type="text" id="nat-modal-action-timeout" placeholder="none or 1d 00:00:00" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Log -->
            <div class="flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log</label>
              <div class="flex items-center">
                <input type="checkbox" id="nat-modal-log" onchange="toggleNATLogPrefix()" class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
              </div>
            </div>

            <!-- Log Prefix -->
            <div class="flex items-center text-xs py-1" id="nat-row-logprefix">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log Prefix</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleNATField('logprefix', true)" id="nat-plus-logprefix" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="nat-field-logprefix" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="nat-val-logprefix" placeholder="e.g. NAT_LOG: " class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleNATField('logprefix', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>
          </div>

          <!-- TAB PANE: STATISTICS (Screenshot 4) -->
          <div id="nat-pane-statistics" class="nat-rule-pane hidden space-y-2 py-1">
            <!-- Bytes -->
            <div class="flex items-center text-xs">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Bytes</label>
              <div class="flex-1">
                <input type="text" id="nat-stat-bytes" readonly value="0 B" class="bg-[#121c27] border border-sky-600/80 rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
              </div>
            </div>

            <!-- Packets -->
            <div class="flex items-center text-xs">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packets</label>
              <div class="flex-1">
                <input type="text" id="nat-stat-packets" readonly value="0" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
              </div>
            </div>

            <div class="h-1"></div>

            <!-- Rate -->
            <div class="flex items-center text-xs">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Rate</label>
              <div class="flex-1">
                <input type="text" id="nat-stat-rate" readonly value="0 bps" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
              </div>
            </div>

            <!-- Packet Rate -->
            <div class="flex items-center text-xs">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Rate</label>
              <div class="flex-1">
                <input type="text" id="nat-stat-pktrate" readonly value="0 p/s" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
              </div>
            </div>

            <div class="h-2"></div>

            <!-- Rate Graph -->
            <div class="space-y-1">
              <div class="text-[11px] text-slate-300 font-medium pl-1">Rate Graph</div>
              <div class="bg-[#0f1721] border border-[#202e40] rounded p-1.5 relative overflow-hidden">
                <svg id="nat-stat-rate-svg" class="w-full h-24" viewBox="0 0 500 100" preserveAspectRatio="none">
                  <!-- Generated grid and sparkline -->
                </svg>
              </div>
              <div class="flex items-center justify-center gap-1.5 text-[11px] text-slate-300 py-0.5">
                <span class="w-2 h-2 rounded-full bg-sky-400"></span>
                <span id="nat-stat-legend-rate" class="font-mono font-semibold text-white">0 bps</span>
                <span class="text-slate-400">Rate</span>
              </div>
            </div>

            <!-- Packet Rate Graph -->
            <div class="space-y-1">
              <div class="text-[11px] text-slate-300 font-medium pl-1">Packet Rate Graph</div>
              <div class="bg-[#0f1721] border border-[#202e40] rounded p-1.5 relative overflow-hidden">
                <svg id="nat-stat-pktrate-svg" class="w-full h-24" viewBox="0 0 500 100" preserveAspectRatio="none">
                  <!-- Generated grid and sparkline -->
                </svg>
              </div>
              <div class="flex items-center justify-center gap-1.5 text-[11px] text-slate-300 py-0.5">
                <span class="w-2 h-2 rounded-full bg-sky-400"></span>
                <span id="nat-stat-legend-pktrate" class="font-mono font-semibold text-white">0 p/s</span>
                <span class="text-slate-400">Packet Rate</span>
              </div>
            </div>
          </div>
        </form>

        <!-- Right Vertical Sidebar -->
        <div class="w-40 min-w-[150px] border-l border-[#213042] bg-[#121a24] p-3 text-xs flex flex-col space-y-4 shrink-0">
          <div>
            <button type="button" onclick="copyNATRule()" class="w-full flex items-center gap-2 text-slate-300 hover:text-sky-300 text-xs py-1 transition-colors">
              <svg class="w-3.5 h-3.5 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
              </svg>
              <span>Copy</span>
            </button>
          </div>

          <div class="space-y-2">
            <div class="text-slate-300 font-semibold flex items-center gap-1.5 text-xs">
              <span class="text-amber-400">⚡</span>
              <span>Actions</span>
            </div>
            <div class="flex flex-col space-y-1.5 pl-1">
              <button type="button" onclick="resetCurrentNATRuleCounters()" class="text-left text-slate-400 hover:text-sky-300 text-xs py-0.5 transition-colors">Reset Counters</button>
              <button type="button" onclick="resetAllFwCounters()" class="text-left text-slate-400 hover:text-sky-300 text-xs py-0.5 transition-colors">Reset All Counters</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Window Bottom Button Bar -->
      <div class="bg-[#141e2b] border-t border-[#1f2d3e] px-4 py-2 flex items-center justify-end gap-2 shrink-0">
        <button type="button" onclick="closeNATModal()" class="px-4 py-1.5 rounded bg-[#1c2838] hover:bg-[#25364b] border border-[#2a3c54] text-xs font-medium text-slate-300 transition-colors">Cancel</button>
        <button type="button" onclick="applyNATRule(false)" class="px-5 py-1.5 rounded bg-[#0078d4] hover:bg-[#006cbd] text-xs font-semibold text-white shadow-sm transition-colors">Apply</button>
        <button type="button" onclick="applyNATRule(true)" class="px-5 py-1.5 rounded bg-[#0078d4] hover:bg-[#006cbd] text-xs font-semibold text-white shadow-sm transition-colors">OK</button>
      </div>
    </div>
  </div>

  <!-- ================= MODAL: FIREWALL MANGLE RULE (ROUTEROS WEBFIG / WINBOX V4 REPLICA) ================= -->
  <div id="mangle-modal" class="fixed inset-0 bg-black/60 backdrop-blur-[2px] z-50 hidden flex items-center justify-center p-2 sm:p-4">
    <div id="mangle-modal-window" class="bg-[#131b26] border border-[#243347] rounded-md shadow-2xl w-full max-w-[720px] max-h-[92vh] flex flex-col overflow-hidden text-xs select-none">
      
      <!-- Window Title Bar -->
      <div class="bg-[#162335] border-b border-[#223145] px-3.5 py-1.5 flex items-center justify-between shrink-0">
        <div class="flex items-center gap-2">
          <!-- WinBox v4 Logo -->
          <div class="flex items-center gap-0.5 text-cyan-400 font-bold font-mono text-[11px] leading-none">
            <svg class="w-3.5 h-3.5 text-cyan-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
              <path d="M4 5l3.5 10L11 5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M15 5v5h4m0-5v10" stroke-linecap="round" stroke-linejoin="round"/>
              <circle cx="12" cy="20" r="1.5" fill="currentColor"/>
            </svg>
            <span class="text-cyan-400 font-bold text-xs tracking-tight">v4</span>
          </div>
          <span class="text-slate-200 font-medium text-xs">Mangle Rule &gt;</span>
          <span id="mangle-modal-badge" class="bg-[#0078d4] text-white text-[11px] px-2 py-0.5 rounded font-mono font-medium">New...</span>
        </div>
        <div class="flex items-center gap-2">
          <button type="button" onclick="toggleMaximizeMangleModal()" title="Maximize / Restore" class="text-slate-400 hover:text-white p-0.5 text-xs transition-colors">
            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
          </button>
          <button type="button" onclick="closeMangleModal()" title="Close" class="text-slate-400 hover:text-rose-400 p-0.5 text-xs font-bold leading-none transition-colors">✕</button>
        </div>
      </div>

      <!-- Window Tabs Bar -->
      <div class="bg-[#111923] border-b border-[#1f2d3e] px-2 flex items-center gap-1 shrink-0">
        <button type="button" onclick="switchMangleRuleTab('general')" id="mangle-tab-btn-general" class="mangle-rule-tab-btn bg-[#182638] text-white border-t-2 border-sky-400 px-3.5 py-1.5 text-xs font-medium transition-colors">General</button>
        <button type="button" onclick="switchMangleRuleTab('advanced')" id="mangle-tab-btn-advanced" class="mangle-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Advanced</button>
        <button type="button" onclick="switchMangleRuleTab('extra')" id="mangle-tab-btn-extra" class="mangle-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Extra</button>
        <button type="button" onclick="switchMangleRuleTab('action')" id="mangle-tab-btn-action" class="mangle-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Action</button>
        <button type="button" onclick="switchMangleRuleTab('statistics')" id="mangle-tab-btn-statistics" class="mangle-rule-tab-btn text-slate-400 hover:text-white hover:bg-[#15202d] border-t-2 border-transparent px-3.5 py-1.5 text-xs font-medium transition-colors">Statistics</button>
      </div>

      <!-- Window Body (Split Layout: Left Tab Content + Right Action Sidebar) -->
      <div class="flex-1 flex min-h-0 overflow-hidden">
        
        <!-- Form Content Container (Scrollable) -->
        <form id="mangle-rule-form" onsubmit="event.preventDefault(); applyMangleRule(true);" class="flex-1 overflow-y-auto px-4 py-3 min-w-0 space-y-1">
          <input type="hidden" id="mangle-modal-id">

          <!-- TAB PANE: GENERAL (Screenshot 1) -->
          <div id="mangle-pane-general" class="mangle-rule-pane space-y-1">
            <!-- Enabled -->
            <div class="flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Enabled</label>
              <div class="flex items-center">
                <input type="checkbox" id="mangle-modal-enabled" checked class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
              </div>
            </div>

            <!-- Comment -->
            <div class="flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Comment</label>
              <div class="flex-1">
                <input type="text" id="mangle-modal-comment" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- Chain -->
            <div class="flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Chain</label>
              <div class="flex-1">
                <select id="mangle-modal-chain" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
                  <option value="prerouting" selected>prerouting</option>
                  <option value="postrouting">postrouting</option>
                  <option value="forward">forward</option>
                  <option value="input">input</option>
                  <option value="output">output</option>
                </select>
              </div>
            </div>

            <!-- Src. Address -->
            <div class="flex items-center text-xs py-1" id="mangle-row-src">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Address</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('src', true)" id="mangle-plus-src" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-src" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-src" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="mangle-val-src" placeholder="192.168.10.0/24" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('src', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Address -->
            <div class="flex items-center text-xs py-1" id="mangle-row-dst">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Address</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('dst', true)" id="mangle-plus-dst" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-dst" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-dst" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="mangle-val-dst" placeholder="0.0.0.0/0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('dst', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Src. Address List -->
            <div class="flex items-center text-xs py-1" id="mangle-row-srclist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Address List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('srclist', true)" id="mangle-plus-srclist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-srclist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-srclist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="mangle-val-srclist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleMangleField('srclist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Address List -->
            <div class="flex items-center text-xs py-1" id="mangle-row-dstlist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Address List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('dstlist', true)" id="mangle-plus-dstlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-dstlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-dstlist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="mangle-val-dstlist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleMangleField('dstlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Src. Geo Location -->
            <div class="flex items-center text-xs py-1" id="mangle-row-srcgeo">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Geo Location</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('srcgeo', true)" id="mangle-plus-srcgeo" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-srcgeo" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-srcgeo" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="mangle-val-srcgeo" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleMangleField('srcgeo', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Geo Location -->
            <div class="flex items-center text-xs py-1" id="mangle-row-dstgeo">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Geo Location</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('dstgeo', true)" id="mangle-plus-dstgeo" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-dstgeo" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-dstgeo" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="mangle-val-dstgeo" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleMangleField('dstgeo', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Protocol -->
            <div class="flex items-center text-xs py-1" id="mangle-row-proto">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Protocol</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('proto', true)" id="mangle-plus-proto" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-proto" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-proto" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="mangle-val-proto" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="tcp">6 (tcp)</option>
                    <option value="udp">17 (udp)</option>
                    <option value="icmp">1 (icmp)</option>
                    <option value="gre">47 (gre)</option>
                    <option value="esp">50 (esp)</option>
                    <option value="all">all</option>
                  </select>
                  <button type="button" onclick="toggleMangleField('proto', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Src. Port -->
            <div class="flex items-center text-xs py-1" id="mangle-row-sport">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Port</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('sport', true)" id="mangle-plus-sport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-sport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-sport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="mangle-val-sport" placeholder="e.g. 80,443 or 1000-2000" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('sport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Port -->
            <div class="flex items-center text-xs py-1" id="mangle-row-dport">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Port</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('dport', true)" id="mangle-plus-dport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-dport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-dport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="mangle-val-dport" placeholder="e.g. 80,443,8080" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('dport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Any. Port -->
            <div class="flex items-center text-xs py-1" id="mangle-row-anyport">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Any. Port</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('anyport', true)" id="mangle-plus-anyport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-anyport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-anyport" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="mangle-val-anyport" placeholder="53" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('anyport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- In. Interface -->
            <div class="flex items-center text-xs py-1" id="mangle-row-iniface">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Interface</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('iniface', true)" id="mangle-plus-iniface" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-iniface" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-iniface" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="mangle-val-iniface" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleMangleField('iniface', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Out. Interface -->
            <div class="flex items-center text-xs py-1" id="mangle-row-outiface">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Interface</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('outiface', true)" id="mangle-plus-outiface" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-outiface" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-outiface" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="mangle-val-outiface" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full"></select>
                  <button type="button" onclick="toggleMangleField('outiface', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- In. Interface List -->
            <div class="flex items-center text-xs py-1" id="mangle-row-inifacelist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Interface List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('inifacelist', true)" id="mangle-plus-inifacelist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-inifacelist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-inifacelist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="mangle-val-inifacelist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="all">all</option>
                    <option value="none">none</option>
                    <option value="dynamic">dynamic</option>
                    <option value="LAN">LAN</option>
                    <option value="WAN">WAN</option>
                  </select>
                  <button type="button" onclick="toggleMangleField('inifacelist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Out. Interface List -->
            <div class="flex items-center text-xs py-1" id="mangle-row-outifacelist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Interface List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('outifacelist', true)" id="mangle-plus-outifacelist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-outifacelist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-outifacelist" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <select id="mangle-val-outifacelist" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="all">all</option>
                    <option value="none">none</option>
                    <option value="dynamic">dynamic</option>
                    <option value="LAN">LAN</option>
                    <option value="WAN">WAN</option>
                  </select>
                  <button type="button" onclick="toggleMangleField('outifacelist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Packet Mark -->
            <div class="flex items-center text-xs py-1" id="mangle-row-pktmark">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Mark</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('pktmark', true)" id="mangle-plus-pktmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-pktmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-pktmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="mangle-val-pktmark" placeholder="e.g. qos_voip" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('pktmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Connection Mark -->
            <div class="flex items-center text-xs py-1" id="mangle-row-connmark">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Mark</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('connmark', true)" id="mangle-plus-connmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-connmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-connmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="mangle-val-connmark" placeholder="e.g. wan1_conn" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('connmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Routing Mark -->
            <div class="flex items-center text-xs py-1" id="mangle-row-routingmark">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Routing Mark</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('routingmark', true)" id="mangle-plus-routingmark" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-routingmark" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-routingmark" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="mangle-val-routingmark" placeholder="e.g. to_wan2" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('routingmark', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Connection Type -->
            <div class="flex items-center text-xs py-1" id="mangle-row-conntype">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Type</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('conntype', true)" id="mangle-plus-conntype" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-conntype" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <select id="mangle-val-conntype" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="ftp">ftp</option>
                    <option value="h323">h323</option>
                    <option value="irc">irc</option>
                    <option value="pptp">pptp</option>
                    <option value="sip">sip</option>
                    <option value="tftp">tftp</option>
                  </select>
                  <button type="button" onclick="toggleMangleField('conntype', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Connection State -->
            <div class="flex items-center text-xs py-1" id="mangle-row-cs">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection State</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('cs', true)" id="mangle-plus-cs" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-cs" class="hidden flex-1 flex flex-wrap items-center gap-2 min-w-0 bg-[#15202e] border border-[#26374d] rounded px-2 py-1">
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="mangle-modal-cs-established" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">established</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="mangle-modal-cs-related" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">related</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="mangle-modal-cs-new" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">new</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="mangle-modal-cs-invalid" class="rounded bg-[#101721] border-[#2b3e56] text-rose-500"><span class="text-slate-300">invalid</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="mangle-modal-cs-untracked" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500"><span class="text-slate-300">untracked</span></label>
                  <button type="button" onclick="toggleMangleField('cs', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0 ml-auto" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>

            <!-- Connection NAT State -->
            <div class="flex items-center text-xs py-1" id="mangle-row-natstate">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection NAT State</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('natstate', true)" id="mangle-plus-natstate" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-natstate" class="hidden flex-1 flex items-center gap-3 min-w-0 bg-[#15202e] border border-[#26374d] rounded px-2 py-1">
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="mangle-modal-nat-srcnat" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">srcnat</span></label>
                  <label class="flex items-center gap-1 cursor-pointer"><input type="checkbox" id="mangle-modal-nat-dstnat" class="rounded bg-[#101721] border-[#2b3e56] text-sky-500"><span class="text-slate-300">dstnat</span></label>
                  <button type="button" onclick="toggleMangleField('natstate', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0 ml-auto" title="Remove / Clear">-</button>
                </div>
              </div>
            </div>
          </div>

          <!-- TAB PANE: ADVANCED (Screenshot 2) -->
          <div id="mangle-pane-advanced" class="mangle-rule-pane hidden space-y-1">
            <!-- Layer7 Protocol -->
            <div class="flex items-center text-xs py-1" id="mangle-row-layer7">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Layer7 Protocol</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('layer7', true)" id="mangle-plus-layer7" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-layer7" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-layer7" placeholder="e.g. youtube_regex" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('layer7', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Content -->
            <div class="flex items-center text-xs py-1" id="mangle-row-content">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Content</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('content', true)" id="mangle-plus-content" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-content" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-content" placeholder="e.g. facebook.com" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('content', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Connection Bytes -->
            <div class="flex items-center text-xs py-1" id="mangle-row-connbytes">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Bytes</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('connbytes', true)" id="mangle-plus-connbytes" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-connbytes" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-connbytes" placeholder="e.g. 0-500000" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('connbytes', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Connection Rate -->
            <div class="flex items-center text-xs py-1" id="mangle-row-connrate">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Rate</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('connrate', true)" id="mangle-plus-connrate" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-connrate" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-connrate" placeholder="e.g. 0-100k" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('connrate', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Per Connection Classifier -->
            <div class="flex items-center text-xs py-1" id="mangle-row-pcc">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Per Connection Classifier</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('pcc', true)" id="mangle-plus-pcc" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-pcc" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-pcc" placeholder="both-addresses:2/0" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('pcc', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Src. MAC Address -->
            <div class="flex items-center text-xs py-1" id="mangle-row-srcmac">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. MAC Address</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('srcmac', true)" id="mangle-plus-srcmac" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-srcmac" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <label title="Invert match (!)" class="flex items-center gap-1 cursor-pointer pr-1 select-none">
                    <input type="checkbox" id="mangle-inv-srcmac" class="rounded bg-[#101721] border-[#2b3e56] text-amber-500 focus:ring-0 w-3.5 h-3.5">
                    <span class="font-mono font-bold text-amber-400 text-xs">!</span>
                  </label>
                  <input type="text" id="mangle-val-srcmac" placeholder="AA:BB:CC:DD:EE:FF" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('srcmac', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Out. Bridge Port -->
            <div class="flex items-center text-xs py-1" id="mangle-row-outbridgeport">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Bridge Port</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('outbridgeport', true)" id="mangle-plus-outbridgeport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-outbridgeport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-outbridgeport" placeholder="ether1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('outbridgeport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- In. Bridge Port -->
            <div class="flex items-center text-xs py-1" id="mangle-row-inbridgeport">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Bridge Port</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('inbridgeport', true)" id="mangle-plus-inbridgeport" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-inbridgeport" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-inbridgeport" placeholder="ether2" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('inbridgeport', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- In. Bridge Port List -->
            <div class="flex items-center text-xs py-1" id="mangle-row-inbridgeportlist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">In. Bridge Port List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('inbridgeportlist', true)" id="mangle-plus-inbridgeportlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-inbridgeportlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-inbridgeportlist" placeholder="LAN_Ports" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('inbridgeportlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Out. Bridge Port List -->
            <div class="flex items-center text-xs py-1" id="mangle-row-outbridgeportlist">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Out. Bridge Port List</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('outbridgeportlist', true)" id="mangle-plus-outbridgeportlist" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-outbridgeportlist" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-outbridgeportlist" placeholder="WAN_Ports" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('outbridgeportlist', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- IPsec Policy -->
            <div class="flex items-center text-xs py-1" id="mangle-row-ipsec">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">IPsec Policy</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('ipsec', true)" id="mangle-plus-ipsec" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-ipsec" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <select id="mangle-val-ipsec" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="none">none</option>
                    <option value="in:ipsec">in:ipsec</option>
                    <option value="in:none">in:none</option>
                    <option value="out:ipsec">out:ipsec</option>
                    <option value="out:none">out:none</option>
                  </select>
                  <button type="button" onclick="toggleMangleField('ipsec', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- TLS Host -->
            <div class="flex items-center text-xs py-1" id="mangle-row-tlshost">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TLS Host</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('tlshost', true)" id="mangle-plus-tlshost" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-tlshost" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-tlshost" placeholder="*.example.com" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('tlshost', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Ingress Priority -->
            <div class="flex items-center text-xs py-1" id="mangle-row-ingresspriority">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Ingress Priority</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('ingresspriority', true)" id="mangle-plus-ingresspriority" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-ingresspriority" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-ingresspriority" placeholder="0-7" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('ingresspriority', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Priority -->
            <div class="flex items-center text-xs py-1" id="mangle-row-priority">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Priority</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('priority', true)" id="mangle-plus-priority" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-priority" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-priority" placeholder="0-7" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('priority', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- DSCP -->
            <div class="flex items-center text-xs py-1" id="mangle-row-dscp">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">DSCP</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('dscp', true)" id="mangle-plus-dscp" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-dscp" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-dscp" placeholder="0-63" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('dscp', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- TCP MSS -->
            <div class="flex items-center text-xs py-1" id="mangle-row-tcpmss">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TCP MSS</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('tcpmss', true)" id="mangle-plus-tcpmss" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-tcpmss" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-tcpmss" placeholder="e.g. 1440" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('tcpmss', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- TOS -->
            <div class="flex items-center text-xs py-1" id="mangle-row-tos">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TOS</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <select id="mangle-val-tos" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
                  <option value="">(any)</option>
                  <option value="0">0 (Normal Service)</option>
                  <option value="min-delay">min-delay (16)</option>
                  <option value="max-throughput">max-throughput (8)</option>
                  <option value="max-reliability">max-reliability (4)</option>
                  <option value="min-cost">min-cost (2)</option>
                </select>
              </div>
            </div>

            <!-- Packet Size -->
            <div class="flex items-center text-xs py-1" id="mangle-row-pktsize">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Size</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('pktsize', true)" id="mangle-plus-pktsize" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-pktsize" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-pktsize" placeholder="e.g. 64-1500" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('pktsize', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Random -->
            <div class="flex items-center text-xs py-1" id="mangle-row-random">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Random</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('random', true)" id="mangle-plus-random" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-random" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-random" placeholder="1-100 %" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('random', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- TCP Flags -->
            <div class="flex items-center text-xs py-1" id="mangle-row-tcpflags">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TCP Flags</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('tcpflags', true)" id="mangle-plus-tcpflags" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-tcpflags" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-tcpflags" placeholder="syn,ack,fin,rst" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('tcpflags', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- ICMP Options -->
            <div class="flex items-center text-xs py-1" id="mangle-row-icmpoptions">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">ICMP Options</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('icmpoptions', true)" id="mangle-plus-icmpoptions" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-icmpoptions" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-icmpoptions" placeholder="e.g. 8:0 (echo-request)" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('icmpoptions', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- IPv4 Options -->
            <div class="flex items-center text-xs py-1" id="mangle-row-ipv4options">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">IPv4 Options</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('ipv4options', true)" id="mangle-plus-ipv4options" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-ipv4options" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-ipv4options" placeholder="any, loose-source-routing" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('ipv4options', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- TTL -->
            <div class="flex items-center text-xs py-1" id="mangle-row-ttl">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">TTL</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('ttl', true)" id="mangle-plus-ttl" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-ttl" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-ttl" placeholder="equal:64 or less-than:10" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('ttl', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>
          </div>

          <!-- TAB PANE: EXTRA (Screenshot 3) -->
          <div id="mangle-pane-extra" class="mangle-rule-pane hidden space-y-1">
            <!-- Nth -->
            <div class="flex items-center text-xs py-1" id="mangle-row-nth">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Nth</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('nth', true)" id="mangle-plus-nth" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-nth" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-nth" placeholder="e.g. 2,1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('nth', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Connection Limit -->
            <div class="flex items-center text-xs py-1" id="mangle-row-connlimit">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Connection Limit</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('connlimit', true)" id="mangle-plus-connlimit" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-connlimit" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-connlimit" placeholder="e.g. 100,32" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('connlimit', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Src. Address Type -->
            <div class="flex items-center text-xs py-1" id="mangle-row-srcaddrtype">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Src. Address Type</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('srcaddrtype', true)" id="mangle-plus-srcaddrtype" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-srcaddrtype" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <select id="mangle-val-srcaddrtype" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="unicast">unicast</option>
                    <option value="local">local</option>
                    <option value="broadcast">broadcast</option>
                    <option value="multicast">multicast</option>
                  </select>
                  <button type="button" onclick="toggleMangleField('srcaddrtype', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Address Type -->
            <div class="flex items-center text-xs py-1" id="mangle-row-dstaddrtype">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Address Type</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('dstaddrtype', true)" id="mangle-plus-dstaddrtype" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-dstaddrtype" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <select id="mangle-val-dstaddrtype" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="unicast">unicast</option>
                    <option value="local">local</option>
                    <option value="broadcast">broadcast</option>
                    <option value="multicast">multicast</option>
                  </select>
                  <button type="button" onclick="toggleMangleField('dstaddrtype', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Hotspot -->
            <div class="flex items-center text-xs py-1" id="mangle-row-hotspot">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Hotspot</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('hotspot', true)" id="mangle-plus-hotspot" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-hotspot" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <select id="mangle-val-hotspot" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="from-client">from-client</option>
                    <option value="to-client">to-client</option>
                    <option value="auth">auth</option>
                    <option value="http">http</option>
                  </select>
                  <button type="button" onclick="toggleMangleField('hotspot', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- IP Fragment -->
            <div class="flex items-center text-xs py-1" id="mangle-row-ipfragment">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">IP Fragment</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('ipfragment', true)" id="mangle-plus-ipfragment" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-ipfragment" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <select id="mangle-val-ipfragment" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                    <option value="yes">yes</option>
                    <option value="no">no</option>
                  </select>
                  <button type="button" onclick="toggleMangleField('ipfragment', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Limit -->
            <div class="flex items-center text-xs py-1" id="mangle-row-limit">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Limit</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('limit', true)" id="mangle-plus-limit" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-limit" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-limit" placeholder="e.g. 100,5:packet" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('limit', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Dst. Limit -->
            <div class="flex items-center text-xs py-1" id="mangle-row-dstlimit">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Dst. Limit</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('dstlimit', true)" id="mangle-plus-dstlimit" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-dstlimit" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-dstlimit" placeholder="e.g. 100/5s,5" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('dstlimit', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- Time -->
            <div class="flex items-center text-xs py-1" id="mangle-row-time">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Time</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('time', true)" id="mangle-plus-time" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-time" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-time" placeholder="00:00:00-23:59:59" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('time', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>

            <!-- PSD -->
            <div class="flex items-center text-xs py-1" id="mangle-row-psd">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">PSD</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('psd', true)" id="mangle-plus-psd" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-psd" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-psd" placeholder="Weight: 21, 3s, 3, 1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('psd', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>
          </div>

          <!-- TAB PANE: ACTION (Screenshot 4) -->
          <div id="mangle-pane-action" class="mangle-rule-pane hidden space-y-2">
            <!-- Action -->
            <div class="flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Action</label>
              <div class="flex-1">
                <select id="mangle-modal-action" onchange="toggleMangleActionFields()" class="bg-[#15202e] border border-sky-600/80 rounded px-2.5 py-1 text-xs text-sky-400 font-mono focus:outline-none focus:border-sky-500 w-full cursor-pointer">
                  <option value="accept" selected>accept</option>
                  <option value="add-dst-to-address-list">add-dst-to-address-list</option>
                  <option value="add-src-to-address-list">add-src-to-address-list</option>
                  <option value="change-dscp">change-dscp</option>
                  <option value="change-mss">change-mss</option>
                  <option value="change-ttl">change-ttl</option>
                  <option value="clear-df">clear-df</option>
                  <option value="fasttrack-connection">fasttrack-connection</option>
                  <option value="jump">jump</option>
                  <option value="log">log</option>
                  <option value="mark-connection">mark-connection</option>
                  <option value="mark-packet">mark-packet</option>
                  <option value="mark-routing">mark-routing</option>
                  <option value="passthrough">passthrough</option>
                  <option value="return">return</option>
                  <option value="route">route</option>
                  <option value="set-priority">set-priority</option>
                  <option value="sniff-pc">sniff-pc</option>
                  <option value="sniff-tzsp">sniff-tzsp</option>
                  <option value="strip-ipv4-options">strip-ipv4-options</option>
                </select>
              </div>
            </div>

            <!-- New Connection Mark (when mark-connection) -->
            <div id="mangle-row-newconnmark" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">New Connection Mark</label>
              <div class="flex-1">
                <input type="text" id="mangle-modal-newconnmark" placeholder="e.g. wan1_conn" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- New Routing Mark (when mark-routing) -->
            <div id="mangle-row-newroutingmark" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">New Routing Mark</label>
              <div class="flex-1">
                <input type="text" id="mangle-modal-newroutingmark" placeholder="e.g. to_wan2" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- New Packet Mark (when mark-packet) -->
            <div id="mangle-row-newpktmark" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">New Packet Mark</label>
              <div class="flex-1">
                <input type="text" id="mangle-modal-newpktmark" placeholder="e.g. qos_voip" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- New TCP MSS (when change-mss) -->
            <div id="mangle-row-newmss" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">New TCP MSS</label>
              <div class="flex-1">
                <input type="text" id="mangle-modal-newmss" placeholder="1440 or clamp-to-pmtu" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- New DSCP (when change-dscp) -->
            <div id="mangle-row-newdscp" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">New DSCP</label>
              <div class="flex-1">
                <input type="number" id="mangle-modal-newdscp" min="0" max="63" placeholder="0-63" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- New TTL (when change-ttl) -->
            <div id="mangle-row-newttl" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">New TTL</label>
              <div class="flex-1">
                <input type="text" id="mangle-modal-newttl" placeholder="set:64, decrement:1, increment:1" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- New Priority (when set-priority) -->
            <div id="mangle-row-newpriority" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">New Priority</label>
              <div class="flex-1">
                <input type="number" id="mangle-modal-newpriority" min="0" max="7" placeholder="0-7" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- Route (when route) -->
            <div id="mangle-row-route" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Route</label>
              <div class="flex-1">
                <input type="text" id="mangle-modal-route" placeholder="e.g. 192.168.1.1 or routing table" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- Sniff Target (when sniff-pc or sniff-tzsp) -->
            <div id="mangle-row-sniff" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Sniff Target</label>
              <div class="flex-1">
                <input type="text" id="mangle-modal-sniff" placeholder="IP / Host / Port" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- Passthrough Checkbox (visible for marks / changes) -->
            <div id="mangle-row-passthrough" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Passthrough</label>
              <div class="flex items-center">
                <input type="checkbox" id="mangle-modal-passthrough" checked class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
              </div>
            </div>

            <!-- Jump Target (Shown when action === jump) -->
            <div id="mangle-action-jump-box" class="hidden flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-sky-300 shrink-0 select-none">Jump Target</label>
              <div class="flex-1">
                <input type="text" id="mangle-modal-jumptarget" placeholder="chain name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
              </div>
            </div>

            <!-- Address List & Timeout (Shown when action starts with add-) -->
            <div id="mangle-action-addrlist-box" class="hidden space-y-1">
              <div class="flex items-center text-xs py-1">
                <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Address List</label>
                <div class="flex-1">
                  <input type="text" id="mangle-modal-action-addrlist" list="fw-addrlist-datalist" placeholder="list name" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                </div>
              </div>
              <div class="flex items-center text-xs py-1">
                <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Timeout</label>
                <div class="flex-1">
                  <input type="text" id="mangle-modal-action-timeout" placeholder="none or 1d 00:00:00" class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white font-mono focus:outline-none focus:border-sky-500 w-full">
                </div>
              </div>
            </div>

            <hr class="border-[#213042] my-2">

            <!-- Log -->
            <div class="flex items-center text-xs py-1">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log</label>
              <div class="flex items-center">
                <input type="checkbox" id="mangle-modal-log" onchange="toggleMangleLogPrefix()" class="rounded bg-[#15202e] border-[#26374d] text-sky-500 focus:ring-0 w-4 h-4 cursor-pointer">
              </div>
            </div>

            <!-- Log Prefix -->
            <div class="flex items-center text-xs py-1" id="mangle-row-logprefix">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Log Prefix</label>
              <div class="flex-1 flex items-center gap-1.5 min-w-0">
                <button type="button" onclick="toggleMangleField('logprefix', true)" id="mangle-plus-logprefix" class="w-5 h-5 flex items-center justify-center bg-[#172435] hover:bg-[#1e3047] border border-[#2b3e56] rounded text-slate-300 hover:text-sky-300 text-xs font-bold leading-none">+</button>
                <div id="mangle-field-logprefix" class="hidden flex-1 flex items-center gap-1.5 min-w-0">
                  <input type="text" id="mangle-val-logprefix" placeholder="e.g. MANGLE_LOG: " class="bg-[#15202e] border border-[#26374d] rounded px-2.5 py-1 text-xs text-white focus:outline-none focus:border-sky-500 w-full font-mono">
                  <button type="button" onclick="toggleMangleField('logprefix', false)" class="w-5 h-5 flex items-center justify-center text-slate-500 hover:text-rose-400 text-xs font-bold leading-none shrink-0">-</button>
                </div>
              </div>
            </div>
          </div>

          <!-- TAB PANE: STATISTICS -->
          <div id="mangle-pane-statistics" class="mangle-rule-pane hidden space-y-2 py-1">
            <!-- Bytes -->
            <div class="flex items-center text-xs">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Bytes</label>
              <div class="flex-1">
                <input type="text" id="mangle-stat-bytes" readonly value="0 B" class="bg-[#121c27] border border-sky-600/80 rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
              </div>
            </div>

            <!-- Packets -->
            <div class="flex items-center text-xs">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packets</label>
              <div class="flex-1">
                <input type="text" id="mangle-stat-packets" readonly value="0" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
              </div>
            </div>

            <div class="h-1"></div>

            <!-- Rate -->
            <div class="flex items-center text-xs">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Rate</label>
              <div class="flex-1">
                <input type="text" id="mangle-stat-rate" readonly value="0 bps" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
              </div>
            </div>

            <!-- Packet Rate -->
            <div class="flex items-center text-xs">
              <label class="w-36 sm:w-44 text-right pr-3.5 text-slate-300 shrink-0 select-none">Packet Rate</label>
              <div class="flex-1">
                <input type="text" id="mangle-stat-pktrate" readonly value="0 p/s" class="bg-[#121c27] border border-[#26374d] rounded px-2.5 py-1 text-xs text-slate-200 font-mono w-full select-all">
              </div>
            </div>

            <div class="h-2"></div>

            <!-- Rate Graph -->
            <div class="space-y-1">
              <div class="text-[11px] text-slate-300 font-medium pl-1">Rate Graph</div>
              <div class="bg-[#0f1721] border border-[#202e40] rounded p-1.5 relative overflow-hidden">
                <svg id="mangle-stat-rate-svg" class="w-full h-24" viewBox="0 0 500 100" preserveAspectRatio="none">
                  <!-- Generated grid and sparkline -->
                </svg>
              </div>
              <div class="flex items-center justify-center gap-1.5 text-[11px] text-slate-300 py-0.5">
                <span class="w-2 h-2 rounded-full bg-sky-400"></span>
                <span id="mangle-stat-legend-rate" class="font-mono font-semibold text-white">0 bps</span>
                <span class="text-slate-400">Rate</span>
              </div>
            </div>

            <!-- Packet Rate Graph -->
            <div class="space-y-1">
              <div class="text-[11px] text-slate-300 font-medium pl-1">Packet Rate Graph</div>
              <div class="bg-[#0f1721] border border-[#202e40] rounded p-1.5 relative overflow-hidden">
                <svg id="mangle-stat-pktrate-svg" class="w-full h-24" viewBox="0 0 500 100" preserveAspectRatio="none">
                  <!-- Generated grid and sparkline -->
                </svg>
              </div>
              <div class="flex items-center justify-center gap-1.5 text-[11px] text-slate-300 py-0.5">
                <span class="w-2 h-2 rounded-full bg-sky-400"></span>
                <span id="mangle-stat-legend-pktrate" class="font-mono font-semibold text-white">0 p/s</span>
                <span class="text-slate-400">Packet Rate</span>
              </div>
            </div>
          </div>
        </form>

        <!-- Right Vertical Sidebar -->
        <div class="w-40 min-w-[150px] border-l border-[#213042] bg-[#121a24] p-3 text-xs flex flex-col space-y-4 shrink-0">
          <div>
            <button type="button" onclick="copyMangleRule()" class="w-full flex items-center gap-2 text-slate-300 hover:text-sky-300 text-xs py-1 transition-colors">
              <svg class="w-3.5 h-3.5 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
              </svg>
              <span>Copy</span>
            </button>
          </div>

          <div class="space-y-2">
            <div class="text-slate-300 font-semibold flex items-center gap-1.5 text-xs">
              <span class="text-amber-400">⚡</span>
              <span>Actions</span>
            </div>
            <div class="flex flex-col space-y-1.5 pl-1">
              <button type="button" onclick="resetCurrentMangleRuleCounters()" class="text-left text-slate-400 hover:text-sky-300 text-xs py-0.5 transition-colors">Reset Counters</button>
              <button type="button" onclick="resetAllFwCounters()" class="text-left text-slate-400 hover:text-sky-300 text-xs py-0.5 transition-colors">Reset All Counters</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Window Bottom Button Bar -->
      <div class="bg-[#141e2b] border-t border-[#1f2d3e] px-4 py-2 flex items-center justify-end gap-2 shrink-0">
        <button type="button" onclick="closeMangleModal()" class="px-4 py-1.5 rounded bg-[#1c2838] hover:bg-[#25364b] border border-[#2a3c54] text-xs font-medium text-slate-300 transition-colors">Cancel</button>
        <button type="button" onclick="applyMangleRule(false)" class="px-5 py-1.5 rounded bg-[#0078d4] hover:bg-[#006cbd] text-xs font-semibold text-white shadow-sm transition-colors">Apply</button>
        <button type="button" onclick="applyMangleRule(true)" class="px-5 py-1.5 rounded bg-[#0078d4] hover:bg-[#006cbd] text-xs font-semibold text-white shadow-sm transition-colors">OK</button>
      </div>
    </div>
  </div>

  <!-- ================= MODAL: ADDRESS LIST ENTRY ================= -->
  <div id="addrlist-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 id="addrlist-modal-title" class="text-sm font-bold text-white">Add Address List Entry</h3>
        <button onclick="closeAddrListModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSaveAddrList(event)" class="p-6 space-y-4 text-xs">
        <input type="hidden" id="addrlist-modal-id">
        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">List Name *</label>
          <input type="text" id="addrlist-modal-name" placeholder="e.g. LAN_Subnets, Blocked_IPs" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
        </div>
        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">IP Address / Subnet (CIDR) *</label>
          <input type="text" id="addrlist-modal-addr" placeholder="192.168.10.0/24 or 203.0.113.5" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
        </div>
        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
          <input type="text" id="addrlist-modal-comment" placeholder="Optional description" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
        </div>
        <div class="pt-2">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="addrlist-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
            <span class="font-medium text-slate-300">Disabled (X)</span>
          </label>
        </div>
        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeAddrListModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" id="addrlist-modal-submit-btn" class="px-5 py-2 rounded-lg font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">Save Entry</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: GEO INTERVAL SETTINGS ================= -->
  <div id="geo-interval-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 class="text-sm font-bold text-white">Geo-Location Auto-Update Settings</h3>
        <button onclick="closeGeoIntervalModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitGeoIntervalSettings(event)" class="p-6 space-y-4 text-xs">
        <div class="p-3 bg-slate-950/60 border border-slate-800 rounded-xl space-y-2">
          <label class="flex items-center space-x-2.5 cursor-pointer">
            <input type="checkbox" id="geo-cfg-autoupdate" checked class="rounded bg-slate-800 border-slate-700 text-emerald-500">
            <span class="font-semibold text-white">Enable Automatic Background Updates</span>
          </label>
          <p class="text-[11px] text-slate-400 pl-6">Automatically fetches the latest country IP blocks from IPdeny registries and updates active kernel ipsets without service interruption.</p>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Update Interval *</label>
          <select id="geo-cfg-interval" onchange="toggleCustomGeoInterval()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
            <option value="12">Every 12 Hours</option>
            <option value="24" selected>Every 24 Hours (Daily - Recommended)</option>
            <option value="48">Every 48 Hours (2 Days)</option>
            <option value="72">Every 3 Days</option>
            <option value="168">Every 7 Days (Weekly)</option>
            <option value="720">Every 30 Days (Monthly)</option>
            <option value="custom">Custom Hours...</option>
          </select>
        </div>

        <div id="geo-cfg-custom-box" class="hidden">
          <label class="block font-semibold text-slate-300 mb-1.5">Custom Interval (Hours)</label>
          <input type="number" id="geo-cfg-custom-hours" min="1" max="8760" value="24" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeGeoIntervalModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">Save Schedule</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: GEO SUBNETS PREVIEW ================= -->
  <div id="geo-subnets-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div>
          <h3 id="geo-subnets-title" class="text-sm font-bold text-white">Country Subnets</h3>
          <span id="geo-subnets-subtitle" class="text-[11px] font-mono text-slate-400">CIDR Blocks</span>
        </div>
        <button onclick="closeGeoSubnetsModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <div class="p-6 space-y-3 text-xs">
        <p class="text-slate-400">Showing first 100 subnets in this country zone:</p>
        <div id="geo-subnets-list" class="bg-slate-950 border border-slate-800 rounded-xl p-3 max-h-72 overflow-y-auto font-mono text-[11px] text-emerald-400 space-y-1"></div>
        <div class="pt-3 border-t border-slate-800 flex justify-end">
          <button type="button" onclick="closeGeoSubnetsModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Close</button>
        </div>
      </div>
    </div>
  </div>

  <!-- ================= MODAL: ADD / EDIT ROUTE ================= -->
  <div id="route-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 id="route-modal-title" class="text-sm font-bold text-white">Add Static Route</h3>
        <button onclick="closeRouteModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSaveRoute(event)" class="p-6 space-y-4 text-xs">
        <input type="hidden" id="route-modal-id">
        <input type="hidden" id="route-modal-old-dst">
        <input type="hidden" id="route-modal-old-gw">
        <input type="hidden" id="route-modal-old-distance">
        <input type="hidden" id="route-modal-old-table">
        <input type="hidden" id="route-modal-old-iface">

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Dst. Address (CIDR) *</label>
          <input type="text" id="route-modal-dst" value="0.0.0.0/0" placeholder="0.0.0.0/0 or 10.0.0.0/8" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-cyan-500">
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Gateway (IP or Interface)</label>
            <input type="text" id="route-modal-gw" placeholder="10.42.36.1 or wg0" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-cyan-500">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Routing Table / Mark</label>
            <select id="route-modal-table" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-cyan-500">
              <option value="main" selected>main</option>
            </select>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Distance (Metric)</label>
            <input type="number" id="route-modal-distance" value="1" min="0" max="255" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-cyan-500">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Interface (Optional)</label>
            <select id="route-modal-iface" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-cyan-500"></select>
          </div>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
          <input type="text" id="route-modal-comment" placeholder="e.g. Primary WAN Default Gateway" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
        </div>

        <div class="pt-2">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="route-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
            <span class="font-medium text-slate-300">Disabled (X)</span>
          </label>
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeRouteModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20">Save Route</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: ADD POLICY ROUTING RULE ================= -->
  <div id="prule-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 id="prule-modal-title" class="text-sm font-bold text-white">Add Policy Routing Rule (/ip route rule)</h3>
        <button onclick="closePolicyRuleModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSavePolicyRule(event)" class="p-6 space-y-4 text-xs">
        <input type="hidden" id="prule-modal-id">

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Priority / Preference</label>
            <input type="number" id="prule-modal-pref" placeholder="1000" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Routing Mark (fwmark)</label>
            <input type="text" id="prule-modal-mark" placeholder="e.g. to_WAN2 or 100" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Src. Address (CIDR)</label>
            <input type="text" id="prule-modal-src" placeholder="192.168.10.0/24" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Dst. Address (CIDR)</label>
            <input type="text" id="prule-modal-dst" placeholder="0.0.0.0/0" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Lookup Table *</label>
            <select id="prule-modal-table" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Action</label>
            <select id="prule-modal-action" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
              <option value="lookup" selected>lookup (standard)</option>
              <option value="unreachable">unreachable</option>
              <option value="blackhole">blackhole</option>
            </select>
          </div>
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closePolicyRuleModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20">Save Policy Rule</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: CREATE ROUTING TABLE ================= -->
  <div id="table-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 class="text-sm font-bold text-white">Create New Routing Table</h3>
        <button onclick="closeTableModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSaveTable(event)" class="p-6 space-y-4 text-xs">
        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Table Name *</label>
          <input type="text" id="table-modal-name" placeholder="e.g. wan2_traffic, vpn_table" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-cyan-500">
        </div>
        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">FIB Table ID (Optional)</label>
          <input type="number" id="table-modal-id" min="1" max="252" placeholder="Auto (100+)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
        </div>
        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
          <input type="text" id="table-modal-comment" placeholder="Purpose of this routing table" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
        </div>
        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeTableModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20">Create Table</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: ADD/EDIT EoIP TUNNEL ================= -->
  <div id="eoip-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div>
          <h3 id="eoip-modal-title" class="text-sm font-bold text-white">Add EoIP Tunnel</h3>
          <p class="text-[11px] text-slate-400">Layer 2 Ethernet-over-IP (GRETAP) Tunnel</p>
        </div>
        <button onclick="closeEoIPModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSaveEoIP(event)" class="p-6 space-y-4 text-xs font-sans">
        <input type="hidden" id="eoip-modal-id">
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Interface Name *</label>
            <input type="text" id="eoip-modal-name" placeholder="eoip-tunnel1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Tunnel ID (1 - 65535) *</label>
            <input type="number" id="eoip-modal-tunnelid" min="1" max="65535" placeholder="10" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Remote Address (Remote Router IP) *</label>
            <input type="text" id="eoip-modal-remote" placeholder="e.g. 10.2.145.253" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
            <span class="text-[10px] text-slate-400">Underlay public or transport IP of remote peer</span>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Tunnel IP / Subnet (CIDR)</label>
            <input type="text" id="eoip-modal-ip" placeholder="e.g. 172.16.33.254/30" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
            <span class="text-[10px] text-slate-400">Overlay IPv4 assigned directly to tunnel (/30, /24)</span>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Underlay Local IP (GRE Source)</label>
            <input type="text" id="eoip-modal-local" placeholder="e.g. 10.42.36.5" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-emerald-500">
            <span class="text-[10px] text-slate-400">Local router IP for outer GRE packets</span>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">MAC Address (Auto if empty)</label>
            <input type="text" id="eoip-modal-mac" placeholder="02:64:xx:xx:xx:xx" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">MTU</label>
            <input type="number" id="eoip-modal-mtu" value="1500" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
            <input type="text" id="eoip-modal-comment" placeholder="Bridge to Office Branch" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
          </div>
        </div>

        <div class="flex items-center justify-between pt-1">
          <label class="flex items-center space-x-2 text-slate-300">
            <input type="checkbox" id="eoip-modal-clampmss" checked class="rounded bg-slate-800 border-slate-700 text-emerald-600">
            <span>Clamp TCP MSS (PMTUD protection)</span>
          </label>
          <label class="flex items-center space-x-2 text-slate-300">
            <input type="checkbox" id="eoip-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-600">
            <span>Disabled</span>
          </label>
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeEoIPModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">Save Tunnel</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: ADD/EDIT PPP SECRET (USER) ================= -->
  <div id="ppp-secret-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div>
          <h3 id="secret-modal-title" class="text-sm font-bold text-white">Add PPP Secret</h3>
          <p class="text-[11px] text-slate-400">User account for PPPoE, PPTP, and L2TP authentication</p>
        </div>
        <button onclick="closePPPSecretModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSavePPPSecret(event)" class="p-6 space-y-4 text-xs font-sans">
        <input type="hidden" id="secret-modal-id">
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Username (Name) *</label>
            <input type="text" id="secret-modal-name" placeholder="client_user1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-violet-500">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Password *</label>
            <input type="password" id="secret-modal-password" placeholder="••••••••" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-violet-500">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Service</label>
            <select id="secret-modal-service" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
              <option value="any">any</option>
              <option value="pppoe">pppoe</option>
              <option value="pptp">pptp</option>
              <option value="l2tp">l2tp</option>
            </select>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Profile</label>
            <select id="secret-modal-profile" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Local Address (Optional)</label>
            <input type="text" id="secret-modal-local" placeholder="Override server IP" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Remote Address (Optional Static IP)</label>
            <input type="text" id="secret-modal-remote" placeholder="Static client IP" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
          <input type="text" id="secret-modal-comment" placeholder="Home user / Office user" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
        </div>

        <div class="flex items-center space-x-2 pt-1">
          <input type="checkbox" id="secret-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-600">
          <label for="secret-modal-disabled" class="text-slate-300">Disabled</label>
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closePPPSecretModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-violet-600 hover:bg-violet-500 text-white shadow-lg shadow-violet-500/20">Save Secret</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: ADD/EDIT PPP PROFILE ================= -->
  <div id="ppp-profile-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div>
          <h3 id="profile-modal-title" class="text-sm font-bold text-white">Add PPP Profile</h3>
          <p class="text-[11px] text-slate-400">IP pool and encryption settings for PPP servers</p>
        </div>
        <button onclick="closePPPProfileModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSavePPPProfile(event)" class="p-6 space-y-4 text-xs font-sans">
        <input type="hidden" id="profile-modal-id">
        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Profile Name *</label>
          <input type="text" id="profile-modal-name" placeholder="e.g. office-pool" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-violet-500">
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Local Address *</label>
            <input type="text" id="profile-modal-local" placeholder="10.10.10.1" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Remote Address (Pool) *</label>
            <input type="text" id="profile-modal-remote" placeholder="10.10.10.10-10.10.10.50" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">DNS Servers</label>
            <input type="text" id="profile-modal-dns" value="1.1.1.1,8.8.8.8" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Use Encryption</label>
            <select id="profile-modal-encryption" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
              <option value="no">no</option>
              <option value="yes">yes</option>
              <option value="required" selected>required (MPPE-128)</option>
            </select>
          </div>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
          <input type="text" id="profile-modal-comment" placeholder="Description of this profile" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
        </div>

        <div class="flex items-center space-x-2 pt-1">
          <input type="checkbox" id="profile-modal-onlyone" checked class="rounded bg-slate-800 border-slate-700 text-violet-600">
          <label for="profile-modal-onlyone" class="text-slate-300">Only One session per user account</label>
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closePPPProfileModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-violet-600 hover:bg-violet-500 text-white shadow-lg shadow-violet-500/20">Save Profile</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: IPSEC ROADWARRIOR SERVER ================= -->
  <div id="ipsec-server-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div>
          <h3 class="text-sm font-bold text-white">IPSec (IKEv2) Roadwarrior Server</h3>
          <p class="text-[11px] text-slate-400">Mobile VPN server for Windows, macOS, iOS, Android clients</p>
        </div>
        <button onclick="closeIPSecServerModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSaveIPSecServer(event)" class="p-6 space-y-4 text-xs font-sans">
        <div class="flex items-center justify-between border-b border-slate-800 pb-3">
          <span class="text-slate-300 font-semibold">Server State</span>
          <div class="flex items-center gap-3">
            <span id="modal-ipsec-server-status" class="px-2 py-0.5 rounded text-[10px] font-mono font-semibold bg-slate-800 text-slate-400">STOPPED</span>
            <label class="relative inline-flex items-center cursor-pointer">
              <input type="checkbox" id="modal-ipsec-server-enabled" class="sr-only peer">
              <div class="w-11 h-6 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-amber-600"></div>
            </label>
          </div>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Pre-Shared Key (PSK) *</label>
          <input type="password" id="modal-ipsec-server-psk" placeholder="••••••••" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-amber-500">
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Virtual IP Pool (CIDR) *</label>
            <input type="text" id="modal-ipsec-server-pool" value="10.10.30.0/24" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">DNS Servers</label>
            <input type="text" id="modal-ipsec-server-dns" value="1.1.1.1,8.8.8.8" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Local Traffic Selector (Subnet)</label>
          <input type="text" id="modal-ipsec-server-subnet" value="0.0.0.0/0" placeholder="0.0.0.0/0 (Full Tunnel)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeIPSecServerModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-amber-600 hover:bg-amber-500 text-white shadow-lg shadow-amber-500/20">Apply IPSec Server</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: WIREGUARD CLIENT CONFIG VIEWER ================= -->
  <div id="wg-client-conf-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div>
          <h3 class="text-sm font-bold text-white">WireGuard Client Configuration</h3>
          <p class="text-[11px] text-slate-400">Import this .conf into WireGuard on iOS, Android, macOS or Windows</p>
        </div>
        <button onclick="closeWGClientConfModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <div class="p-6 space-y-4">
        <div>
          <label class="block text-xs font-semibold text-slate-300 mb-1.5">WireGuard Client Profile (.conf)</label>
          <textarea id="wg-client-conf-text" rows="11" readonly class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs font-mono text-cyan-300 select-all focus:outline-none"></textarea>
        </div>
        <div class="flex justify-between items-center pt-2">
          <span class="text-[11px] text-slate-500">Ready for instant import</span>
          <div class="space-x-2">
            <button onclick="copyWGClientConf()" class="px-4 py-2 rounded-lg text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-white border border-slate-700 transition">
              Copy Config
            </button>
            <button onclick="downloadWGClientConf()" class="px-4 py-2 rounded-lg text-xs font-semibold bg-cyan-600 hover:bg-cyan-500 text-white shadow-lg shadow-cyan-500/20 transition">
              Download .conf
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ================= MODAL: BGP INSTANCE SETTINGS ================= -->
  <div id="bgp-instance-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div>
          <h3 class="text-sm font-bold text-white">BGP Instance Settings (/routing bgp instance)</h3>
          <p class="text-[11px] text-slate-400">Configure global Autonomous System and route redistribution</p>
        </div>
        <button onclick="closeBgpInstanceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form id="bgp-instance-form" onsubmit="submitBgpInstance(event)" class="p-6 space-y-4 text-xs">
        <div class="flex items-center justify-between p-3 rounded-xl bg-slate-800/60 border border-slate-700/60">
          <div>
            <div class="font-semibold text-white">Enable BGP Routing</div>
            <div class="text-[11px] text-slate-400">Run BIRD 2 daemon for dynamic exterior gateway routing & multi-instance AS peering</div>
          </div>
          <input type="checkbox" id="modal-bgp-enabled" class="w-4 h-4 rounded text-purple-600 focus:ring-purple-500 bg-slate-800 border-slate-600">
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Autonomous System (AS) *</label>
            <input type="number" id="modal-bgp-as" required min="1" max="4294967295" placeholder="65001" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-purple-500">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Router ID</label>
            <input type="text" id="modal-bgp-router-id" placeholder="192.168.131.56" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-purple-500">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Keepalive Time (s)</label>
            <input type="number" id="modal-bgp-keepalive" value="60" min="1" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Hold Time (s)</label>
            <input type="number" id="modal-bgp-holdtime" value="180" min="3" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div class="border-t border-slate-800 pt-3">
          <label class="block font-semibold text-slate-300 mb-2">Redistribute Routes into BGP</label>
          <div class="space-y-2">
            <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
              <input type="checkbox" id="modal-bgp-redist-conn" class="rounded text-purple-600 bg-slate-800 border-slate-700">
              <span>Redistribute Connected Subnets</span>
            </label>
            <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
              <input type="checkbox" id="modal-bgp-redist-static" class="rounded text-purple-600 bg-slate-800 border-slate-700">
              <span>Redistribute Static Routes</span>
            </label>
            <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
              <input type="checkbox" id="modal-bgp-redist-ospf" class="rounded text-purple-600 bg-slate-800 border-slate-700">
              <span>Redistribute OSPF Routes</span>
            </label>
          </div>
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeBgpInstanceModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20">Save BGP Settings</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: BGP PEER ================= -->
  <div id="bgp-peer-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div>
          <h3 id="bgp-peer-modal-title" class="text-sm font-bold text-white">Add BGP Peer Connection</h3>
          <p class="text-[11px] text-slate-400">Establish eBGP / iBGP session with remote router</p>
        </div>
        <button onclick="closeBgpPeerModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form id="bgp-peer-form" onsubmit="submitBgpPeer(event)" class="p-6 space-y-4 text-xs">
        <input type="hidden" id="modal-bgp-peer-id">
        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Connection Name *</label>
          <input type="text" id="modal-bgp-peer-name" required placeholder="upstream-carrier-a" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Remote Address (IP) *</label>
            <input type="text" id="modal-bgp-peer-remote-addr" required placeholder="192.168.131.1" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Remote AS *</label>
            <input type="number" id="modal-bgp-peer-remote-as" required min="1" max="4294967295" placeholder="65000" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Local AS (Multi-Instance)</label>
            <input type="number" id="modal-bgp-peer-local-as" min="1" max="4294967295" placeholder="Optional (uses global AS if blank)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Local Address (Update Source)</label>
            <input type="text" id="modal-bgp-peer-local-addr" placeholder="Optional source IP/iface" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">MD5 Password (BGP Auth)</label>
            <input type="password" id="modal-bgp-peer-password" placeholder="Optional secret" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">In Filter (Routing Filter Chain)</label>
            <input type="text" id="modal-bgp-peer-in-filter" placeholder="e.g. bgp-in" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
            <p class="text-[10px] text-slate-500 mt-0.5">Filter chain for inbound routes from peer</p>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Out Filter (Routing Filter Chain)</label>
            <input type="text" id="modal-bgp-peer-out-filter" placeholder="e.g. bgp-out" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
            <p class="text-[10px] text-slate-500 mt-0.5">Filter chain for outbound routes to peer</p>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-3 p-3 rounded-xl bg-slate-800/40 border border-slate-700/50">
          <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
            <input type="checkbox" id="modal-bgp-peer-multihop" class="rounded text-purple-600 bg-slate-800 border-slate-700">
            <span>eBGP Multi-hop</span>
          </label>
          <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
            <input type="checkbox" id="modal-bgp-peer-nexthop-self" checked class="rounded text-purple-600 bg-slate-800 border-slate-700">
            <span>Next-hop Self</span>
          </label>
          <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
            <input type="checkbox" id="modal-bgp-peer-passive" class="rounded text-purple-600 bg-slate-800 border-slate-700">
            <span>Passive Mode</span>
          </label>
          <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
            <input type="checkbox" id="modal-bgp-peer-disabled" class="rounded text-purple-600 bg-slate-800 border-slate-700">
            <span>Disabled (X)</span>
          </label>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
          <input type="text" id="modal-bgp-peer-comment" placeholder="Core transit uplink" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeBgpPeerModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20">Save Peer</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: BGP NETWORK ================= -->
  <div id="bgp-network-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 id="bgp-network-modal-title" class="text-sm font-bold text-white">Advertise BGP Network</h3>
        <button onclick="closeBgpNetworkModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form id="bgp-network-form" onsubmit="submitBgpNetwork(event)" class="p-6 space-y-4 text-xs">
        <input type="hidden" id="modal-bgp-net-id">
        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Network Prefix (CIDR) *</label>
          <input type="text" id="modal-bgp-net-cidr" required placeholder="10.200.0.0/24" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-purple-500">
        </div>
        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
          <input type="text" id="modal-bgp-net-comment" placeholder="Public IP block prefix" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
        </div>
        <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
          <input type="checkbox" id="modal-bgp-net-disabled" class="rounded text-purple-600 bg-slate-800 border-slate-700">
          <span>Disabled</span>
        </label>
        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeBgpNetworkModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20">Save Network</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: OSPF INSTANCE SETTINGS ================= -->
  <div id="ospf-instance-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div>
          <h3 class="text-sm font-bold text-white">OSPF Instance Settings (/routing ospf instance)</h3>
          <p class="text-[11px] text-slate-400">Configure OSPFv2 link-state routing daemon and redistributions</p>
        </div>
        <button onclick="closeOspfInstanceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form id="ospf-instance-form" onsubmit="submitOspfInstance(event)" class="p-6 space-y-4 text-xs">
        <div class="flex items-center justify-between p-3 rounded-xl bg-slate-800/60 border border-slate-700/60">
          <div>
            <div class="font-semibold text-white">Enable OSPF Routing</div>
            <div class="text-[11px] text-slate-400">Run BIRD 2 daemon for dynamic interior gateway routing & link-state topology</div>
          </div>
          <input type="checkbox" id="modal-ospf-enabled" class="w-4 h-4 rounded text-indigo-600 focus:ring-indigo-500 bg-slate-800 border-slate-600">
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Router ID</label>
            <input type="text" id="modal-ospf-router-id" placeholder="192.168.131.56" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-indigo-500">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Default Metric</label>
            <input type="number" id="modal-ospf-metric" value="10" min="1" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div class="border-t border-slate-800 pt-3">
          <label class="block font-semibold text-slate-300 mb-2">Redistribute Routes into OSPF</label>
          <div class="space-y-2">
            <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
              <input type="checkbox" id="modal-ospf-redist-conn" class="rounded text-indigo-600 bg-slate-800 border-slate-700">
              <span>Redistribute Connected Subnets</span>
            </label>
            <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
              <input type="checkbox" id="modal-ospf-redist-static" class="rounded text-indigo-600 bg-slate-800 border-slate-700">
              <span>Redistribute Static Routes</span>
            </label>
            <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
              <input type="checkbox" id="modal-ospf-redist-bgp" class="rounded text-indigo-600 bg-slate-800 border-slate-700">
              <span>Redistribute BGP Routes</span>
            </label>
          </div>
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeOspfInstanceModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-indigo-600 hover:bg-indigo-500 text-white shadow-lg shadow-indigo-500/20">Save OSPF Settings</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: OSPF AREA ================= -->
  <div id="ospf-area-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 id="ospf-area-modal-title" class="text-sm font-bold text-white">Add OSPF Area</h3>
        <button onclick="closeOspfAreaModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form id="ospf-area-form" onsubmit="submitOspfArea(event)" class="p-6 space-y-4 text-xs">
        <input type="hidden" id="modal-ospf-area-id">
        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Area Name *</label>
          <input type="text" id="modal-ospf-area-name" required placeholder="backbone" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Area ID *</label>
            <input type="text" id="modal-ospf-area-areaid" required placeholder="0.0.0.0" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Area Type</label>
            <select id="modal-ospf-area-type" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
              <option value="default">Default / Normal</option>
              <option value="stub">Stub</option>
              <option value="nssa">NSSA</option>
            </select>
          </div>
        </div>
        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
          <input type="text" id="modal-ospf-area-comment" placeholder="Area description" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
        </div>
        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeOspfAreaModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-indigo-600 hover:bg-indigo-500 text-white shadow-lg shadow-indigo-500/20">Save Area</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: OSPF INTERFACE ================= -->
  <div id="ospf-interface-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div>
          <h3 id="ospf-interface-modal-title" class="text-sm font-bold text-white">Add OSPF Interface</h3>
          <p class="text-[11px] text-slate-400">Configure OSPF link parameters on a network subnet or interface</p>
        </div>
        <button onclick="closeOspfInterfaceModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form id="ospf-interface-form" onsubmit="submitOspfInterface(event)" class="p-6 space-y-4 text-xs">
        <input type="hidden" id="modal-ospf-iface-id">
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Subnet Network (CIDR) *</label>
            <input type="text" id="modal-ospf-iface-net" required placeholder="192.168.131.0/24" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">OSPF Area *</label>
            <input type="text" id="modal-ospf-iface-area" required value="0.0.0.0" placeholder="0.0.0.0" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Interface (Optional Device)</label>
            <select id="modal-ospf-iface-device" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
              <option value="">Any matching interface</option>
            </select>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Metric Cost</label>
            <input type="number" id="modal-ospf-iface-cost" value="10" min="1" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div class="grid grid-cols-3 gap-3">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Priority</label>
            <input type="number" id="modal-ospf-iface-priority" value="1" min="0" max="255" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Hello (s)</label>
            <input type="number" id="modal-ospf-iface-hello" value="10" min="1" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Dead (s)</label>
            <input type="number" id="modal-ospf-iface-dead" value="40" min="1" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Authentication Type</label>
            <select id="modal-ospf-iface-auth-type" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
              <option value="none">None</option>
              <option value="simple">Simple Password</option>
              <option value="md5">MD5 Cryptographic</option>
            </select>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Auth Secret Key</label>
            <input type="password" id="modal-ospf-iface-auth-key" placeholder="••••••••" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-3 p-3 rounded-xl bg-slate-800/40 border border-slate-700/50">
          <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
            <input type="checkbox" id="modal-ospf-iface-passive" class="rounded text-indigo-600 bg-slate-800 border-slate-700">
            <span>Passive (Do not form adjs)</span>
          </label>
          <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
            <input type="checkbox" id="modal-ospf-iface-disabled" class="rounded text-indigo-600 bg-slate-800 border-slate-700">
            <span>Disabled (X)</span>
          </label>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
          <input type="text" id="modal-ospf-iface-comment" placeholder="LAN segment routing" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeOspfInterfaceModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-indigo-600 hover:bg-indigo-500 text-white shadow-lg shadow-indigo-500/20">Save Interface</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: ADD / EDIT ROUTING FILTER ================= -->
  <div id="modal-routing-filter" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-xl shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div>
          <h3 id="modal-rf-title" class="text-sm font-bold text-white">Add Routing Filter Rule</h3>
          <p class="text-[11px] text-slate-400">Match routing prefixes, AS-Path, communities, and set BGP attributes (/routing filter)</p>
        </div>
        <button onclick="closeRoutingFilterModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form id="routing-filter-form" onsubmit="submitRoutingFilter(event)" class="p-6 space-y-4 text-xs max-h-[85vh] overflow-y-auto">
        <input type="hidden" id="modal-rf-id">

        <div class="grid grid-cols-3 gap-3">
          <div class="col-span-1">
            <label class="block font-semibold text-slate-300 mb-1.5">Chain Name *</label>
            <input type="text" id="modal-rf-chain" required placeholder="bgp-in" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
            <p class="text-[10px] text-slate-500 mt-0.5">e.g. bgp-in, bgp-out</p>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Rule Order *</label>
            <input type="number" id="modal-rf-order" value="10" min="1" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
            <p class="text-[10px] text-slate-500 mt-0.5">Sequence (10, 20...)</p>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Action *</label>
            <select id="modal-rf-action" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
              <option value="accept">accept (Permit)</option>
              <option value="discard">discard (Deny)</option>
              <option value="reject">reject (Deny)</option>
              <option value="passthrough">passthrough (Continue)</option>
            </select>
            <p class="text-[10px] text-slate-500 mt-0.5">Filter action</p>
          </div>
        </div>

        <!-- Match Criteria Box -->
        <div class="p-3.5 rounded-xl bg-slate-800/40 border border-slate-700/50 space-y-3">
          <div class="text-[11px] font-bold text-cyan-400 uppercase tracking-wider">Match Conditions</div>
          
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="block font-medium text-slate-300 mb-1">Prefix (CIDR)</label>
              <input type="text" id="modal-rf-prefix" placeholder="e.g. 10.0.0.0/8 or 0.0.0.0/0" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
              <p class="text-[10px] text-slate-500 mt-0.5">Leave blank to match all prefixes</p>
            </div>
            <div>
              <label class="block font-medium text-slate-300 mb-1">Prefix Length (Range)</label>
              <input type="text" id="modal-rf-prefix-len" placeholder="e.g. 16-24 or ge 24 le 32" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
              <p class="text-[10px] text-slate-500 mt-0.5">Optional subnet mask length filter</p>
            </div>
          </div>

          <div class="grid grid-cols-3 gap-3">
            <div>
              <label class="block font-medium text-slate-300 mb-1">Match Protocol</label>
              <select id="modal-rf-protocol" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
                <option value="any">Any Protocol</option>
                <option value="bgp">BGP</option>
                <option value="ospf">OSPF</option>
                <option value="connected">Connected</option>
                <option value="static">Static</option>
              </select>
            </div>
            <div>
              <label class="block font-medium text-slate-300 mb-1">Match AS-Path (Regex)</label>
              <input type="text" id="modal-rf-as-path" placeholder="e.g. ^65001_ or _65000$" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
            </div>
            <div>
              <label class="block font-medium text-slate-300 mb-1">Match Community</label>
              <input type="text" id="modal-rf-community" placeholder="e.g. 65001:100" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
            </div>
          </div>
        </div>

        <!-- Set Attributes Box (Modifications) -->
        <div class="p-3.5 rounded-xl bg-slate-800/40 border border-slate-700/50 space-y-3">
          <div class="text-[11px] font-bold text-purple-400 uppercase tracking-wider">Set Modifications (On Accept)</div>
          
          <div class="grid grid-cols-3 gap-3">
            <div>
              <label class="block font-medium text-slate-300 mb-1">Set BGP Local Pref</label>
              <input type="number" id="modal-rf-set-local-pref" placeholder="e.g. 150" min="0" max="4294967295" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
            </div>
            <div>
              <label class="block font-medium text-slate-300 mb-1">Set Metric / MED</label>
              <input type="number" id="modal-rf-set-metric" placeholder="e.g. 20" min="0" max="4294967295" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
            </div>
            <div>
              <label class="block font-medium text-slate-300 mb-1">Set AS Prepend (Count)</label>
              <input type="number" id="modal-rf-set-as-prepend" placeholder="e.g. 2" min="1" max="10" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
            </div>
          </div>

          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="block font-medium text-slate-300 mb-1">Set Community</label>
              <input type="text" id="modal-rf-set-community" placeholder="e.g. 65001:200 or no-export" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
            </div>
            <div>
              <label class="block font-medium text-slate-300 mb-1">Set Next Hop (IP)</label>
              <input type="text" id="modal-rf-set-next-hop" placeholder="e.g. 192.168.1.1" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
            </div>
          </div>
        </div>

        <div class="grid grid-cols-3 gap-3">
          <div class="col-span-2">
            <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
            <input type="text" id="modal-rf-comment" placeholder="Filter upstream customer prefix" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
          </div>
          <div class="flex items-center pt-6">
            <label class="flex items-center space-x-2 text-slate-300 cursor-pointer">
              <input type="checkbox" id="modal-rf-disabled" class="rounded text-emerald-600 bg-slate-800 border-slate-700">
              <span class="font-medium">Disabled (X)</span>
            </label>
          </div>
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeRoutingFilterModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">Save Filter Rule</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: ADD / EDIT DHCP CLIENT ================= -->
  <div id="modal-dhcp-client" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div class="flex items-center gap-2">
          <span class="px-2 py-0.5 rounded text-[10px] font-mono bg-amber-500/20 text-amber-300 border border-amber-500/30 font-semibold">/ip dhcp-client</span>
          <h3 id="modal-dhcp-title" class="text-sm font-bold text-white">Add DHCP Client</h3>
        </div>
        <button onclick="closeDHCPClientModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>

      <form onsubmit="submitSaveDHCPClient(event)" class="p-6 space-y-4 text-xs">
        <input type="hidden" id="modal-dhcp-id">

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Interface *</label>
          <select id="modal-dhcp-iface" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-amber-500">
            <option value="">Select interface...</option>
          </select>
          <p class="text-[11px] text-slate-500 mt-1">Physical port, VLAN sub-interface, or Bridge to acquire dynamic lease on.</p>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Default Route Distance</label>
            <input type="number" id="modal-dhcp-distance" value="1" min="1" max="255" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono focus:outline-none focus:border-amber-500">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
            <input type="text" id="modal-dhcp-comment" placeholder="e.g. ISP WAN DHCP" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-amber-500">
          </div>
        </div>

        <div class="bg-slate-950/60 border border-slate-800/80 rounded-xl p-3 space-y-2.5">
          <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Gateway & DNS Options</div>
          
          <label class="flex items-center space-x-2.5 text-slate-300 cursor-pointer">
            <input type="checkbox" id="modal-dhcp-def-route" checked class="rounded text-amber-500 bg-slate-800 border-slate-700 focus:ring-amber-500">
            <span>Add Default Route (default gateway from DHCP)</span>
          </label>

          <label class="flex items-center space-x-2.5 text-slate-300 cursor-pointer">
            <input type="checkbox" id="modal-dhcp-peer-dns" checked class="rounded text-amber-500 bg-slate-800 border-slate-700 focus:ring-amber-500">
            <span>Use Peer DNS (DNS servers from DHCP)</span>
          </label>

          <label class="flex items-center space-x-2.5 text-slate-300 cursor-pointer">
            <input type="checkbox" id="modal-dhcp-peer-ntp" checked class="rounded text-amber-500 bg-slate-800 border-slate-700 focus:ring-amber-500">
            <span>Use Peer NTP (NTP servers from DHCP)</span>
          </label>

          <label class="flex items-center space-x-2.5 text-slate-300 cursor-pointer pt-1 border-t border-slate-800/80">
            <input type="checkbox" id="modal-dhcp-enabled" checked class="rounded text-emerald-500 bg-slate-800 border-slate-700 focus:ring-emerald-500">
            <span class="font-semibold text-white">Enable DHCP Client immediately</span>
          </label>
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeDHCPClientModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800 transition">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-amber-500 hover:bg-amber-400 text-slate-950 shadow-lg shadow-amber-500/20 transition">Save DHCP Client</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: ADD / EDIT BRIDGE ================= -->
  <div id="bridge-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 id="bridge-modal-title" class="text-sm font-bold text-white">Add Bridge Interface</h3>
        <button onclick="closeBridgeModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSaveBridge(event)" class="p-6 space-y-4 text-xs">
        <input type="hidden" id="bridge-modal-id">

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Bridge Name *</label>
            <input type="text" id="bridge-modal-name" required placeholder="e.g. bridge1" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">MTU</label>
            <input type="number" id="bridge-modal-mtu" value="1500" min="68" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Admin MAC Address (Optional)</label>
          <input type="text" id="bridge-modal-mac" placeholder="Leave blank for auto MAC" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">STP Protocol</label>
            <select id="bridge-modal-stp" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
              <option value="rstp" selected>RSTP (Rapid STP - Recommended)</option>
              <option value="stp">STP (IEEE 802.1D)</option>
              <option value="none">none (Disable STP)</option>
            </select>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">STP Priority</label>
            <input type="number" id="bridge-modal-priority" value="32768" min="0" max="65535" step="4096" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <!-- VLAN Filtering Box -->
        <div class="p-3.5 bg-slate-950/60 border border-slate-800 rounded-xl space-y-3">
          <label class="flex items-center space-x-2.5 cursor-pointer">
            <input type="checkbox" id="bridge-modal-vlanfiltering" onchange="toggleBridgeModalVlanFiltering()" class="rounded bg-slate-800 border-slate-700 text-sky-500">
            <span class="font-semibold text-white">VLAN Filtering (802.1Q Aware)</span>
          </label>
          <div id="bridge-modal-pvid-box" class="grid grid-cols-2 gap-3 pl-6">
            <div>
              <label class="block text-[11px] text-slate-400 mb-1">Default PVID</label>
              <input type="number" id="bridge-modal-pvid" value="1" min="1" max="4094" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1 text-white font-mono text-xs">
            </div>
            <div class="flex items-center pt-4">
              <label class="flex items-center space-x-2 text-slate-400 cursor-pointer text-xs">
                <input type="checkbox" id="bridge-modal-fastforward" checked class="rounded bg-slate-800 border-slate-700 text-sky-500">
                <span>Fast Forward</span>
              </label>
            </div>
          </div>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
          <input type="text" id="bridge-modal-comment" placeholder="e.g. LAN Bridge with EoIP" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
        </div>

        <div class="pt-1">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="bridge-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
            <span class="font-medium text-slate-300">Disabled (X)</span>
          </label>
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeBridgeModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-sky-600 hover:bg-sky-500 text-white shadow-lg shadow-sky-500/20">Save Bridge</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: ADD / EDIT BRIDGE PORT ================= -->
  <div id="bridge-port-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 id="bridge-port-modal-title" class="text-sm font-bold text-white">Add Port to Bridge</h3>
        <button onclick="closeBridgePortModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSaveBridgePort(event)" class="p-6 space-y-4 text-xs">
        <input type="hidden" id="bridge-port-modal-id">

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Target Bridge *</label>
            <select id="bridge-port-modal-bridge" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Interface *</label>
            <select id="bridge-port-modal-interface" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
          </div>
        </div>

        <div class="grid grid-cols-3 gap-3">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">PVID</label>
            <input type="number" id="bridge-port-modal-pvid" value="1" min="1" max="4094" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Path Cost</label>
            <input type="number" id="bridge-port-modal-pathcost" value="10" min="1" max="65535" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Horizon (Split)</label>
            <input type="number" id="bridge-port-modal-horizon" value="0" min="0" max="65535" title="0=none. Ports with identical horizon > 0 cannot communicate (split-horizon isolation for EoIP / VPLS)" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Frame Types</label>
            <select id="bridge-port-modal-frametypes" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
              <option value="admit-all" selected>admit all</option>
              <option value="admit-only-vlan-tagged">admit only VLAN tagged</option>
              <option value="admit-only-untagged-and-priority-tagged">admit only untagged</option>
            </select>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Priority</label>
            <input type="number" id="bridge-port-modal-priority" value="128" min="0" max="240" step="16" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-3 p-3 bg-slate-950/60 border border-slate-800 rounded-xl">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="bridge-port-modal-learn" checked class="rounded bg-slate-800 border-slate-700 text-sky-500">
            <span class="text-white font-semibold">MAC Learning</span>
          </label>
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="bridge-port-modal-ingressfiltering" class="rounded bg-slate-800 border-slate-700 text-sky-500">
            <span class="text-white font-semibold">Ingress Filtering</span>
          </label>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
          <input type="text" id="bridge-port-modal-comment" placeholder="e.g. Uplink to switch" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
        </div>

        <div class="pt-1">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="bridge-port-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
            <span class="font-medium text-slate-300">Disabled (X)</span>
          </label>
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeBridgePortModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-sky-600 hover:bg-sky-500 text-white shadow-lg shadow-sky-500/20">Save Port</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: ADD / EDIT BRIDGE VLAN ================= -->
  <div id="bridge-vlan-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 id="bridge-vlan-modal-title" class="text-sm font-bold text-white">Add Bridge VLAN Entry</h3>
        <button onclick="closeBridgeVlanModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSaveBridgeVLAN(event)" class="p-6 space-y-4 text-xs">
        <input type="hidden" id="bridge-vlan-modal-id">

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Target Bridge *</label>
            <select id="bridge-vlan-modal-bridge" onchange="updateBridgeVlanPortCheckboxes()" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono"></select>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">VLAN IDs *</label>
            <input type="text" id="bridge-vlan-modal-vlanids" required placeholder="e.g. 10 or 10,20,30 or 10-20" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
          </div>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Tagged Member Ports (Trunk)</label>
          <div id="bridge-vlan-tagged-ports" class="max-h-36 overflow-y-auto p-2.5 bg-slate-950/60 border border-slate-800 rounded-xl space-y-1 font-mono text-slate-300">
            <span class="text-slate-500 text-xs font-sans">Select a bridge above to view member ports</span>
          </div>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Untagged Member Ports (Access)</label>
          <div id="bridge-vlan-untagged-ports" class="max-h-36 overflow-y-auto p-2.5 bg-slate-950/60 border border-slate-800 rounded-xl space-y-1 font-mono text-slate-300">
            <span class="text-slate-500 text-xs font-sans">Select a bridge above to view member ports</span>
          </div>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">Comment</label>
          <input type="text" id="bridge-vlan-modal-comment" placeholder="e.g. Office & Guest VLANs" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white">
        </div>

        <div class="pt-1">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="bridge-vlan-modal-disabled" class="rounded bg-slate-800 border-slate-700 text-rose-500">
            <span class="font-medium text-slate-300">Disabled (X)</span>
          </label>
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeBridgeVlanModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-sky-600 hover:bg-sky-500 text-white shadow-lg shadow-sky-500/20">Save VLAN Entry</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: ADD IP ADDRESS TO BRIDGE ================= -->
  <div id="bridge-ip-modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-sm shadow-2xl overflow-hidden animate-in">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <div>
          <h3 class="text-sm font-bold text-white">Assign IP Address to Bridge</h3>
          <span id="bridge-ip-modal-sub" class="text-[11px] font-mono text-sky-400">bridge1</span>
        </div>
        <button onclick="closeBridgeIPModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitAddBridgeIP(event)" class="p-6 space-y-4 text-xs">
        <input type="hidden" id="bridge-ip-modal-id">

        <div>
          <label class="block font-semibold text-slate-300 mb-1.5">IPv4 / Subnet (CIDR) *</label>
          <input type="text" id="bridge-ip-modal-cidr" required placeholder="e.g. 192.168.88.1/24" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-white font-mono">
        </div>

        <div class="pt-4 border-t border-slate-800 flex justify-end space-x-3">
          <button type="button" onclick="closeBridgeIPModal()" class="px-4 py-2 rounded-lg text-slate-400 hover:bg-slate-800">Cancel</button>
          <button type="submit" class="px-5 py-2 rounded-lg font-semibold bg-sky-600 hover:bg-sky-500 text-white shadow-lg shadow-sky-500/20">Assign IP</button>
        </div>
      </form>
    </div>
  </div>

  <datalist id="fw-addrlist-datalist"></datalist>
  <script src="app.js?v=5.5"></script>
</body>
</html>