*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{font-family:var(--font-ui);background:var(--bg);color:var(--text);display:flex;height:100vh;overflow:hidden;}
.sb{width:230px;min-width:230px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;}
.sb-logo{padding:18px 16px 14px;border-bottom:1px solid var(--border);}
.sb-tagline{font-family:var(--font-mono);font-size:9px;color:var(--accent);letter-spacing:3px;text-transform:uppercase;opacity:.7;margin-bottom:3px;}
.sb-name{font-size:22px;font-weight:800;letter-spacing:-1px;}
.sb-name span{color:var(--accent);}
.sb-online{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:3px 9px;background:rgba(0,255,170,.07);border:1px solid rgba(0,255,170,.18);border-radius:20px;font-family:var(--font-mono);font-size:9px;color:var(--green);letter-spacing:1px;}
.sb-ipbox{margin:10px;padding:11px 12px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);}
.sb-iplabel{font-family:var(--font-mono);font-size:8px;color:var(--text3);letter-spacing:2px;margin-bottom:3px;}
.sb-ipval{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--accent);cursor:pointer;}
.sb-ipval:hover{color:#fff;}
.sb-isp{font-size:10px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-section{padding:12px 0 2px;}
.sb-lbl{font-family:var(--font-mono);font-size:8px;color:var(--text2);letter-spacing:2.5px;text-transform:uppercase;padding:0 14px;margin-bottom:3px;}
.nav{display:flex;align-items:center;gap:9px;padding:8px 14px;cursor:pointer;border-left:2px solid transparent;font-size:13px;font-weight:600;color:var(--text2);user-select:none;transition:all .12s;position:relative;}
.nav:hover{background:rgba(0,212,255,.05);color:var(--text);}
.nav.on{background:rgba(0,212,255,.07);border-left-color:var(--accent);color:var(--accent);}
.nav-ico{font-size:14px;width:18px;text-align:center;flex-shrink:0;}
/* ── NAV DOT (game-style "belum dibuka") ─── */
.nav-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#dc2626;margin-left:6px;flex-shrink:0;vertical-align:middle;box-shadow:0 0 4px rgba(220,38,38,.7);animation:nav-dot-pulse 2.5s ease-in-out infinite;}
@keyframes nav-dot-pulse{0%,100%{transform:scale(1);box-shadow:0 0 4px rgba(220,38,38,.7);}50%{transform:scale(1.3);box-shadow:0 0 8px rgba(220,38,38,.95);}}
@media(prefers-reduced-motion:reduce){.nav-dot{animation:none;}}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.topbar{height:50px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:10px;flex-shrink:0;}
.tb-title{font-size:15px;font-weight:700;flex:1;}
.tb-sub{font-family:var(--font-mono);font-size:9px;color:var(--text2);letter-spacing:1.5px;}
.tb-time{font-family:var(--font-mono);font-size:11px;color:var(--text2);}
.content,main.content{flex:1;overflow-y:auto;padding:16px;}
.panel{display:none;animation:fadeIn .2s ease;}
.panel.on{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r2);padding:15px;margin-bottom:12px;}
.card-hd{font-family:var(--font-mono);font-size:9px;color:var(--text2);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;}
.card-hd-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;}
.card-hd-row .card-hd{margin-bottom:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.copy-btn{background:rgba(0,212,255,.07);border:1px solid rgba(0,212,255,.25);color:var(--accent);font-family:var(--font-mono);font-size:10px;letter-spacing:1px;padding:4px 9px;border-radius:4px;cursor:pointer;transition:all .15s ease;flex:none;white-space:nowrap;}
.copy-btn:hover{background:rgba(0,212,255,.14);border-color:rgba(0,212,255,.45);}
.copy-btn.copied{background:rgba(0,255,170,.12);border-color:rgba(0,255,170,.4);color:var(--green);}
.port-results-card:not(:has(#pc-results > *)){display:none;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.gridauto{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;}
.stat{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:13px 14px;}
.stat-lbl{font-family:var(--font-mono);font-size:8px;color:var(--text3);letter-spacing:1.5px;margin-bottom:5px;}
.stat-val{font-family:var(--font-mono);font-size:17px;font-weight:700;color:var(--accent);}
.stat-sub{font-size:10px;color:var(--text3);margin-top:2px;font-weight:600;}
.inp-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
input[type=text],input[type=number],select{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:9px 13px;color:var(--text);font-family:var(--font-mono);font-size:12px;outline:none;transition:border-color .15s;min-width:0;}
input[type=text]:focus,input[type=number]:focus,select:focus{border-color:var(--accent);}
input[type=text]{flex:1;}
select option{background:var(--bg3);}
.btn{padding:9px 16px;border:none;border-radius:var(--r);cursor:pointer;font-family:var(--font-ui);font-size:12px;font-weight:700;transition:all .12s;white-space:nowrap;flex-shrink:0;}
.btn-p{background:var(--accent);color:#000;}.btn-p:hover{background:#00b8d9;}
.btn-s{background:var(--bg3);border:1px solid var(--border2);color:var(--text2);}.btn-s:hover{border-color:var(--accent);color:var(--accent);}
.btn-g{background:var(--green);color:#000;}.btn-g:hover{background:#00e699;}
.btn-r{background:var(--red);color:#fff;}.btn-r:hover{background:#ff2233;}
.btn-sm{padding:5px 11px;font-size:11px;}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;}
.chip{padding:3px 9px;border-radius:16px;font-family:var(--font-mono);font-size:10px;cursor:pointer;border:1px solid var(--border2);color:var(--text2);background:var(--bg3);transition:all .12s;}
.chip:hover,.chip.on{border-color:var(--accent);color:var(--accent);background:rgba(0,212,255,.07);}
.tbl{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:12px;}
.tbl td{padding:8px 11px;border-bottom:1px solid var(--border);}
.tbl td:first-child{color:var(--text3);width:145px;font-size:10px;letter-spacing:.5px;text-transform:uppercase;}
.tbl td:last-child{color:var(--text);}
.tbl tr:last-child td{border-bottom:none;}
.tbl th{background:var(--bg3);color:var(--text3);font-size:8px;letter-spacing:2px;text-transform:uppercase;padding:7px 11px;border-bottom:1px solid var(--border2);text-align:left;}
.tbl tr:hover td{background:rgba(255,255,255,.015);}
.badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:9px;font-weight:700;font-family:var(--font-mono);letter-spacing:.5px;}
.bg{background:rgba(0,255,170,.12);color:var(--green);border:1px solid rgba(0,255,170,.25);}
.br{background:rgba(255,68,85,.12);color:var(--red);border:1px solid rgba(255,68,85,.25);}
.by{background:rgba(255,201,64,.12);color:var(--yellow);border:1px solid rgba(255,201,64,.25);}
.bb{background:rgba(0,212,255,.1);color:var(--accent);border:1px solid rgba(0,212,255,.2);}
.bv{background:rgba(168,85,247,.12);color:var(--accent5);border:1px solid rgba(168,85,247,.25);}
.bo{background:rgba(255,140,32,.12);color:var(--orange);border:1px solid rgba(255,140,32,.25);}
.logbox{background:#040608;border:1px solid var(--border);border-radius:var(--r);padding:11px 13px;font-family:var(--font-mono);font-size:11px;color:var(--green);min-height:130px;max-height:220px;overflow-y:auto;line-height:1.65;}
.logbox::-webkit-scrollbar{width:3px;}
.logbox::-webkit-scrollbar-thumb{background:var(--border2);}
.ld{color:var(--text3);}.la{color:var(--accent);}.lw{color:var(--yellow);}.le{color:var(--red);}.lg{color:var(--green);}
.loader{display:inline-block;width:13px;height:13px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .65s linear infinite;vertical-align:middle;margin-right:5px;}
@keyframes spin{to{transform:rotate(360deg)}}
.sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;}
.sec-title{font-size:16px;font-weight:700;margin:0;}
h1.tb-title{margin:0;font-size:15px;}
.sec-mono{font-family:var(--font-mono);font-size:9px;color:var(--text2);letter-spacing:1.5px;}
.ping-terminal{background:#0a0d12;border:1px solid var(--border2);border-radius:var(--r2);overflow:hidden;margin-bottom:10px;}
.ping-terminal-bar{background:#1a2030;padding:8px 14px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border);}
.pt-dot{width:11px;height:11px;border-radius:50%;display:inline-block;}
.pt-title{font-family:var(--font-mono);font-size:11px;color:var(--text3);margin-left:8px;letter-spacing:1px;}
.ping-terminal-body{padding:12px 14px;font-family:var(--font-mono);font-size:12px;color:var(--green);min-height:160px;max-height:260px;overflow-y:auto;line-height:1.75;}
.ping-terminal-body::-webkit-scrollbar{width:3px;}
.ping-terminal-body::-webkit-scrollbar-thumb{background:var(--border2);}
.ping-status-row{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);margin-bottom:10px;}
.ping-status-indicator{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:1.5px;}
.ping-si-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:blink 1s ease infinite;}
.ping-si-dot.done{animation:none;background:var(--accent);}
.ping-si-dot.error{animation:none;background:var(--red);}
.ping-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px;}
.ping-stat-card{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:14px 12px;}
.psc-label{font-family:var(--font-mono);font-size:8px;color:var(--text3);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;}
.psc-val{font-family:var(--font-mono);font-size:32px;font-weight:700;color:var(--accent);line-height:1;}
.psc-unit{font-family:var(--font-mono);font-size:9px;color:var(--text3);margin-top:3px;letter-spacing:1px;}
.psc-rating{color:var(--green)!important;}
.ping-latency-bar{display:flex;border-radius:4px;overflow:hidden;margin-top:4px;}
.plb-seg{flex:1;padding:6px 0;text-align:center;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.3px;}
.plb-excellent{background:#00c853;color:#000;}
.plb-good{background:#64dd17;color:#000;}
.plb-avg{background:#ffd600;color:#000;}
.plb-poor{background:#ff6d00;color:#fff;}
.plb-bad{background:#d50000;color:#fff;}
.plb-seg.active-seg{outline:3px solid #fff;outline-offset:-2px;z-index:1;position:relative;}
.ping-detail-table{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:14px 16px;margin-top:10px;font-family:var(--font-mono);font-size:12px;}
.pdt-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);}
.pdt-row:last-child{border-bottom:none;}
.pdt-key{color:var(--text3);font-size:11px;}
.pdt-val{color:var(--text);font-weight:600;}
.pdt-val.good{color:var(--green);}
.pdt-val.warn{color:var(--yellow);}
.pdt-val.bad{color:var(--red);}
.pdt-section{padding:8px 0 4px;font-size:9px;color:var(--accent);letter-spacing:2px;text-transform:uppercase;border-bottom:1px solid var(--border2);margin-bottom:4px;}
.port-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:5px;margin-bottom:10px;}
.pbtn{padding:8px 6px;border-radius:var(--r);background:var(--bg3);border:1px solid var(--border2);cursor:pointer;text-align:center;transition:all .12s;font-family:var(--font-mono);font-size:10px;color:var(--text2);}
.pbtn:hover{border-color:var(--accent);color:var(--accent);}
.pbtn .pn{font-size:14px;font-weight:700;color:var(--text);display:block;margin-bottom:1px;}
.port-res-item{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);margin-bottom:5px;font-family:var(--font-mono);font-size:12px;}
.port-res-item.open{border-color:rgba(0,255,170,.3);background:rgba(0,255,170,.04);}
.port-res-item.closed{border-color:rgba(255,68,85,.2);}
.port-res-item.checking{border-color:rgba(0,212,255,.2);}
.sg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.si{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:10px 12px;}
.si-lbl{font-size:9px;color:var(--text3);font-family:var(--font-mono);letter-spacing:1.5px;margin-bottom:4px;}
.si-val{font-family:var(--font-mono);font-size:14px;color:var(--accent);font-weight:600;}
.dns-rec{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:11px;}
.dns-rec:last-child{border-bottom:none;}
.dns-t{min-width:38px;padding:2px 5px;border-radius:3px;font-size:8px;font-weight:700;letter-spacing:1px;text-align:center;flex-shrink:0;}
.dA{background:rgba(0,212,255,.13);color:var(--accent);}
.dAAAA{background:rgba(168,85,247,.13);color:var(--accent5);}
.dMX{background:rgba(255,140,32,.13);color:var(--orange);}
.dNS{background:rgba(255,201,64,.13);color:var(--yellow);}
.dTXT{background:rgba(0,255,170,.1);color:var(--green);}
.dCNAME{background:rgba(255,107,53,.13);color:var(--accent4);}
.dSOA{background:rgba(168,85,247,.13);color:var(--accent5);}
.dCAA{background:rgba(255,68,85,.13);color:var(--red);}
.dns-val{color:var(--text);flex:1;word-break:break-all;line-height:1.5;}
.dns-ttl{color:var(--text3);font-size:9px;white-space:nowrap;margin-left:6px;}
.hop{display:flex;align-items:center;gap:9px;padding:7px 10px;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:11px;transition:background .1s;}
.hop:hover{background:rgba(255,255,255,.02);}
.hop:last-child{border-bottom:none;}
.hop-n{color:var(--text3);width:22px;font-size:10px;flex-shrink:0;}
.hop-ip{flex:1.2;font-size:11px;}
.hop-host{flex:2;color:var(--text2);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hop-ms{width:65px;text-align:right;font-weight:600;}
.hop-bar{flex:1;height:3px;background:var(--border);border-radius:2px;overflow:hidden;max-width:100px;min-width:40px;}
.hop-fill{height:100%;border-radius:2px;}
.bl-prog{height:4px;background:var(--border);border-radius:2px;margin-bottom:12px;overflow:hidden;}
.bl-prog-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--green));border-radius:2px;transition:width .3s;}
.map-wrap{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);height:300px;overflow:hidden;position:relative;}
.map-wrap iframe{width:100%;height:100%;border:0;display:block;}
.map-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text3);}
.map-placeholder::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 29px,var(--border) 29px,var(--border) 30px),repeating-linear-gradient(90deg,transparent,transparent 39px,var(--border) 39px,var(--border) 40px);opacity:.25;}
.map-pin{font-size:30px;position:relative;z-index:1;}
.map-ph-txt{position:relative;z-index:1;font-family:var(--font-mono);font-size:11px;}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.info-item{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:12px;}
.info-lbl{font-family:var(--font-mono);font-size:8px;color:var(--text3);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;}
.info-val{font-family:var(--font-mono);font-size:13px;color:var(--text);font-weight:700;}
.info-val.hi{color:var(--accent);font-size:18px;font-weight:700;}
.qt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.qt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 6px;border-radius:var(--r);background:var(--bg);border:1px solid var(--border2);cursor:pointer;font-size:12px;color:var(--text2);transition:all .15s;font-weight:700;}
.qt:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.3);filter:brightness(1.15);}
.qt-ico{font-size:24px;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
.copy-btn{cursor:pointer;padding:2px 6px;border-radius:3px;font-family:var(--font-mono);font-size:9px;background:var(--border2);color:var(--text2);border:none;margin-left:6px;transition:all .1s;}
.copy-btn:hover{background:var(--accent);color:#000;}
.err-box{background:rgba(255,68,85,.07);border:1px solid rgba(255,68,85,.25);border-radius:var(--r);padding:12px 14px;font-family:var(--font-mono);font-size:11px;color:var(--red);margin-bottom:10px;}
.tb-btn{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:5px 11px;color:var(--text);font-family:var(--font-ui);font-size:11px;font-weight:700;cursor:pointer;transition:all .12s;white-space:nowrap;}
.tb-btn:hover{border-color:var(--accent);color:var(--accent);}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);padding:24px;width:420px;max-width:90vw;}
.modal-title{font-size:16px;font-weight:700;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;}
.modal-close{cursor:pointer;color:var(--text3);font-size:18px;background:none;border:none;color:var(--text2);}
.modal-close:hover{color:var(--red);}
.export-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.export-card{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:16px;cursor:pointer;transition:all .15s;text-align:center;}
.export-card:hover{border-color:var(--accent);background:rgba(0,212,255,.06);}
.export-card-ico{font-size:28px;margin-bottom:6px;}
.export-card-title{font-size:13px;font-weight:700;color:var(--text);}
.export-card-desc{font-size:10px;color:var(--text2);margin-top:3px;font-family:var(--font-mono);}
.speed-gauge{display:flex;flex-direction:column;align-items:center;padding:24px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r2);margin-bottom:12px;}
.speed-circle{display:none;}
.st-wrap{display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:start;}
@media(max-width:720px){.st-wrap{grid-template-columns:1fr;}}
.st-dial-cont{display:flex;flex-direction:column;align-items:center;gap:14px;}
.st-dial{position:relative;width:320px;height:320px;cursor:pointer;user-select:none;}
.st-dial svg{position:absolute;inset:0;width:100%;height:100%;}
.st-spin-ring{position:absolute;inset:18px;border-radius:50%;
 background:conic-gradient(from 0deg,transparent 0%,rgba(0,212,255,.5) 15%,rgba(0,212,255,.08) 35%,transparent 50%,transparent 100%);
 animation:st-spin 2.4s linear infinite;transition:opacity .4s;}
