*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{max-width:1200px;margin:0 auto;padding:0 20px}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-block;text-align:center}.btn-primary{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(102,126,234,.3)}.btn-secondary{background:#fff;color:#667eea;border:2px solid #667eea}.btn-secondary:hover{background:#667eea;color:#fff}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 20px rgba(0,0,0,.1);margin-bottom:20px}.grid{display:grid;grid-gap:20px;gap:20px}.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.text-center{text-align:center}.mb-2{margin-bottom:16px}.mb-4{margin-bottom:32px}.mt-4{margin-top:32px}.text-white{color:#fff}.text-gray{color:#666}.text-lg{font-size:1.25rem}.text-xl{font-size:1.5rem}.text-2xl{font-size:2rem}.text-3xl{font-size:2.5rem}.font-bold{font-weight:700}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:16px}.status-indicator{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px}.status-connected{background-color:#10b981}.status-disconnected{background-color:#ef4444}@media (max-width:768px){.container{padding:0 16px}.grid-2,.grid-3{grid-template-columns:1fr}.text-3xl{font-size:2rem}}.App{min-height:100vh}