eparmak
/
DebTik


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466
							<!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">
</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="#vlans" onclick="navigate('vlans')" id="nav-vlans"
           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="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
            </svg>
            <span>VLANs (802.1Q)</span>
          </div>
          <span id="badge-vlans-count" class="text-[10px] bg-cyan-950 text-cyan-400 border border-cyan-800/50 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>

        <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="#dynamic-routing" onclick="navigate('dynamic-routing')" id="nav-dynamic-routing"
           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 & OSPF</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-ospf-dot" class="w-2 h-2 rounded-full bg-slate-600" title="OSPF Status"></span>
          </div>
        </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: 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>

        <div class="flex items-center space-x-3">
          <!-- Active Tunnels Pill -->
          <div class="flex items-center bg-slate-800/80 border border-slate-700/60 rounded-full px-3 py-1 text-xs text-slate-300 space-x-2">
            <span id="tunnels-dot" class="w-2 h-2 rounded-full bg-slate-500"></span>
            <span id="tunnels-label" class="font-mono text-[11px]">0 Active VPN Tunnels</span>
          </div>

          <!-- Quick Actions -->
          <button onclick="openVlanModal()" class="flex items-center space-x-2 bg-gradient-to-r from-brand-600 to-cyan-600 hover:from-brand-500 hover:to-cyan-500 text-white font-medium text-xs px-3.5 py-2 rounded-lg shadow-lg shadow-brand-500/20 transition-all">
            <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>+ Create VLAN</span>
          </button>

          <button onclick="fetchData(true)" title="Manual Refresh" class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white border border-slate-700 transition">
            <svg id="refresh-spinner" 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 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
          </button>
        </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 sm:grid-cols-2 lg:grid-cols-4 gap-4">

            <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">Interfaces</span>
                <div class="p-2 bg-brand-500/10 text-brand-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="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>
                </div>
              </div>
              <div class="flex items-baseline space-x-2">
                <span id="stat-ifaces-up" class="text-2xl font-bold text-white">0</span>
                <span class="text-xs text-slate-400">UP /</span>
                <span id="stat-ifaces-total" class="text-sm font-semibold text-slate-400">0 Total</span>
              </div>
              <div class="mt-2 text-xs text-slate-400 flex items-center">
                <span id="stat-ifaces-down" class="text-rose-400 font-medium mr-1.5">0 DOWN</span>
                <span class="text-slate-500">•</span>
                <span class="text-slate-400 ml-1.5">Plug & Play</span>
              </div>
            </div>

            <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">802.1Q VLANs</span>
                <div class="p-2 bg-cyan-500/10 text-cyan-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="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                  </svg>
                </div>
              </div>
              <div class="flex items-baseline space-x-2">
                <span id="stat-vlans-count" class="text-2xl font-bold text-cyan-400">0</span>
                <span class="text-xs text-slate-400">Virtual Subnets</span>
              </div>
              <div class="mt-2 text-xs text-slate-400">Kernel Tagging Active</div>
            </div>

            <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">WAN & VPN Services</span>
                <div class="p-2 bg-violet-500/10 text-violet-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="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>
                </div>
              </div>
              <div class="flex items-baseline space-x-2">
                <span id="stat-vpn-active" class="text-2xl font-bold text-violet-400">0</span>
                <span class="text-xs text-slate-400">Connected Tunnels</span>
              </div>
              <div class="mt-2 text-[11px] text-slate-400 flex items-center gap-1.5 font-mono">
                <span>WG • IPSec • PPPoE • L2TP</span>
              </div>
            </div>

            <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"><span class="text-emerald-400 font-bold">↓</span> RX:</span>
                  <span id="stat-traffic-rx" class="font-mono font-semibold text-emerald-400">0 B/s</span>
                </div>
                <div class="flex items-center justify-between text-xs">
                  <span class="text-slate-400 flex items-center gap-1"><span class="text-cyan-400 font-bold">↑</span> TX:</span>
                  <span id="stat-traffic-tx" class="font-mono font-semibold text-cyan-400">0 B/s</span>
                </div>
              </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 Tables -->
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <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">Interfaces Overview</h3>
                <button onclick="navigate('interfaces')" class="text-xs text-brand-400 hover:text-brand-300 font-medium">View All →</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">
                    <tr><th class="pb-2">Interface</th><th class="pb-2">Role</th><th class="pb-2">IP</th><th class="pb-2 text-right">Status</th></tr>
                  </thead>
                  <tbody id="quick-interfaces-table" class="divide-y divide-slate-800/60 font-mono"></tbody>
                </table>
              </div>
            </div>

            <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">Active VLANs</h3>
                <button onclick="navigate('vlans')" class="text-xs text-cyan-400 hover:text-cyan-300 font-medium">Manage →</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">
                    <tr><th class="pb-2">VLAN</th><th class="pb-2">Device</th><th class="pb-2">Subnet</th><th class="pb-2 text-right">Parent</th></tr>
                  </thead>
                  <tbody id="quick-vlans-table" class="divide-y divide-slate-800/60 font-mono"></tbody>
                </table>
              </div>
            </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="flex items-center space-x-2">
              <span class="text-xs font-semibold text-slate-400 mr-2">Filter:</span>
              <button onclick="filterIfaces('all')" id="filter-all" class="filter-btn px-3 py-1.5 rounded-lg text-xs font-medium bg-slate-800 text-white border border-slate-700">All Interfaces</button>
              <button onclick="filterIfaces('has_vlans')" id="filter-has_vlans" class="filter-btn px-3 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800 hover:text-white">With VLANs</button>
              <button onclick="filterIfaces('physical')" id="filter-physical" class="filter-btn px-3 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800 hover:text-white">Physical Only</button>
              <button onclick="filterIfaces('up')" id="filter-up" class="filter-btn px-3 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:bg-slate-800 hover:text-white">Only UP</button>
            </div>

            <div class="flex items-center space-x-3">
              <button onclick="expandAllIfaces(true)" class="text-xs text-cyan-400 hover:text-cyan-300 font-medium px-2.5 py-1.5 rounded bg-cyan-950/50 border border-cyan-800/60">Expand All</button>
              <button onclick="expandAllIfaces(false)" class="text-xs text-slate-400 hover:text-slate-300 font-medium px-2.5 py-1.5 rounded bg-slate-800 border border-slate-700">Collapse All</button>
              <input type="text" id="iface-search" oninput="renderInterfacesList()" placeholder="Search interfaces..."
                     class="bg-slate-800/80 border border-slate-700 rounded-lg px-3 py-1.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-brand-500 w-48">
            </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 flex items-center gap-2">
                  <span>Interface Hierarchy & VLAN Sub-interfaces</span>
                  <span class="text-[10px] bg-cyan-500/10 text-cyan-400 border border-cyan-500/20 px-2 py-0.5 rounded font-mono">Expandable Tree</span>
                </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: VLANS (802.1Q) ================= -->
        <section id="section-vlans" class="hidden space-y-6">
          <div class="bg-gradient-to-r from-cyan-950/60 via-slate-900 to-slate-900 border border-cyan-800/40 rounded-xl p-5 flex flex-wrap items-center justify-between gap-4">
            <div class="max-w-xl">
              <div class="flex items-center gap-2 mb-1">
                <span class="px-2 py-0.5 rounded text-[11px] font-mono bg-cyan-500/20 text-cyan-400 border border-cyan-500/30 font-semibold">IEEE 802.1Q</span>
                <h2 class="text-base font-bold text-white">VLAN Virtual Sub-interfaces</h2>
              </div>
              <p class="text-xs text-slate-400 leading-relaxed">
                Tagged sub-interfaces on physical parent interfaces (e.g. <code class="text-cyan-300">eth0.10</code>).
              </p>
            </div>
            <button onclick="openVlanModal()" class="flex items-center space-x-2 bg-gradient-to-r from-brand-600 to-cyan-600 hover:from-brand-500 hover:to-cyan-500 text-white font-semibold text-xs px-4 py-2.5 rounded-lg shadow-lg shadow-cyan-500/20 transition">
              <span>+ Create VLAN Sub-interface</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 VLANs</h3>
              <input type="text" id="vlan-search" oninput="renderVlansList()" placeholder="Filter VLAN ID..."
                     class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1 text-xs text-white focus:outline-none focus:border-cyan-500 w-52">
            </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-[11px] font-sans">
                  <tr>
                    <th class="py-3 px-4 font-semibold">VLAN ID</th>
                    <th class="py-3 px-4 font-semibold">Device</th>
                    <th class="py-3 px-4 font-semibold">Parent</th>
                    <th class="py-3 px-4 font-semibold">Subnet (CIDR)</th>
                    <th class="py-3 px-4 font-semibold">Role</th>
                    <th class="py-3 px-4 font-semibold">MTU</th>
                    <th class="py-3 px-4 font-semibold">Status</th>
                    <th class="py-3 px-4 font-semibold text-right">Actions</th>
                  </tr>
                </thead>
                <tbody id="vlans-table-body" class="divide-y divide-slate-800"></tbody>
              </table>
            </div>
            <div id="vlans-empty-state" class="hidden p-12 text-center text-slate-500">
              No VLANs configured. Click "+ Create VLAN" to add one.
            </div>
          </div>
        </section>

        <!-- ================= SECTION: PPPoE CLIENTS (MikroTik style) ================= -->
        <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">Manage multiple Point-to-Point Protocol over Ethernet WAN connections (MikroTik RouterOS style).</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 (MikroTik style) ================= -->
        <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 server and peer controller (MikroTik RouterOS v7 style).</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 (MikroTik style) ================= -->
        <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 strongSwan 6 Site-to-Site and Remote Gateway connections.</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 (MikroTik style) ================= -->
        <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">Multiple Layer 2 Tunneling Protocol clients with optional IPSec PSK encryption.</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 (MikroTik style) ================= -->
        <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">Multiple Point-to-Point Tunneling Protocol clients with MPPE-128 encryption.</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">MikroTik RouterOS centralized user authentication database, IP pools and VPN server 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">MikroTik RouterOS Layer 2 GRETAP tunneling over IP. Transparently bridge Ethernet subnets across the Internet.</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">Complete MikroTik-grade stateful filter, NAT, packet/connection marking (Mangle), address lists and live connection tracker.</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-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>
        </section>

        <!-- ================= SECTION: ROUTES & POLICY (/ip route & rules) ================= -->
        <section id="section-routes" 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">/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">
              <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="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: DYNAMIC ROUTING (BGP & OSPF) ================= -->
        <section id="section-dynamic-routing" 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">/routing bgp</span>
                <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">Dynamic Routing Engine (BGP & OSPF)</h2>
              </div>
              <p class="text-xs text-slate-400">Enterprise FRRouting stack providing BGP peering, network advertisement, and OSPFv2 link-state routing.</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="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="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="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>
            </div>
          </div>

          <!-- Dynamic Routing Sub-Tabs -->
          <div class="flex border-b border-slate-800 space-x-1 overflow-x-auto">
            <button id="dyn-subtab-btn-bgp-peers" onclick="switchDynSubTab('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="dyn-subtab-btn-bgp-nets" onclick="switchDynSubTab('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>BGP Networks</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="dyn-subtab-btn-bgp-routes" onclick="switchDynSubTab('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>
            <button id="dyn-subtab-btn-ospf-ifaces" onclick="switchDynSubTab('ospf-ifaces')" 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 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="dyn-subtab-btn-ospf-areas" onclick="switchDynSubTab('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="dyn-subtab-btn-ospf-nbrs" onclick="switchDynSubTab('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="dyn-subtab-btn-ospf-routes" onclick="switchDynSubTab('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 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">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>

          <!-- 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: 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>

      </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 ================= -->
  <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">
        <h3 id="wg-iface-modal-title" class="text-sm font-bold text-white">Add WireGuard Interface</h3>
        <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">
        <input type="hidden" id="wg-iface-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">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-xs text-white font-mono focus:outline-none focus:border-rose-500">
          </div>
          <div>
            <label class="block text-xs 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-xs 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 text-xs 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" 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-rose-500">
          </div>
          <div>
            <label class="block text-xs 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-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">Public Key</label>
            <button type="button" onclick="generateWGInterfaceKeys()" class="text-[10px] text-cyan-400 hover:text-cyan-300 font-semibold">Generate New Keypair</button>
          </div>
          <input type="text" id="wg-iface-modal-pubkey" readonly class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-slate-300 font-mono">
        </div>
        <div>
          <label class="block text-xs font-semibold text-slate-300 mb-1.5">Private Key (Secret) *</label>
          <input type="password" id="wg-iface-modal-privkey" required class="w-full bg-slate-950 border border-slate-800 rounded-lg px-3 py-2 text-xs text-slate-300 font-mono focus:outline-none focus:border-rose-500">
        </div>
        <div class="pt-2">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="wg-iface-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="closeAddWGInterfaceModal()" 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-rose-600 hover:bg-rose-500 text-white shadow-lg shadow-rose-500/20">Save Interface</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: ADD 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">
        <h3 id="wg-peer-modal-title" class="text-sm font-bold text-white">Add WireGuard Peer</h3>
        <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">
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">WireGuard Interface *</label>
            <select id="wg-peer-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-rose-500"></select>
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-300 mb-1.5">Peer Name / Alias *</label>
            <input type="text" id="wg-peer-modal-name" placeholder="Laptop, iPhone, Branch" required class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-xs text-white">
          </div>
        </div>
        <div>
          <label class="block text-xs font-semibold text-slate-300 mb-1.5">Peer Public Key *</label>
          <input type="text" id="wg-peer-modal-pubkey" placeholder="Base64 44-character public 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>
          <label class="block text-xs 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" 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">Endpoint (Optional)</label>
            <input type="text" id="wg-peer-modal-endpoint" placeholder="host:port" 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">Keepalive (sec)</label>
            <input type="number" id="wg-peer-modal-keepalive" value="25" 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">Preshared Key (Optional)</label>
          <input type="password" id="wg-peer-modal-preshared" placeholder="Optional PSK for extra post-quantum security" 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="pt-2">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="wg-peer-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="closeAddWGPeerModal()" 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-rose-600 hover:bg-rose-500 text-white">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 ================= -->
  <div id="filter-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-xl shadow-2xl overflow-hidden animate-in max-h-[90vh] flex flex-col">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 id="filter-modal-title" class="text-sm font-bold text-white">Add Firewall Filter Rule</h3>
        <button onclick="closeFilterModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSaveFilterRule(event)" class="p-6 space-y-4 overflow-y-auto flex-1 text-xs">
        <input type="hidden" id="filter-modal-id">

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1">Chain *</label>
            <select id="filter-modal-chain" 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">
              <option value="input">input (traffic to router)</option>
              <option value="forward" selected>forward (routed traffic)</option>
              <option value="output">output (traffic from router)</option>
            </select>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1">Action *</label>
            <select id="filter-modal-action" onchange="toggleFilterActionFields()" 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">
              <option value="accept" selected>accept</option>
              <option value="drop">drop</option>
              <option value="reject">reject</option>
              <option value="log">log</option>
              <option value="jump">jump</option>
              <option value="return">return</option>
            </select>
          </div>
        </div>

        <div id="filter-action-reject-box" class="hidden p-3 bg-rose-950/20 border border-rose-900/30 rounded-lg">
          <label class="block font-semibold text-rose-300 mb-1">Reject With</label>
          <select id="filter-modal-rejectwith" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
            <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="tcp-reset">tcp-reset (TCP RST)</option>
          </select>
        </div>

        <div class="p-3 bg-slate-950/60 border border-slate-800/80 rounded-xl space-y-3">
          <span class="block font-bold text-slate-400 uppercase tracking-wider text-[10px]">Match Properties</span>
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="block font-semibold text-slate-300 mb-1">Protocol</label>
              <select id="filter-modal-proto" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
                <option value="all">all</option>
                <option value="tcp">tcp (6)</option>
                <option value="udp">udp (17)</option>
                <option value="icmp">icmp (1)</option>
                <option value="gre">gre (47)</option>
                <option value="esp">esp (50)</option>
              </select>
            </div>
            <div>
              <label class="block font-semibold text-slate-300 mb-1">Connection Mark</label>
              <input type="text" id="filter-modal-connmark" placeholder="e.g. wan2_conn" 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-semibold text-slate-300 mb-1">Src. Address / CIDR</label>
              <input type="text" id="filter-modal-src" placeholder="192.168.1.0/24 or !10.0.0.1" 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-semibold text-slate-300 mb-1">Dst. Address / CIDR</label>
              <input type="text" id="filter-modal-dst" placeholder="0.0.0.0/0 or !192.168.10.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 class="grid grid-cols-2 gap-3">
            <div>
              <label class="block font-semibold text-slate-300 mb-1">Src. Port(s)</label>
              <input type="text" id="filter-modal-sport" placeholder="80,443 or 1000-2000" 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-semibold text-slate-300 mb-1">Dst. Port(s)</label>
              <input type="text" id="filter-modal-dport" placeholder="80,443,8080" 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-semibold text-slate-300 mb-1">In. Interface</label>
              <select id="filter-modal-iniface" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono"></select>
            </div>
            <div>
              <label class="block font-semibold text-slate-300 mb-1">Out. Interface</label>
              <select id="filter-modal-outiface" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono"></select>
            </div>
          </div>

          <div>
            <label class="block font-semibold text-slate-300 mb-1.5">Connection State</label>
            <div class="flex flex-wrap gap-3">
              <label class="flex items-center space-x-1.5 cursor-pointer">
                <input type="checkbox" id="filter-modal-cs-established" class="rounded bg-slate-800 border-slate-700 text-emerald-500">
                <span class="text-slate-300">established</span>
              </label>
              <label class="flex items-center space-x-1.5 cursor-pointer">
                <input type="checkbox" id="filter-modal-cs-related" class="rounded bg-slate-800 border-slate-700 text-emerald-500">
                <span class="text-slate-300">related</span>
              </label>
              <label class="flex items-center space-x-1.5 cursor-pointer">
                <input type="checkbox" id="filter-modal-cs-new" class="rounded bg-slate-800 border-slate-700 text-emerald-500">
                <span class="text-slate-300">new</span>
              </label>
              <label class="flex items-center space-x-1.5 cursor-pointer">
                <input type="checkbox" id="filter-modal-cs-invalid" class="rounded bg-slate-800 border-slate-700 text-rose-500">
                <span class="text-slate-300">invalid</span>
              </label>
            </div>
          </div>

          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="block font-semibold text-slate-300 mb-1">Src. Address List</label>
              <select id="filter-modal-srclist" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
                <option value="">(None)</option>
              </select>
            </div>
            <div>
              <label class="block font-semibold text-slate-300 mb-1">Dst. Address List</label>
              <select id="filter-modal-dstlist" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
                <option value="">(None)</option>
              </select>
            </div>
          </div>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1">Comment</label>
          <input type="text" id="filter-modal-comment" placeholder="e.g. Drop invalid packets" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white">
        </div>

        <div class="pt-2">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="filter-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="closeFilterModal()" 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: FIREWALL NAT RULE ================= -->
  <div id="nat-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-xl shadow-2xl overflow-hidden animate-in max-h-[90vh] flex flex-col">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 id="nat-modal-title" class="text-sm font-bold text-white">Add NAT Rule</h3>
        <button onclick="closeNATModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSaveNATRule(event)" class="p-6 space-y-4 overflow-y-auto flex-1 text-xs">
        <input type="hidden" id="nat-modal-id">

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1">Chain *</label>
            <select id="nat-modal-chain" onchange="toggleNATChainFields()" 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">
              <option value="srcnat" selected>srcnat (Outgoing / Masquerade)</option>
              <option value="dstnat">dstnat (Incoming / Port Forwarding)</option>
            </select>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1">Action *</label>
            <select id="nat-modal-action" onchange="toggleNATActionFields()" 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">
              <option value="masquerade" selected>masquerade</option>
              <option value="src-nat">src-nat</option>
              <option value="dst-nat">dst-nat</option>
              <option value="redirect">redirect</option>
              <option value="accept">accept</option>
            </select>
          </div>
        </div>

        <div id="nat-action-to-box" class="p-3 bg-slate-950/60 border border-slate-800/80 rounded-xl space-y-3">
          <span class="block font-bold text-slate-400 uppercase tracking-wider text-[10px]">NAT Target (To Addresses / Ports)</span>
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="block font-semibold text-slate-300 mb-1">To Addresses</label>
              <input type="text" id="nat-modal-toaddr" placeholder="192.168.10.50" 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-semibold text-slate-300 mb-1">To Ports</label>
              <input type="text" id="nat-modal-toport" placeholder="80 or 8080" 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="p-3 bg-slate-950/60 border border-slate-800/80 rounded-xl space-y-3">
          <span class="block font-bold text-slate-400 uppercase tracking-wider text-[10px]">Match Properties</span>
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="block font-semibold text-slate-300 mb-1">Protocol</label>
              <select id="nat-modal-proto" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
                <option value="all">all</option>
                <option value="tcp">tcp</option>
                <option value="udp">udp</option>
                <option value="icmp">icmp</option>
              </select>
            </div>
            <div>
              <label class="block font-semibold text-slate-300 mb-1">Dst. Port(s)</label>
              <input type="text" id="nat-modal-dport" placeholder="80,443" 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-semibold text-slate-300 mb-1">Src. Address / CIDR</label>
              <input type="text" id="nat-modal-src" placeholder="192.168.10.0/24" 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-semibold text-slate-300 mb-1">Dst. Address / CIDR</label>
              <input type="text" id="nat-modal-dst" placeholder="e.g. WAN Public IP" 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-semibold text-slate-300 mb-1">In. Interface</label>
              <select id="nat-modal-iniface" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono"></select>
            </div>
            <div>
              <label class="block font-semibold text-slate-300 mb-1">Out. Interface</label>
              <select id="nat-modal-outiface" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono"></select>
            </div>
          </div>
        </div>

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

        <div class="pt-2">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="nat-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="closeNATModal()" 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 NAT Rule</button>
        </div>
      </form>
    </div>
  </div>

  <!-- ================= MODAL: FIREWALL MANGLE RULE ================= -->
  <div id="mangle-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-xl shadow-2xl overflow-hidden animate-in max-h-[90vh] flex flex-col">
      <div class="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-950/40">
        <h3 id="mangle-modal-title" class="text-sm font-bold text-white">Add Mangle Rule</h3>
        <button onclick="closeMangleModal()" class="text-slate-400 hover:text-white p-1 rounded-lg">✕</button>
      </div>
      <form onsubmit="submitSaveMangleRule(event)" class="p-6 space-y-4 overflow-y-auto flex-1 text-xs">
        <input type="hidden" id="mangle-modal-id">

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block font-semibold text-slate-300 mb-1">Chain *</label>
            <select id="mangle-modal-chain" 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">
              <option value="prerouting" selected>prerouting (Policy Routing / Marks)</option>
              <option value="forward">forward</option>
              <option value="postrouting">postrouting</option>
              <option value="input">input</option>
              <option value="output">output</option>
            </select>
          </div>
          <div>
            <label class="block font-semibold text-slate-300 mb-1">Action *</label>
            <select id="mangle-modal-action" onchange="toggleMangleActionFields()" 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">
              <option value="mark-connection" selected>mark-connection</option>
              <option value="mark-routing">mark-routing (Policy Routing)</option>
              <option value="mark-packet">mark-packet (QoS / Queues)</option>
              <option value="change-mss">change-mss (TCP MSS Clamp)</option>
              <option value="set-dscp">set-dscp</option>
              <option value="accept">accept</option>
            </select>
          </div>
        </div>

        <div id="mangle-target-box" class="p-3 bg-slate-950/60 border border-slate-800/80 rounded-xl space-y-3">
          <span class="block font-bold text-slate-400 uppercase tracking-wider text-[10px]">Mark Target & Passthrough</span>
          <div class="grid grid-cols-2 gap-3">
            <div id="mangle-field-newmark">
              <label class="block font-semibold text-slate-300 mb-1">New Mark Name</label>
              <input type="text" id="mangle-modal-newmark" placeholder="e.g. wan2_conn or to_WAN2" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono">
            </div>
            <div class="flex items-center pt-5">
              <label class="flex items-center space-x-2 cursor-pointer">
                <input type="checkbox" id="mangle-modal-passthrough" checked class="rounded bg-slate-800 border-slate-700 text-emerald-500">
                <span class="font-medium text-slate-300">Passthrough</span>
              </label>
            </div>
          </div>
        </div>

        <div class="p-3 bg-slate-950/60 border border-slate-800/80 rounded-xl space-y-3">
          <span class="block font-bold text-slate-400 uppercase tracking-wider text-[10px]">Match Criteria</span>
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="block font-semibold text-slate-300 mb-1">Src. Address / CIDR</label>
              <input type="text" id="mangle-modal-src" placeholder="192.168.10.0/24" 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-semibold text-slate-300 mb-1">Dst. Address / CIDR</label>
              <input type="text" id="mangle-modal-dst" placeholder="!192.168.0.0/16" 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-semibold text-slate-300 mb-1">Connection Mark</label>
              <input type="text" id="mangle-modal-connmark" placeholder="e.g. wan2_conn" 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-semibold text-slate-300 mb-1">In. Interface</label>
              <select id="mangle-modal-iniface" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white font-mono"></select>
            </div>
          </div>
        </div>

        <div>
          <label class="block font-semibold text-slate-300 mb-1">Comment</label>
          <input type="text" id="mangle-modal-comment" placeholder="e.g. Mark routing for Office traffic" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-white">
        </div>

        <div class="pt-2">
          <label class="flex items-center space-x-2 cursor-pointer">
            <input type="checkbox" id="mangle-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="closeMangleModal()" 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 Mangle Rule</button>
        </div>
      </form>
    </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">
        <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-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" class="px-5 py-2 rounded-lg font-semibold bg-emerald-600 hover:bg-emerald-500 text-white shadow-lg shadow-emerald-500/20">Add to List</button>
        </div>
      </form>
    </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">

        <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="192.168.1.1 or 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-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="1" 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">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"></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">MikroTik RouterOS Layer 2 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 IP of the remote MikroTik router</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 FRRouting bgpd service for dynamic exterior gateway routing</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>

        <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-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 FRRouting ospfd service for dynamic interior gateway routing</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>

  <script src="app.js?v=2.6"></script>
</body>
</html>