.st-spin-ring.hidden{opacity:0;animation-play-state:paused;}
@keyframes st-spin{to{transform:rotate(360deg)}}
.st-btn-circle{position:absolute;inset:52px;border-radius:50%;
 background:radial-gradient(circle at 40% 35%,#1a2840 0%,#0a1220 60%,#060c18 100%);
 border:1px solid rgba(255,255,255,.1);
 box-shadow:0 0 0 1px rgba(0,212,255,.15),inset 0 1px 0 rgba(255,255,255,.06),0 8px 32px rgba(0,0,0,.6);
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
 transition:all .2s;}
.st-dial:hover .st-btn-circle{box-shadow:0 0 0 1px rgba(0,212,255,.35),inset 0 1px 0 rgba(255,255,255,.08),0 8px 40px rgba(0,212,255,.15);}
.st-btn-icon{font-size:28px;opacity:.9;}
.st-btn-label{font-family:var(--font-ui);font-size:16px;font-weight:700;color:#dde6f0;letter-spacing:.5px;}
.st-btn-sub{font-family:var(--font-mono);font-size:9px;color:rgba(255,255,255,.35);letter-spacing:2px;}
.st-running-val{font-family:var(--font-mono);font-size:52px;font-weight:700;line-height:1;transition:color .3s;}
.st-running-unit{font-family:var(--font-mono);font-size:11px;letter-spacing:3px;color:rgba(255,255,255,.4);margin-top:2px;}
.st-running-phase{font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;color:rgba(255,255,255,.5);margin-top:4px;}
.st-prog-ring{position:absolute;inset:14px;border-radius:50%;pointer-events:none;}
.st-unit-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.st-usel{padding:6px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);
 font-family:var(--font-mono);font-size:10px;color:var(--text3);cursor:pointer;
 transition:all .15s;font-weight:600;}
.st-usel:hover{border-color:var(--accent);color:var(--accent);}
.st-usel.on{background:rgba(0,212,255,.12);border-color:var(--accent);color:var(--accent);}
.st-phase-lbl{font-family:var(--font-mono);font-size:10px;color:var(--text3);letter-spacing:1.5px;text-align:center;}
.st-prog-bar-wrap{width:240px;height:3px;background:var(--border);border-radius:2px;overflow:hidden;}
.st-prog-bar{height:100%;width:0%;border-radius:2px;transition:width .4s ease;
 background:linear-gradient(90deg,#ff4455,#ffc940,#00ffaa);}
.st-right{display:flex;flex-direction:column;gap:10px;}
.st-metric-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.st-mc{background:var(--bg3);border:1px solid var(--border);border-radius:12px;
 padding:14px 14px 12px;position:relative;overflow:hidden;transition:border-color .3s;}
.st-mc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
 background:var(--stc,var(--border));transition:background .3s;}
.st-mc.on{border-color:var(--stc,var(--accent));}
.st-mc .lbl{font-family:var(--font-mono);font-size:8px;letter-spacing:2px;color:var(--text3);margin-bottom:4px;}
.st-mc .val{font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--text2);line-height:1;transition:color .3s;}
.st-mc .unt{font-family:var(--font-mono);font-size:9px;color:var(--text3);margin-top:2px;}
.st-mc.dl{--stc:#00d4ff;} .st-mc.ul{--stc:#c084fc;} .st-mc.pg{--stc:#00ffaa;} .st-mc.jt{--stc:#ffc940;} .st-mc.ls{--stc:#ff4455;}
.st-rate{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:14px;display:none;}
.st-rate-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.st-rate-lbl{font-size:15px;font-weight:800;}
.st-rate-score{font-family:var(--font-mono);font-size:26px;font-weight:700;}
.st-rate-desc{font-size:11px;color:var(--text3);line-height:1.5;margin-bottom:10px;}
.st-rate-track{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:8px;}
.st-rate-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#ff4455,#ffc940,#64dd17,#00ffaa);transition:width 1s ease;}
.st-use-row{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.st-use-chip{font-size:9px;text-align:center;padding:5px 3px;border-radius:8px;background:var(--bg);border:1px solid var(--border);color:var(--text3);line-height:1.4;transition:all .3s;}
.st-use-chip.ok{background:rgba(0,255,170,.08);border-color:rgba(0,255,170,.3);color:#00ffaa;}
.st-graph{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:14px;display:none;}
.st-graph-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.st-srv{background:var(--bg3);border:1px solid var(--border);border-radius:12px;
 padding:10px 14px;margin-bottom:12px;display:none;}
.st-srv-row{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10px;color:var(--text3);}
.st-srv-row b{color:var(--text2);}
.st-hist{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:14px;display:none;}
.st-hist-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:10px;}
.st-hist-row:last-child{border-bottom:none;}
#st-srv-search::placeholder{color:var(--text3);}
#st-srv-search:focus{border-color:var(--accent);}
#st-srv-list::-webkit-scrollbar{width:5px;}
#st-srv-list::-webkit-scrollbar-track{background:var(--bg);}
#st-srv-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
.st-hist-time{color:var(--text3);font-size:9px;flex-shrink:0;min-width:130px;}
.st-hist-srv{color:var(--accent);font-size:9px;flex-shrink:0;}
.st-hist-vals{color:var(--green);flex:1;}
.st-hist-time{color:var(--text3);font-size:9px;flex-shrink:0;min-width:130px;}
.st-hist-srv{color:var(--accent);font-size:9px;flex-shrink:0;}
.st-hist-vals{color:var(--green);flex:1;}
.st-hist-time{color:var(--text3);font-size:9px;flex-shrink:0;min-width:140px;}
.st-hist-srv{color:var(--accent);font-size:9px;flex-shrink:0;}
.st-hist-vals{color:var(--green);flex:1;}
.speed-val{font-family:var(--font-mono);font-size:36px;font-weight:700;color:var(--accent);}
.speed-unit{font-family:var(--font-mono);font-size:11px;color:var(--text3);margin-top:2px;}
.speed-label{font-family:var(--font-mono);font-size:10px;color:var(--text2);letter-spacing:2px;}
.speed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.speed-item{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:12px;text-align:center;}
.speed-item-val{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--accent);}
.speed-item-lbl{font-size:10px;color:var(--text2);margin-top:3px;}
.speed-bar-wrap{width:100%;background:var(--border);border-radius:4px;height:8px;margin-top:8px;overflow:hidden;}
.speed-bar{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--green));transition:width .4s ease;}
.ssl-badge-wrap{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);margin-bottom:12px;}
.ssl-icon{font-size:40px;}
.ssl-status-text{font-size:20px;font-weight:700;}
.whois-section{margin-bottom:10px;}
.whois-section-title{font-family:var(--font-mono);font-size:9px;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--border2);}
.disclaimer-popup{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:2000;align-items:center;justify-content:center;padding:16px;}
.disclaimer-popup.open{display:flex;}
.disclaimer-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);max-width:520px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.6);}
.disclaimer-header{padding:20px 20px 0;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);padding-bottom:14px;}
.disclaimer-header-icon{font-size:28px;}
.disclaimer-header-title{font-size:17px;font-weight:800;color:var(--text);}
.disclaimer-header-sub{font-size:10px;font-family:var(--font-mono);color:var(--text3);margin-top:2px;letter-spacing:1px;}
.disclaimer-body{padding:16px 20px;}
.disclaimer-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.disclaimer-item:last-child{border-bottom:none;}
.disclaimer-item-ico{font-size:18px;flex-shrink:0;margin-top:1px;}
.disclaimer-item-title{font-size:12px;font-weight:700;color:var(--text);margin-bottom:3px;}
.disclaimer-item-desc{font-size:11px;color:var(--text2);line-height:1.55;}
.disclaimer-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.disclaimer-check{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text2);cursor:pointer;flex:1;}
.disclaimer-check input{accent-color:var(--accent);width:14px;height:14px;}
.footer-disclaimer{background:var(--bg2);border-top:1px solid var(--border);padding:10px 20px;font-family:var(--font-mono);font-size:9px;color:var(--text3);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;flex-shrink:0;}
.footer-disclaimer a{color:var(--text3);text-decoration:none;}
.footer-disclaimer a:hover{color:var(--accent);}
.footer-disc-btn{background:none;border:none;color:var(--text3);font-family:var(--font-mono);font-size:9px;cursor:pointer;letter-spacing:1px;padding:0;}
.footer-disc-btn:hover{color:var(--accent);}
.isp-hero{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:14px;}
.isp-hero-card{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r2);padding:14px 16px;position:relative;overflow:hidden;transition:border-color .15s;}
.isp-hero-card.scanning{border-color:var(--accent);}
.isp-hero-card.done-good{border-color:var(--green);}
.isp-hero-card.done-avg{border-color:var(--yellow);}
.isp-hero-card.done-bad{border-color:var(--red);}
.isp-logo{font-size:22px;margin-bottom:6px;}
.isp-name{font-size:13px;font-weight:800;color:var(--text);margin-bottom:2px;}
.isp-asn{font-family:var(--font-mono);font-size:9px;color:var(--text3);letter-spacing:1px;}
.isp-latency-big{font-family:var(--font-mono);font-size:32px;font-weight:700;margin:8px 0 2px;line-height:1;}
.isp-latency-lbl{font-family:var(--font-mono);font-size:9px;color:var(--text3);letter-spacing:1px;}
.isp-bar-wrap{height:4px;background:var(--border);border-radius:2px;margin-top:8px;overflow:hidden;}
.isp-bar{height:100%;border-radius:2px;transition:width .6s ease;}
.isp-status{font-family:var(--font-mono);font-size:9px;letter-spacing:1px;margin-top:4px;}
.isp-rank-badge{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.isp-rank-1{background:var(--yellow);color:#000;}
.isp-rank-2{background:#a0a0a0;color:#000;}
.isp-rank-3{background:#cd7f32;color:#fff;}
.isp-table-wrap{overflow-x:auto;}
.isp-tbl{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:11px;min-width:600px;}
.isp-tbl th{background:var(--bg3);color:var(--text3);font-size:8px;letter-spacing:2px;text-transform:uppercase;padding:9px 12px;border-bottom:1px solid var(--border2);text-align:left;white-space:nowrap;}
.isp-tbl td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.isp-tbl tr:last-child td{border-bottom:none;}
.isp-tbl tr:hover td{background:rgba(255,255,255,.02);}
.isp-tbl .isp-col-name{font-weight:700;font-size:12px;color:var(--text);}
.isp-tbl .isp-col-asn{color:var(--accent);font-size:10px;}
.isp-mini-bar{display:flex;align-items:center;gap:8px;}
.isp-mini-bar-track{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;min-width:60px;}
.isp-mini-bar-fill{height:100%;border-radius:3px;transition:width .6s ease;}
.isp-ping-val{font-weight:700;font-size:12px;min-width:55px;text-align:right;}
.isp-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px;}
.isp-summary-bar{display:flex;gap:16px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--border);margin-bottom:14px;}
.isp-sum-item{font-family:var(--font-mono);font-size:10px;color:var(--text2);}
.isp-sum-item span{color:var(--accent);font-weight:700;}
.hamburger{display:none;flex-direction:column;gap:4px;cursor:pointer;padding:6px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg3);position:relative;}
.hamburger span{width:18px;height:2px;background:var(--text2);border-radius:2px;transition:all .2s;}
.hamburger.has-unread::after{content:attr(data-progress);position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 3px;background:#dc2626;color:#fff;font-family:var(--font-mono);font-size:9px;font-weight:700;line-height:16px;text-align:center;border-radius:999px;border:1.5px solid var(--bg2,#0d1117);box-shadow:0 0 5px rgba(220,38,38,.8);animation:nav-dot-pulse 2.5s ease-in-out infinite;letter-spacing:0;white-space:nowrap;box-sizing:border-box;}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:90;}
.mode-toggle-wrap{display:flex;align-items:center;gap:4px;background:var(--bg3);border:1px solid var(--border2);border-radius:20px;padding:3px;flex-shrink:0;}
.mode-btn{padding:4px 11px;border-radius:16px;font-family:var(--font-ui);font-size:11px;font-weight:700;cursor:pointer;border:none;background:transparent;color:var(--text3);transition:all .15s;white-space:nowrap;}
.mode-btn.on{background:var(--accent);color:#000;}
.mode-btn.expert.on{background:var(--accent5);color:#fff;}
.tool-desc{font-size:12px;color:var(--text2);margin-bottom:12px;padding:9px 13px;background:rgba(0,212,255,.05);border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;line-height:1.6;}
.hero-cta{background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(0,255,170,.05));border:1px solid rgba(0,212,255,.22);border-radius:var(--r2);padding:16px 18px;margin-bottom:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.hero-cta-title{font-size:15px;font-weight:800;color:var(--text);margin-bottom:3px;}
.hero-cta-sub{font-size:11px;color:var(--text2);line-height:1.4;}
.hero-ip-block{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;}
.hero-ip-lbl{font-family:var(--font-mono);font-size:8px;color:var(--text3);letter-spacing:2px;}
.hero-ip-val{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--accent);}
.copy-btn-1c{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:5px;font-family:var(--font-mono);font-size:10px;font-weight:600;background:var(--bg3);border:1px solid var(--border2);color:var(--text3);cursor:pointer;transition:all .12s;}
.copy-btn-1c:hover,.copy-btn-1c.ok{background:var(--accent);color:#000;border-color:var(--accent);}
.popular-section{background:var(--panel);border:1px solid var(--border);border-radius:var(--r2);padding:14px;margin-bottom:12px;}
.popular-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:10px;}
.pop-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 8px;border-radius:var(--r);border:1px solid var(--border2);cursor:pointer;text-align:center;transition:all .15s;background:var(--bg3);}
.pop-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.25);}
.pop-card-ico{font-size:22px;}
.pop-card-name{font-size:12px;font-weight:700;}
.pop-card-hint{font-size:10px;color:var(--text3);line-height:1.3;}
.adv-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;cursor:pointer;font-family:var(--font-mono);font-size:8px;color:var(--text2);letter-spacing:2.5px;text-transform:uppercase;border-top:1px solid var(--border);margin-top:4px;transition:color .12s;position:relative;}
.adv-toggle-row:hover{color:var(--accent);}
.adv-toggle-row.has-unread > span:first-child::after{content:attr(data-progress);display:inline-block;width:14px;height:14px;padding:0;background:#dc2626;color:#fff;font-family:var(--font-mono);font-size:8px;font-weight:700;line-height:14px;border-radius:50%;margin-left:6px;vertical-align:middle;box-shadow:0 0 4px rgba(220,38,38,.7);animation:nav-dot-pulse 2.5s ease-in-out infinite;letter-spacing:0;text-align:center;box-sizing:border-box;}
.adv-arrow{font-size:9px;transition:transform .2s;}
.adv-nav-section{max-height:300px;overflow:hidden;transition:max-height .3s ease;}
.adv-nav-section.hidden{max-height:0;}
.explain-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:10px;font-size:9px;font-family:var(--font-mono);background:rgba(0,212,255,.07);border:1px solid rgba(0,212,255,.18);color:var(--accent);cursor:pointer;transition:all .12s;margin-top:5px;}
.explain-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:4000;align-items:center;justify-content:center;padding:16px;}
.explain-overlay.open{display:flex;}
.explain-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);padding:22px;max-width:380px;width:100%;box-shadow:0 8px 40px rgba(0,0,0,.6);}
.explain-card h3{font-size:14px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;}
.explain-card p{font-size:12px;color:var(--text2);line-height:1.7;}
.explain-close{font-size:18px;cursor:pointer;background:none;border:none;color:var(--text3);}
body.mode-awam .nav-adv{display:none!important;}
/* Mode awam: toggle TETAP terlihat sebagai teaser ("ada lebih banyak tools di sini")
   Klik → auto-switch ke mode Expert (handled di JS toggleAdvMenu) */
