:root{--navy:#101f32;--ink:#172b41;--muted:#718095;--line:#e7ecf1;--green:#13866b;--teal:#0b927b;--purple:#8064cf}*{box-sizing:border-box}body{margin:0;background:#f5f7fa;color:var(--ink);font:14px 'Segoe UI',system-ui,sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button,a{transition:background .15s}aside{position:fixed;inset:0 auto 0 0;width:232px;background:var(--navy);color:#aebdd0;padding:32px 20px;display:flex;flex-direction:column}.brand{display:flex;gap:11px;align-items:center;color:white;font-size:21px;font-weight:750;letter-spacing:-.6px}.brandmark{background:#28c6a0;color:#102b30;border-radius:11px;width:35px;height:35px;display:grid;place-items:center;font-size:22px}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#8b9fb8;margin-top:3px}.nav-label{font-size:10px;letter-spacing:1.8px;margin:49px 14px 14px;color:#72859f}.nav{display:flex;gap:12px;align-items:center;padding:13px 15px;border-radius:8px;margin-bottom:7px;font-weight:550}.nav:hover{background:#1c3048}.nav.active{background:#213b46;color:#74e0c5}.nav-icon{font-size:18px;width:20px;text-align:center}.sidebar-foot{margin-top:auto;border-top:1px solid #2a3b50;padding:22px 12px 0;font-size:12px;line-height:1.8}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#27c39b;margin-right:7px}.shell{margin-left:232px}.topbar{height:78px;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 38px}.breadcrumb{font-size:12px;color:var(--muted)}.breadcrumb strong{color:#30465e;font-weight:550;margin-left:9px}.account{display:flex;gap:12px;align-items:center}.avatar{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;background:#e9f1f5;color:#416273;font-weight:650}.account-name{font-weight:600;font-size:12px}.signout{background:none;border:0;color:var(--muted);cursor:pointer;font-size:11px;padding:0}.content{max-width:1530px;margin:auto;padding:33px 38px 28px}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}h1{font-size:29px;line-height:1.25;margin:0 0 8px;font-weight:650;letter-spacing:-.9px}h2{font-size:15px;margin:0;font-weight:650}.muted,.subtitle{color:var(--muted);font-size:12px;line-height:1.7}.subtitle{margin:0}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--teal);font-weight:700;margin:0 0 9px}.button,button.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#137f6a;color:white;border:1px solid #137f6a;padding:10px 16px;border-radius:7px;font-weight:600;font-size:12px;cursor:pointer;white-space:nowrap}.button:hover,button.primary:hover{background:#0d6856}.button.secondary{background:white;border-color:#dce4ec;color:#405970}.card{background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 3px 9px #1b334103}.filters{display:flex;align-items:flex-end;gap:15px;padding:19px 22px;margin-bottom:22px;flex-wrap:wrap}.filters label,.control-label{font-size:11px;font-weight:600;color:#596c81;display:block}input,select{border:1px solid #dce4ec;background:white;border-radius:6px;padding:9px 11px;color:#243d53;min-height:37px}label input,label select{display:block;margin-top:7px}.filter-note{margin-left:auto;padding-bottom:10px;color:var(--muted);font-size:11px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:23px}.stat{padding:21px 23px;position:relative}.stat-label{font-size:11px;color:#718095;font-weight:600;margin-bottom:15px}.stat-value{font-size:27px;letter-spacing:-1px;font-weight:650;line-height:1.2}.stat-value span{font-size:12px;font-weight:500;letter-spacing:0;color:#7a899a;margin-left:5px}.stat-meta{margin-top:10px;font-size:10px;color:#8491a1}.stat-symbol{position:absolute;right:20px;top:17px;border-radius:8px;padding:7px 10px;color:var(--teal);background:#eaf7f2}.stat.purple .stat-symbol{background:#f2effb;color:var(--purple)}.stat.blue .stat-symbol{background:#edf4fc;color:#4680c9}.panel-head{padding:21px 23px;display:flex;align-items:center;justify-content:space-between;gap:15px}.panel-head .muted{margin-top:4px;font-size:11px}.legend{display:flex;gap:16px;font-size:11px;color:#718095}.legend i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px}.chart{height:200px;padding:10px 24px 0;display:flex;gap:12px;align-items:flex-end;border-bottom:1px solid var(--line);margin:0 23px;background:repeating-linear-gradient(to top,transparent 0,transparent 48px,#edf1f5 49px,#edf1f5 50px)}.bar-group{flex:1;max-width:100px;min-width:8px;height:100%;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;position:relative}.bar-stack{width:42%;min-width:8px;max-width:38px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:4px 4px 0 0;overflow:hidden}.bar-up{background:#9f8bdc}.bar-down{background:#29aa91}.bar-labels{display:flex;justify-content:space-around;margin:10px 47px 21px;color:#8290a0;font-size:10px}.chart-empty{padding:55px;text-align:center;color:var(--muted)}.table-card{margin-top:23px;overflow:hidden}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th{background:#f9fafc;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:#8794a3;text-align:left;font-weight:600;border-top:1px solid var(--line)}td,th{padding:14px 23px;border-bottom:1px solid #eef1f5}td{font-size:12px;color:#52657a}td:first-child{color:#344c64}td.customer{font-weight:600;color:#294759}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}td.total{font-weight:650;color:#213e52}.table-foot{padding:14px 23px;font-size:10px;color:#8896a5;display:flex;justify-content:space-between}.badge{display:inline-flex;gap:6px;align-items:center;background:#edf8f3;color:#248269;font-size:10px;padding:5px 9px;border-radius:5px}.notice{border:1px solid #f0dfae;background:#fffaed;border-radius:7px;padding:12px 17px;font-size:12px;color:#91712b;margin-bottom:20px}.footer{display:flex;justify-content:space-between;margin-top:24px;font-size:10px;color:#929eac;gap:25px;line-height:1.7}.technical{margin-top:17px;color:#8491a1;font-size:11px;line-height:1.8}.technical summary{cursor:pointer}.technical p{max-width:900px}.live-status{font-size:11px;color:#4c756b;background:#edf8f4;padding:9px 13px;border-radius:6px;margin:0 0 20px}.live-chart{padding:0 23px 18px}canvas{width:100%;height:260px}.upload{color:var(--purple)}.download{color:var(--teal)}.queue-select{min-width:200px}.login-body{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:white}.login-story{background:var(--navy);padding:55px 12%;color:white;display:flex;flex-direction:column;justify-content:space-between}.login-story h1{font-size:47px;max-width:430px;line-height:1.15;margin:60px 0 24px}.login-story p{color:#a6b9cc;line-height:1.9;max-width:350px}.login-form{display:flex;align-items:center;justify-content:center;padding:40px}.login-box{width:340px}.login-box h1{font-size:29px}.login-box form{margin-top:30px}.login-box label{font-size:12px;font-weight:600;display:block;margin-bottom:19px}.login-box input{width:100%;padding:12px}.login-box button{width:100%;margin-top:7px}.error{background:#fff0f0;color:#a43d43;padding:12px;border-radius:6px;font-size:12px}@media(min-width:1600px){.content{padding-top:42px}}@media(max-width:1100px){aside{width:195px}.shell{margin-left:195px}.content{padding:28px 24px}.topbar{padding:0 24px}.stats{gap:12px}.stat{padding:18px 16px}.stat-value{font-size:24px}.stat-symbol{display:none}.filter-note{display:none}}@media(max-width:760px){aside{position:static;width:auto;padding:18px 20px;display:block}.brand small,.nav-label,.sidebar-foot{display:none}.brand{font-size:18px}.brandmark{width:29px;height:29px}aside nav{display:flex;margin-top:16px;gap:8px}.nav{margin:0;padding:9px 12px;font-size:12px}.shell{margin:0}.topbar{height:57px;padding:0 20px}.content{padding:25px 18px}.heading{align-items:flex-start}h1{font-size:25px}.stats{grid-template-columns:1fr 1fr}.stat-value{font-size:25px}.filters{gap:12px;padding:16px}.filters label{flex:1;min-width:110px}input,select{width:100%}.heading>.button{font-size:0;padding:10px}.heading>.button::after{content:'↓ CSV';font-size:12px}.panel-head{padding:18px 16px;flex-wrap:wrap}td,th{padding:13px 16px}.footer{flex-direction:column;gap:5px}.login-body{grid-template-columns:1fr}.login-story{padding:25px}.login-story h1,.login-story p,.login-story>.muted{display:none}.login-form{padding:50px 25px}.queue-select{min-width:180px}.chart{margin:0 10px}.bar-labels{font-size:9px;margin-left:28px;margin-right:28px}}
.usage-table td,.usage-table th{padding:14px 15px}.ip-cell{font-family:Consolas,monospace;font-size:11px;min-width:165px}.ip-cell details{font-family:'Segoe UI',system-ui,sans-serif;color:#728397;margin-top:5px;font-size:10px}.ip-cell summary{cursor:pointer}.ip-cell details div{font-family:Consolas,monospace;font-size:11px;margin-top:6px}.limit-cell{font-weight:600;color:#326c60}.limit-cell small{display:block;font-size:9px;font-weight:400;color:#8a96a3;margin-top:5px}.table-foot{flex-wrap:wrap;gap:8px}
/* Cloud Net brand palette and classic traffic summaries. */
:root{--teal:#1685aa;--purple:#d97908}.brand{display:block;background:#fff;border-radius:9px;padding:11px 9px;line-height:0}.brand-logo{width:100%;height:auto;max-height:70px;object-fit:contain;display:block}.login-story .brand{max-width:310px;padding:16px}.nav.active{background:#173f53;color:#72d4ee}.nav:hover{background:#19364a}.bar-up{background:#f79412}.bar-down{background:#24a9d6}.button,button.primary{background:#147da3;border-color:#147da3}.button:hover,button.primary:hover{background:#106785}.button.secondary{background:white;border-color:#dce4ec}.badge,.live-status{background:#ebf7fc;color:#256d87}.dot{background:#24a9d6}.stat-symbol{background:#e9f7fc;color:#1685aa}.stat.purple .stat-symbol{background:#fff3e4;color:#c66b00}.mrtg-summary{overflow-x:auto;margin-top:6px}.mrtg-stats{width:100%;font-size:11px;font-variant-numeric:tabular-nums}.mrtg-stats th,.mrtg-stats td{padding:9px 12px;text-align:right}.mrtg-stats th:first-child,.mrtg-stats td:first-child{text-align:left}.mrtg-stats th{font-size:10px;background:#f7fafc}.mrtg-stats i{display:inline-block;width:9px;height:9px;margin-right:7px}.mrtg-summary>p{font-size:10px;margin:9px 0 0}.upload{color:#c87509}.download{color:#1685aa}aside nav{overflow:visible}@media(max-width:760px){aside .brand{width:190px}aside nav{flex-wrap:wrap}.login-story .brand{max-width:260px}.mrtg-stats th,.mrtg-stats td{padding:9px 7px}}
/* The supplied PNG has transparency; let the navy menu show through. */
aside .brand,.login-story .brand{background:transparent;border-radius:0;box-shadow:none;padding:5px 0}.brand-logo{background:transparent}

.ping-intro button{width:100%}}