:root{--purple:#8b00ff;--deep:#3f215d;--white:#fff}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--deep)}
body{background:radial-gradient(circle at 90% 20%,rgba(176,0,255,.12),transparent 25%),radial-gradient(circle at 15% 80%,rgba(139,0,255,.10),transparent 28%),linear-gradient(135deg,#fff,#fbf5ff 50%,#f1ebff);overflow-x:hidden}
.page-glow{position:fixed;border-radius:50%;filter:blur(40px);pointer-events:none}.glow-1{width:180px;height:180px;background:rgba(190,0,255,.17);left:-70px;top:90px}.glow-2{width:220px;height:220px;background:rgba(110,0,255,.10);right:-80px;bottom:30px}
.app{position:relative;z-index:1;max-width:1500px;margin:16px auto;min-height:calc(100vh - 32px);background:rgba(255,255,255,.78);border-radius:32px;box-shadow:0 20px 70px rgba(80,30,120,.10);overflow:hidden;border:1px solid rgba(255,255,255,.9)}
.topbar{height:100px;display:grid;grid-template-columns:100px 1fr 240px;align-items:center;padding:0 36px}
.menu-btn{width:76px;height:76px;border:0;border-radius:24px;background:var(--purple);box-shadow:0 18px 30px rgba(139,0,255,.30);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;cursor:pointer}.menu-btn span{width:30px;height:3px;background:#fff;border-radius:3px}
nav{display:flex;justify-content:center;gap:90px}nav a{color:#3c2453;text-decoration:none;font-size:22px;font-weight:600}nav a.active{color:var(--purple)}
.logo{max-width:210px;max-height:70px;object-fit:contain;justify-self:end}
.hero{display:grid;grid-template-columns:42% 58%;gap:20px;padding:65px 70px 80px;min-height:690px;align-items:center}.hero-copy{padding-left:20px}
.eyebrow{letter-spacing:3px;font-weight:800;color:var(--purple);font-size:14px;margin-bottom:22px}
h1{font-size:clamp(48px,5.3vw,88px);line-height:.96;margin:0 0 26px;font-weight:800;letter-spacing:-3px}.hero-copy p{font-size:19px;line-height:1.5;max-width:550px;color:#725b82}
.test-panel{background:rgba(255,255,255,.90);border:1px solid #eee2f8;border-radius:34px;padding:30px;box-shadow:0 25px 70px rgba(75,35,105,.12)}
.server-line{display:flex;justify-content:space-between;align-items:center;padding:0 4px 22px;color:#866b99;font-size:12px;letter-spacing:1.5px}.server-line strong{color:var(--deep);font-size:14px;letter-spacing:0}
.start-btn{width:100%;height:72px;border:0;border-radius:22px;background:linear-gradient(135deg,var(--purple),#6e00ff);color:#fff;font-size:22px;font-weight:800;cursor:pointer;box-shadow:0 14px 30px rgba(139,0,255,.24);transition:.2s}.start-btn:hover{transform:translateY(-2px)}
.start-btn.running{background:linear-gradient(135deg,#5c277f,#8b00ff)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}.metric{background:#fbf8ff;border:1px solid #eee4f6;border-radius:20px;padding:17px;text-align:center}.metric-label{display:block;font-size:14px;font-weight:700;color:#765b88;margin-bottom:8px}.metric strong{font-size:28px;color:#a04a9f}.metric small{font-size:14px;margin-left:4px}
.gauges{display:grid;grid-template-columns:1fr 1fr;gap:25px}.gauge-card{text-align:center}.gauge-title{font-size:19px;font-weight:800;margin-bottom:10px}
.gauge{--value:0deg;width:210px;height:210px;margin:auto;border-radius:50%;background:conic-gradient(from 220deg,var(--purple) 0 var(--value),#e5e1e8 var(--value) 280deg,transparent 280deg);position:relative;transform:rotate(-40deg)}
.gauge-upload{background:conic-gradient(from 220deg,#6b6b6b 0 var(--value),#e5e1e8 var(--value) 280deg,transparent 280deg)}.gauge:after{content:"";position:absolute;inset:17px;background:#fff;border-radius:50%}.gauge-inner{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(40deg)}.gauge-inner strong{font-size:42px;line-height:1;color:#17131b}.gauge-inner span{font-size:15px;font-weight:700;margin-top:8px}
.progress{height:6px;background:#eee8f3;border-radius:6px;overflow:hidden;margin:18px 12px 0}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--purple),#d400ff);transition:.2s}
.status{text-align:center;font-weight:700;color:#765b88;margin-top:24px;min-height:20px}.client-info{text-align:center;color:#9a88a5;font-size:12px;margin-top:8px;min-height:18px}footer{display:flex;justify-content:center;gap:15px;padding:22px;color:#8a7196;font-size:13px}
@media(max-width:950px){.topbar{grid-template-columns:80px 1fr 160px;padding:0 20px}nav{gap:28px}nav a{font-size:17px}.logo{max-width:150px}.hero{grid-template-columns:1fr;padding:45px 25px 60px}.hero-copy{padding:0;text-align:center}.hero-copy p{margin:0 auto 25px}}
@media(max-width:600px){.app{margin:0;border-radius:0;min-height:100vh}.topbar{height:82px;grid-template-columns:60px 1fr 100px;padding:0 15px}.menu-btn{width:54px;height:54px;border-radius:18px}.menu-btn span{width:23px;height:2px}nav{display:none}.logo{max-width:105px}.hero{padding:35px 14px 40px}.hero-copy h1{font-size:52px;letter-spacing:-2px}.test-panel{padding:20px;border-radius:25px}.metrics{gap:7px}.metric{padding:12px 5px}.metric strong{font-size:23px}.gauges{gap:8px}.gauge{width:145px;height:145px}.gauge-inner strong{font-size:30px}.gauge:after{inset:12px}}