body.mode-awam .adv-toggle-row::before{content:"🔒";margin-right:6px;font-size:10px;opacity:.7;}
body.mode-awam .adv-toggle-row{opacity:.85;}
body.mode-awam .adv-toggle-row:hover{opacity:1;color:var(--accent);}
body.mode-awam .adv-nav-section{display:none;}
body.mode-awam #panel-bgp,body.mode-awam #panel-headers{display:none!important;}
.stat-mini{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;}
.stat-mini-lbl{font-family:var(--font-mono);font-size:8px;color:var(--text3);letter-spacing:1.5px;margin-bottom:3px;}
.stat-mini-val{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--accent);}
.home-hist-item{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity .1s;}
.home-hist-item:last-child{border-bottom:none;}
.home-hist-item:hover{opacity:.8;}
.home-hist-ico{width:22px;height:22px;border-radius:5px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
.home-hist-tool{font-family:var(--font-mono);font-size:9px;color:var(--text3);letter-spacing:1px;width:65px;flex-shrink:0;}
.home-hist-query{font-size:11px;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.home-hist-time{font-size:9px;color:var(--text3);flex-shrink:0;}
.isp-status-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;text-align:center;cursor:default;}
.isp-status-card .isp-sc-name{font-size:11px;font-weight:700;margin-bottom:3px;}
.isp-status-card .isp-sc-ms{font-family:var(--font-mono);font-size:13px;font-weight:700;}
.isp-status-card .isp-sc-lbl{font-size:9px;color:var(--text3);}
.tip-card{flex:1;padding:12px 14px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);border-left:3px solid var(--accent);}
.tip-card .tip-tag{font-family:var(--font-mono);font-size:8px;color:var(--accent);letter-spacing:2px;margin-bottom:5px;}
.tip-card .tip-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:5px;}
.tip-card .tip-body{font-size:11px;color:var(--text2);line-height:1.6;}
.tip-cta{font-size:11px;color:var(--accent);cursor:pointer;text-decoration:underline;margin-top:6px;display:inline-block;}
@media(max-width:768px){#home-netstats{grid-column:1/-1;}}
.stat-mini{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;}
.stat-mini-lbl{font-family:var(--font-mono);font-size:8px;color:var(--text3);letter-spacing:1.5px;margin-bottom:3px;}
.stat-mini-val{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--accent);}
.home-hist-item{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity .1s;}
.home-hist-item:last-child{border-bottom:none;}
.home-hist-item:hover{opacity:.8;}
.home-hist-ico{width:22px;height:22px;border-radius:5px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
.home-hist-tool{font-family:var(--font-mono);font-size:9px;color:var(--text3);letter-spacing:1px;width:65px;flex-shrink:0;}
.home-hist-query{font-size:11px;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.home-hist-time{font-size:9px;color:var(--text3);flex-shrink:0;}
.isp-status-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:8px 10px;text-align:center;}
.isp-status-card .isp-sc-name{font-size:11px;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.isp-status-card .isp-sc-ms{font-family:var(--font-mono);font-size:14px;font-weight:700;}
.isp-status-card .isp-sc-lbl{font-size:9px;color:var(--text3);}
.tip-card{flex:1;padding:12px 14px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);border-left:3px solid var(--accent);}
.tip-tag{font-family:var(--font-mono);font-size:8px;color:var(--accent);letter-spacing:2px;margin-bottom:5px;}
.tip-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:5px;}
.tip-body{font-size:11px;color:var(--text2);line-height:1.6;}
@media(max-width:768px){#panel-home [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}}
.sb-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;flex-shrink:0;animation:dot-pulse 1.8s ease-out infinite;}
@keyframes dot-pulse{
 0%{transform:scale(1);outline:2px solid rgba(0,255,170,.8);outline-offset:0px;}
 60%{transform:scale(1.15);outline:2px solid rgba(0,255,170,0);outline-offset:4px;}
 100%{transform:scale(1);outline:2px solid rgba(0,255,170,0);outline-offset:0px;}
}
.h-status-dot{width:9px;height:9px;border-radius:50%;background:var(--text3);display:inline-block;animation:dot-pulse 2s ease-out infinite;flex-shrink:0;}
.h-status-dot.online{background:var(--green);}
.tb-time{font-family:var(--font-mono);font-size:11px;color:var(--text);background:var(--bg3);border:1px solid var(--border2);border-radius:6px;padding:4px 10px;letter-spacing:.3px;white-space:nowrap;}
.map-wrap .leaflet-container{border-radius:var(--r);}
@media(max-width:768px){
 .mode-toggle-wrap{padding:2px;}
 .mode-btn{padding:3px 8px;font-size:10px;}
 .hero-cta{flex-direction:column;align-items:flex-start;}
 .hero-ip-block{align-items:flex-start;width:100%;}
 .popular-grid{grid-template-columns:repeat(2,1fr);}
 .tb-time{font-size:9px;padding:3px 6px;}
}
.bgp-asn-card{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r2);padding:16px;margin-bottom:10px;}
.bgp-asn-num{font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--accent);}
.bgp-asn-name{font-size:14px;font-weight:700;color:var(--text);margin-top:2px;}
.bgp-asn-country{font-family:var(--font-mono);font-size:11px;color:var(--text2);margin-top:4px;}
.bgp-prefix-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:11px;}
.bgp-prefix-row:last-child{border-bottom:none;}
.bgp-prefix-row:hover{background:rgba(255,255,255,.02);}
.bgp-prefix{color:var(--accent);flex:1;}
.bgp-prefix-cc{color:var(--text3);width:40px;text-align:center;}
.bgp-prefix-name{color:var(--text2);flex:2;font-size:10px;}
.bgp-tab-bar{display:flex;gap:0;margin-bottom:12px;border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;}
.bgp-tab{flex:1;padding:8px;text-align:center;cursor:pointer;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:1px;color:var(--text3);background:var(--bg3);border:none;transition:all .12s;}
.bgp-tab.on{background:var(--accent);color:#000;}
.bgp-tab:hover:not(.on){color:var(--accent);}
.hist-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;}
.hist-item:last-child{border-bottom:none;}
.hist-item:hover{background:rgba(0,212,255,.05);}
.hist-ico{font-size:14px;width:24px;text-align:center;flex-shrink:0;}
.hist-tool{font-family:var(--font-mono);font-size:9px;color:var(--accent);letter-spacing:1px;width:80px;flex-shrink:0;}
.hist-query{font-family:var(--font-mono);font-size:12px;color:var(--text);flex:1;}
.hist-time{font-family:var(--font-mono);font-size:9px;color:var(--text3);white-space:nowrap;}
.hist-replay{padding:3px 8px;border-radius:4px;border:1px solid var(--border2);background:transparent;color:var(--text3);font-size:10px;cursor:pointer;transition:all .1s;}
.hist-replay:hover{border-color:var(--accent);color:var(--accent);}
@media (max-width: 768px) {
 body{overflow:hidden;}
 .sb{
 position:fixed;left:0;top:0;bottom:0;z-index:100;
 transform:translateX(-100%);transition:transform .25s ease;
 width:260px!important;min-width:260px!important;
 }
 .sb.open{transform:translateX(0);}
 .sb-overlay.open{display:block;}
 .hamburger{display:flex;}
 .main{width:100%;min-width:0;}
 .topbar{padding:0 12px;gap:6px;}
 .tb-sub{display:none;}
 .tb-time{display:none;}
 .tb-btn{padding:5px 8px;font-size:10px;}
 .content{padding:10px;}
 .grid2,.grid4,.info-grid,.ping-stats-grid{grid-template-columns:1fr!important;}
 .grid3{grid-template-columns:repeat(2,1fr)!important;}
 .inp-row{flex-direction:column;}
 .inp-row input[type=text]{width:100%;}
 .inp-row .btn{width:100%;}
 .inp-row input[type=number]{width:100%!important;}
 .inp-row select{width:100%!important;}
 .stat-row,.speed-grid{grid-template-columns:repeat(2,1fr)!important;}
 .port-grid{grid-template-columns:repeat(3,1fr)!important;}
 .sg{grid-template-columns:1fr!important;}
 .bgp-tab-bar{flex-wrap:wrap;}
 .export-opts{grid-template-columns:1fr!important;}
 table.tbl td:first-child{width:110px!important;font-size:9px!important;}
}
@media (max-width: 480px) {
 .grid3,.stat-row,.speed-grid{grid-template-columns:1fr!important;}
 .port-grid{grid-template-columns:repeat(2,1fr)!important;}
 .ping-latency-bar .plb-seg{font-size:7px;}
 .bgp-asn-num{font-size:20px;}
}

