@import"https://fonts.googleapis.com/icon?family=Material+Icons";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f5f7fa;color:#333;line-height:1.6}.card{background:#fff;border-radius:12px;box-shadow:0 2px 10px #00000014;margin-bottom:20px;overflow:hidden;.card-header{padding:20px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;h3{margin:0;font-size:18px;font-weight:600;color:#2c3e50}}.card-body{padding:20px}}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .3s ease;&:hover{transform:translateY(-2px);box-shadow:0 4px 15px #667eea66}}.btn-secondary{background:#fff;color:#666;border:1px solid #ddd;padding:10px 20px;border-radius:8px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s ease;&:hover{background:#f8f9fa;border-color:#ccc}}.text-success{color:#4caf50}.text-warning{color:#ff9800}.text-danger{color:#f44336}.text-info{color:#2196f3}.badge{background:#f44336;color:#fff;font-size:11px;font-weight:600;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center}.status-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;&.online{background:#4caf50}&.offline{background:#9e9e9e}&.warning{background:#ff9800}&.error{background:#f44336}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease forwards}