/* Layout: header gelap penuh, sidebar navigasi bergrup di kiri (strip tab di ponsel), konten satu kolom dengan kartu per modul. */ :root{ /* BR1: palet merek Xbeon = hitam, putih, merah #EE0329. --ac = aksen untuk teks/garis (kontras >= 4,5:1 di permukaan tema); --ac-fill = isian merah dengan teks putih (--ac-ink); --brand = merah logo persis. --bad sengaja condong ke jingga-bata supaya tidak sama dengan aksen merek. */ --bg:#eeeef0;--sf:#ffffff;--sf2:#f5f5f7;--ink:#131316;--mu:#5d5d66;--bd:#dadade;--bd2:#c3c3ca; --ac:#c8011f;--ac-fill:#e0022a;--ac-ink:#ffffff;--ac-soft:#fde8ec;--brand:#ee0329; --hd:#0b0b0c;--hd-ink:#f4f4f5;--hd-mu:#9a9aa2; --ok:#157a4f;--ok-soft:#dcf2e6;--wn:#8f5f00;--wn-soft:#faedcc;--bad:#b5301a;--bad-soft:#fbe4de; --cs1:#2a78d6;--cs2:#eb6834;--cs3:#1baf7a;--cs4:#eda100;--cs5:#e87ba4; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --bg:#0b0b0c;--sf:#141416;--sf2:#1b1b1e;--ink:#f4f4f5;--mu:#9a9aa2;--bd:#2a2a2f;--bd2:#3c3c43; --ac:#ff5c6e;--ac-fill:#e8022a;--ac-ink:#ffffff;--ac-soft:#3a1219;--brand:#ee0329;--hd:#050506;--hd-ink:#f4f4f5;--hd-mu:#8e8e97; --ok:#3fc58a;--ok-soft:#12352a;--wn:#e5b84a;--wn-soft:#3a2f12;--bad:#ff8a70;--bad-soft:#40201a;--cs1:#3987e5;--cs2:#d95926;--cs3:#199e70;--cs4:#c98500;--cs5:#d55181;color-scheme:dark}} :root[data-theme="dark"]{ --bg:#0b0b0c;--sf:#141416;--sf2:#1b1b1e;--ink:#f4f4f5;--mu:#9a9aa2;--bd:#2a2a2f;--bd2:#3c3c43; --ac:#ff5c6e;--ac-fill:#e8022a;--ac-ink:#ffffff;--ac-soft:#3a1219;--brand:#ee0329;--hd:#050506;--hd-ink:#f4f4f5;--hd-mu:#8e8e97; --ok:#3fc58a;--ok-soft:#12352a;--wn:#e5b84a;--wn-soft:#3a2f12;--bad:#ff8a70;--bad-soft:#40201a;--cs1:#3987e5;--cs2:#d95926;--cs3:#199e70;--cs4:#c98500;--cs5:#d55181;color-scheme:dark} *{box-sizing:border-box} html,body{margin:0} body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans);-webkit-text-size-adjust:100%} h1,h2,h3,h4{margin:0;text-wrap:balance} h2{font-size:20px;font-weight:700;letter-spacing:-.01em} h3{font-size:14px;font-weight:700} h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mu)} p{margin:0} a{color:var(--ac)} code,.mono{font-family:var(--mono);font-size:12.5px} :focus-visible{outline:2px solid var(--ac);outline-offset:2px} [hidden]{display:none!important} /* header */ .hd{background:var(--hd);color:var(--hd-ink);padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;position:sticky;top:env(safe-area-inset-top,0px);z-index:20} body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--hd);z-index:30} .brand{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-width:0} .brand>span:not(.xb-logo){font:11px var(--mono);color:var(--hd-mu);white-space:nowrap} /* BR1: logo vektor (web/brand.js). Kata/tagline mengikuti warna teks (currentColor); baji X dan BEYOND = merah merek. */ .xb-logo{display:inline-flex;flex:none;color:var(--hd-ink)} .xb-logo svg{display:block;height:22px;width:auto;aspect-ratio:1321/268} .xb-logo.full svg{height:auto;width:min(300px,100%);aspect-ratio:1321/336} .xb-logo .xb-ink{fill:currentColor} .xb-logo .xb-red{fill:var(--brand)} .hd-r{display:flex;gap:8px 10px;align-items:center;flex-wrap:wrap;font-size:12px} .hd-r .who{font-family:var(--mono);color:var(--hd-mu)} .hd .btn{background:transparent;color:var(--hd-ink);border-color:#3a3a41} .hd .btn:hover{background:#1d1d21} /* kerangka */ .shell{display:flex;align-items:flex-start;min-height:calc(100vh - 56px)} .side{width:212px;flex:none;position:sticky;top:calc(52px + env(safe-area-inset-top,0px));padding:14px 8px 24px max(12px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 52px);overflow-y:auto} .side h4{padding:14px 10px 4px} .side h4:first-child{padding-top:2px} .nb{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:0;background:none;color:var(--mu);font:500 13.5px var(--sans);padding:8px 10px;border-radius:6px;cursor:pointer;text-align:left} .nb:hover{background:var(--sf2);color:var(--ink)} .nb[aria-current="page"]{background:var(--ac-soft);color:var(--ac);font-weight:700} .nb .dot{width:8px;height:8px;border-radius:50%;background:var(--bad)} main{flex:1;min-width:0;padding-block:20px 96px;padding-left:16px;padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1240px} .view{display:flex;flex-direction:column;gap:16px;min-width:0} .vh{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:flex-end;justify-content:space-between} .vh p{color:var(--mu);max-width:70ch} @media (max-width:900px){ .shell{flex-direction:column;align-items:stretch} .hd{position:static} .side{width:100%;position:sticky;top:env(safe-area-inset-top,0px);max-height:none;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:6px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));background:var(--sf);border-bottom:1px solid var(--bd);z-index:10;gap:4px} .side h4{display:none} .nb{width:auto;white-space:nowrap} main{padding-left:max(16px,env(safe-area-inset-left,0px))} } /* komponen */ .card{background:var(--sf);border:1px solid var(--bd);border-radius:8px;padding:16px;min-width:0} .card>h3,.card>.ch{margin-bottom:12px} .ch{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between} .ch .sub{color:var(--mu);font-size:12.5px} .grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))} .grid.w2{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))} .kpi{background:var(--sf);border:1px solid var(--bd);border-radius:8px;padding:12px 14px;min-width:0} .kpi small{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mu)} .kpi b{display:block;font-size:22px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .kpi span{font-size:12px;color:var(--mu)} .bar{height:5px;border-radius:3px;background:var(--sf2);margin-top:8px;overflow:hidden} .bar i{display:block;height:100%;background:var(--ac-fill);border-radius:3px} .bar i.hi{background:var(--bad)} .pill{display:inline-flex;align-items:center;gap:5px;font:600 11.5px var(--sans);padding:2px 8px;border-radius:99px;background:var(--sf2);color:var(--mu);white-space:nowrap} .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--wn-soft);color:var(--wn)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .tag{font:600 11px var(--mono);padding:1px 6px;border-radius:4px;background:var(--ac-soft);color:var(--ac)} .muted{color:var(--mu)} .sm{font-size:12.5px} .row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end} .stack{display:flex;flex-direction:column;gap:12px} .hr{border:0;border-top:1px solid var(--bd);margin:4px 0} /* tombol */ .btn,.btn-c{font:600 13px var(--sans);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 13px;border-radius:6px;border:1px solid var(--bd2);background:var(--sf);color:var(--ink);cursor:pointer;white-space:nowrap} .btn:hover,.btn-c:hover{background:var(--sf2)} .btn.pri{background:var(--ac-fill);border-color:var(--ac-fill);color:var(--ac-ink)} .btn.pri:hover{filter:brightness(1.08)} .btn.dng{color:var(--bad);border-color:var(--bad)} .btn.dng:hover{background:var(--bad-soft)} .btn.sm{padding:3px 8px;font-size:12px} .btn:disabled,.btn-c:disabled{opacity:.5;cursor:not-allowed} /* form */ label.f{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:var(--mu);min-width:0} label.f small{font-weight:400;color:var(--mu);font-size:11.5px} input,select,textarea{font:13px var(--sans);color:var(--ink);background:var(--sf);border:1px solid var(--bd2);border-radius:6px;padding:6px 8px;min-width:0;width:100%} input[type=checkbox]{width:auto;accent-color:var(--ac)} input.mono,textarea.mono,td input,td select{font-family:var(--mono);font-size:12.5px} input:disabled,select:disabled,textarea:disabled{background:var(--sf2);color:var(--mu)} input.bad,select.bad{border-color:var(--bad)} textarea{resize:vertical;min-height:74px} .sw{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;user-select:none} .sw input{position:absolute;opacity:0;width:0;height:0} .sw i{width:34px;height:20px;border-radius:99px;background:var(--bd2);position:relative;flex:none;transition:background .15s} .sw i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s} .sw input:checked+i{background:var(--ac-fill)} .sw input:checked+i::after{transform:translateX(14px)} .sw input:focus-visible+i{outline:2px solid var(--ac);outline-offset:2px} .sw input:disabled+i{opacity:.5} .seg{display:inline-flex;border:1px solid var(--bd2);border-radius:6px;overflow:hidden} .seg button{border:0;background:var(--sf);color:var(--mu);font:600 12.5px var(--sans);padding:6px 12px;cursor:pointer;border-right:1px solid var(--bd2)} .seg button:last-child{border-right:0} .seg button[aria-pressed="true"]{background:var(--ac-fill);color:var(--ac-ink)} .seg button:disabled{cursor:not-allowed;opacity:.7} /* tabel */ .tw{overflow-x:auto;border:1px solid var(--bd);border-radius:6px} table{border-collapse:collapse;width:100%;font-size:13px} th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mu);padding:7px 8px;border-bottom:1px solid var(--bd);white-space:nowrap;background:var(--sf2)} td{padding:5px 6px;border-bottom:1px solid var(--bd);vertical-align:middle} tr:last-child td{border-bottom:0} td input,td select{min-width:92px} td input[type=checkbox]{min-width:0} td.ro{font-family:var(--mono);font-size:12.5px;white-space:nowrap} td.act{white-space:nowrap;text-align:right} td.wrap{white-space:normal;font-family:var(--mono);font-size:12.5px;overflow-wrap:anywhere} .empty{padding:18px;text-align:center;color:var(--mu);font-size:13px} /* link ISP */ .lk{border:1px solid var(--bd);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;background:var(--sf);min-width:0} .lk.up{border-left:4px solid var(--ok)} .lk.down{border-left:4px solid var(--bad)} .lk.unk{border-left:4px solid var(--bd2)} .lk .t{display:flex;align-items:center;justify-content:space-between;gap:8px} .lk .t b{font-size:15px} .lk .m{font:12px var(--mono);color:var(--mu);display:flex;flex-wrap:wrap;gap:2px 12px} .spark{width:100%;height:auto;display:block} .spark .a{fill:var(--ac-soft)} .spark .l{fill:none;stroke:var(--ac);stroke-width:1.6;stroke-linejoin:round} .spark .l2{fill:none;stroke:var(--ok);stroke-width:1.4;stroke-linejoin:round;opacity:.85} .spark .g{stroke:var(--bd);stroke-width:1} .spark circle{fill:var(--ac)} .leg{display:flex;gap:12px;font-size:11.5px;color:var(--mu)} .leg i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:4px;vertical-align:middle} /* BGP */ .nbr{border:1px solid var(--bd);border-radius:8px;background:var(--sf);display:flex;flex-direction:column;min-width:0} .nbr>.nh{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--bd)} .nbr>.nh b{font:700 15px var(--mono)} .nbr .nbd{padding:14px;display:flex;flex-direction:column;gap:14px} .dir{border:1px solid var(--bd);border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--sf2)} .dir h3{display:flex;align-items:center;gap:8px} .dir.in h3 .tag{background:var(--ok-soft);color:var(--ok)} .dir.out h3 .tag{background:var(--wn-soft);color:var(--wn)} /* banner, toast, modal */ .banner{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:8px;border:1px solid var(--wn);background:var(--wn-soft);color:var(--ink)} .banner.bad{border-color:var(--bad);background:var(--bad-soft)} .banner.ok{border-color:var(--ok);background:var(--ok-soft)} .savebar{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--sf);border-top:1px solid var(--bd2);box-shadow:0 -6px 20px rgba(0,0,0,.12);padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between} .toasts{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(78px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;z-index:50;max-width:min(420px,calc(100vw - 32px))} .toast{background:var(--hd);color:var(--hd-ink);padding:10px 14px;border-radius:8px;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.25);border-left:4px solid var(--ac);overflow-wrap:anywhere} .toast.bad{border-left-color:var(--bad)} .toast.ok{border-left-color:var(--ok)} .toast.warn{border-left-color:var(--warn)} .modal{position:fixed;inset:0;background:rgba(5,5,8,.64);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) 16px;overflow-y:auto} .modal>div{background:var(--sf);border:1px solid var(--bd2);border-radius:10px;padding:18px;width:min(640px,100%);display:flex;flex-direction:column;gap:12px;margin-top:6vh} .modal pre{margin:0;max-height:48vh} pre.out{background:var(--hd);color:#cfe3ee;font:12.5px/1.55 var(--mono);padding:12px;border-radius:6px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;min-height:220px;max-height:55vh} pre.out .u{color:#7fd6f3} pre.out .e{color:#ff9d9d} /* login */ .login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px max(16px,env(safe-area-inset-left,0px))} .login .card{width:min(400px,100%);display:flex;flex-direction:column;gap:14px;padding:24px} .login .brand{flex-direction:column;align-items:flex-start;gap:10px} .login .xb-logo{color:var(--ink)} .chips{display:flex;flex-wrap:wrap;gap:6px} .ichip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bd2);border-radius:99px;padding:3px 10px 3px 8px;font-size:12.5px;background:var(--sf);cursor:pointer;max-width:100%} .ichip small{color:var(--mu);font-size:11px;overflow-wrap:anywhere} .ichip:has(input:checked){background:var(--ac-soft);border-color:var(--ac);color:var(--ac)} .ichip.off{opacity:.45;cursor:not-allowed} .ichip.miss{border-color:var(--wn);background:var(--wn-soft);color:var(--wn)} .ichip input{min-width:0;width:auto;margin:0} .chip{border:1px solid var(--bd2);background:var(--sf);color:var(--ink);font:12.5px var(--sans);padding:4px 10px;border-radius:99px;cursor:pointer} .chip:hover{background:var(--ac-soft);border-color:var(--ac)} .ev{display:flex;gap:10px;font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--bd)} .ev:last-child{border-bottom:0} .ev time{font-family:var(--mono);color:var(--mu);flex:none} .mod{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--bd)} .mod:last-child{border-bottom:0} .mod b{min-width:68px;font:600 12.5px var(--mono)} .mod span{font-size:12.5px;color:var(--mu);overflow-wrap:anywhere;min-width:0} .demo-note{font-size:12px;color:var(--wn);background:var(--wn-soft);padding:2px 8px;border-radius:99px} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* BGP: bagian lanjutan per neighbor + status sesi */ details.adv{border:1px solid var(--bd);border-radius:6px;background:var(--sf)} details.adv>summary{cursor:pointer;padding:9px 12px;font:600 13px var(--sans);color:var(--ink);list-style:none;display:flex;align-items:center;gap:8px} details.adv>summary::-webkit-details-marker{display:none} details.adv>summary::before{content:"▸";color:var(--mu);transition:transform .12s} details.adv[open]>summary::before{transform:rotate(90deg)} details.adv>summary:focus-visible{outline:2px solid var(--ac);outline-offset:-2px;border-radius:6px} details.adv .advb{padding:4px 12px 12px;display:flex;flex-direction:column;gap:12px} .live{display:inline-flex} /* BGP: penampil rute, pratinjau dampak, riwayat */ .modal.wide>div{width:min(1080px,100%)} .rv-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between} .rv-search{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1 1 320px;min-width:0} .rv-search input[type=text]{flex:1 1 220px;min-width:0} .rv-wrap{max-height:52vh;overflow:auto;border:1px solid var(--bd);border-radius:6px} .rv-wrap table{border:0} .rv-wrap thead th{position:sticky;top:0;background:var(--sf2);z-index:1} .rv td.p{font:600 12.5px var(--mono);white-space:nowrap} .rv td.path{font:12.5px var(--mono);min-width:120px;overflow-wrap:anywhere} .rv td.path b{color:var(--ink)} .rv td.why{font-size:12.5px;min-width:220px} .tags{display:flex;flex-wrap:wrap;gap:4px} .tag{font:11.5px var(--mono);background:var(--sf2);color:var(--mu);border:1px solid var(--bd);padding:1px 6px;border-radius:4px;white-space:nowrap} .tag.k{background:var(--ac-soft);color:var(--ac);border-color:transparent} .star{color:var(--ok);font-weight:700} .pv-ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px;font-size:13px} .pv-why{font-size:12.5px;color:var(--mu);display:flex;flex-direction:column;gap:2px} .evrow td{vertical-align:top} .sevdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--mu)} .sevdot.crit{background:var(--bad)} .sevdot.warn{background:var(--wn)} .sevdot.ok{background:var(--ok)} .chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;border:1px solid var(--bd2);border-radius:99px;padding:3px 10px;background:var(--sf);cursor:pointer} .chk:has(input:checked){background:var(--ac-soft);border-color:var(--ac);color:var(--ac)} .chk input{margin:0;width:auto;min-width:0} /* BGP lanjutan: daftar neighbor ringkas, bilah lompat, grafik tren, Flowspec */ .card{scroll-margin-top:64px} .jump{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center} .nl-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .nl-bar input[type=search]{flex:1 1 220px;min-width:0;width:auto} .nl-bar select{width:auto;max-width:100%} .nbr .nt{display:inline-flex;align-items:center;gap:8px;border:0;background:none;color:var(--ink);cursor:pointer;padding:2px 4px;margin:-2px -4px;border-radius:6px;min-width:0} .nbr .nt:hover{background:var(--sf2)} .nbr .nt b{overflow-wrap:anywhere;text-align:left} .nbr .chev{font-style:normal;color:var(--mu);display:inline-block;transition:transform .12s;font-size:12px} .nbr.open .chev{transform:rotate(90deg)} .nbr.closed>.nh{border-bottom:0} .tag.w{background:var(--wn-soft);color:var(--wn);border-color:transparent} .tag.b{background:var(--bad-soft);color:var(--bad);border-color:transparent} .tc{display:flex;flex-direction:column;gap:4px;min-width:0} .tc-h{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between} .tc-b{position:relative;min-width:0} .tc-svg{width:100%;height:auto;display:block;touch-action:pan-y;border-radius:6px} .tc-svg:focus-visible{outline:2px solid var(--ac);outline-offset:2px} .tc-svg .g{stroke:var(--bd);stroke-width:1} .tc-svg .ax{fill:var(--mu);font:11px var(--sans)} .tc-svg .ln{fill:none;stroke:var(--ac);stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .tc-svg .dot{fill:var(--ac);stroke:var(--sf);stroke-width:2} .tc-svg .mk{fill:var(--ac);stroke:var(--sf);stroke-width:2} .tc-svg .cx{stroke:var(--mu);stroke-width:1;stroke-dasharray:3 3} .tc-svg .dn{fill:var(--bad-soft)} .tc-svg .lim{stroke:var(--wn);stroke-width:1.5;stroke-dasharray:6 4} .tc-svg .lim-t{fill:var(--wn)} .tc-tip{position:absolute;transform:translateX(-50%);pointer-events:none;background:var(--sf);color:var(--ink);border:1px solid var(--bd2);border-radius:6px;padding:6px 9px;font-size:12px;box-shadow:0 4px 14px rgba(0,0,0,.18);white-space:nowrap;z-index:2;display:flex;flex-direction:column;gap:2px} .tc-tip[hidden]{display:none} .tc-dn{color:var(--bad)} .flowform{border:1px solid var(--bd);border-radius:6px;padding:12px;background:var(--sf2)} td.wrap{min-width:200px} /* SD-WAN: kartu link dengan kualitas (SLA) dan pemanfaatan kapasitas */ .lk.warn{border-left:4px solid var(--wn)} .tag.alt{background:var(--wn-soft);color:var(--wn);border-color:transparent} .sdl .sdm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .sdl .mv{background:var(--sf2);border-radius:6px;padding:6px 8px;min-width:0;display:flex;flex-direction:column;gap:1px} .sdl .mv small{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mu)} .sdl .mv b{font:700 16px var(--sans);font-variant-numeric:tabular-nums} .sdl .mv span{font-size:11px;color:var(--mu)} .sdl .mv.warn{background:var(--wn-soft)} .sdl .mv.warn b{color:var(--wn)} .sdl .utl{display:flex;flex-direction:column;gap:6px} .sdl .ut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 10px;font-size:12px;align-items:center} .sdl .ut .bar{grid-column:1 / -1;margin-top:0;order:3} .sdl .ut span:last-child{text-align:right} .sdl .btns,.sdl>.row{margin-top:2px} .sdm1{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:12px;color:var(--mu)} .sdm1 .sdv b{color:var(--ink);font-variant-numeric:tabular-nums} .sdm1 .sdv.warn b{color:var(--wn)} .evrow td{vertical-align:top} @media (max-width:420px){.sdl .sdm{grid-template-columns:repeat(2,minmax(0,1fr))}} .grid.sdk{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))} .grid.sdk .kpi b{font-size:20px} /* SD-WAN bagian 2-3: sub-halaman, probe per link, kuota & QoS, overlay VPN, simulasi, laporan SLA */ .seg.sd-tabs{display:flex;flex-wrap:wrap;gap:6px;border:0;border-radius:0;overflow:visible;max-width:100%} .seg.sd-tabs button{border:1px solid var(--bd2);border-radius:99px;padding:6px 14px} .seg.sd-tabs button:last-child{border-right:1px solid var(--bd2)} .seg.sd-tabs button[aria-pressed="true"]{border-color:var(--ac)} .lkb{border:1px solid var(--bd);border-radius:8px;background:var(--sf);display:flex;flex-direction:column;min-width:0} .lkb>.nh{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--bd)} .lkb>.nh b{font:700 14px var(--mono)} .lkb .nbd{padding:14px;display:flex;flex-direction:column;gap:12px} .ptr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;align-items:end;padding:10px;border:1px dashed var(--bd2);border-radius:6px;background:var(--sf2)} .tgl{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center} .tg{font:11.5px var(--mono);padding:1px 7px;border-radius:99px;border:1px solid var(--bd);background:var(--sf2);color:var(--mu)} .tg.ok{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)} .tg.bad{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)} .qt{display:flex;flex-direction:column;gap:2px} .qt .bar{margin-top:4px} .ovt{border:1px solid var(--bd);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:12px;background:var(--sf2);min-width:0} .hints{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px} .dstrip-row{display:grid;grid-template-columns:minmax(90px,160px) minmax(0,1fr);gap:8px;align-items:center} .dstrip-n{overflow-wrap:anywhere} .dstrip{display:flex;gap:2px;min-width:0} .dstrip i{flex:1 1 0;min-width:3px;height:22px;border-radius:2px;background:var(--bd2)} .dstrip i.ok{background:var(--ok)} .dstrip i.wn{background:var(--wn)} .dstrip i.bad{background:var(--bad)} .sw-dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px;background:var(--bd2)} .sw-dot.ok{background:var(--ok)} .sw-dot.wn{background:var(--wn)} .sw-dot.bad{background:var(--bad)} tr.chg td{background:var(--wn-soft)} #sim-res h4{margin:6px 0 0} @media (max-width:520px){.dstrip-row{grid-template-columns:minmax(0,1fr)}} /* Firewall: lencana, hit, pemeriksaan aturan, penguji paket, log */ .tag{display:inline-block;font:600 11px var(--sans);padding:1px 7px;border-radius:99px;background:var(--sf2);color:var(--mu);border:1px solid var(--bd);white-space:nowrap} .tag.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent} .tag.warn{background:var(--wn-soft);color:var(--wn);border-color:transparent} .tag.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent} .fwbadges,.fwchips{display:flex;flex-wrap:wrap;gap:4px} .fwbadges:empty{display:none} .fwcmt{display:block;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fwchips .tag{max-width:200px;overflow:hidden;text-overflow:ellipsis} .fwdays{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end} .fwday{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:44px} .fwday-bar{height:60px;display:flex;align-items:flex-end} .fwday-bar i{display:block;width:22px;background:var(--bad);border-radius:3px 3px 0 0;opacity:.85} .fwday small{font-size:10px;color:var(--mu)} .fwday b{font-size:12px} .tag.fwuser{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;color:var(--ac,var(--fg));border:1px solid var(--bd)} .fwgeo .tag{max-width:none;display:inline-flex;align-items:center;gap:4px} .fwgeo .tag .x{all:unset;cursor:pointer;margin-left:2px;padding:0 4px;border-radius:3px;font-size:13px;line-height:1;color:var(--mu)} .fwgeo .tag .x:hover,.fwgeo .tag .x:focus-visible{background:var(--bad-soft);color:var(--bad)} .fwpol td input{min-width:80px} .fwpol td select{min-width:92px} .fwpol td .fwpick{min-width:0} .fwname .fwhit{display:inline} .fwname .fwhit small{display:inline;margin-left:6px} .fwhitrow{font-size:12.5px;font-family:var(--mono)} .fwpick{font-size:12px;color:var(--mu);padding:3px 6px;font-family:var(--sans)} td .fwpick{min-width:0} .fwhit small{display:block;color:var(--mu);font:11px var(--sans)} .fwhit small.bad-t{color:var(--bad)} .fwflist{display:flex;flex-direction:column} .fwf{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--bd);min-width:0} .fwf:last-child{border-bottom:0} .fwf .fm{min-width:0;overflow-wrap:anywhere} .fwverdict{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 14px;border-radius:8px;border:1px solid var(--bd2);background:var(--sf2)} .fwverdict.ok{border-color:var(--ok);background:var(--ok-soft)} .fwverdict.bad{border-color:var(--bad);background:var(--bad-soft)} .fwverdict.warn{border-color:var(--wn);background:var(--wn-soft)} .fwverdict b{overflow-wrap:anywhere;min-width:0} .fwsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .fwsteps li{display:flex;gap:10px;align-items:flex-start;padding:7px 10px;border:1px solid var(--bd);border-radius:6px;background:var(--sf);min-width:0} .fwsteps li.hit{border-color:var(--ok);background:var(--ok-soft)} .fwsteps li.skip{color:var(--mu)} .fwsteps .fm{min-width:0;overflow-wrap:anywhere} .fwnotes{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:13px} .fwtop{display:flex;flex-direction:column;gap:2px;margin-top:6px;min-width:0} .fwtop button{display:flex;justify-content:space-between;gap:8px;border:0;background:none;padding:3px 6px;border-radius:5px;cursor:pointer;color:var(--ink);font:12.5px var(--mono);text-align:left;min-width:0;width:100%} .fwtop button span{overflow-wrap:anywhere;min-width:0} .fwtop button b{display:inline;font:600 12px var(--mono);margin:0;color:var(--mu);flex:none} .fwtop button:hover{background:var(--ac-soft)} /* routing mesin pada penguji paket + log */ .fwroute{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--bd2);border-radius:8px;background:var(--sf2);min-width:0} .fwroute-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .fwpath{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;min-width:0} .fwpath .tag{overflow-wrap:anywhere} .fwroute .banner{margin:0} .fwpairs{display:flex;flex-direction:column;gap:6px;min-width:0} .fwpair{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid var(--bd2);border-radius:8px;background:var(--sf2);min-width:0} .fwpair-h{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;min-width:0} .fwpair-h button{display:flex;gap:10px;align-items:center;border:0;background:none;padding:2px 4px;border-radius:5px;cursor:pointer;color:var(--ink);font:13px var(--mono);text-align:left;min-width:0} .fwpair-h button span{overflow-wrap:anywhere;min-width:0} .fwdiag{overflow-wrap:anywhere} .fwmoved{display:flex;flex-direction:column;gap:2px;align-items:flex-start;margin-top:3px;min-width:0} .fwmoved .muted{overflow-wrap:anywhere} /* firewall lanjutan: daftar teratas di dalam kartu KPI (koneksi aktif, laporan bulanan) */ .kpi .fwtop{margin-top:4px} .kpi .fwtop button,.fwtopi{align-items:center} .grid.sdk .kpi .fwtop button b,.kpi .fwtop button b,.grid.sdk .kpi .fwtopi b,.kpi .fwtopi b{display:inline;font:600 12px var(--mono);margin:0;color:var(--mu);flex:none} .fwtopi{display:flex;justify-content:space-between;gap:8px;padding:3px 6px;font:12.5px var(--mono);color:var(--ink);min-width:0} .fwtopi span{overflow-wrap:anywhere;min-width:0;font:12.5px var(--mono);color:var(--ink)} .kpi .fwtop button span{font:12.5px var(--mono);color:var(--ink)} .kpi .fwtop button{font-size:12.5px} /* firewall: filter aplikasi / URL */ .fwappf>.nh{align-items:flex-start} .fwappf>.nh>.row{min-width:0} .fwapphit{display:inline-flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font:12.5px var(--mono);min-width:0} .fwapphit small{display:inline;color:var(--mu);font:11px var(--sans)} .fwapphit .tag{max-width:180px;overflow:hidden;text-overflow:ellipsis} .tag.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent} .tag.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent} .tag.warn{background:var(--wn-soft);color:var(--wn);border-color:transparent} .appcats{display:flex;flex-direction:column;gap:12px;max-height:420px;overflow:auto;border:1px solid var(--bd);border-radius:6px;padding:10px;background:var(--bg)} .appcat{display:flex;flex-direction:column;gap:6px;min-width:0} .appcat[hidden],.appchip[hidden]{display:none} .appcat-h{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center} .appcat-h b{font:700 13px var(--sans)} .appchips{display:flex;flex-wrap:wrap;gap:6px} .appchip{display:inline-flex;align-items:center;gap:6px;font-size:13px;border:1px solid var(--bd2);border-radius:99px;padding:3px 10px;background:var(--sf);cursor:pointer;min-width:0} .appchip:has(input:checked){background:var(--ac-soft);border-color:var(--ac);color:var(--ac)} .appchip input{margin:0;width:auto;min-width:0} .fwappf input[type=search]{flex:1 1 220px;min-width:0} @media (max-width:480px){.appcats{max-height:360px}.appchip{font-size:12.5px}} /* top talkers + syslog (paket 6) */ .tkdays{display:flex;align-items:flex-end;gap:8px;padding-top:6px} .tkdays .d{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:3px;height:128px} .tkdays .d b{font:600 11px var(--mono);text-align:center;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tkdays .d i{display:block;background:var(--ac-fill);border-radius:4px 4px 0 0} .tkdays .d small{font-size:11px;color:var(--mu);text-align:center} .tkshare{min-width:96px} .tkshare .bar{margin-top:3px} pre.fwsl-pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--sf2);border:1px solid var(--bd);border-radius:6px;padding:8px 10px;margin:0;color:var(--ink)} /* ===== mode perangkat (paket 8): router / transparan ===== */ .nm-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px} .nm-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px 14px;border:1px solid var(--bd2);border-radius:10px;background:var(--sf);color:var(--ink);font:inherit;cursor:pointer} .nm-tile:hover:not(:disabled){border-color:var(--ac)} .nm-tile.on{border-color:var(--ac);background:var(--ac-soft)} .nm-tile:disabled{cursor:default;opacity:.85} .nm-tile:focus-visible{outline:2px solid var(--ac);outline-offset:2px} .card.nm-off>:not(.ch):not(.nm-note){opacity:.55} .card.nm-off .nm-note{opacity:1} .mode-badge,.brand .mode-badge{display:inline-flex;align-items:center;font:600 11px var(--sans);letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:99px;border:1px solid var(--hd-mu);color:var(--hd-ink);background:transparent;margin-left:0} .mode-badge.transparent,.brand .mode-badge.transparent{border-color:var(--wn);color:var(--wn);background:var(--wn-soft)} /* ---- klien DHCP & relay DHCP (paket 9) ---- */ .dn-item{display:flex;flex-direction:column;gap:12px;border:1px solid var(--bd2);border-radius:10px;padding:12px 14px;background:var(--sf);min-width:0} .dn-item.off{opacity:.7} .dn-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px} .dn-head .grow{flex:1 1 200px;min-width:0} .dn-policy{display:flex;flex-direction:column;align-items:flex-start;gap:6px} .dn-policy .seg{flex-wrap:wrap} .dn-live{display:flex;flex-direction:column;gap:6px;border-top:1px dashed var(--bd2);padding-top:10px;font-size:12.5px;min-width:0;overflow-wrap:anywhere} .dn-srv{display:flex;flex-wrap:wrap;gap:6px} .dn-level{display:inline-flex;gap:6px;align-items:center} /* ===== WAF + reverse proxy (paket 10) ===== */ .wf-chart{width:100%;height:auto;max-height:200px;display:block} .wf-chart .wf-bar:hover{opacity:.82} .wf-chart text{font-family:var(--sans)} .wf-live{border-top:1px dashed var(--bd);padding-top:10px;min-width:0} .wf-item .grid{align-items:start} table.wf-ev td{vertical-align:top} .wf-item .chips{max-width:100%} @media (max-width:560px){.wf-item{padding:10px 10px}} /* ---- Auto SSL (Modul A) ---- */ .ac-box{display:flex;flex-direction:column;gap:10px;border-top:1px dashed var(--bd);padding-top:10px;min-width:0} .ac-live{border-top:0;padding-top:0} .ac-live .banner{margin:0} .ac-ev{min-width:0;max-width:100%;overflow-x:auto} .ac-pre{border:1px solid var(--bd);border-radius:8px;padding:10px 12px;background:var(--sf2);min-width:0} #ac-subtabs{align-self:flex-start;max-width:100%;overflow-x:auto} #ac-summary td.act{white-space:nowrap} #ac-summary tr.off{opacity:.65} /* ===== Xbeon Advisor (Modul B) ===== */ .ad-lbl{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center;padding:6px 10px;border-radius:6px;border:1px solid var(--wn);background:var(--wn-soft);color:var(--wn);font-size:12.5px;width:fit-content;max-width:100%} .ad-lbl b{font-weight:700} .ad-codebox{border:1px solid var(--bd);border-radius:8px;background:var(--sf2);padding:8px 10px;display:flex;flex-direction:column;gap:6px;min-width:0} .ad-code{margin:0;overflow-x:auto;max-height:340px;font:12.5px/1.5 var(--mono);white-space:pre;color:var(--ink)} .ad-code code{font:inherit} .ad-vp{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px dashed var(--bd2);border-radius:8px;background:var(--sf2)} .ad-life{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px} .ad-life li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--bd);border-radius:8px;background:var(--sf);opacity:.7} .ad-life li small{color:var(--mu);font-size:12px} .ad-life li.past{opacity:1;border-color:var(--ok)} .ad-life li.cur{opacity:1;border-color:var(--ac);background:var(--ac-soft);box-shadow:0 0 0 1px var(--ac) inset} .ad-test{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--bd);border-radius:8px;background:var(--sf2)} .ad-err{padding:8px 10px;border-radius:6px;border:1px solid var(--bad);background:var(--bad-soft);color:var(--bad);font-size:13px;overflow-wrap:anywhere} .ad-llmres{padding:8px 10px;border:1px solid var(--bd);border-radius:8px;background:var(--sf2);display:flex;flex-wrap:wrap;gap:6px;align-items:center} .ad-form textarea{width:100%;resize:vertical} .ad-form .f{min-width:0} @media (max-width:640px){.ad-life{grid-template-columns:1fr}} .ad-spec .kpi b{font-size:14px;font-weight:600} /* ===== Gerbang Surel (Modul D, Tahap 1) ===== */ .ml-chart{width:100%;height:auto;display:block} .ml-bar{stroke:var(--sf);stroke-width:1} .ml-bar.delivered{fill:var(--ok)} .ml-bar.tagged{fill:var(--wn)} .ml-bar.quarantined{fill:var(--ac)} .ml-bar.deferred{fill:var(--mu)} .ml-bar.failed{fill:var(--bad)} .ml-bar.sent{fill:var(--ok)} .ml-bar.bounced{fill:var(--bad)} .ml-bar.expired{fill:var(--wn)} .ml-hot{color:var(--wn);font-weight:600} .ml-pre{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .ml-pre li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap} .ml-prog{height:8px;border-radius:4px;background:var(--sf2);border:1px solid var(--bd);overflow:hidden} .ml-prog>i{display:block;height:100%;background:var(--ac-fill)} .ml-prog.hot>i{background:var(--wn)} tr.ml-now td{background:var(--sf2);font-weight:600} .ml-axis{stroke:var(--bd2);stroke-width:1} .ml-lbl{fill:var(--mu);font:10.5px var(--sans)} .ml-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .ml-step{border:1px solid var(--bd);border-radius:8px;padding:10px 12px;background:var(--sf)} .ml-step .chk{padding:3px 6px} pre.ml-content{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;background:var(--sf2);border:1px solid var(--bd);border-radius:6px;padding:10px 12px;margin:0;max-height:320px;overflow:auto;font:12.5px/1.55 var(--mono);color:var(--ink)} /* Gerbang Surel Tahap 3: DNS Helper, Reputasi, Penelusuran pesan */ .ml-hint{color:var(--mu)} .ml-dots{display:inline-flex;gap:3px;align-items:center;flex-wrap:wrap} .ml-dot{width:9px;height:9px;border-radius:50%;background:var(--bd2);display:inline-block} .ml-dot.ok{background:var(--ok)} .ml-dot.listed{background:var(--bad)} .ml-dot.refused{background:var(--wn)} .ml-dot.unknown{background:var(--mu)} .ml-tl{list-style:none;margin:0 0 0 7px;padding:0 0 0 14px;border-left:2px solid var(--bd2);display:flex;flex-direction:column;gap:14px} .ml-tli{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;padding-left:8px} .ml-tli::before{content:"";position:absolute;left:-21px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--sf);border:3px solid var(--mu)} .ml-tli.ok::before{border-color:var(--ok)} .ml-tli.warn::before{border-color:var(--wn)} .ml-tli.bad::before{border-color:var(--bad)} .ml-tlt{display:flex;gap:8px;align-items:center;flex-wrap:wrap} table.ml-rec td .row{justify-content:flex-start} @media (max-width:520px){.ml-tl{margin-left:4px;padding-left:12px}.ml-tli{padding-left:6px}.ml-tli::before{left:-19px}} /* ===== Jaringan Lanjutan (Modul G, G1): kartu bond, diff, isu pratinjau, wizard ===== */ .ng-bond{border:1px solid var(--bd);border-radius:8px;background:var(--sf2);padding:12px;gap:10px;min-width:0} .ng-bond>.tw{max-width:100%} .ng-issue{padding:6px 8px;border:1px solid var(--bd);border-radius:6px;background:var(--sf);min-width:0} .ng-issue[data-kind="error"]{border-color:var(--bad);background:var(--bad-soft)} .ng-issue[data-kind="warn"]{border-color:var(--wn);background:var(--wn-soft)} .ng-issue small{overflow-wrap:anywhere} pre.ng-diff{margin:0;background:var(--sf2);color:var(--ink);border:1px solid var(--bd);border-radius:6px;padding:8px 0;font:12px/1.5 var(--mono);overflow-x:auto;max-width:100%;max-height:50vh;overflow-y:auto;white-space:pre;tab-size:2} pre.ng-diff .dl{display:block;padding:0 12px;min-width:max-content} pre.ng-diff .dl.add{background:var(--ok-soft);color:var(--ok)} pre.ng-diff .dl.del{background:var(--bad-soft);color:var(--bad)} pre.ng-diff .dl.hd{color:var(--mu)} #ng-pv,#ng-wiz,#ng-fo,#ng-tpl{min-width:0} #ng-pv-changes td,#ng-pv-changes th{vertical-align:top} #ng-tpl-text{width:100%;max-width:100%;resize:vertical} #ng-w-members{max-width:100%} .ng-bond .row,#ng-pv .row{min-width:0} @media (max-width:520px){.ng-bond{padding:10px}pre.ng-diff{font-size:11.5px}} /* ===== IPsec Site-to-Site (Modul G, G2): wizard 5 langkah, kartu pilihan, KV, diagnosis ===== */ .ip-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;counter-reset:ips} .ip-steps li{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mu);min-width:0} .ip-steps li span{width:22px;height:22px;border-radius:50%;border:1px solid var(--bd2);display:inline-flex;align-items:center;justify-content:center;font:600 12px var(--sans);flex:none} .ip-steps li[aria-current="step"]{color:var(--ink);font-weight:600} .ip-steps li[aria-current="step"] span{background:var(--ac-fill);border-color:var(--ac-fill);color:var(--ac-ink)} .ip-steps li.done span{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)} .ip-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;min-width:0} .ip-opt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:10px 12px;border:1px solid var(--bd);border-radius:8px;background:var(--sf);color:var(--ink);font:inherit;cursor:pointer;min-width:0;overflow-wrap:anywhere} .ip-opt:hover{border-color:var(--bd2)} .ip-opt[aria-pressed="true"]{border-color:var(--ac);background:var(--ac-soft);box-shadow:0 0 0 1px var(--ac)} .ip-opt:focus-visible{outline:2px solid var(--ac);outline-offset:2px} .ip-opt .muted{color:var(--mu)} tr.sel>td,tr.sel>th{background:var(--ac-soft)} table.ip-kv{width:100%;border-collapse:collapse} table.ip-kv th,table.ip-kv td{padding:4px 6px;border-bottom:1px solid var(--bd)} .ip-diag-item{border:1px solid var(--bd);border-radius:8px;background:var(--sf2);padding:10px 12px;min-width:0;overflow-wrap:anywhere} #ip-wiz,#ip-wiz-body,#ip-main,#ip-detail,#ip-certs{min-width:0} #ip-psk-shown,#ip-tpl,#ip-profile{max-width:100%} #ip-import-text,#ip-cert-pem{width:100%;max-width:100%;resize:vertical} @media (max-width:520px){.ip-steps li{font-size:12px}.ip-opts{grid-template-columns:1fr}} /* ===== Jaringan Lanjutan G3: Pemantauan dan Alat (hanya token; tanpa warna literal) ===== */ #nm-live,#nm-detail,#nm-detail-body,#nm-tool-body,#nm-ev-body,#nm-lldp,#nm-alerts,#nm-res{min-width:0} .nm-chart{min-width:0} .nm-leg{display:inline-flex;flex-wrap:wrap;gap:2px 12px} .nm-lg{display:inline-flex;align-items:center;white-space:nowrap} .nm-sw{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle;background:var(--mu)} .nm-sw.nm-rx{background:var(--ac-fill)}.nm-sw.nm-tx{background:var(--ok)}.nm-sw.nm-err{background:var(--bad)}.nm-sw.nm-drop{background:var(--wn)}.nm-sw.nm-crc{background:var(--mu)} .tc-svg .nmln{fill:none;stroke:var(--mu);stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .tc-svg .nmln.nm-rx{stroke:var(--ac)}.tc-svg .nmln.nm-tx{stroke:var(--ok)}.tc-svg .nmln.nm-err{stroke:var(--bad)}.tc-svg .nmln.nm-drop{stroke:var(--wn);stroke-dasharray:6 3}.tc-svg .nmln.nm-crc{stroke:var(--mu);stroke-dasharray:2 3} .tc-svg .nmdot{stroke:var(--sf);stroke-width:2;fill:var(--mu)} .tc-svg .nmdot.nm-rx{fill:var(--ac)}.tc-svg .nmdot.nm-tx{fill:var(--ok)}.tc-svg .nmdot.nm-err{fill:var(--bad)}.tc-svg .nmdot.nm-drop{fill:var(--wn)} .nm-chart .tc-tip{white-space:nowrap} .nm-chart .tc-tip .nm-sw{vertical-align:middle} .nm-tbl{border:1px solid var(--bd);border-radius:6px;padding:6px 10px;background:var(--sf2);min-width:0} .nm-tbl>summary{cursor:pointer;font-size:12.5px;color:var(--mu);padding:2px 0} .nm-tbl[open]>summary{margin-bottom:6px} .nm-tbl .tw{border:0;max-height:320px;overflow:auto} .nm-raw{margin:0;max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--sf);border:1px solid var(--bd);border-radius:6px;padding:8px 10px} .nm-ivs{display:flex;align-items:flex-end;gap:3px;height:72px;padding:6px;border:1px solid var(--bd);border-radius:6px;background:var(--sf2);max-width:100%;overflow:hidden} .nm-ivs i{flex:1 1 0;min-width:3px;background:var(--ac-fill);border-radius:2px 2px 0 0} .nm-diag .pill{flex:none} .nm-al{min-width:0} .nm-al .f input{width:100%;min-width:0} .nm-nei{border:1px solid var(--bd);border-radius:6px;padding:6px 10px;background:var(--sf2)} #nm-ifaces td,#nm-ifaces th{vertical-align:top} #nm-ifaces .bar{margin-top:4px} @media (max-width:520px){.nm-ivs{height:56px}.nm-nei{padding:6px 8px}} #nm-ch-ct{max-width:640px} .nm-flat{padding:0 2px} /* ===== G5: peta topologi (SVG) — warna status lewat satu variabel --nl-c agar simpul, sisi, dan titik legenda memakai token yang sama di terang/gelap/kaca ===== */ .nl-s-ok{--nl-c:var(--ok);--nl-bg:var(--ok-soft)} .nl-s-warn,.nl-s-pending{--nl-c:var(--wn);--nl-bg:var(--wn-soft)} .nl-s-crit,.nl-s-down,.nl-s-missing{--nl-c:var(--bad);--nl-bg:var(--bad-soft)} .nl-s-unknown,.nl-s-off{--nl-c:var(--mu);--nl-bg:var(--sf2)} .nl-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--nl-c,var(--mu));vertical-align:-1px} .nl-legend{align-items:center} #nl-topo-svg,#nl-topo-card,#nl-topo-svg-in{min-width:0;max-width:100%} .nl-topo-wrap{overflow:auto;max-width:100%;max-height:680px;border:1px solid var(--bd);border-radius:10px;background:var(--sf2);padding:4px;-webkit-overflow-scrolling:touch} .nl-topo-wrap:focus-visible{outline:2px solid var(--ac);outline-offset:2px} .nl-topo{display:block;width:100%;height:auto;min-width:880px;font-family:var(--sans)} /* mengecil mengikuti lebar kartu; di bawah 880px menggulir di dalam .nl-topo-wrap */ .nl-edge{fill:none;stroke:var(--nl-c,var(--bd2));stroke-width:1.6;opacity:.85} .nl-edge.nl-s-unknown{stroke:var(--bd2);opacity:.9} .nl-e-zone{stroke-width:1;opacity:.55} .nl-e-lldp{stroke-dasharray:2 4} .nl-e-peer,.nl-e-underlay{stroke-dasharray:6 4} .nl-e-over-ipsec{stroke-dasharray:1 5;stroke-linecap:round;stroke-width:2.4} .nl-e-mirror{stroke:var(--ac);stroke-dasharray:8 3 2 3;stroke-width:2} .nl-node{cursor:pointer;outline:none} .nl-box{fill:var(--nl-bg,var(--sf));stroke:var(--nl-c,var(--bd2));stroke-width:1.5} .nl-node:hover .nl-box{stroke-width:2.4} .nl-node:focus-visible .nl-box,.nl-node.sel .nl-box{stroke:var(--ac);stroke-width:3;filter:drop-shadow(0 0 3px var(--ac))} .nl-node.nl-s-off .nl-box,.nl-node.nl-s-pending .nl-box,.nl-node.nl-s-missing .nl-box{stroke-dasharray:5 3} .nl-node.nl-s-off{opacity:.72} .nl-kind{font-size:9px;font-weight:700;letter-spacing:.06em;fill:var(--mu)} .nl-name{font-size:12px;font-weight:700;fill:var(--ink)} .nl-det{font-size:10px;fill:var(--mu)} .nl-layer{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;fill:var(--mu)} @media (prefers-reduced-motion:no-preference){.nl-box,.nl-edge{transition:stroke-width .15s ease,opacity .15s ease}} @media (max-width:520px){.nl-topo-wrap{max-height:520px}} /* ===== Modul E: panel Xbeon Advisor (token yang sama dengan seluruh dasbor; terang/gelap; 390 px tanpa gulir horizontal) ===== */ .xa-strip{align-items:center;gap:8px 10px} .xa-conv-row{align-items:flex-end} .xa-log{display:flex;flex-direction:column;gap:10px;min-height:220px;max-height:min(62vh,640px);overflow-y:auto;overflow-x:hidden;padding:12px;border:1px solid var(--bd);border-radius:8px;background:var(--sf2);overscroll-behavior:contain} .xa-empty{margin:auto;max-width:520px;text-align:center;display:flex;flex-direction:column;gap:6px;padding:16px} .xa-m{max-width:100%;min-width:0;padding:9px 12px;border-radius:12px;overflow-wrap:anywhere} .xa-m.u{align-self:flex-end;background:var(--ac-fill);color:var(--ac-ink);border-bottom-right-radius:4px;white-space:pre-wrap;max-width:min(100%,640px)} .xa-m.a{align-self:flex-start;background:var(--sf);border:1px solid var(--bd);border-bottom-left-radius:4px;display:flex;flex-direction:column;gap:8px;width:min(100%,780px)} .xa-m.e{align-self:stretch;background:var(--bad-soft);color:var(--ink);border:1px solid var(--bad)} .xa-m.w{display:flex;flex-direction:row;align-items:center;gap:10px;color:var(--mu);width:auto} .xa-txt{white-space:pre-wrap} .xa-lbl{display:block;color:var(--mu);font-size:11.5px;font-style:italic} .xa-note{display:block} .xa-dots{display:inline-flex;gap:4px} .xa-dots i{width:6px;height:6px;border-radius:50%;background:var(--mu);animation:xa-b 1.1s infinite ease-in-out} .xa-dots i:nth-child(2){animation-delay:.15s} .xa-dots i:nth-child(3){animation-delay:.3s} @keyframes xa-b{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}} .xa-in-row{flex-wrap:nowrap;align-items:flex-end} .xa-in-row .btn{flex:none} #xa-in{min-height:46px;max-height:160px} .xa-prop{border:1px solid var(--bd2);border-left:4px solid var(--wn);border-radius:8px;background:var(--sf);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0} .xa-prop[data-state="executed"]{border-left-color:var(--ok)} .xa-prop[data-state="failed"],.xa-prop[data-state="rolled_back"]{border-left-color:var(--bad)} .xa-prop[data-state="rejected"],.xa-prop[data-state="expired"],.xa-prop[data-state="cancelled"]{border-left-color:var(--bd2)} .xa-prop.xa-focus{box-shadow:0 0 0 2px var(--ac)} .xa-prop[data-manual="1"] .xa-lbl{color:var(--mu)} .xa-ph{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;min-width:0} .xa-meta{overflow-wrap:anywhere} .xa-kv{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:2px 12px;margin:0;font-size:12.5px} .xa-kv dt{color:var(--mu);margin:0} .xa-kv dd{margin:0;overflow-wrap:anywhere} .xa-warn{margin:0;padding-left:18px} pre.xa-json{margin:0;background:var(--sf2);color:var(--ink);border:1px solid var(--bd);border-radius:6px;padding:8px 10px;font:12px/1.5 var(--mono);max-height:300px;overflow:auto;white-space:pre;max-width:100%} pre.xa-diff{max-height:260px} .xa-res{min-width:0} details.xa-res>summary{flex-wrap:wrap} .xa-act{border:1px solid var(--bd);border-radius:8px;background:var(--sf2);padding:12px;display:flex;flex-direction:column;gap:6px;min-width:0} .xa-act .mono{overflow-wrap:anywhere} .xa-tbl td,.xa-tbl th{vertical-align:top} @media (max-width:520px){.xa-log{max-height:56vh;padding:8px}.xa-kv{grid-template-columns:minmax(0,1fr)}.xa-in-row{flex-wrap:wrap}.xa-in-row>div{flex-basis:100%}} /* ===== Threat Intelligence (Modul F, Tahap 2): ct- ===== */ .ct-strip{align-items:center;gap:8px 10px} .ct-adv{display:block;margin-top:4px;color:var(--mu)} .ct-kv{display:grid;grid-template-columns:minmax(150px,max-content) minmax(0,1fr);gap:6px 14px;margin:0} .ct-kv dt{color:var(--mu);font-size:12.5px} .ct-kv dd{margin:0;min-width:0;overflow-wrap:anywhere} .ct-wrap{overflow-wrap:anywhere;word-break:break-all} .ct-val{overflow-wrap:anywhere;word-break:break-all;max-width:340px;min-width:150px} .ct-tbl{min-width:760px} .ct-tbl td,.ct-tbl th{vertical-align:top} .ct-tbl tr.ct-on{background:var(--ac-soft)} .ct-wr{gap:4px;margin-top:4px} .ct-filters{align-items:flex-end} .ct-filters .f{min-width:116px;flex:1 1 116px} .ct-bulk{align-items:center;min-height:0} .ct-bulk:empty{display:none} .ct-pager{align-items:center} .ct-actions{align-items:center} .ct-chk{display:inline-flex;gap:6px;align-items:center;font-size:13px;border:1px solid var(--bd2);border-radius:99px;padding:3px 10px;cursor:pointer} .ct-chart{position:relative} .ct-svg{display:block;width:100%;height:auto;max-height:190px} .ct-ax{stroke:var(--bd2);stroke-width:1} .ct-bar{fill:var(--ac)} .ct-lb{fill:var(--mu);font:11px var(--sans)} .ct-bg{cursor:default;outline:none} .ct-bg:hover .ct-bar,.ct-bg:focus .ct-bar{opacity:.8} .ct-bg:focus-visible .ct-bar{stroke:var(--ink);stroke-width:1} .ct-tip{position:absolute;top:0;transform:translateX(-50%);background:var(--sf);color:var(--ink);border:1px solid var(--bd2);border-radius:6px;padding:3px 8px;font-size:12px;pointer-events:none;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.18)} .ct-tip[hidden]{display:none} .ct-dist{display:flex;flex-direction:column;gap:8px} .ct-drow{display:grid;grid-template-columns:minmax(64px,96px) minmax(0,1fr) auto;gap:8px;align-items:center} .ct-db{display:block;height:8px;background:var(--bd);border-radius:4px;overflow:hidden} .ct-db i{display:block;height:100%;background:var(--ac-fill);border-radius:4px} @media (max-width:520px){.ct-kv{grid-template-columns:minmax(0,1fr);gap:2px}.ct-kv dd{margin-bottom:6px}.ct-val{max-width:220px}} /* Threat Intelligence Tahap 9 (views_cti_share.js): berbagi balik MISP/TAXII. Daftar bidang dan badan permintaan pratinjau; hanya token yang ada, terang dan gelap, tanpa gulir mendatar halaman. */ .ct-sh-list{margin:4px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:3px;font-size:13px} .ct-sh-pre{margin:6px 0 0;padding:8px 10px;max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;background:var(--sf2);border:1px solid var(--bd);border-radius:6px;color:var(--ink)} .ct-sh-pre:focus-visible{outline:2px solid var(--ac);outline-offset:1px} /* Threat Intelligence Tahap 3 (views_cti3.js): grafik sightings/tren, legenda, progres kapasitas. Warna kategori --cs1..--cs5 (fw, ips, waf, surel, dns) dari token, terang dan gelap. */ .ct3-chart{max-width:760px} .ct3-svg{max-height:none;touch-action:pan-y} .ct3-svg:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:4px} .ct3-grid{stroke:var(--bd);stroke-width:1;stroke-dasharray:2 3} .ct3-ln{stroke-width:2;stroke-linejoin:round;stroke-linecap:round;fill:none} .ct3-cross{stroke:var(--bd2);stroke-width:1} .ct3-dot{stroke:var(--sf);stroke-width:2} .ct3-ln.ct3-c-fw,.ct3-ln.ct3-c-a{stroke:var(--cs1)}.ct3-ln.ct3-c-ips,.ct3-ln.ct3-c-b{stroke:var(--cs2)}.ct3-ln.ct3-c-waf{stroke:var(--cs3)}.ct3-ln.ct3-c-mail{stroke:var(--cs4)}.ct3-ln.ct3-c-dns{stroke:var(--cs5)} .ct-bar.ct3-c-fw,.ct-bar.ct3-c-a{fill:var(--cs1)}.ct-bar.ct3-c-ips,.ct-bar.ct3-c-b{fill:var(--cs2)}.ct-bar.ct3-c-waf{fill:var(--cs3)}.ct-bar.ct3-c-mail{fill:var(--cs4)}.ct-bar.ct3-c-dns{fill:var(--cs5)} .ct3-f-fw,.ct3-f-a{fill:var(--cs1)}.ct3-f-ips,.ct3-f-b{fill:var(--cs2)}.ct3-f-waf{fill:var(--cs3)}.ct3-f-mail{fill:var(--cs4)}.ct3-f-dns{fill:var(--cs5)} .ct3-b-fw,.ct3-b-a{background:var(--cs1)}.ct3-b-ips,.ct3-b-b{background:var(--cs2)}.ct3-b-waf{background:var(--cs3)}.ct3-b-mail{background:var(--cs4)}.ct3-b-dns{background:var(--cs5)} .ct3-sw{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none} .ct3-lg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--mu)} .ct3-lg span,.ct3-src{display:inline-flex;align-items:center;gap:6px} .ct3-tip{white-space:normal;min-width:130px;text-align:left;line-height:1.45;z-index:3} .ct3-tip div{display:flex;align-items:center;gap:6px} .ct3-pb{display:block;height:8px;min-width:90px;background:var(--bd);border-radius:4px;overflow:hidden} .ct3-pb i{display:block;height:100%;background:var(--ac-fill);border-radius:4px} .ct3-pb.warn i{background:var(--wn)}.ct3-pb.bad i{background:var(--bad)} .ct3-tbl{max-height:340px;overflow:auto} .ct3-def summary{cursor:pointer;color:var(--ac);font-weight:600} .ct3-ul{margin:4px 0 0;padding-left:18px} .ct3-ul li{overflow-wrap:anywhere} /* ===== Ransomware Defense (Modul F2, Tahap 4): rw- (memakai juga ct-* untuk tabel, grafik batang, daftar kunci-nilai) ===== */ .banner.rw-note{border-color:var(--wn);background:var(--wn-soft);color:var(--ink);border-left-width:4px} .rw-lim{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px} .rw-lim li{overflow-wrap:anywhere} .rw-prog{display:block;height:10px;background:var(--bd);border-radius:5px;overflow:hidden;min-width:80px} .rw-prog i{display:block;height:100%;background:var(--ac-fill);border-radius:5px;transition:width .3s} .rw-prog.ok i{background:var(--ok)}.rw-prog.warn i{background:var(--wn)}.rw-prog.bad i{background:var(--bad)} .rw-score{display:flex;flex-wrap:wrap;gap:16px;align-items:center} .rw-big{display:flex;flex-direction:column;align-items:center;justify-content:center;width:112px;height:112px;border-radius:50%;border:6px solid var(--bd2);flex:none} .rw-big b{font-size:34px;line-height:1;font-weight:800} .rw-big small{color:var(--mu)} .rw-big.ok{border-color:var(--ok)}.rw-big.warn{border-color:var(--wn)}.rw-big.bad{border-color:var(--bad)} .rw-fix,.rw-chk{display:flex;flex-direction:column;gap:4px;border:1px solid var(--bd);border-radius:8px;padding:8px 10px;background:var(--sf2);min-width:0} .rw-line{fill:none;stroke:var(--ac);stroke-width:2;stroke-linejoin:round} .rw-dot{fill:var(--ac);stroke:var(--sf);stroke-width:2} .rw-fix .ct-wr,.rw-chk .ct-wr{align-items:center} #rw-body details>summary{cursor:pointer;font-weight:600;padding:4px 0} #rw-body details[open]>summary{margin-bottom:6px} #rw-body .tw{max-width:100%;overflow-x:auto} #rw-body input[type=number]{max-width:140px} @media (max-width:520px){.rw-big{width:92px;height:92px}.rw-big b{font-size:28px}#rw-body .ct-tbl{min-width:640px}} #rw-body .ct-filters .f{min-width:150px} /* Tahap 5: linimasa insiden */ .rw-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .rw-tl>li{border-left:3px solid var(--bd2);padding:2px 0 2px 10px;min-width:0} .rw-tl>li.note{border-left-color:var(--ac)}.rw-tl>li.status{border-left-color:var(--ok)}.rw-tl>li.mass{border-left-color:var(--bad)}.rw-tl>li.level,.rw-tl>li.alert{border-left-color:var(--wn)} .rw-tl .ct-wrap{overflow-wrap:anywhere} #rw-body textarea.mono{width:100%;box-sizing:border-box} /* ===== Perlindungan DDoS (Modul H, Tahap H1): dd- (memakai juga ct-* untuk tabel, daftar kunci-nilai, bagan; tombol/pil/kartu dari komponen umum) ===== */ .banner.dd-note{border-color:var(--wn);background:var(--wn-soft);color:var(--ink);border-left-width:4px} .dd-lim{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px} .dd-lim li{overflow-wrap:anywhere} .dd-band{display:flex;flex-direction:column;gap:4px} #dd-tier-rules table input[type=text],#dd-tier-rules table select{min-width:120px} .dd-prog{display:block;height:10px;background:var(--bd);border-radius:5px;overflow:hidden;min-width:80px;flex:1 1 80px} .dd-prog i{display:block;height:100%;background:var(--ac-fill);border-radius:5px;transition:width .3s} .dd-prog.ok i{background:var(--ok)}.dd-prog.warn i{background:var(--wn)}.dd-prog.bad i{background:var(--bad)} .dd-svg{max-height:240px} .dd-line{fill:none;stroke:var(--ac);stroke-width:2;stroke-linejoin:round} .dd-area{fill:var(--ac);opacity:.12;stroke:none} .dd-thr{fill:none;stroke:var(--wn);stroke-width:1.5;stroke-dasharray:5 4} .dd-atk{fill:var(--bad);opacity:.14} .dd-tx{fill:var(--mu);font:11px var(--sans)} .dd-hit{fill:transparent} .dd-hit:hover{fill:var(--ac);opacity:.08} .dd-legend{align-items:center;gap:14px} .dd-legend span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px} .dd-sw{display:inline-block;width:18px;height:0;border-top:2px solid var(--ac)} .dd-sw-thr{border-top:2px dashed var(--wn)} .dd-sw-atk{height:10px;border-top:0;background:var(--bad);opacity:.35;width:14px;border-radius:2px} #dd-body details>summary{cursor:pointer;font-weight:600;padding:4px 0} #dd-body details[open]>summary{margin-bottom:6px} #dd-body .tw{max-width:100%;overflow-x:auto} #dd-body input[type=number]{max-width:160px} #dd-body textarea.mono{width:100%;box-sizing:border-box} #dd-body .ct-filters .f{min-width:150px} #dd-body input[type=text].mono{width:100%;box-sizing:border-box} @media (max-width:520px){#dd-body .ct-tbl{min-width:620px}.dd-legend{gap:8px}} /* ----- H2: penjatuhan lokal (mitigasi, kebijakan, grup) ----- */ .banner.dd-live{border-color:var(--bad);background:var(--bad-soft);border-left-width:4px} .dd-sw-line{border-top-color:var(--ac)} .dd-cd{font-variant-numeric:tabular-nums} .dd-ports{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 12px} .dd-port{display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid var(--bd);border-radius:6px;font-size:13px;min-width:0;overflow-wrap:anywhere} .dd-port.risky{border-color:var(--wn);background:var(--wn-soft)} .dd-port input{flex:0 0 auto} #dd-body .ct-kv dd{overflow-wrap:anywhere} #dd-scn-mit,#dd-scn-root{flex-wrap:wrap} /* M8: pesan