/* ── Accessibility ── */
.skip-link{position:absolute;top:-100%;left:16px;z-index:9999;padding:10px 18px;background:var(--accent);color:#000;font-weight:700;font-size:14px;border-radius:0 0 var(--r) var(--r);text-decoration:none;transition:top .15s;}
.skip-link:focus{top:0;}
*:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;}
.nav:focus-visible,.chip:focus-visible,.pop-card:focus-visible,.qt:focus-visible,.pbtn:focus-visible,.btn:focus-visible,.tb-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ── Tap target sizing (PageSpeed mobile) ── */
@media (pointer: coarse) {
  .nav,.chip,.btn,.tb-btn,.pbtn,.qt,.adv-toggle-row,.explain-pill,.footer-disc-btn{min-height:44px;min-width:44px;}
  .inp-row input,.inp-row select{min-height:44px;}
}

/* ── Utility classes (extracted from inline styles) ── */
.d-none{display:none;}
.loading-box{display:none;padding:14px;color:var(--text3);font-family:'JetBrains Mono',monospace;font-size:11px;}
.result-box{display:none;padding:14px;color:var(--text3);font-family:'JetBrains Mono',monospace;font-size:11px;}
.mono-xs{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text3);letter-spacing:1px;}
.mono-sm{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text3);}
.mono-sm-2{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text2);}
.mono-xs-accent{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--accent);letter-spacing:2px;}
.flex-between{display:flex;justify-content:space-between;align-items:center;}
.flex-gap{display:flex;gap:6px;}
.text-accent{color:var(--accent);}
.text-muted{color:var(--text3);}
.text-sub{color:var(--text2);}
.share-btn{flex:1;min-width:80px;padding:8px 4px;border-radius:var(--r);font-family:'Syne',sans-serif;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;}
.share-btn-wa{border:1px solid rgba(37,211,102,.4);background:rgba(37,211,102,.07);color:#25d366;}
.share-btn-x{border:1px solid rgba(255,255,255,.2);background:var(--bg3);color:var(--text);}
.share-btn-fb{border:1px solid rgba(59,89,152,.4);background:rgba(59,89,152,.07);color:#4267B2;}
.share-btn-tg{border:1px solid rgba(0,136,204,.4);background:rgba(0,136,204,.07);color:#0088cc;}
.dl-btn{flex:1;padding:7px;border-radius:var(--r);border:1px solid var(--border2);background:var(--bg3);color:var(--text2);font-family:'Syne',sans-serif;font-size:11px;font-weight:700;cursor:pointer;}
.dl-btn-accent{flex:1;padding:7px;border-radius:var(--r);border:1px solid rgba(0,212,255,.3);background:rgba(0,212,255,.07);color:var(--accent);font-family:'Syne',sans-serif;font-size:11px;font-weight:700;cursor:pointer;}
.modal-hd{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg2);z-index:1;}
.progress-track{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:6px;}

/* DNS — v2 Lite: skeleton, filter tabs, accordion, raw output */
.dns-skel{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--border);}
.dns-skel:last-child{border-bottom:none;}
.skel-pill{width:38px;height:14px;border-radius:3px;background:linear-gradient(90deg,var(--bg3) 0%,rgba(0,212,255,.12) 50%,var(--bg3) 100%);background-size:200% 100%;animation:dns-skel 1.4s infinite;flex-shrink:0;}
.skel-line{flex:1;height:11px;border-radius:3px;background:linear-gradient(90deg,var(--bg3) 0%,rgba(0,212,255,.08) 50%,var(--bg3) 100%);background-size:200% 100%;animation:dns-skel 1.4s infinite;}
.skel-ttl{width:64px;height:9px;border-radius:3px;background:linear-gradient(90deg,var(--bg3) 0%,rgba(0,212,255,.08) 50%,var(--bg3) 100%);background-size:200% 100%;animation:dns-skel 1.4s infinite;flex-shrink:0;}
@keyframes dns-skel{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.dns-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed var(--border);}
.dns-tabs:empty{display:none;}
.dns-tab{background:transparent;border:1px solid var(--border2);color:var(--text2);font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;padding:4px 9px;border-radius:4px;cursor:pointer;transition:all .15s;}
.dns-tab:hover{border-color:var(--accent);color:var(--accent);}
.dns-tab.on{background:rgba(0,212,255,.12);border-color:var(--accent);color:var(--accent);}

.dns-info{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border);}
.dns-info:empty{display:none;}
.dns-info-item{margin-bottom:4px;}
.dns-info-item summary{cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--text2);padding:5px 0;display:flex;align-items:center;gap:8px;list-style:none;}
.dns-info-item summary::-webkit-details-marker{display:none;}
.dns-info-item summary::before{content:"▸";color:var(--text3);font-size:9px;transition:transform .15s ease;flex-shrink:0;}
.dns-info-item[open] summary::before{transform:rotate(90deg);}
.dns-info-item summary:hover{color:var(--accent);}
.dns-info-item p{margin:6px 0 8px 24px;color:var(--text2);font-size:11px;line-height:1.55;}

.dns-raw-wrap{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border);}
.btn-link{background:transparent;border:none;color:var(--accent);font-family:var(--font-mono);font-size:10px;letter-spacing:1px;cursor:pointer;padding:4px 0;text-transform:uppercase;}
.btn-link:hover{text-decoration:underline;}
.dns-raw{margin-top:8px;}
.dns-raw pre{background:#000;border:1px solid var(--border);border-radius:4px;padding:12px;font-family:var(--font-mono);font-size:10px;color:var(--green);overflow-x:auto;line-height:1.55;margin:0;white-space:pre;}

@media(max-width:480px){
  .dns-tabs{gap:4px;}
  .dns-tab{font-size:9px;padding:3px 7px;}
  #dns-resolver{width:120px!important;font-size:10px;}
  .dns-raw pre{font-size:9px;padding:9px;}
}