*{box-sizing:border-box}
body{margin:0;background:#09111f;color:#eaf2ff;font-family:Inter,Arial,sans-serif}
.shell{display:flex;min-height:100vh}
aside{width:260px;background:#060b14;border-right:1px solid #1c2b45;padding:22px;position:fixed;height:100vh;overflow:auto}
.brand{display:grid;gap:4px;margin-bottom:28px}
.brand b{font-size:28px;letter-spacing:-1px}
.brand small{color:#7d8fa9}
.play{color:#23ff88;font-size:30px;text-shadow:0 0 18px #23ff88}
nav a{display:block;color:#cfe0ff;text-decoration:none;padding:13px 14px;border-radius:14px;margin:5px 0;font-weight:800}
nav a:hover{background:#11213a}
main{margin-left:260px;flex:1;padding:24px;min-width:0}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:16px}
.top span{display:block;color:#7d8fa9;font-size:13px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{background:linear-gradient(180deg,#11213a,#0b1628);border:1px solid #233855;border-radius:22px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card h3{margin:0 0 8px;color:#8fb3ff;font-size:14px}
.metric{font-size:36px;font-weight:800}
.muted{color:#92a4bd}
.btn{background:#23ff88;color:#061020;border:0;border-radius:12px;padding:11px 14px;font-weight:800;text-decoration:none;display:inline-block;cursor:pointer}
.btn2{background:#1c2b45;color:#fff;border:1px solid #2e466b}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:13px;border-bottom:1px solid #20324e;text-align:left}
.form{display:grid;gap:12px;max-width:760px}
.form input,.form select,.form textarea{background:#07101e;color:#fff;border:1px solid #2a4162;border-radius:12px;padding:12px}
.status{font-weight:800}
.ok{color:#23ff88}.bad{color:#ff4b68}.warn{color:#ffd166}.blue{color:#6eb6ff}
@media(max-width:900px){aside{position:static;width:100%;height:auto}.shell{display:block}main{margin-left:0}.grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid{grid-template-columns:1fr}.top{align-items:flex-start;flex-direction:column}}