body { font-family: 'Segoe UI', sans-serif; background: #f0f2f5; margin: 0; display: flex; height: 100vh; }
.sidebar { width: 250px; background: #0f172a; color: white; display: flex; flex-direction: column; }
.logo { padding: 20px; font-size: 22px; font-weight: bold; color: #10b981; border-bottom: 1px solid #1e293b; }
.menu a { padding: 15px 20px; color: #94a3b8; text-decoration: none; display: block; transition: 0.3s; }
.menu a:hover, .menu a.active { background: #1e293b; color: white; border-left: 4px solid #10b981; }
.main { flex: 1; padding: 30px; overflow-y: auto; }
.card { background: white; padding: 25px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 20px; }
h2 { margin-top: 0; color: #334155; }
.btn { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; color: white; font-weight: bold; display: inline-block;}
.btn-green { background: #10b981; }
.btn-red { background: #ef4444; }
.btn-blue { background: #3b82f6; }
table { width: 100%; border-collapse: collapse; margin-top: 15px; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #e2e8f0; }
input, select { width: 100%; padding: 10px; margin: 5px 0 15px; border: 1px solid #cbd5e1; border-radius: 5px; box-sizing: border-box; }
.badge { padding: 5px 10px; border-radius: 15px; font-size: 12px; }
.online { background: #dcfce7; color: #166534; }
.offline { background: #f1f5f9; color: #64748b; }