:root{--bg:#07101d;--panel:#0d1929;--panel2:#101f31;--line:#203248;--text:#ecf4ff;--muted:#8ca0b8;--cyan:#22d3ee;--green:#34d399;--purple:#a78bfa;--amber:#fbbf24;--red:#fb7185}
*{box-sizing:border-box}html,body{max-width:100%;overflow-x:hidden}body{margin:0;background:radial-gradient(circle at 18% -8%,#153350 0,transparent 35%),var(--bg);color:var(--text);font:14px Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}.shell{width:100%;max-width:1600px;margin:auto;padding:0 28px}header{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08)}.brand{display:flex;align-items:center;gap:12px}.brand .logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,var(--cyan),#2563eb);display:grid;place-items:center;font-weight:900;color:#03111a;box-shadow:0 8px 30px #22d3ee33}.brand strong,.brand span{display:block}.brand strong{font-size:16px}.brand span{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}.header-actions{display:flex;gap:18px;align-items:center;color:var(--muted);font-variant-numeric:tabular-nums}.live{padding:7px 11px;background:#0d2c28;border:1px solid #1b5148;color:#74e9c2;border-radius:99px}.live i{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:7px;box-shadow:0 0 0 5px #34d3991f}.hero{display:flex;justify-content:space-between;align-items:center;padding:35px 0 25px}.eyebrow{color:var(--cyan);font-weight:700;font-size:11px;letter-spacing:.18em;margin:0 0 9px}.hero h1{margin:0;font-size:32px;letter-spacing:-.03em}.hero p:last-child{color:var(--muted);margin:7px 0 0}.health{display:flex;align-items:center;gap:14px}.health-ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) 0deg,#233348 0);position:relative}.health-ring:after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--bg)}.health-ring span{z-index:1;font-weight:800;font-size:17px}.health b,.health span{display:block}.health>div:last-child span{color:var(--muted);font-size:12px;margin-top:3px}.card{background:linear-gradient(145deg,rgba(17,33,52,.95),rgba(10,23,38,.95));border:1px solid rgba(139,169,203,.16);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.18)}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.metric{padding:19px}.metric-head{display:flex;justify-content:space-between;color:var(--muted)}.metric-head b{font-size:20px;color:var(--text);font-variant-numeric:tabular-nums}.bar{height:6px;background:#1f3044;border-radius:20px;margin:20px 0 11px;overflow:hidden}.bar i{display:block;width:0;height:100%;border-radius:20px;background:linear-gradient(90deg,#0ea5e9,var(--cyan));transition:width .35s}.metric:nth-child(2) .bar i{background:linear-gradient(90deg,#7c3aed,var(--purple))}.metric:nth-child(3) .bar i{background:linear-gradient(90deg,#10b981,var(--green))}.metric small{color:var(--muted)}.net-split{display:flex;gap:18px;margin:18px 0 9px}.net-split span{color:var(--muted)}.net-split b{color:var(--text);margin-left:4px}.grid{display:grid;grid-template-columns:2fr 1fr;gap:15px;margin-top:15px}.chart-card,.status-card,.disk-card{padding:20px;min-height:290px}.title-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.title-row h2{font-size:16px;margin:0}.title-row p{margin:4px 0 0;color:var(--muted);font-size:12px}.legend{display:flex;gap:14px;color:var(--muted);font-size:11px}.legend span:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}.l1:before{background:var(--cyan)}.l2:before{background:var(--purple)}.l3:before{background:var(--green)}canvas{width:100%;height:215px;display:block}.status-card dl{margin:0}.status-card dl div{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}.status-card dl div:last-child{border:0}.status-card dt{color:var(--muted)}.status-card dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums}.disk-row{margin:14px 0 18px}.disk-top{display:flex;justify-content:space-between;margin-bottom:8px}.disk-top span{color:var(--muted);max-width:65%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.disk-top b{font-variant-numeric:tabular-nums}.disk-track{height:7px;background:#203044;border-radius:8px;overflow:hidden}.disk-track i{display:block;height:100%;background:linear-gradient(90deg,#10b981,var(--green));border-radius:8px}.process-card{margin-top:15px;padding:20px}.process-title{align-items:center}.controls{display:flex;gap:8px}input,select{background:#0b1727;border:1px solid #263a51;color:var(--text);border-radius:9px;padding:9px 12px;outline:none}input{width:240px}input:focus,select:focus{border-color:#2d8094}.table-wrap{overflow:auto;max-height:520px}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:600;padding:11px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#0e1b2c;z-index:2}td{padding:11px;border-bottom:1px solid rgba(255,255,255,.055);font-variant-numeric:tabular-nums}tbody tr:hover{background:#12243a}.proc-name{max-width:390px}.proc-name b,.proc-name span{display:block;overflow:hidden;text-overflow:ellipsis}.proc-name span{color:var(--muted);font-size:11px;margin-top:3px}.pill{font-size:11px;padding:4px 7px;border-radius:20px;background:#1a2a3d;color:#bcd0e7}.pill.run{background:#12352d;color:#65e3b8}.usage{min-width:85px}.usage-mini{height:3px;background:#233347;border-radius:5px;margin-top:4px}.usage-mini i{display:block;height:100%;background:var(--cyan);border-radius:5px}.empty{text-align:center;color:var(--muted);padding:35px}footer{display:flex;justify-content:space-between;color:#61748a;padding:22px 3px 32px;font-size:11px}
@media(max-width:1000px){.kpis{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.wide{grid-column:auto}}@media(max-width:650px){.shell{padding:0 14px}.hero{align-items:flex-start}.health{display:none}.kpis{grid-template-columns:1fr}.process-title{display:block}.controls{margin-top:14px}.controls input{width:100%}.hero h1{font-size:25px}header{height:64px}.brand span{display:none}}

/* Responsive layout hardening */
main,.grid,.kpis,.card,.chart-card,.status-card,.disk-card,.process-card,.title-row,.controls{min-width:0}
.chart-card{overflow:hidden}
.chart-card canvas{width:100%;height:clamp(180px,24vw,260px);max-width:100%;touch-action:pan-y}
.table-wrap{width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}

@media(max-width:800px){
  .shell{padding-inline:18px}
  .hero{gap:18px;padding:26px 0 20px}
  .hero>div:first-child{min-width:0}
  .hero h1,.hero p{overflow-wrap:anywhere}
  .chart-card,.status-card,.disk-card,.process-card{padding:16px}
  .title-row{gap:12px}
  .legend{flex-wrap:wrap;justify-content:flex-end}
  .chart-card canvas{height:220px}
  .controls{width:100%;flex-wrap:wrap}
  .controls input{flex:1 1 220px;width:auto;min-width:0}
  .controls select{flex:0 1 auto;max-width:100%}
  footer{gap:10px;flex-wrap:wrap}
}

@media(max-width:520px){
  .shell{padding-inline:10px}
  header{height:auto;min-height:60px;padding:10px 0;gap:10px}
  .brand{min-width:0}
  .brand .logo{width:34px;height:34px;flex:0 0 auto}
  .brand strong{font-size:14px;white-space:nowrap}
  .header-actions{gap:8px;font-size:12px;flex:0 0 auto}
  #clock{display:none}
  .live{padding:6px 9px}
  .hero{padding:22px 2px 16px}
  .hero h1{font-size:22px;line-height:1.15}
  .hero p:last-child{font-size:12px;line-height:1.45}
  .eyebrow{font-size:9px;letter-spacing:.13em}
  .kpis,.grid{gap:10px}
  .grid,.process-card{margin-top:10px}
  .metric{padding:15px}
  .metric-head{gap:10px;align-items:flex-start}
  .metric-head span{font-size:12px}
  .metric-head b{font-size:18px;white-space:nowrap}
  .net-split{gap:10px;flex-wrap:wrap}
  .chart-card,.status-card,.disk-card,.process-card{padding:14px;border-radius:13px}
  .title-row{display:block;margin-bottom:12px}
  .legend{justify-content:flex-start;margin-top:10px;gap:10px}
  .chart-card canvas{height:190px;min-height:190px}
  .status-card dl div{gap:12px;padding:11px 0}
  .status-card dt{flex:1}
  .status-card dd{text-align:right;max-width:62%;overflow-wrap:anywhere}
  .disk-top{gap:10px;align-items:flex-start}
  .disk-top span{max-width:52%}
  .disk-top b{text-align:right;font-size:12px}
  .process-title .controls{display:grid;grid-template-columns:1fr;width:100%;margin-top:12px}
  .controls input,.controls select{width:100%;max-width:none}
  .table-wrap{max-height:460px;margin-inline:-2px;width:calc(100% + 4px)}
  th,td{padding:10px 8px}
  .proc-name{max-width:210px;min-width:180px}
  footer{display:block;padding:18px 2px 25px;line-height:1.7}
  footer span{display:block}
}

@media(max-width:360px){
  .shell{padding-inline:8px}
  .brand strong{font-size:13px}
  .chart-card canvas{height:170px;min-height:170px}
  .metric-head b{font-size:16px}
  .proc-name{max-width:175px;min-width:155px}
}